frontend for new db
This commit is contained in:
128
frontend/main.ts
128
frontend/main.ts
@ -22,11 +22,10 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
function setCurrentdate(input: HTMLInputElement) {
|
||||
if(input) {
|
||||
const inputElement = document.getElementById("departure") as HTMLInputElement;
|
||||
const now = new Date();
|
||||
const formattedDateTime = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}T${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`;
|
||||
|
||||
inputElement.value = formattedDateTime;
|
||||
input.value = formattedDateTime;
|
||||
}
|
||||
}
|
||||
|
||||
@ -53,9 +52,8 @@ function selectBoatChange() {
|
||||
)[0];
|
||||
|
||||
const rowers = Number(originalOption.dataset.amount_seats);
|
||||
const isShipmasterSteering = originalOption.dataset.default_shipmaster_only_steering;
|
||||
|
||||
setMaxAmountRowers(rowers,isShipmasterSteering);
|
||||
setMaxAmountRowers("newrower", rowers);
|
||||
|
||||
return opt;
|
||||
}
|
||||
@ -83,51 +81,51 @@ function reloadPage() {
|
||||
});
|
||||
}
|
||||
|
||||
function setMaxAmountRowers(rowers: number, isShipmasterSteering='false') {
|
||||
if(choiceObjects['newrower']) {
|
||||
let curSelection = choiceObjects['newrower'].getValue(true);
|
||||
function setMaxAmountRowers(name: string, rowers: number) {
|
||||
if(choiceObjects[name]) {
|
||||
let curSelection = choiceObjects[name].getValue(true);
|
||||
let amount_to_delete = (<any>curSelection).length - rowers;
|
||||
|
||||
if (amount_to_delete > 0){
|
||||
let to_delete = (<any>curSelection).slice(-amount_to_delete);
|
||||
for (let del of to_delete) {
|
||||
choiceObjects['newrower'].removeActiveItemsByValue(del);
|
||||
choiceObjects[name].removeActiveItemsByValue(del);
|
||||
}
|
||||
}
|
||||
|
||||
let input = <HTMLElement>document.querySelector('#newrower');
|
||||
let input = <HTMLElement>document.querySelector('#'+name);
|
||||
|
||||
if(input) {
|
||||
choiceObjects['newrower'].config.maxItemCount = rowers;
|
||||
choiceObjects[name].config.maxItemCount = rowers;
|
||||
if (rowers === 0) {
|
||||
choiceObjects['newrower'].disable()
|
||||
choiceObjects[name].disable()
|
||||
input.parentElement?.parentElement?.parentElement?.classList.add('hidden');
|
||||
input.parentElement?.parentElement?.parentElement?.classList.add('md:block');
|
||||
input.parentElement?.parentElement?.parentElement?.classList.add('opacity-50');
|
||||
} else{
|
||||
choiceObjects['newrower'].enable();
|
||||
choiceObjects[name].enable();
|
||||
input.parentElement?.parentElement?.parentElement?.classList.remove('hidden');
|
||||
input.parentElement?.parentElement?.parentElement?.classList.remove('md:block');
|
||||
input.parentElement?.parentElement?.parentElement?.classList.remove('opacity-50');
|
||||
}
|
||||
}
|
||||
|
||||
let only_steering = <HTMLSelectElement>document.querySelector('#shipmaster_only_steering');
|
||||
if(only_steering) {
|
||||
if(isShipmasterSteering == 'true') {
|
||||
only_steering.removeAttribute('disabled');
|
||||
only_steering.setAttribute('checked', 'true');
|
||||
only_steering.parentElement?.parentElement?.parentElement?.classList.remove('hidden');
|
||||
only_steering.parentElement?.parentElement?.parentElement?.classList.remove('md:block');
|
||||
only_steering.parentElement?.parentElement?.parentElement?.classList.remove('opacity-50');
|
||||
} else {
|
||||
only_steering.setAttribute('disabled', 'disabled');
|
||||
only_steering.removeAttribute('checked');
|
||||
only_steering.parentElement?.parentElement?.parentElement?.classList.add('hidden');
|
||||
only_steering.parentElement?.parentElement?.parentElement?.classList.add('md:block');
|
||||
only_steering.parentElement?.parentElement?.parentElement?.classList.add('opacity-50');
|
||||
}
|
||||
}
|
||||
//let only_steering = <HTMLSelectElement>document.querySelector('#shipmaster_only_steering');
|
||||
//if(only_steering) {
|
||||
// if(isShipmasterSteering == 'true') {
|
||||
// only_steering.removeAttribute('disabled');
|
||||
// only_steering.setAttribute('checked', 'true');
|
||||
// only_steering.parentElement?.parentElement?.parentElement?.classList.remove('hidden');
|
||||
// only_steering.parentElement?.parentElement?.parentElement?.classList.remove('md:block');
|
||||
// only_steering.parentElement?.parentElement?.parentElement?.classList.remove('opacity-50');
|
||||
// } else {
|
||||
// only_steering.setAttribute('disabled', 'disabled');
|
||||
// only_steering.removeAttribute('checked');
|
||||
// only_steering.parentElement?.parentElement?.parentElement?.classList.add('hidden');
|
||||
// only_steering.parentElement?.parentElement?.parentElement?.classList.add('md:block');
|
||||
// only_steering.parentElement?.parentElement?.parentElement?.classList.add('opacity-50');
|
||||
// }
|
||||
//}
|
||||
}
|
||||
}
|
||||
|
||||
@ -138,9 +136,8 @@ function initBoatActions() {
|
||||
select.addEventListener('click', function() {
|
||||
if(select.dataset.seats) {
|
||||
const rowers = Number(select.dataset.seats);
|
||||
const isShipmasterSteering = select.dataset.default_shipmaster_only_steering;
|
||||
|
||||
setMaxAmountRowers(rowers, isShipmasterSteering);
|
||||
setMaxAmountRowers("newrower", rowers);
|
||||
|
||||
if (select.dataset.id) {
|
||||
choiceObjects['boat_id'].setChoiceByValue(select.dataset.id);
|
||||
@ -174,6 +171,8 @@ interface ChoiceEvent extends Event{
|
||||
label: string,
|
||||
customProperties: {
|
||||
is_cox: boolean,
|
||||
steers: boolean,
|
||||
cox_on_boat: boolean,
|
||||
}
|
||||
};
|
||||
}
|
||||
@ -190,7 +189,50 @@ function initNewChoice(select: HTMLInputElement) {
|
||||
maxItemText: (maxItemCount) => {
|
||||
return `Nur ${maxItemCount} Ruderer können hinzugefügt werden`;
|
||||
},
|
||||
callbackOnCreateTemplates: function () {
|
||||
return {
|
||||
option: ({ label, value, customProperties, active, disabled, }: any) => {
|
||||
const opt: HTMLOptionElement = Choices.defaults.templates.option.call(
|
||||
this,
|
||||
{ label, value, customProperties, active, disabled }
|
||||
);
|
||||
|
||||
// We get the original <option> from choicejs
|
||||
//const originalOption: HTMLOptionElement = this._presetOptions.filter(
|
||||
// (option: HTMLOptionElement) => option.value === value
|
||||
//)[0];
|
||||
//
|
||||
//const rowers = Number(originalOption.dataset.amount_seats);
|
||||
//const isShipmasterSteering = originalOption.dataset.default_shipmaster_only_steering;
|
||||
|
||||
//setMaxAmountRowers(select.id, curr_boat_rowers, isShipmasterSteering);
|
||||
|
||||
return opt;
|
||||
}
|
||||
}
|
||||
},
|
||||
callbackOnInit: function() {
|
||||
this._currentState.items.forEach(function(obj){
|
||||
if (obj.customProperties && obj.customProperties.is_cox){
|
||||
const coxSelect = <HTMLSelectElement>document.querySelector('#shipmaster-' + select.id + 'js');
|
||||
var new_option = new Option(obj.label, obj.value);
|
||||
if (obj.customProperties.cox_on_boat){
|
||||
new_option.selected = true;
|
||||
}
|
||||
coxSelect.add(new_option);
|
||||
}
|
||||
const steeringSelect = <HTMLSelectElement>document.querySelector('#steering_person-' + select.id + 'js');
|
||||
if (steeringSelect) {
|
||||
var new_option = new Option(obj.label, obj.value);
|
||||
if (obj.customProperties && obj.customProperties.steers){
|
||||
new_option.selected = true;
|
||||
}
|
||||
steeringSelect.add(new_option);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
choiceObjects[select.id] = choice;
|
||||
|
||||
select.addEventListener('addItem', function(e) {
|
||||
const event = e as ChoiceEvent;
|
||||
@ -198,13 +240,13 @@ function initNewChoice(select: HTMLInputElement) {
|
||||
const name = event.detail.label;
|
||||
|
||||
if (event.detail.customProperties.is_cox) {
|
||||
const coxSelect = <HTMLSelectElement>document.querySelector('#shipmaster');
|
||||
const coxSelect = <HTMLSelectElement>document.querySelector('#shipmaster-' + select.id + 'js');
|
||||
if (coxSelect){
|
||||
coxSelect.add(new Option(name, user_id));
|
||||
}
|
||||
}
|
||||
|
||||
const steeringSelect = <HTMLSelectElement>document.querySelector('#steering_person');
|
||||
const steeringSelect = <HTMLSelectElement>document.querySelector('#steering_person-' + select.id + 'js');
|
||||
if (steeringSelect) {
|
||||
steeringSelect.add(new Option(name, user_id));
|
||||
}
|
||||
@ -215,7 +257,7 @@ function initNewChoice(select: HTMLInputElement) {
|
||||
|
||||
const user_id = event.detail.value;
|
||||
|
||||
const coxSelect = <HTMLSelectElement>document.querySelector('#shipmaster');
|
||||
const coxSelect = <HTMLSelectElement>document.querySelector('#shipmaster-' + select.id + 'js');
|
||||
if (coxSelect) {
|
||||
for (var i=0; i<coxSelect.length; i++) {
|
||||
if (coxSelect.options[i].value == user_id)
|
||||
@ -223,7 +265,7 @@ function initNewChoice(select: HTMLInputElement) {
|
||||
}
|
||||
}
|
||||
|
||||
const steeringSelect = <HTMLSelectElement>document.querySelector('#steering_person');
|
||||
const steeringSelect = <HTMLSelectElement>document.querySelector('#steering_person-' + select.id + 'js');
|
||||
if (steeringSelect) {
|
||||
for (var i=0; i<steeringSelect.length; i++) {
|
||||
if (steeringSelect.options[i].value == user_id)
|
||||
@ -419,12 +461,6 @@ function initTripSidebar(triggerElement: HTMLElement) {
|
||||
let bodyElement = <HTMLElement>body.cloneNode(true);
|
||||
let bodyContainerElement = <HTMLElement>sidebarElement.querySelector('.body-js');
|
||||
|
||||
const selects = bodyElement.querySelectorAll('select[multiple]');
|
||||
if(selects) {
|
||||
Array.prototype.forEach.call(selects, (select: HTMLInputElement) => {
|
||||
initNewChoice(select);
|
||||
});
|
||||
}
|
||||
|
||||
/* Quickfix duplicate ids checkboxes */
|
||||
const checkboxes = <NodeListOf<HTMLElement>>bodyElement.querySelectorAll('input[type="checkbox"]');
|
||||
@ -447,6 +483,7 @@ function initTripSidebar(triggerElement: HTMLElement) {
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
if(bodyContainerElement) {
|
||||
bodyContainerElement.innerHTML = '';
|
||||
bodyContainerElement.append(bodyElement);
|
||||
@ -464,7 +501,18 @@ function initTripSidebar(triggerElement: HTMLElement) {
|
||||
if(headerElement) {
|
||||
headerElement.innerHTML = triggerElement.dataset.header;
|
||||
}
|
||||
const selects = bodyElement.querySelectorAll('select[multiple]');
|
||||
if(selects) {
|
||||
Array.prototype.forEach.call(selects, (select: HTMLInputElement) => {
|
||||
initNewChoice(select);
|
||||
});
|
||||
}
|
||||
}
|
||||
const defaultDateTimes = <NodeListOf<HTMLInputElement>>document.querySelectorAll('.current-date-time');
|
||||
defaultDateTimes.forEach((defaultDateTime) => {
|
||||
setCurrentdate(defaultDateTime);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function addRelationMagic(bodyElement: HTMLElement) {
|
||||
|
||||
Reference in New Issue
Block a user