[TASK] add working choices.js

frontend/logbook.ts

@@ -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');
 });

frontend/main.ts

@@ -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');
@@ -192,6 +240,13 @@ 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"]');
 

templates/includes/forms/log.html.tera

@@ -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) %}