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

[TASK] add working choices.js

Browse Source
This commit is contained in:
Marie Birner 2023-09-23 21:05:08 +02:00
parent 2abd483a3f
commit c0366edbe1
3 changed files with 60 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/logbook.ts
View File

@ -1,13 +1,3 @@
import Choices from "choices.js";
const selects = document.querySelectorAll('select[multiple]');
if(selects) {
Array.prototype.forEach.call(selects, (select: HTMLInputElement) => {
const choices = new Choices(select);
});
}
/*document.addEventListener('DOMContentLoaded', function() {
setDistance('.set-distance-js');
});

57
frontend/main.ts
View File

@ -1,14 +1,62 @@
import Choices from "choices.js";
import { Sidebar } from './js/sidebar';
import './scss/app.scss'
export interface choiceMap {
[details: string]: Choices;
}
let choiceObjects: choiceMap = {};
document.addEventListener('DOMContentLoaded', function() {
initSearch();
initSidebar();
initToggle();
replaceStrings();
initChoices();
initBoatActions();
});
function initBoatActions() {
const boatSelects = document.querySelectorAll('.boats-js[data-onclick="true"]');
if(boatSelects) {
Array.prototype.forEach.call(boatSelects, (select: HTMLInputElement) => {
select.addEventListener('click', function() {
if(select.dataset.seats) {
const rowers = Number(select.dataset.seats) - 1;
choiceObjects['newrower'].config.maxItemCount = rowers;
choiceObjects['newrower'].removeActiveItems(rowers);
}
});
});
}
}
function initChoices() {
const selects = document.querySelectorAll('select[data-init="true"]');
if(selects) {
Array.prototype.forEach.call(selects, (select: HTMLInputElement) => {
initNewChoice(select);
});
}
}
function initNewChoice(select: HTMLInputElement) {
const choice = new Choices(select, {
removeItemButton: true,
loadingText: 'Wird geladen...',
noResultsText: 'Keine Ergebnisse gefunden',
noChoicesText: 'Keine Ergebnisse gefunden',
itemSelectText: 'Zum Auswählen klicken',
placeholderValue: 'Ruderer auswählen',
maxItemCount: Number(select.dataset.seats) - 1,
maxItemText: (maxItemCount) => {
return `Nur ${maxItemCount} Ruderer können hinzugefügt werden`;
},
});
choiceObjects[select.id] = choice;
}
function initToggle() {
// get filter btns & set object sessionStorage
const btns = <NodeListOf<HTMLButtonElement>>document.querySelectorAll('.filter-trips-js');
@ -191,6 +239,13 @@ function initTripSidebar(triggerElement: HTMLElement) {
let body = <HTMLElement>document.querySelector(triggerElement.dataset.body);
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"]');

13
templates/includes/forms/log.html.tera
View File

@ -13,7 +13,7 @@
<strong>{{ amount_seats }}x</strong>
</div>
{% for boat in grouped_boats %}
<div id="boat-{{ boat.id }}" class="px-3" {% if boat.damage != 'locked' %} onclick="document.getElementById('boat_id').value={{ boat.id }}; document.getElementById('newrower-max_rower_allowed').innerHTML={{ boat.amount_seats }}; document.getElementById('departure').value = new Date().toISOString().slice(0,16);" {% endif %}>
<div id="boat-{{ boat.id }}" class="px-3 boats-js" {% if boat.damage != 'locked' %} data-seats="{{boat.amount_seats}}" data-onclick="true" {% endif %}>
<span class="status-damage status-damage-{{ boat.damage }}"></span>
<span {% if boat.damage == 'locked' or boat.on_water %} class="opacity-50" {% endif %}>{{ boat.name }}
{% if boat.owner %}
@ -52,7 +52,7 @@
{% endif %}
{% if not only_ones %}
{{ log::rower_select(id="newrower", selected=[], class="col-span-2") }}
{{ log::rower_select(id="newrower", selected=[], class="col-span-2", init=true) }}
{% endif %}
<div></div>
@ -103,9 +103,9 @@
{% endif %}
{% endmacro boat_select %}
{% macro rower_select(id, selected, amount_seats='', class='') %}
{% macro rower_select(id, selected, amount_seats='', class='', init='false') %}
<div class="{{ class }}">
<select style="width: 100%;" multiple data-multi-select-plugin name="rowers[]" id="{{id}}" class="w-full">
<select style="width: 100%;" multiple name="rowers[]" id="{{id}}" class="w-full" data-seats="{{amount_seats}}" data-init={{init}}>
{% for user in users %}
{% set_global sel = false %}
{% for rower in selected %}
@ -117,11 +117,6 @@
{% endfor %}
</select>
</div>
<div>
<span id="{{id}}-amount_rower_selected"></span>
<span id="{{id}}-max_rower_allowed">{{amount_seats}}</span>
Ruderer auszuwählen
</div>
{% endmacro rower_select %}
{% macro show(log, state, allowed_to_close=false, only_ones) %}