TRI-293: edit form

static/css/base/grid.css

@@ -0,0 +1 @@
+.container{margin:0 auto;max-width:1280px;position:relative;box-sizing:border-box}.container.black{background-color:#0088cc;height:200px;margin:0}@media (min-width: 1760px){.container{max-width:1720px}}@media (max-width: 1319.98px){.container{max-width:952px}}@media (max-width: 991.98px){.container{width:728px}}@media (max-width: 767.98px){.container{width:536px}}@media (max-width: 575.98px){.container{max-width:calc(100vw - 34px);margin:0 16px}}.col-12{width:100%}.col-11{width:91.66666667%}.col-10{width:83.33333333%}.col-9{width:75%}.col-8{width:66.66666667%}.col-7{width:58.33333333%}.col-6{width:50%}.col-5{width:41.66666667%}.col-4{width:33.33333333%}.col-3{width:25%}.col-2{width:16.66666667%}.col-1{width:8.33333333%}@media (min-width: 576px){.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}}@media (min-width: 768px){.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}}@media (min-width: 992px){.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}}@media (min-width: 1320px){.col-xl-12{width:100%}.col-xl-11{width:91.66666667%}.col-xl-10{width:83.33333333%}.col-xl-9{width:75%}.col-xl-8{width:66.66666667%}.col-xl-7{width:58.33333333%}.col-xl-6{width:50%}.col-xl-5{width:41.66666667%}.col-xl-4{width:33.33333333%}.col-xl-3{width:25%}.col-xl-2{width:16.66666667%}.col-xl-1{width:8.33333333%}}@media (min-width: 1760px){.col-xxl-12{width:100%}.col-xxl-11{width:91.66666667%}.col-xxl-10{width:83.33333333%}.col-xxl-9{width:75%}.col-xxl-8{width:66.66666667%}.col-xxl-7{width:58.33333333%}.col-xxl-6{width:50%}.col-xxl-5{width:41.66666667%}.col-xxl-4{width:33.33333333%}.col-xxl-3{width:25%}.col-xxl-2{width:16.66666667%}.col-xxl-1{width:8.33333333%}}

static/css/base/redefine.css

@@ -1 +1 @@
-header{padding-left:0;padding-right:0}footer{overflow:hidden}.wrapper_header_content{max-width:initial}@media only screen and (max-width: 1319.98px){section.profile{width:100%}.info_profile{width:100%}.dropbtn,.header_logo,.header_btn_mover{margin-right:15px}#support_img{margin-left:5px}}@media (max-width: 767.98px){.menu_buttons.right.open{right:0;transition:200ms;position:fixed;display:block;padding-top:0;top:45px;background:#ffffff}}
+header{padding-left:0;padding-right:0}footer{overflow:hidden}.wrapper_header_content{max-width:initial}@media only screen and (max-width: 1319.98px){header{padding-bottom:5px}section.profile{width:100%}.info_profile{width:100%}.dropbtn,.header_logo,.header_btn_mover{margin-right:15px}#support_img{margin-left:5px}}@media (max-width: 767.98px){.menu_buttons.right.open{right:0;transition:200ms;position:fixed;display:block;padding-top:0;top:45px;background:#ffffff}}

static/css/base/typograph.css

@@ -1 +1 @@
-:root{--brand-primary: #FF613A;--brand-white: #fff;--brand-black: #000;--brand-black2: #272424;--brand-grey: #F1F1F1;--brand-grey2: #E6E6E6;--brand-grey3: #7A7979;--brand-orange: #FF613A;--box-shadow-primary: -1px 4px 10px 0 rgba(198,199,203,0.2),0 -1px 10px 0 rgba(198,199,203,0.2);--base-border-radius: 10px;--base-border: 2.5px solid #E6E6E6;--base-input-height: 60px;text-align:center;color:var(--brand-black2)}html,body{max-width:100vw;max-height:initial;height:initial;overflow-x:hidden}label{display:inline-block}label[required]:before{content:"*";color:var(--brand-primary)}input,textarea{outline:none;border:var(--base-border);border-radius:var(--base-border-radius);height:var(--base-input-height);width:100%;font-size:16px;line-height:22px;cursor:pointer;padding:10px 40px 10px 7px;box-sizing:border-box;max-width:100%}input.date,textarea.date{background:white url(/static/img/svg/Calendar.svg) right 2% bottom 45% no-repeat}input.locate,textarea.locate{background:white url(/static/img/svg/MapPinLine.svg) right 2% bottom 45% no-repeat}input.loading,textarea.loading{background:white url(/static/img/svg/loader.svg) no-repeat calc(100% - 15px) center}input.is-items,textarea.is-items{background:url(/static/img/png/icon-arrow.svg) calc(100% - 15px) center no-repeat white}
+:root{--brand-primary: #FF613A;--brand-white: #fff;--brand-black: #000;--brand-black2: #272424;--brand-grey: #F1F1F1;--brand-grey2: #E6E6E6;--brand-grey3: #7A7979;--brand-orange: #FF613A;--box-shadow-primary: -1px 4px 10px 0 rgba(198,199,203,0.2),0 -1px 10px 0 rgba(198,199,203,0.2);--base-border-radius: 10px;--base-border: 2.5px solid #E6E6E6;--base-input-height: 60px;text-align:center;color:var(--brand-black2)}html,body{max-width:100vw;max-height:initial;height:initial}label{display:inline-block}label[required]:before{content:"*";color:var(--brand-primary)}input,textarea{outline:none;border:var(--base-border);border-radius:var(--base-border-radius);height:var(--base-input-height);width:100%;font-size:16px;line-height:22px;cursor:pointer;padding:10px 40px 10px 7px;box-sizing:border-box;max-width:100%}input.date,textarea.date{background:white url(/static/img/svg/Calendar.svg) right 2% bottom 45% no-repeat}input.locate,textarea.locate{background:white url(/static/img/svg/MapPinLine.svg) right 2% bottom 45% no-repeat}input.loading,textarea.loading{background:white url(/static/img/svg/loader.svg) no-repeat calc(100% - 15px) center}input.is-items,textarea.is-items{background:url(/static/img/png/icon-arrow.svg) calc(100% - 15px) center no-repeat white}

static/css/critical.css

@@ -1 +1 @@
-.container{margin:0 auto;max-width:1280px;position:relative;box-sizing:border-box}.container.black{background-color:#0088cc;height:200px;margin:0}@media (min-width: 1760px){.container{max-width:1720px}}@media (max-width: 1319.98px){.container{max-width:952px}}@media (max-width: 991.98px){.container{width:728px}}@media (max-width: 767.98px){.container{width:536px}}@media (max-width: 575.98px){.container{max-width:100vw;margin:0;padding:0 16px}}.col-12{width:100%}.col-11{width:91.66666667%}.col-10{width:83.33333333%}.col-9{width:75%}.col-8{width:66.66666667%}.col-7{width:58.33333333%}.col-6{width:50%}.col-5{width:41.66666667%}.col-4{width:33.33333333%}.col-3{width:25%}.col-2{width:16.66666667%}.col-1{width:8.33333333%}@media (min-width: 576px){.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}}@media (min-width: 768px){.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}}@media (min-width: 992px){.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}}@media (min-width: 1320px){.col-xl-12{width:100%}.col-xl-11{width:91.66666667%}.col-xl-10{width:83.33333333%}.col-xl-9{width:75%}.col-xl-8{width:66.66666667%}.col-xl-7{width:58.33333333%}.col-xl-6{width:50%}.col-xl-5{width:41.66666667%}.col-xl-4{width:33.33333333%}.col-xl-3{width:25%}.col-xl-2{width:16.66666667%}.col-xl-1{width:8.33333333%}}@media (min-width: 1760px){.col-xxl-12{width:100%}.col-xxl-11{width:91.66666667%}.col-xxl-10{width:83.33333333%}.col-xxl-9{width:75%}.col-xxl-8{width:66.66666667%}.col-xxl-7{width:58.33333333%}.col-xxl-6{width:50%}.col-xxl-5{width:41.66666667%}.col-xxl-4{width:33.33333333%}.col-xxl-3{width:25%}.col-xxl-2{width:16.66666667%}.col-xxl-1{width:8.33333333%}}:root{--brand-primary: #FF613A;--brand-white: #fff;--brand-black: #000;--brand-black2: #272424;--brand-grey: #F1F1F1;--brand-grey2: #E6E6E6;--brand-grey3: #7A7979;--brand-orange: #FF613A;--box-shadow-primary: -1px 4px 10px 0 rgba(198,199,203,0.2),0 -1px 10px 0 rgba(198,199,203,0.2);--base-border-radius: 10px;--base-border: 2.5px solid #E6E6E6;--base-input-height: 60px;text-align:center;color:var(--brand-black2)}html,body{max-width:100vw;max-height:initial;height:initial;overflow-x:hidden}label{display:inline-block}label[required]:before{content:"*";color:var(--brand-primary)}input,textarea{outline:none;border:var(--base-border);border-radius:var(--base-border-radius);height:var(--base-input-height);width:100%;font-size:16px;line-height:22px;cursor:pointer;padding:10px 40px 10px 7px;box-sizing:border-box;max-width:100%}input.date,textarea.date{background:white url(/static/img/svg/Calendar.svg) right 2% bottom 45% no-repeat}input.locate,textarea.locate{background:white url(/static/img/svg/MapPinLine.svg) right 2% bottom 45% no-repeat}input.loading,textarea.loading{background:white url(/static/img/svg/loader.svg) no-repeat calc(100% - 15px) center}input.is-items,textarea.is-items{background:url(/static/img/png/icon-arrow.svg) calc(100% - 15px) center no-repeat white}.btn{display:inline-flex;text-decoration:none;color:black;line-height:22px;border-radius:10px;padding:20px 76px 18px;justify-content:center;align-items:center;margin:0 3px;letter-spacing:0.2px;font-size:18px}.btn--primary{background:var(--brand-primary);color:var(--brand-white)}
+.container{margin:0 auto;max-width:1280px;position:relative;box-sizing:border-box}.container.black{background-color:#0088cc;height:200px;margin:0}@media (min-width: 1760px){.container{max-width:1720px}}@media (max-width: 1319.98px){.container{max-width:952px}}@media (max-width: 991.98px){.container{width:728px}}@media (max-width: 767.98px){.container{width:536px}}@media (max-width: 575.98px){.container{max-width:calc(100vw - 34px);margin:0 16px}}.col-12{width:100%}.col-11{width:91.66666667%}.col-10{width:83.33333333%}.col-9{width:75%}.col-8{width:66.66666667%}.col-7{width:58.33333333%}.col-6{width:50%}.col-5{width:41.66666667%}.col-4{width:33.33333333%}.col-3{width:25%}.col-2{width:16.66666667%}.col-1{width:8.33333333%}@media (min-width: 576px){.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}}@media (min-width: 768px){.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}}@media (min-width: 992px){.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}}@media (min-width: 1320px){.col-xl-12{width:100%}.col-xl-11{width:91.66666667%}.col-xl-10{width:83.33333333%}.col-xl-9{width:75%}.col-xl-8{width:66.66666667%}.col-xl-7{width:58.33333333%}.col-xl-6{width:50%}.col-xl-5{width:41.66666667%}.col-xl-4{width:33.33333333%}.col-xl-3{width:25%}.col-xl-2{width:16.66666667%}.col-xl-1{width:8.33333333%}}@media (min-width: 1760px){.col-xxl-12{width:100%}.col-xxl-11{width:91.66666667%}.col-xxl-10{width:83.33333333%}.col-xxl-9{width:75%}.col-xxl-8{width:66.66666667%}.col-xxl-7{width:58.33333333%}.col-xxl-6{width:50%}.col-xxl-5{width:41.66666667%}.col-xxl-4{width:33.33333333%}.col-xxl-3{width:25%}.col-xxl-2{width:16.66666667%}.col-xxl-1{width:8.33333333%}}:root{--brand-primary: #FF613A;--brand-white: #fff;--brand-black: #000;--brand-black2: #272424;--brand-grey: #F1F1F1;--brand-grey2: #E6E6E6;--brand-grey3: #7A7979;--brand-orange: #FF613A;--box-shadow-primary: -1px 4px 10px 0 rgba(198,199,203,0.2),0 -1px 10px 0 rgba(198,199,203,0.2);--base-border-radius: 10px;--base-border: 2.5px solid #E6E6E6;--base-input-height: 60px;text-align:center;color:var(--brand-black2)}html,body{max-width:100vw;max-height:initial;height:initial}label{display:inline-block}label[required]:before{content:"*";color:var(--brand-primary)}input,textarea{outline:none;border:var(--base-border);border-radius:var(--base-border-radius);height:var(--base-input-height);width:100%;font-size:16px;line-height:22px;cursor:pointer;padding:10px 40px 10px 7px;box-sizing:border-box;max-width:100%}input.date,textarea.date{background:white url(/static/img/svg/Calendar.svg) right 2% bottom 45% no-repeat}input.locate,textarea.locate{background:white url(/static/img/svg/MapPinLine.svg) right 2% bottom 45% no-repeat}input.loading,textarea.loading{background:white url(/static/img/svg/loader.svg) no-repeat calc(100% - 15px) center}input.is-items,textarea.is-items{background:url(/static/img/png/icon-arrow.svg) calc(100% - 15px) center no-repeat white}.btn{display:inline-flex;text-decoration:none;color:black;line-height:22px;border-radius:10px;padding:20px 76px 18px;justify-content:center;align-items:center;margin:0 3px;letter-spacing:0.2px;font-size:18px}.btn--primary{background:var(--brand-primary);color:var(--brand-white)}

static/js/form-poster.js

@@ -1,11 +1,38 @@
 !function () {
   'use strict';
   var posterApp = {
+    locale_ru: new Object({
+      direction: "ltr",
+      format: "DD.MM.YYYY",
+      separator: " - ",
+      applyLabel: "Принять",
+      cancelLabel: "Отменить",
+      weekLabel: "Н",
+      customRangeLabel: "Custom Range",
+
+    }),
+
+    locale_en: new Object({
+      direction: "ltr",
+      format: "DD.MM.YYYY",
+      separator: " - ",
+      applyLabel: "Apply",
+      cancelLabel: "Cancel",
+      weekLabel: "W",
+      customRangeLabel: "Custom Range",
+
+    }),
+
+    changeLangForDateTimePicker: function () {
+      moment.locale(document.documentElement.lang === 'ru' ? 'ru' : 'en');
+      return document.documentElement.lang === 'ru' ? this.locale_ru : this.locale_en
+    },
+
 
-    // todo определение фоормата даты можно вынести на бэк для контроля
     initDatePickerr: function () {
+      const _this = this;
       [this._selector.inpDeparture, this._selector.inpArrival].forEach(i => {
-        if(!i.length) return
+        if (!i.length) return
         let date = i.val().trim() ? i.val() : new Date();
         let startDate = null
         if (window.location.href.includes("/ru/")) {
@@ -21,7 +48,7 @@
             "timePicker": false,
             "timePicker24Hour": false,
             "minDate": startDate,
-            "locale": changeLangForDateTimePicker(),
+            "locale": _this.changeLangForDateTimePicker(),
           }, function (start, end, label) {
             i.val(start.format('DD.MM.YYYY'));
           });
@@ -42,31 +69,28 @@
     },
 
 
-    changeCargoType: function () {
+    changeDisabledType: function () {
       let inpTypeAvia = this._selector.typeItems.filter((d, i) => i.value === 'avia');
       let inpTypePassenger = this._selector.cargoItems.filter((d, i) => i.value === 'passenger');
       this._selector.cargoItems.off('change.i-disable').on('change.i-disable', (e) => {
-        this.handlerDisabled(e.target, inpTypeAvia, 'passenger')
+        this.handlerDisabled($(e.target).val(), inpTypeAvia, 'passenger')
-      })
+      });
+      this._selector.typeItems.off('change.i-disable2').on('change.i-disable2', (e) => {
+        this.handlerDisabled($(e.target).val(), inpTypePassenger, 'avia')
+      });
       // change other type
-      this.handlerDisabled(inpTypePassenger, inpTypeAvia, 'passenger')
+      this.handlerDisabled(this.getDataForm(true).cargo_type, inpTypeAvia, 'passenger')
+      this.handlerDisabled(this.getDataForm(true).type_transport, inpTypePassenger, 'avia')
     },
 
     handlerDisabled: function (el, el2, text) {
-      if ($(el).val() === text) {
+      if (el === text) {
         $(el2).attr('disabled', true);
       } else {
         $(el2).attr('disabled', false);
       }
     },
 
-    changeTransportType: function () {
-      let inpTypePassenger = this._selector.cargoItems.filter((d, i) => i.value === 'passenger');
-      this._selector.typeItems.off('change.i-disable').on('change.i-disable', (e) => {
-        this.handlerDisabled(e.target, inpTypePassenger, 'avia');
-      })
-    },
-
     createInpCoutryData: function (el, data) {
       el.dataCoutry?.remove();
       let template =
@@ -148,12 +172,11 @@
 
     validForm: function () {
       let elems = this._selector.root[0].elements
-      //todo пустые значения
       elems.departure_DT.value = elems.departure_DT.value.trim()
       if (!elems.departure_DT.value) {
+        this._cl('!elems.departure_DT.value is empty set "          "')
         elems.departure_DT.value = moment(new Date()).format(this._data.formatDate);
       }
-      // console.log(elems.departure_DT.value.trim(), elems.departure_DT.value === '', elems.departure_DT.value, elems.departure_DT)
     },
 
     initSubmit: function () {
@@ -167,9 +190,7 @@
         if (routeId) {
           url = '/routes/change_route/' + routeId + '/'
         }
-
+        _this._cl(_this.getDataForm(true))
-        if (_this.getDataForm(true))
-          console.log(_this.getDataForm(true))
         $.ajax({
           headers: {"X-CSRFToken": $('input[name=csrfmiddlewaretoken]').val()},
           url: url,
@@ -179,39 +200,20 @@
           contentType: false,
           data: formData,
           success: function (data) {
-            // return
+            _this._selector.wrapper.html(data.html);
-            let data_route_id = data.route_id
+            _this._cl('data success',data)
-            document.querySelector(".info_profile").innerHTML = data.html
+            window.location.assign(location.pathname.split('/').slice(0,-2).join('/') + '/my_routes')
-
-            let el_route = document.querySelector(`[data-number-of-route="${data_route_id}"]`);
-            if (routeId) {
-              el_route = document.querySelector(`[data-number-of-route="${routeId}"]`);
-            }
-            if (el_route) {
-              el_route.scrollIntoView({
-                behavior: "smooth",
-                block: 'start',
-                inline: 'start'
-              });
-            }
-            let currentUrl = window.location.pathname;
-            let newUrl = '';
-
-            if (currentUrl.includes('/create_route_for_customer')) {
-              newUrl = currentUrl.replace('/create_route_for_customer', '/my_routes');
-            } else if (currentUrl.includes('/create_route_for_mover')) {
-              newUrl = currentUrl.replace('/create_route_for_mover', '/my_routes');
-            }
-            window.history.replaceState(null, '', newUrl);
           },
           error: function (data, exception) {
-            console.log(data)
+            _this._cl('is-error data', data)
-            document.querySelector(".info_profile").innerHTML = data.responseJSON.html;
+            _this._selector.wrapper.html(data.responseJSON.html);
-            document.getElementById('departure_DT')?.scrollIntoView({
+            setTimeout(()=>{
+              $('.errorlist>li').parents('.poster__row')[0]?.scrollIntoView({
               behavior: "smooth",
               block: 'nearest',
               inline: 'nearest'
             });
+            })
           }
         });
       });
@@ -235,7 +237,7 @@
         data: JSON.stringify(getTownData),
         success: function (data) {
           el.removeClass('loading');
-          const {res_search_list, unanswered_msgs_count} = data;
+          const {res_search_list} = data;
           _this.setDataTowns(data, el)
           _this.initHandlerItemsTowns(el)
           _this.handlerShowList(el)
@@ -248,7 +250,7 @@
             el.removeClass('is-items')
             el.list.removeClass('is-items')
           }
-          console.log('fetch', data)
+          _this._cl('fetch', data)
         },
         error: function (data) {
 
@@ -261,20 +263,19 @@
     handlerSearchTown: function (e, i) {
       this._cl('handlerSearchTown');
       let el = i;
-      console.log('out', el.prevValue, el.val())
+      this._cl('handlerSearchTown el prV - elV', [el.prevValue, el.val()])
       if (el.prevValue && el.val().length < el.prevValue.length) {
+        // clean input
         el.parent().removeClass('is-set')
         el.next('.poster__inp-country').remove()
-        console.log(el, `${el[0].name.split('_')[0]}_city`, this._selector.root[0].elements[`${el[0].name.split('_')[0]}_city`])
+        this._cl('', [el, `${el[0].name.split('_')[0]}_city`, this._selector.root[0].elements[`${el[0].name.split('_')[0]}_city`]])
         this._selector.root[0].elements[`${el[0].name.split('_')[0]}_city`].value = ''
         el.val('');
       }
 
       if (el.val().length > 2) {
-        console.log('in')
+        this._cl('in')
-
         el.addClass('loading');
-
         clearTimeout(el.timer)
         el.timer = setTimeout(() => {
           this.getTowns(el);
@@ -309,6 +310,7 @@
 
     initData: function (root) {
       window.posterApp = this;
+      window.mobileWidth = 768;
       this._data = {
         debug: true,
         formatDate: 'DD.MM.YYYY',
@@ -328,7 +330,7 @@
         typeItems: root.find('.cargo__inp[name="type_transport"]'),
         inpDeparture: root.find('#departure_DT'),
         inpArrival: root.find('#arrival_DT'),
-        submitBtn: root.find('button')
+        submitBtn: root.find('button'),
       };
       this._selector.inpFrom.list = this._selector.inpFromList
       this._selector.inpFrom.date = this._selector.inpDeparture
@@ -346,8 +348,7 @@
       this.initHandlerRoute();
       this.initDatePickerr();
       this.initSubmit();
-      this.changeCargoType();
+      this.changeDisabledType();
-      this.changeTransportType();
     },
   };
 

static/js/global_js.js

@@ -144,11 +144,11 @@ function getTypeOfData (data) {
 
 function getInfoAboutUser (screen_width){
     let user_type = ''
-    if (screen.width <= 700){
+    if (screen.width <= (window.mobileWidth || 700)){
         user_type = 'mobile'
     } else if (screen.width > 1180) {
         user_type = 'desctop'
-    } else if (screen.width > 700 && screen.width <= 1180) {
+    } else if (screen.width > (window.mobileWidth || 700) && screen.width <= 1180) {
         user_type = 'laptop'
     }
     if (screen_width){

styles/base/grid.scss

@@ -39,9 +39,8 @@
 
 @media (max-width: $screen-xs-max) {
   .container {
-    max-width: 100vw;
+    max-width: calc(100vw - 34px);
-    margin: 0;
+    margin: 0 16px;
-    padding: 0 16px;
   }
 }
 

styles/base/redefine.scss

@@ -15,6 +15,10 @@ footer {
 
 @media only screen and (max-width: $screen-xl-max) {
 
+  header {
+    padding-bottom: 5px;
+  }
+
   section.profile {
     width: 100%;
   }

styles/base/typograph.scss

@@ -26,7 +26,8 @@ body {
   max-width: 100vw;
   max-height: initial;
   height: initial;
-  overflow-x: hidden;
+  // not work with posytion sticky
+  //overflow-x: hidden;
 }
 
 label {

styles/create_poster/create_poster.scss

@@ -236,6 +236,11 @@ $row-gap: 40px;
       display: flex;
       min-width: 100%;
       gap: $row-gap;
+      flex-wrap: wrap;
+
+      @media (max-width: $screen-lg-max) {
+      display: block;
+      }
     }
   }
 
@@ -286,10 +291,6 @@ $row-gap: 40px;
       }
     }
 
-    input {
-
-    }
-
     .poster__inp-country {
       position: absolute;
       display: flex;
@@ -375,17 +376,6 @@ $row-gap: 40px;
 
   &__locate {
     appearance: none;
-
-    //&:not(:placeholder-shown) {
-    //  padding-left: 65px;
-    //}
-
-    //&:placeholder-shown {
-    //
-    //  +.poster__inp-country {
-    //    display: none;
-    //  }
-    //}
   }
 
   .btn {
@@ -402,7 +392,7 @@ $row-gap: 40px;
     &--inline {
 
       @media (max-width: $screen-sm-max) {
-        width: 100%;
+        max-width: 100%;
       }
     }
   }

templates/blocks/profile/b_create_form_poster.html

@@ -24,26 +24,7 @@
 
 {% endif %}
 
-<div hidden>
+<div id="poster" class="poster poster--{% if owner_type == 'customer' %}customer{% else %}mover{% endif %}">
-  csrfmiddlewaretoken: eoN2nLYYo46PpDIhi82dmTFASHH4ONiBdEQOz1jQNyUpsHJ4RrvcmFwfnM45TNtl
-  type_transport: road
-  from_city: 59613 4267
-  from_address_point_txt: Москаленки / Россия
-  to_city: 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 poster--{% if owner_type == 'customer' %}customer{% else %}mover{% endif %}">
   <h1 class="poster__title">{{ p_title }}</h1>
 
   <form class="poster__form"
@@ -57,14 +38,14 @@
         name="from_city"
         id="from_city"
         hidden
-        {% if form.initial.from_city %}value="{{ form.initial.from_city }}"{% endif %}
+        {% if form.initial.from_city %}value="{{ form.initial.from_city.id }}"{% endif %}
     />
     <input
         type="number"
         name="to_city"
         id="to_city"
         hidden
-        {% if form.initial.to_city %}value="{{ form.initial.to_city }}"{% endif %}
+        {% if form.initial.to_city %}value="{{ form.initial.to_city.id }}"{% endif %}
     />
     <input
         id="owner_type"
@@ -76,57 +57,70 @@
         value="{{ form.data.owner_type }}"
         {% endif %}
     >
-    {#type-transport#}
+    {#type-transport mover#}
-    <div class="poster__row poster__row--transport">
+    {% if owner_type == 'mover' %}
-      <div class="poster__col col-12">
+      <div class="poster__row poster__row--transport">
+        <div class="poster__col col-12">
 
-        <label for="type_transport" class="poster__label col-12" required>
+          <label for="type_transport" class="poster__label col-12" required>
-          {{ l_transport }}
+            {{ l_transport }}
-        </label>
+          </label>
-        {% for item in form.fields.type_transport.choices %}
+          {% for item in form.fields.type_transport.choices %}
-          <div class="cargo cargo--inline">
+            <div class="cargo cargo--inline">
-            <input
+              <input
-                class="cargo__inp"
+                  class="cargo__inp"
-                type="radio"
+                  type="radio"
-                name="type_transport"
+                  name="type_transport"
-                id="type_transport_{{ forloop.counter }}"
+                  id="type_transport_{{ forloop.counter }}"
-                value="{{ item.0 }}"
+                  value="{{ item.0 }}"
-                {% if form.initial.type_transport == item.0 %}
+                  {% if form.initial.type_transport == item.0 %}
-                checked="checked"
+                  checked
-                {% endif %}
+                  {% endif %}
-            >
+              >
-            <label class="cargo__label"
+              <label class="cargo__label"
-                   for="type_transport_{{ forloop.counter }}">
+                     for="type_transport_{{ forloop.counter }}">
-              <span>{{ item.1 }}</span>
+                <span>{{ item.1 }}</span>
-            </label>
+              </label>
+            </div>
+          {% endfor %}
+          {% if not errors_off and form.errors and form.errors.type_transport %}
+            <span>{{ form.errors.type_transport }}</span>
+          {% endif %}
+          <div class="poster__info">
+            {% translate "Обязательно учитывайте Правила и особенности перевозки выбранным Вами видом транспорта" %}
           </div>
-        {% endfor %}
-        {% if not errors_off and form.errors and form.errors.type_transport %}
-          <span>{{ form.errors.type_transport }}</span>
-        {% endif %}
-        <div class="poster__info">
-          {% translate "Обязательно учитывайте Правила и особенности перевозки выбранным Вами видом транспорта" %}
         </div>
       </div>
-    </div>
+    {% endif %}
     {#from-to#}
     <div class="poster__row poster__row--from-to">
       <div class="poster__col">
-        <label for="from" class="poster__label " required>
+        <label for="from" class="poster__label" required>
           {{ l_from }}
         </label>
-        <div class="poster__inp-box">
+        <div class="poster__inp-box
-
+                    {% if form.initial.to_city %} is-set{% endif %}
-          <input type="text" autocomplete="off" name="from_address_point_txt" id="from" class="poster__locate locate"
+        ">
-                 placeholder="{% translate "Укажите город" %}" required
-                 {% if form.initial.from_city %}value="{{ form.initial.from_city.name }} {{ form.initial.from_city.country.short_code }} / {{ form.initial.from_city.country.name }}"{% endif %}
 
+          <input
+              type="text"
+              autocomplete="off"
+              name="from_address_point_txt"
+              id="from"
+              class="poster__locate locate"
+              placeholder="{% translate "Укажите город" %}"
+              required
+              {% if form.initial.from_city %}
+              value="{{ form.initial.from_city.name }} / {{ form.initial.from_city.country.name }}"
+              {% endif %}
           >
-
+          {% if form.initial.from_city %}
             <div class="poster__inp-country">
-              <img src="{{ MEDIA_URL }}{{ form.initial.from_city.country.flag }}" alt="{{ form.initial.from_city.country.name }}">
+              <img src="{{ MEDIA_URL }}{{ form.initial.from_city.country.flag }}"
+                   alt="{{ form.initial.from_city.country.name }}">
               <span>{{ form.initial.from_city.country.short_code }}</span>
             </div>
+          {% endif %}
         </div>
         <div class="poster__towns-list"></div>
         {% if not errors_off and form.errors and form.errors.from_address_point %}
@@ -137,7 +131,9 @@
         <label for="to" class="poster__label " required>
           {{ l_to }}
         </label>
-        <div class="poster__inp-box">
+        <div class="poster__inp-box
+                    {% if form.initial.to_city %} is-set{% endif %}
+        ">
           <input
               type="text"
               autocomplete="off"
@@ -146,8 +142,17 @@
               class="poster__locate locate"
               placeholder="{% translate "Укажите город" %}"
               required
-              {% if form.initial.to_address_point_txt %}value="{{ form.initial.to_address_point_txt }}"{% endif %}
+              {% if form.initial.to_city %}
+              value="{{ form.initial.to_city.name }} / {{ form.initial.to_city.country.name }}"
+              {% endif %}
           >
+          {% if form.initial.to_city %}
+            <div class="poster__inp-country">
+              <img src="{{ MEDIA_URL }}{{ form.initial.to_city.country.flag }}"
+                   alt="{{ form.initial.to_city.country.name }}">
+              <span>{{ form.initial.to_city.country.short_code }}</span>
+            </div>
+          {% endif %}
         </div>
         <div class="poster__towns-list"></div>
         {% if not errors_off and form.errors and form.errors.from_address_point %}
@@ -169,10 +174,8 @@
                 name="departure_DT"
                 readonly
                 required
-                {% if route.departure_DT %}
+                {% if form.initial.departure_DT %}
-                value="{{ route.from_city.get_current_datetime.strip }}"
+                value="{{ form.initial.departure_DT|date:"d.m.Y" }}"
-                {% elif form.initial.departure_DT %}
-                value="{{ form.initial.departure_DT }}"
                 {% endif %}
             />
             {% if not errors_off and form.errors and form.errors.departure_DT %}
@@ -190,10 +193,8 @@
                 id="arrival_DT"
                 name="arrival_DT"
                 readonly
-                {% if route.arrival_DT %}
+                {% if form.initial.arrival_DT %}
-                value="{{ route.from_city.get_current_datetime }}"
+                value="{{ form.initial.arrival_DT|date:"d.m.Y" }}"
-                {% elif form.initial.arrival_DT %}
-                value="{{ form.initial.arrival_DT }}"
                 {% endif %}
             />
             {% if not errors_off and form.errors and form.errors.arrival_DT %}
@@ -218,11 +219,10 @@
                   class="cargo__inp"
                   type="radio"
                   name="cargo_type"
-
                   id="cargo_type_{{ forloop.counter }}"
                   required
                   value="{{ item.0 }}"
-                  {% if forloop.first %}
+                  {% if form.initial.cargo_type == item.0 or forloop.first %}
                   checked
                   {% endif %}
               />
@@ -252,11 +252,9 @@
               id="arrival_DT"
               name="arrival_DT"
               placeholder="{% translate "Выберите дату" %}"
-{#              required#}
+              required
-              {% if route.arrival_DT %}
+              {% if form.initial.arrival_DT %}
-              value="{{ route.from_city.get_current_datetime }}"
+              value="{{ form.initial.arrival_DT|date:"d.m.Y" }}"
-              {% elif form.initial.arrival_DT %}
-              value="{{ form.initial.arrival_DT }}"
               {% endif %}
           />
           {% if not errors_off and form.errors and form.errors.arrival_DT %}
@@ -269,14 +267,44 @@
               id="departure_DT"
               name="departure_DT"
               hidden
-              {% if route.departure_DT %}
+              {% if form.initial.departure_DT %}
-              value="{{ route.from_city.get_current_datetime.strip }}"
+              value="{{ form.initial.departure_DT|date:"d.m.Y" }}"
-              {% elif form.initial.departure_DT %}
-              value="{{ form.initial.departure_DT }}"
               {% endif %}
           />
         </div>
       </div>
+      <div class="poster__row poster__row--transport">
+        <div class="poster__col col-12">
+
+          <label for="type_transport" class="poster__label col-12" required>
+            {{ l_transport }}
+          </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
+                  {% endif %}
+              >
+              <label class="cargo__label"
+                     for="type_transport_{{ forloop.counter }}">
+                <span>{{ item.1 }}</span>
+              </label>
+            </div>
+          {% endfor %}
+          {% if not errors_off and form.errors and form.errors.type_transport %}
+            <span>{{ form.errors.type_transport }}</span>
+          {% endif %}
+          <div class="poster__info">
+            {% translate "Обязательно учитывайте Правила и особенности перевозки выбранным Вами видом транспорта" %}
+          </div>
+        </div>
+      </div>
     {% endif %}
     {#phone#}
     <div class="poster__row poster__row--phone">
@@ -291,7 +319,7 @@
                type="text"
                pattern="[0-9\-+]{5,}"
                maxlength="30"
-               {% if form.initial.phone %}value="{{ form.initial.phone}}"{% endif %}
+               {% if form.initial.phone %}value="{{ form.initial.phone }}"{% endif %}
                placeholder="{% translate "Укажите телефон" %}"
                title="{% translate "Только цифры или - или +" %}"
         >
@@ -313,10 +341,9 @@
         <textarea
             name="comment"
             id="comment"
-            value="{{ form.initial.comment }}"
             maxlength="{{ maxLetterLength }}"
             placeholder="{% translate "Если желаете, то здесь можно указать важную информацию, например: вес, габариты посылки, количество попутчиков и т.д.)" %}"
-        ></textarea>
+        >{{ form.initial.comment }}</textarea>
         <div class="poster__area-descr">
           <span class="js-letter-count">0</span>
           {% translate "из" %}

templates/tb_base2.html

@@ -90,14 +90,9 @@
   <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" %}>

templates/widgets/w_ac_input_address_point.html

@@ -2,7 +2,7 @@
 {#    {% if airport_fullname %}<div>{{ airport_fullname|safe }}</div>{% endif %}#}
 {#    <div class="autocomplete-location"><img src="{{ MEDIA_URL }}{{ country__flag }}" alt="{{ country__name }}" />{{ country__short_code }} {{ name }} / {{ country__name }}</div>#}
 
- <div class="poster__towns-item" data-attrs='[{{ id }}, "{{ name }}/{{ country__name }}", "{{ ctrl_name }}", "{{ timezone }}", "{{ MEDIA_URL }}{{ country__flag }}"]'>
+ <div class="poster__towns-item" data-attrs='[{{ id }}, "{{ name }}/{{ country__name }}", "{{ country__short_code }}", "{{ timezone }}", "{{ MEDIA_URL }}{{ country__flag }}"]'>
     <img src="{{ MEDIA_URL }}{{ country__flag }}" alt="{{ country__name }}" />
     <span>{{ country__short_code }}</span>
     {{ name }}/{{ country__name }}