358 lines
11 KiB
JavaScript
358 lines
11 KiB
JavaScript
!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
|
||
},
|
||
|
||
|
||
initDatePickerr: function () {
|
||
const _this = this;
|
||
[this._selector.inpDeparture, this._selector.inpArrival].forEach(i => {
|
||
if (!i.length) return
|
||
let date = i.val().trim() ? i.val() : new Date();
|
||
let startDate = null
|
||
if (window.location.href.includes("/ru/")) {
|
||
startDate = moment(date, this._data.formatDateClient, 'ru');
|
||
} else {
|
||
startDate = moment(date, this._data.formatDateClient, 'en');
|
||
}
|
||
if (!i.attr('hidden')) {
|
||
i.daterangepicker({
|
||
"autoapply": true,
|
||
"linkedCalendars": false,
|
||
"singleDatePicker": true,
|
||
"timePicker": false,
|
||
"timePicker24Hour": false,
|
||
"minDate": startDate,
|
||
"locale": _this.changeLangForDateTimePicker(),
|
||
}, function (start, end, label) {
|
||
i.val(start.format('DD.MM.YYYY'));
|
||
});
|
||
}
|
||
|
||
i.off('mouseleave.i-disable').on('mouseleave.i-disable', e => {
|
||
i.attr('readonly', false);
|
||
i.blur();
|
||
})
|
||
i.off('mouseover.i-disable').on('mouseover.i-disable', e => {
|
||
i.attr('readonly', true);
|
||
})
|
||
i.off('focus.i-disable').on('focus.i-disable', e => {
|
||
i.blur()
|
||
})
|
||
});
|
||
|
||
},
|
||
|
||
|
||
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).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(this.getDataForm(true).cargo_type, inpTypeAvia, 'passenger')
|
||
this.handlerDisabled(this.getDataForm(true).type_transport, inpTypePassenger, 'avia')
|
||
},
|
||
|
||
handlerDisabled: function (el, el2, text) {
|
||
if (el === text) {
|
||
$(el2).attr('disabled', true);
|
||
} else {
|
||
$(el2).attr('disabled', false);
|
||
}
|
||
},
|
||
|
||
createInpCoutryData: function (el, data) {
|
||
el.dataCoutry?.remove();
|
||
let template =
|
||
`<div class="poster__inp-country">
|
||
<img src="${data[4]}" alt="${data[1]}">
|
||
<span>${data[2] || 'BY'}</span>
|
||
</div>`;
|
||
el.after(template);
|
||
el.dataCoutry = el.next('.poster__inp-country');
|
||
el.parent().addClass('is-set')
|
||
},
|
||
|
||
initHandlerItemsTowns: function (el) {
|
||
el.list.off('click.item').on('click.item', (e) => {
|
||
let target = $(e.target)
|
||
let item = target.hasClass('poster__towns-item') ? target : target.parents('.poster__towns-item')
|
||
let data = item.data('attrs')
|
||
if (!data.length) return
|
||
let [id, txt] = data;
|
||
this.createInpCoutryData(el, data);
|
||
|
||
let inpNames = {
|
||
id: 'from_city',
|
||
txt: 'from_address_point_txt',
|
||
}
|
||
|
||
if (el[0].name.match(/to/)) {
|
||
inpNames = {
|
||
id: 'to_city',
|
||
txt: 'to_address_point_txt',
|
||
}
|
||
}
|
||
|
||
const collection = this._selector.root[0].elements;
|
||
collection[inpNames.id].value = id;
|
||
collection[inpNames.txt].value = txt;
|
||
this.handlerShowList(el);
|
||
el.prevValue = el.val();
|
||
})
|
||
},
|
||
|
||
setDataTowns: function (data, inp) {
|
||
const newSearchlist = data.res_search_list;
|
||
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;
|
||
},
|
||
|
||
validForm: function () {
|
||
let elems = this._selector.root[0].elements
|
||
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);
|
||
}
|
||
},
|
||
|
||
initSubmit: function () {
|
||
const _this = this;
|
||
this._selector.root.off('submit').on('submit', function (e) {
|
||
e.preventDefault();
|
||
_this.validForm();
|
||
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 + '/'
|
||
}
|
||
_this._cl(_this.getDataForm(true))
|
||
$.ajax({
|
||
headers: {"X-CSRFToken": $('input[name=csrfmiddlewaretoken]').val()},
|
||
url: url,
|
||
type: "POST",
|
||
cache: false,
|
||
processData: false,
|
||
contentType: false,
|
||
data: formData,
|
||
success: function (data) {
|
||
_this._selector.wrapper.html(data.html);
|
||
_this._cl('data success',data)
|
||
window.location.assign(location.pathname.split('/').slice(0,-2).join('/') + '/my_routes')
|
||
},
|
||
error: function (data, exception) {
|
||
_this._cl('is-error data', data)
|
||
_this._selector.wrapper.html(data.responseJSON.html);
|
||
setTimeout(()=>{
|
||
$('.errorlist>li').parents('.poster__row')[0]?.scrollIntoView({
|
||
behavior: "smooth",
|
||
block: 'nearest',
|
||
inline: 'nearest'
|
||
});
|
||
})
|
||
}
|
||
});
|
||
});
|
||
},
|
||
|
||
getTowns: function (el) {
|
||
const _this = this;
|
||
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} = 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')
|
||
}
|
||
_this._cl('fetch', data)
|
||
},
|
||
error: function (data) {
|
||
|
||
console.log('Error')
|
||
|
||
}
|
||
});
|
||
},
|
||
|
||
handlerSearchTown: function (e, i) {
|
||
this._cl('handlerSearchTown');
|
||
let el = i;
|
||
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()
|
||
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) {
|
||
this._cl('in')
|
||
el.addClass('loading');
|
||
clearTimeout(el.timer)
|
||
el.timer = setTimeout(() => {
|
||
this.getTowns(el);
|
||
el.timer = null;
|
||
}, 500)
|
||
} else {
|
||
el.removeClass('loading');
|
||
}
|
||
el.prevValue = el.val();
|
||
},
|
||
|
||
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.parent().off('click.routes').on('click.routes', () => _this.handlerShowList(i));
|
||
i.parent().parent().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;
|
||
window.mobileWidth = 768;
|
||
this._data = {
|
||
debug: true,
|
||
formatDate: 'DD.MM.YYYY',
|
||
formatDateClient: window.location.href.includes("/ru/")
|
||
? "D MMMM YYYY г."
|
||
: "MMMM D, YYYY",
|
||
|
||
};
|
||
this._selector = {
|
||
root: root,
|
||
wrapper: $('.info_profile'),
|
||
inpFrom: root.find('#from'),
|
||
inpFromList: root.find('#from').parent().siblings('.poster__towns-list'),
|
||
inpTo: root.find('#to'),
|
||
inpToList: root.find('#to').parent().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.changeDisabledType();
|
||
},
|
||
};
|
||
|
||
$(function () {
|
||
posterApp.init();
|
||
});
|
||
}(); |