TRI-293: add customer-form + adaptive

This commit is contained in:
2024-12-18 18:41:45 +03:00
parent e56d29c322
commit 6044b302bb
26 changed files with 1243 additions and 17 deletions

View File

@@ -0,0 +1,200 @@
{% load static %}
{% load i18n %}
{% trans "300" as maxLetterLength %}
{% if owner_type == 'customer' %}
{% trans "Заполните форму, чтобы отправить посылку" as p_title %}
{% elif owner_type == 'mover' %}
{% trans "Заполните форму, чтобы перевезти посылку" as p_title %}
{% endif %}
<link rel="stylesheet" href="{% static 'css/ion.rangeSlider.min.css' %}">
<link rel="stylesheet" href="{% static 'css/create_poster.css' %}">
<div hidden>
csrfmiddlewaretoken: eoN2nLYYo46PpDIhi82dmTFASHH4ONiBdEQOz1jQNyUpsHJ4RrvcmFwfnM45TNtl
type_transport: road
from_address_point: 59613
from_address_point_txt: Москаленки / Россия
to_address_point: 2824
to_address_point_txt: Берлар / Бельгия
departure_DT: 17.12.2024 23:04
arrival_DT: 29.12.2024 20:04
from_place: other
to_place: other
cargo_type: parcel
weight: 500
phone: 2604195
extra_phone: test
receive_msg_by_email: on
owner_type: customer
hiddenTime: 16 декабря 2024 г. 23:04
</div>
<div class="poster">
<h1 class="poster__title">{{ p_title }}</h1>
<form class="poster__form"
name="new_route"
method="post"
id="new_route"
>
{% csrf_token %}
{#from-to#}
<div class="poster__row poster__row--from-to">
<div class="poster__col">
<label for="from" class="poster__label " required>
{% translate "Откуда забрать посылку" %}
</label>
<input type="text" name="from" id="from" class="locate" placeholder="{% translate "Укажите город" %}">
</div>
<div class="poster__col">
<label for="to" class="poster__label " required>
{% translate "Куда доставить посылку" %}
</label>
<input type="text" name="to" id="to" class="locate" placeholder="{% translate "Укажите город" %}">
</div>
</div>
{#cargo-type#}
<div class="poster__row poster__row--cargo">
<div class="poster__col col-12">
<label class="poster__label col-12" required>
{% translate "Выберите кого (что) вы можете перевезти:" %}
</label>
<div class="poster__grid">
{% for item in form.fields.cargo_type.choices %}
<div class="cargo">
<input
class="cargo__inp"
type="radio"
name="cargo_type"
id="cargo_type_{{ forloop.counter }}"
required
value="{{ item.0 }}"
{% if item.checked %}
checked="checked"
{% endif %}
/>
<label class="cargo__label"
for="cargo_type_{{ forloop.counter }}">
<span>{{ item.1 }}</span>
</label>
</div>
{% endfor %}
</div>
</div>
</div>
{#date-poster#}
<div class="poster__row poster__row--date">
<div class="poster__col">
<label from="date-to" required class="poster__label col-12 ">
{% translate "Дата доставки посылки" %}
</label>
<input type="text" name="date-to" class="poster__date date">
</div>
<div class="poster__col"></div>
</div>
{#type-transport#}
<div class="poster__row poster__row--transport">
<div class="poster__col col-12">
<label for="type_transport" class="poster__label col-12" required>
{% translate "Каким способом Вы хотите отправить?" %}
</label>
{% for item in form.fields.type_transport.choices %}
<div class="cargo cargo--inline">
<input
class="cargo__inp"
type="radio"
name="type_transport"
id="type_transport_{{ forloop.counter }}"
value="{{ item.0 }}"
{% if form.initial.type_transport == item.0 %}
checked="checked"
{% endif %}
>
<label class="cargo__label"
for="type_transport_{{ forloop.counter }}">
<span>{{ item.1 }}</span>
</label>
</div>
{% endfor %}
<div class="poster__errors">
</div>
<div class="poster__info">
{% translate "Обязательно учитывайте Правила и особенности перевозки выбранным Вами видом транспорта" %}
</div>
</div>
</div>
{#phone#}
<div class="poster__row poster__row--phone">
<div class="poster__col col-12">
<label for="phone" class="col-12">
{% translate "Контактный номер телефона, по которому с Вами могут связаться перевозчики" %}
</label>
<input class="col-12 col-xl-6" type="tel" placeholder="{% translate "Укажите телефон" %}">
<div class="poster__info">
{% translate "Если вы оставите это поле пустым - перевозчики смогут только написать вам в личные сообщения на нашем сайте TripWB.com" %}
</div>
</div>
</div>
{#description#}
<div class="poster__row poster__row--description">
<div class="poster__col col-12">
<label for="description" class="col-12">
{% translate "Примечание (необязательно)" %}
</label>
<textarea
name="description"
id="description"
maxlength="{{ maxLetterLength }}"
placeholder="{% translate "Если желаете, то здесь можно указать важную информацию, например: вес, габариты посылки, количество попутчиков и т.д.)" %}"
></textarea>
<div class="poster__area-descr">
<span class="js-letter-count">0</span>
{% translate "из" %}
{{ maxLetterLength }}
{% translate "символов" %}
</div>
</div>
</div>
{#distribution#}
<div class="poster__row poster__row--distribution">
<div class="cargo cargo--info">
<input type="checkbox"
name="receive_msg_by_email"
class="cargo__inp"
{% if form.initial.receive_msg_by_email == True %}
checked="checked"
{% endif %}
id="id_receive_msg_by_email">
<label class="cargo__label" for="id_receive_msg_by_email">
{% translate "Хочу получать уведомления на E-mail о появлении перевозчика по моим критериям" %}
</label>
</div>
{% if not errors_off and form.errors and form.errors.receive_msg_by_email %}
{{ form.errors.receive_msg_by_email }}
{% endif %}
</div>
<button type="submit"
class="btn btn--primary col-12"
onclick="sendRoute(this,
{% if route.id %}{{ route.id }}{% endif %})"
>
{% translate "Разместить объявление" %}
</button>
</form>
</div>

View File

@@ -1,4 +1,4 @@
{% extends 'tb_base.html' %}
{% extends tag %}
{% load static %}
{% load i18n %}

172
templates/tb_base2.html Normal file
View File

@@ -0,0 +1,172 @@
{% load static %}
{% load tt_chat %}
{% load i18n %}
{% load webpush_notifications %}
<!DOCTYPE html>
<html lang="{{ request.LANGUAGE_CODE }}">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,maximum-scale=1,minimum-scale=1,initial-scale=1,height=device-height">
{% if page.description %}
<meta name="description" content="{{ page.description }}">
{% else %}
{% block default_meta_description %}{% endblock %}
{% endif %}
<meta name="vapid-key" content="{{ vapid_key }}">
{% webpush_header %}
<meta name="google-site-verification" content="4V4upJSK2_4MBrr5ZXjcCLw3bBwXc4_gsnKudJAaWqI"/>
<meta name="yandex-verification" content="b8a976575e41fbbc"/>
{% include "inter/meta_OpenGraph_Schema.html" %}
<!-- Event snippet for Sign-up conversion page
In your html page, add the snippet and call gtag_report_conversion when someone clicks on the chosen link or button. -->
<script>
function gtag_report_conversion(url) {
var callback = function () {
if (typeof (url) != 'undefined') {
window.location = url;
}
};
gtag('event', 'conversion', {
'send_to': 'AW-16654215692/tPyZCPyJgcYZEIzUrIU-',
'event_callback': callback
});
return false;
}
</script>
<title>
{% if page.title %}
{{ page.title }}
{% else %}
{% block title %}{% endblock %}
{% endif %}
</title>
{% include "inter/meta_names.html" %}
<script type="text/javascript" src="{% static "js/jquery_3_2_1.js" %}"></script>
<script type="text/javascript" src="{% static "js/moment_js.js" %}"></script>
<script type="text/javascript" src="{% static "js/moment-with-locales.js" %}"></script>
<script type="text/javascript" src="{% static "js/datarangepicker.js" %}"></script>
<script type="text/javascript" src="{% static "js/push/registerSw.js" %}"></script>
<script src="{% static "js/rangecalendartech.js" %}"></script>
<link rel="stylesheet" href="{% static 'css/datarangepicker.css' %}"/>
<script src="{% static "js/global_js.js" %}"></script>
<script src="{% static "js/chat_socket_start.js" %}"></script>
{% if user and not user.is_anonymous %}
{% include "connect_ws_js.html" %}
<script src='{% static "js/chat_sockets.js" %}'></script>
<script>
{#var user_id = {{ user.id }}#}
{% if prod %}
ws_url = `wss://{% get_ws_address %}/ws/socket-server/?user_id={{ user.id }}`;
{% else %}
ws_url = `ws://{% get_ws_address %}/ws/socket-server/?user_id={{ user.id }}`;
{% endif %}
var chatSocket;
init_ws()
const beep = new Audio('/static/sounds/beep_2.mp3')
</script>
{% endif %}
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
<link rel="stylesheet" href="{% static 'css/styles(boris).css' %}">
<link rel="stylesheet" href="{% static 'css/mobile_styles.css' %}">
<link rel="stylesheet" href="{% static 'css/critical.css' %}">
<script src='{% static "js/find_route.js" %}'></script>
<script src="{% static "js/filters_functions_find_route.js" %}"></script>
<script src="{% static "js/dynamic_loading_routes.js" %}"></script>
<script src="{% static "js/user_profile.js" %}"></script>
<script src="{% static "js/user_profile_2.js" %}"></script>
<script src="{% static "js/ion.rangeSlider.min.js" %}"></script>
<link rel="stylesheet" href="{% static "css/ion.rangeSlider.min.css" %}">
<script src="{% static "js/range_calendar.js" %}"></script>
<link rel="icon" href="{% static 'favicon/favicon.svg' %}" sizes="any" type="image/svg+xml">
<link rel="apple-touch-icon" sizes="57x57" href={% static 'favicon/apple-icon-57x57.png' %}>
<link rel="apple-touch-icon" sizes="60x60" href={% static "favicon/apple-icon-60x60.png" %}>
<link rel="apple-touch-icon" sizes="72x72" href={% static "favicon/apple-icon-72x72.png" %}>
<link rel="apple-touch-icon" sizes="76x76" href={% static "favicon/apple-icon-76x76.png" %}>
<link rel="apple-touch-icon" sizes="114x114" href={% static "favicon/apple-icon-114x114.png" %}>
<link rel="apple-touch-icon" sizes="120x120" href={% static "favicon/apple-icon-120x120.png" %}>
<link rel="apple-touch-icon" sizes="144x144" href={% static "favicon/apple-icon-144x144.png" %}>
<link rel="apple-touch-icon" sizes="152x152" href={% static "favicon/apple-icon-152x152.png" %}>
<link rel="apple-touch-icon" sizes="180x180" href={% static "favicon/apple-icon-180x180.png" %}>
<link rel="icon" type="image/png" sizes="192x192" href={% static "favicon/android-icon-192x192.png" %}>
<link rel="icon" type="image/png" sizes="32x32" href={% static "favicon/favicon-32x32.png" %}>
<link rel="icon" type="image/png" sizes="96x96" href={% static "favicon/favicon-96x96.png" %}>
<link rel="icon" type="image/png" sizes="16x16" href={% static "favicon/favicon-16x16.png" %}>
{% block meta %}
{% endblock %}
</head>
<body>
<div
class="block_overlay {% if page_type == 'profile' %}hidden{% elif page_type == 'routes' %} routes n_profile hidden{% else %}hidden n_profile{% endif %}"
onclick="close_open_curtain()">
</div>
<div class="container">
{# header#}
{% include 'blocks/b_header.html' %}
{#aside#}
<div class="cut_width_f_curtain close{% if page_type == 'profile' %}{% else %} n_profile{% endif %} right"
onclick="reAdressClickOnbackrground(event,this)">
<div
class="menu_buttons curtain right {% if page_type == 'profile' %}padding_remove {% if not mobile %}open{% else %}close{% endif %}{% else %} n_profile close{% endif %}"
data-name="<img style='width: 15px;display: block;position: relative;bottom: 0;transform: rotate(270deg);' src='{% static "/img/svg/burger.svg" %}'>">
{% include "blocks/profile/b_buttons_menu_profile.html" %}
<div class="handler_menu close" onclick="open_curtain_w_btn_profile()">
<img class="btns_f_curtain close left" src="{% static 'img/svg/arrow_f_curtain.svg' %}">
<div class="text_f_curtain left"><img
style='width: 15px;display: block;position: relative;bottom: 0;transform: rotate(270deg);'
src='{% static "/img/svg/burger.svg" %}'></div>
<img class="btns_f_curtain close right" src="{% static 'img/svg/arrow_f_curtain.svg' %}">
<div class="clear_both"></div>
</div>
</div>
</div>
{#content#}
{% block content %}
{% endblock %}
<div class="clear_both"></div>
</div>
{#footer#}
{% include 'blocks/b_footer.html' %}
{#before_close#}
<script>
let tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
if (!tz) {
tz = "UTC"
}
document.cookie = "user_tz=" + tz + ";path=/";
</script>
{% block before_close %}
{% endblock %}
</body>
</html>