Ruderverein-Donau-Linz/rowt
1
1
Fork 1
Code Issues 49 Pull Requests Actions Packages Projects Wiki Activity

aaaaah

Browse Source
This commit is contained in:
philipp
2023-10-31 21:02:56 +01:00
parent d9c7c218bc dc4eddc044
commit 2d7c86f323
17 changed files with 606 additions and 368 deletions
Download Patch File Download Diff File Expand all files Collapse all files

201
frontend/main.ts
View File

@ -22,14 +22,23 @@ 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;
}
}
interface ChoiceBoatEvent extends Event{
detail: {
value: string;
label: string,
customProperties: {
amount_seats: number,
}
};
}
function selectBoatChange() {
const boatSelect = <HTMLSelectElement>document.querySelector('#boat_id');
@ -39,43 +48,22 @@ function selectBoatChange() {
noResultsText: 'Keine Ergebnisse gefunden',
noChoicesText: 'Keine Ergebnisse gefunden',
itemSelectText: 'Zum Auswählen klicken',
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) - 1;
const isShipmasterSteering = originalOption.dataset.default_shipmaster_only_steering;
setMaxAmountRowers(rowers,isShipmasterSteering);
return opt;
}
}
}
} as any);
choiceObjects[boatSelect.id] = boatChoice;
}
const shipmasterSelect = <HTMLSelectElement>document.querySelector('#shipmaster');
if(shipmasterSelect) {
const shipmasterChoice = new Choices(shipmasterSelect, {
loadingText: 'Wird geladen...',
noResultsText: 'Keine Ergebnisse gefunden',
noChoicesText: 'Keine Ergebnisse gefunden',
itemSelectText: 'Zum Auswählen klicken',
});
choiceObjects[shipmasterSelect.id] = shipmasterChoice;
boatSelect.addEventListener('addItem', function(e) {
const event = e as ChoiceBoatEvent;
const amount_seats = event.detail.customProperties.amount_seats;
setMaxAmountRowers("newrower", amount_seats);
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;
},false);
choiceObjects[boatSelect.id] = boatChoice;
choiceObjects["boat_id"] = boatChoice;
}
}
@ -95,29 +83,30 @@ function reloadPage() {
});
}
function setMaxAmountRowers(rowers: number, isShipmasterSteering='false') {
if(choiceObjects['newrower']) {
let curSelection = choiceObjects['newrower'].getValue(true);
let amount_to_delete = (<any>curSelection).length - rowers;
function setMaxAmountRowers(name: string, rowers: number) {
if(choiceObjects[name]) {
choiceObjects[name].removeActiveItems(-1);
//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);
}
}
//if (amount_to_delete > 0){
// let to_delete = (<any>curSelection).slice(-amount_to_delete);
// for (let del of to_delete) {
// 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');
@ -161,22 +150,11 @@ function initBoatActions() {
Array.prototype.forEach.call(boatSelects, (select: HTMLInputElement) => {
select.addEventListener('click', function() {
if(select.dataset.seats) {
const rowers = Number(select.dataset.seats) - 1;
const isShipmasterSteering = select.dataset.default_shipmaster_only_steering;
setMaxAmountRowers(rowers, isShipmasterSteering);
if (select.dataset.id) {
choiceObjects['boat_id'].setChoiceByValue(select.dataset.id);
}
window.scrollTo(0, 0);
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;
}
});
});
@ -192,7 +170,24 @@ function initChoices() {
}
}
interface ChoiceEvent extends Event{
detail: {
value: string;
label: string,
customProperties: {
is_cox: boolean,
steers: boolean,
cox_on_boat: boolean,
}
};
}
function initNewChoice(select: HTMLInputElement) {
let seats = 0;
if (select.dataset && select.dataset.seats) {
seats = +select.dataset.seats;
}
const choice = new Choices(select, {
removeItemButton: true,
loadingText: 'Wird geladen...',
@ -200,15 +195,77 @@ function initNewChoice(select: HTMLInputElement) {
noChoicesText: 'Keine Ergebnisse gefunden',
itemSelectText: 'Zum Auswählen klicken',
placeholderValue: 'Ruderer auswählen',
maxItemCount: -1, //TODO
maxItemCount: seats,
maxItemText: (maxItemCount) => {
return `Nur ${maxItemCount} Ruderer können hinzugefügt werden`;
},
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;
const user_id = event.detail.value;
const name = event.detail.label;
if (event.detail.customProperties.is_cox) {
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-' + select.id + 'js');
if (steeringSelect) {
steeringSelect.add(new Option(name, user_id));
}
},false);
select.addEventListener('removeItem', function(e) {
const event = e as ChoiceEvent;
const user_id = event.detail.value;
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)
coxSelect.remove(i);
}
}
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)
steeringSelect.remove(i);
}
}
},false);
choiceObjects[select.id] = choice;
}
function initToggle() {
// get filter btns & set object sessionStorage
const btns = <NodeListOf<HTMLButtonElement>>document.querySelectorAll('.filter-trips-js');
@ -392,12 +449,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"]');
@ -420,6 +471,7 @@ function initTripSidebar(triggerElement: HTMLElement) {
}
});
if(bodyContainerElement) {
bodyContainerElement.innerHTML = '';
bodyContainerElement.append(bodyElement);
@ -437,7 +489,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) {