[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');
@@ -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"]');