TRI-293: add custom and mover handler + mover page poster
This commit is contained in:
309
static/js/form-poster.js
Normal file
309
static/js/form-poster.js
Normal file
@@ -0,0 +1,309 @@
|
||||
!function () {
|
||||
'use strict';
|
||||
|
||||
var posterApp = {
|
||||
|
||||
initDatePickerr: function () {
|
||||
const _this = this;
|
||||
[this._selector.inpDeparture, this._selector.inpArrival].forEach(i => {
|
||||
let date = i.val();
|
||||
|
||||
if (!i.length) return false
|
||||
let startDate = null
|
||||
if (window.location.href.includes("/ru/")) {
|
||||
startDate = moment(date, "D MMMM YYYY г. HH:mm", 'ru');
|
||||
} else {
|
||||
startDate = moment(date, "MMMM D, YYYY, h:mm a", 'en');
|
||||
}
|
||||
if (!i.attr('hidden')) {
|
||||
|
||||
i.daterangepicker({
|
||||
"autoapply": true,
|
||||
"linkedCalendars": false,
|
||||
"singleDatePicker": true,
|
||||
"timePicker": true,
|
||||
"timePicker24Hour": true,
|
||||
"minDate": startDate,
|
||||
"locale": changeLangForDateTimePicker(),
|
||||
}, function (start, end, label) {
|
||||
i.val(start.format('DD.MM.YYYY HH:mm'));
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
changeCargoType: 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')
|
||||
})
|
||||
// change other type
|
||||
this.handlerDisabled(inpTypePassenger,inpTypeAvia,'passenger')
|
||||
},
|
||||
|
||||
handlerDisabled: function (el,el2,text) {
|
||||
if($(el).val() === 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')
|
||||
})
|
||||
},
|
||||
|
||||
initHandlerItemsTowns: function (el) {
|
||||
el.list.off('click.item').on('click.item', (e) => {
|
||||
let target = $(e.target)
|
||||
let item = target.hasClass('autocomplete-result') ? target : target.parents('.autocomplete-result')
|
||||
let dataStr = item.data('attr')
|
||||
if (!dataStr.length) return
|
||||
dataStr = dataStr.slice(1, -1).replace(/"/g, '');
|
||||
|
||||
let [id, txt, name, date] = dataStr.split(', ');
|
||||
let inpNames = {
|
||||
id: 'from_address_point',
|
||||
txt: 'from_address_point_txt',
|
||||
date: 'departure_DT'
|
||||
}
|
||||
|
||||
if (name.match(/to/)) {
|
||||
inpNames = {
|
||||
id: 'to_address_point',
|
||||
txt: 'to_address_point_txt',
|
||||
date: 'arrival_DT'
|
||||
}
|
||||
}
|
||||
|
||||
const collection = this._selector.root[0].elements;
|
||||
collection[inpNames.id].value = id;
|
||||
collection[inpNames.txt].value = txt;
|
||||
collection[inpNames.date].value = date;
|
||||
this.handlerShowList(el)
|
||||
})
|
||||
},
|
||||
|
||||
setDataTowns: function (data, inp) {
|
||||
if (!data.res_search_list.length) return
|
||||
const newSearchlist = data.res_search_list.replace(/onmousedown=\'selectItemAddrPoint/g, 'data-attr=\'')
|
||||
inp.list.html(newSearchlist);
|
||||
},
|
||||
|
||||
handlerPageOut: function () {
|
||||
let observer = new MutationObserver((e) => {
|
||||
for (let mutation of e) {
|
||||
for (let node of mutation.addedNodes) {
|
||||
if (!(node instanceof HTMLElement)) continue;
|
||||
if (node.classList.contains('poster')) {
|
||||
posterApp.init()
|
||||
observer.disconnect();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
observer.observe(this._selector.wrapper[0], {
|
||||
childList: true,
|
||||
subtree: false,
|
||||
characterDataOldValue: false
|
||||
});
|
||||
},
|
||||
|
||||
handlerShowList: function (i, isHide) {
|
||||
if (!isHide && i.list.text()) {
|
||||
i.list.toggleClass('show')
|
||||
} else {
|
||||
i.list.removeClass('show')
|
||||
}
|
||||
},
|
||||
|
||||
getDataForm: function (isObj) {
|
||||
let formData = new FormData(this._selector.root[0]);
|
||||
if (isObj) return Object.fromEntries(formData)
|
||||
return formData;
|
||||
},
|
||||
|
||||
initSubmit: function () {
|
||||
const _this = this;
|
||||
this._selector.root.off('submit').on('submit', function (e) {
|
||||
e.preventDefault();
|
||||
let routeId = _this._selector.submitBtn.data('routeId');
|
||||
var formData = _this.getDataForm();
|
||||
let url = '/routes/create_or_change_route/'
|
||||
if (routeId) {
|
||||
url = '/routes/change_route/' + routeId + '/'
|
||||
}
|
||||
$.ajax({
|
||||
headers: {"X-CSRFToken": $('input[name=csrfmiddlewaretoken]').val()},
|
||||
url: url,
|
||||
type: "POST",
|
||||
cache: false,
|
||||
processData: false,
|
||||
contentType: false,
|
||||
data: formData,
|
||||
success: function (data) {
|
||||
return
|
||||
let data_route_id = data.route_id
|
||||
document.querySelector(".info_profile").innerHTML = data.html
|
||||
|
||||
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) {
|
||||
document.querySelector(".info_profile").innerHTML = data.responseJSON.html;
|
||||
document.getElementById('departure_DT')?.scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: 'nearest',
|
||||
inline: 'nearest'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
getTowns: function (el) {
|
||||
const _this = this;
|
||||
let timer = null
|
||||
if (timer) {
|
||||
clearTimeout(timer);
|
||||
}
|
||||
timer = setTimeout(function () {
|
||||
timer = null;
|
||||
let data = _this.getDataForm(true);
|
||||
let getTownData = {
|
||||
type_transport: data.type_transport,
|
||||
search_str: el.val(),
|
||||
ctrl_name: el.attr('name')
|
||||
}
|
||||
$.ajax({
|
||||
headers: {"X-CSRFToken": $('input[name=csrfmiddlewaretoken]').val()},
|
||||
url: '/reference_data/get_address_point/',
|
||||
type: "POST",
|
||||
cache: false,
|
||||
processData: false,
|
||||
contentType: false,
|
||||
data: JSON.stringify(getTownData),
|
||||
success: function (data) {
|
||||
el.removeClass('loading');
|
||||
const {res_search_list, unanswered_msgs_count} = data;
|
||||
_this.setDataTowns(data, el)
|
||||
_this.initHandlerItemsTowns(el)
|
||||
_this.handlerShowList(el)
|
||||
if (res_search_list.length) {
|
||||
el.addClass('is-items')
|
||||
el.parent().addClass('is-items')
|
||||
el.list.addClass('is-items')
|
||||
} else {
|
||||
el.parent().removeClass('is-items')
|
||||
el.removeClass('is-items')
|
||||
el.list.removeClass('is-items')
|
||||
}
|
||||
console.log('fetch', data)
|
||||
},
|
||||
error: function (data) {
|
||||
|
||||
console.log('Error')
|
||||
|
||||
}
|
||||
});
|
||||
}, 500);
|
||||
},
|
||||
|
||||
handlerSearchTown: function (e, i) {
|
||||
this._cl('handlerSearchTown');
|
||||
let el = i;
|
||||
|
||||
if (el.val().length > 2) {
|
||||
el.addClass('loading');
|
||||
this.getTowns(el);
|
||||
} else {
|
||||
el.removeClass('loading');
|
||||
}
|
||||
},
|
||||
|
||||
initHandlerRoute: function () {
|
||||
this._cl('initHandlerRoute');
|
||||
const _this = this;
|
||||
[this._selector.inpFrom, this._selector.inpTo].forEach(i => {
|
||||
if (!i.length) return false
|
||||
i.off('input.routes').on('input.routes', (e) => _this.handlerSearchTown(e, i));
|
||||
i.off('click.routes').on('click.routes', () => _this.handlerShowList(i));
|
||||
i.list.off('mouseleave.routes').on('mouseleave.routes', () => _this.handlerShowList(i, true));
|
||||
});
|
||||
},
|
||||
|
||||
_cl: function (description, obj, debug) {
|
||||
if (debug || this._data.debug) {
|
||||
if (obj === undefined) {
|
||||
console.log(description);
|
||||
} else {
|
||||
console.log(obj, description);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
initData: function (root) {
|
||||
window.posterApp = this;
|
||||
this._data = {
|
||||
debug: true
|
||||
};
|
||||
this._selector = {
|
||||
root: root,
|
||||
wrapper: $('.info_profile'),
|
||||
inpFrom: root.find('#from'),
|
||||
inpFromList: root.find('#from').siblings('.poster__towns-list'),
|
||||
inpTo: root.find('#to'),
|
||||
inpToList: root.find('#to').siblings('.poster__towns-list'),
|
||||
cargoItems: root.find('.cargo__inp[name="cargo_type"]'),
|
||||
typeItems: root.find('.cargo__inp[name="type_transport"]'),
|
||||
inpDeparture: root.find('#departure_DT'),
|
||||
inpArrival: root.find('#arrival_DT'),
|
||||
submitBtn: root.find('button')
|
||||
};
|
||||
this._selector.inpFrom.list = this._selector.inpFromList
|
||||
this._selector.inpFrom.date = this._selector.inpDeparture
|
||||
this._selector.inpTo.list = this._selector.inpToList
|
||||
this._selector.inpTo.date = this._selector.inpArrival
|
||||
},
|
||||
|
||||
init: function () {
|
||||
let root = $('#poster__form');
|
||||
if (!root.length) return false
|
||||
this.initData(root);
|
||||
this._cl('posterApp init');
|
||||
this._cl(this);
|
||||
this.handlerPageOut();
|
||||
this.initHandlerRoute();
|
||||
this.initDatePickerr()
|
||||
this.initSubmit();
|
||||
this.changeCargoType();
|
||||
this.changeTransportType()
|
||||
},
|
||||
};
|
||||
|
||||
$(function () {
|
||||
posterApp.init();
|
||||
});
|
||||
}();
|
||||
@@ -281,13 +281,9 @@ function searchTown(el){
|
||||
|
||||
if (el.value.length > 2){
|
||||
el.style.background = 'white url("/static/img/svg/loader.svg") no-repeat calc(100% - 15px) center';
|
||||
|
||||
|
||||
|
||||
}else {
|
||||
el.style.background = 'white url("/static/img/png/icon-arrow.svg") no-repeat calc(100% - 15px) center';
|
||||
}
|
||||
|
||||
if(el.value.length>=3){
|
||||
let timer = null
|
||||
if (timer) {
|
||||
@@ -319,10 +315,6 @@ function searchTown(el){
|
||||
success: function(data){
|
||||
el.style.background = 'white url("/static/img/png/icon-arrow.svg") no-repeat calc(100% - 15px) center';
|
||||
loader_place_ins_boris(el,"el")
|
||||
|
||||
|
||||
|
||||
|
||||
return insertSearchList(data, el.name + '_list');
|
||||
middleWareJS()
|
||||
},
|
||||
|
||||
@@ -52,13 +52,19 @@ function select_tab_profile (el,url,owner_type=null, check_orders_required) {
|
||||
let confirm_url_f_lang_ru = ''
|
||||
let confirm_url_f_lang_en = ''
|
||||
if (owner_type){
|
||||
window.history.pushState(null, null, `/${document.documentElement.lang}/profile/page/${profile_tabs_f_static_map.get(`${url}_${owner_type}`)}`)
|
||||
window.history.pushState({ prevUrl: window.location.href }, null, `/${document.documentElement.lang}/profile/page/${profile_tabs_f_static_map.get(`${url}_${owner_type}`)}`)
|
||||
confirm_url_f_lang_ru = `/ru/profile/page/${profile_tabs_f_static_map.get(`${url}_${owner_type}`)}/`
|
||||
confirm_url_f_lang_en = `/en/profile/page/${profile_tabs_f_static_map.get(`${url}_${owner_type}`)}/`
|
||||
if(!window.history.state.prevUrl.match(/create/)) {
|
||||
window.location.reload()
|
||||
}
|
||||
} else {
|
||||
window.history.pushState(null, null, `/${document.documentElement.lang}/profile/page/${profile_tabs_f_static_map.get(url)}/`)
|
||||
window.history.pushState({ prevUrl: window.location.href }, null, `/${document.documentElement.lang}/profile/page/${profile_tabs_f_static_map.get(url)}/`)
|
||||
confirm_url_f_lang_ru = `/ru/profile/page/${profile_tabs_f_static_map.get(url)}/`
|
||||
confirm_url_f_lang_en = `/en/profile/page/${profile_tabs_f_static_map.get(url)}/`
|
||||
if(window.history.state.prevUrl.match(/create/)) {
|
||||
window.location.reload()
|
||||
}
|
||||
}
|
||||
document.querySelector("#ru_lang").href = confirm_url_f_lang_ru
|
||||
document.querySelector("#en_lang").href = confirm_url_f_lang_en
|
||||
|
||||
Reference in New Issue
Block a user