diff --git a/static/v2/css/forms.css b/static/v2/css/forms.css index 3a5717a..36f168e 100644 --- a/static/v2/css/forms.css +++ b/static/v2/css/forms.css @@ -11,6 +11,8 @@ --label-font-size: 16px; --label-font-weight: 500; + --checkbox-label-font-size: 16px; + --textarea-min-width: 100%; --textarea-max-width: 100%; --textarea-width: 100%; @@ -18,6 +20,13 @@ --textarea-resize: none; box-sizing: border-box; + + &.line{ + display: flex; + align-items: center; + gap: 10px; + } + label{ display: block; color: var(--label-color); @@ -69,6 +78,23 @@ color: var(--placeholder-color); } } + .checkbox{ + background: #FFFFFF; + border: 1px solid #E6E6E6; + height: 30px; + width: 30px; + border-radius: 10px; + &:hover{ + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12); + } + &.checked{ + background: #FF613A; + box-shadow: 0 -1px 10px rgba(198, 199, 203, 0.2), -1px 4px 10px rgba(198, 199, 203, 0.2); + } + } + .checkbox_label{ + font-size: var(--checkbox-label-font-size); + } } .form_line{ @@ -80,5 +106,33 @@ } display: var(--display); justify-content: space-between; - } + +button[type="submit"]{ + --submit-button-bg: #FF613A; + --submit-button-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12); + + --submit-button-border: none; + --submit-button-border-radius: 10px; + --submit-button-font-size: 18px; + --submit-button-color: #FFFFFF; + --submit-button-font-weight: 600; + + --submit-button-width: 100%; /* initial */ + --submit-button-padding: 17px; + + outline: none; + + background: var(--submit-button-bg); + box-shadow: var(--submit-button-box-shadow); + + width: var(--submit-button-width); + padding: var(--submit-button-padding); + + border: var(--submit-button-border); + border-radius: var(--submit-button-border-radius); + + color: var(--submit-button-color); + font-size: var(--submit-button-font-size); + font-weight: var(--submit-button-font-weight); +} \ No newline at end of file diff --git a/static/v2/css/widgets/w_additional_info.css b/static/v2/css/widgets/w_additional_info.css new file mode 100644 index 0000000..f9ef691 --- /dev/null +++ b/static/v2/css/widgets/w_additional_info.css @@ -0,0 +1,31 @@ +.additional_info{ + position: relative; + --info-modal-bg: #FFFFFF; + --info-modal-drop-shadow: 0 2px 4px rgba(0, 0, 0, 0.12); + --info-modal-padding: 10px; + --info-modal-border-radius: 10px; + --info-modal-font-size: 10px; + + &.opened{ + .additional_info_modal{display: block;} + } + img{ + width: 20px; + height: 20px; + display: block; + } + .additional_info_modal{ + position: absolute; + z-index: 100; + left: 15px; + top: 0; + display: none; + + background: var(--info-modal-bg); + box-shadow: var(--info-modal-drop-shadow); + padding: var(--info-modal-padding); + border-radius: var(--info-modal-border-radius); + + font-size: var(--info-modal-font-size); + } +} \ No newline at end of file diff --git a/static/v2/icons/widgets/w_additional_info/Info.svg b/static/v2/icons/widgets/w_additional_info/Info.svg new file mode 100644 index 0000000..4aaae24 --- /dev/null +++ b/static/v2/icons/widgets/w_additional_info/Info.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/static/v2/js/forms.js b/static/v2/js/forms.js new file mode 100644 index 0000000..1be0bc8 --- /dev/null +++ b/static/v2/js/forms.js @@ -0,0 +1,77 @@ +function chooseCheckbox(el) { + if (!el) return; + + let $parent = el.closest('.field_container'); + let $checkbox = $parent.querySelector('.checkbox') + + $checkbox.classList.toggle("checked"); +} + +function getFormData(form) { + if (!form) return; + let formData = new FormData(); + let default_element_types = ['input', 'textarea', 'date']; + + let form_elements = getFormElements(form); + if (!form_elements) return; + + for (let el of form_elements) { + let $parent = el.closest('.field_container'); + let field_type = '' + if ($parent) field_type = $parent.dataset.type; + let name = $parent ? $parent.dataset.name : ''; + if (!name) name = el.name + if (!name) name = el.dataset.name; + let value = el.value || '' + + if (field_type) { + if (default_element_types.indexOf(field_type) > -1) { + formData.append(name, value); + } else if ($parent && !($parent.dataset.type in default_element_types)) { + formData = addCustomDataToFormData($parent, formData) + } + } else { + formData.append(name, value); + } + } + + return formData; +} + +function getFormElements(form) { + let form_elements = form.querySelectorAll('.field_container'); + + return form_elements; +} + +function addCustomDataToFormData(el, formData) { + let name = el.dataset.name; + switch (el.dataset.type) { + case 'checkbox': + let $checkbox = el.querySelector('.checkbox'); + let c_value = $checkbox.classList.contains('checked'); + + formData.append(name, c_value); + break; + + case 'radio': + let $radio = el.querySelector('.radio.checked'); + if (!$radio){ + formData.append(name, ''); + break; + } + + let r_value = $radio.closest(".cw_w_radio_inputs_radio_input").dataset.name; + + formData.append(name, r_value); + break; + + case 'location': + let $location = el.querySelector('input'); + let l_value = $location.dataset.id; + + formData.append(name, l_value); + break; + } + return formData; +} \ No newline at end of file diff --git a/static/v2/js/forms/f_make_poster_order.js b/static/v2/js/forms/f_make_poster_order.js new file mode 100644 index 0000000..d2d0593 --- /dev/null +++ b/static/v2/js/forms/f_make_poster_order.js @@ -0,0 +1,19 @@ +function makePosterOrder(form) { + event.preventDefault() + + let formData = getFormData(form); + formData.append('owner_type', 'customer'); + + let request = new api({ + url: '/routes/create_or_change_route/', + data: formData, + data_type: 'formData', + success: function (res) { + + }, error: function (res) { + + } + }) + + request.ajaxRequest() +} \ No newline at end of file diff --git a/static/v2/js/widgets/w_radio_inputs.js b/static/v2/js/widgets/w_radio_inputs.js index df927a4..97c08cd 100644 --- a/static/v2/js/widgets/w_radio_inputs.js +++ b/static/v2/js/widgets/w_radio_inputs.js @@ -7,8 +7,11 @@ function chooseRadioInput(el, callback){ $radios.forEach(radio => { radio.classList.remove('checked') }) - el.classList.toggle("checked"); - let checked_state = el.classList.contains("checked"); + $parent = el.closest('.cw_w_radio_inputs_radio_input'); + let $radio = $parent.querySelector('.radio'); + $radio.classList.toggle("checked"); + + let checked_state = $radio.classList.contains("checked"); if (callback) callback(checked_state) } \ No newline at end of file diff --git a/templates/pages/profile/p_user_profile.html b/templates/pages/profile/p_user_profile.html index 640a246..698e878 100644 --- a/templates/pages/profile/p_user_profile.html +++ b/templates/pages/profile/p_user_profile.html @@ -34,6 +34,7 @@ + {% include "connect_ws_js.html" %} diff --git a/templates/tb_base.html b/templates/tb_base.html index 7cfc06d..6c2c619 100644 --- a/templates/tb_base.html +++ b/templates/tb_base.html @@ -88,6 +88,7 @@ function gtag_report_conversion(url) { + {% if page_type == 'profile' %} @@ -100,6 +101,7 @@ function gtag_report_conversion(url) { + diff --git a/templates/v2/content_widgets/cw_w_radio_inputs_radio_input.html b/templates/v2/content_widgets/cw_w_radio_inputs_radio_input.html index 15fedf7..3c57ef3 100644 --- a/templates/v2/content_widgets/cw_w_radio_inputs_radio_input.html +++ b/templates/v2/content_widgets/cw_w_radio_inputs_radio_input.html @@ -3,5 +3,5 @@
-
{{ item.1 }}
+
{{ item.1 }}
\ No newline at end of file diff --git a/templates/v2/forms/f_make_poster_order.html b/templates/v2/forms/f_make_poster_order.html index 03e9acb..aff3d36 100644 --- a/templates/v2/forms/f_make_poster_order.html +++ b/templates/v2/forms/f_make_poster_order.html @@ -5,29 +5,30 @@ {% trans "Укажите город" as placeholder_for_city %}
-
+
{% include 'v2/widgets/w_select_country.html' with name='from_city' placeholder=placeholder_for_city %} + {% if form.errors.from_city %}
{{ form.errors.from_city }}
{% endif %}
-
+
{% include 'v2/widgets/w_select_country.html' with name='to_city' placeholder=placeholder_for_city %}
-
+
{% include 'v2/widgets/w_radio_inputs.html' with name='cargo_type' list=form.fields.cargo_type.choices %}
-
- +
+ {% include 'v2/widgets/w_daterangepicker.html' with name='arrival_DT' %}
-
+
{% trans "Обязательно учитывайте Правила и особенности перевозки выбранным Вами видом транспорта" as attention_type_transport %} {% include 'v2/widgets/w_radio_inputs.html' with name='type_transport' list=form.fields.type_transport.choices %} @@ -35,7 +36,7 @@
-
+
{% trans "Если вы оставите это поле пустым - перевозчики смогут только написать вам в личные сообщения на нашем сайте TripWB.com" as attention_phone %} @@ -43,16 +44,19 @@
-
+
{% trans 'Если желаете, то здесь можно указать важную информацию, например: вес, габариты посылки, количество попутчиков и т.д.)' as comment_placeholder %} - + {% include 'v2/widgets/w_textarea_w_counter.html' with name='comment' placeholder=comment_placeholder max_val='300' %}
-
-
+
+
+
{% trans "Хочу получать уведомления на E-mail о появлении перевозчика по моим критериям" %}
+ {% include 'v2/widgets/w_additional_info.html' %}
+ \ No newline at end of file diff --git a/templates/v2/widgets/w_additional_info.html b/templates/v2/widgets/w_additional_info.html new file mode 100644 index 0000000..7c9e6d8 --- /dev/null +++ b/templates/v2/widgets/w_additional_info.html @@ -0,0 +1,9 @@ +{% load static %} +{% load i18n %} + +
+ +
+ asd +
+
\ No newline at end of file