rowt/frontend/main.ts

import { Sidebar } from './js/sidebar';
import './scss/app.scss'

document.addEventListener('DOMContentLoaded', function() {
  initSearch();
  initSidebar();
  initToggle();
});

function initToggle() {
  const toggle = <HTMLInputElement>document.querySelector('#filterdays-js');

  if(toggle) {
    toggle.addEventListener('click', () => {
      toggle.ariaPressed = (toggle.ariaPressed === 'true') ? 'false' : 'true';

      const daysNoTrips = document.querySelectorAll('div[data-trips="0"]');
      Array.prototype.forEach.call(daysNoTrips, (day: HTMLElement) => {
        day.classList.toggle('hidden');
      });
    });
  }

  const coxToggle = <HTMLInputElement>document.querySelector('#filtertrips-js');

  if(coxToggle) {
    coxToggle.addEventListener('click', () => {
      coxToggle.ariaPressed = (coxToggle.ariaPressed === 'true') ? 'false' : 'true';

      const noCoxNeeded = document.querySelectorAll('div[data-coxneeded="false"]');
      Array.prototype.forEach.call(noCoxNeeded, (notNeeded: HTMLElement) => {
        notNeeded.classList.toggle('hidden');
      });
    });
  }

  const monthToggle = <HTMLInputElement>document.querySelector('#filtermonth-js');
  const months = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];

  if(monthToggle) {
    monthToggle.addEventListener('click', () => {
      monthToggle.ariaPressed = (monthToggle.ariaPressed === 'true') ? 'false' : 'true';
      const currentMonth = monthToggle.dataset.month;
      
      if(currentMonth) {
        const index = months.indexOf(currentMonth);
        if (index > -1) { // only splice array when item is found
          months.splice(index, 1); // 2nd parameter means remove one item only
        }

        Array.prototype.forEach.call(months, (month: HTMLElement) => {
          const notThisMonth = document.querySelectorAll('div[data-month="' + month + '"]');
          Array.prototype.forEach.call(notThisMonth, (notThisMonth: HTMLElement) => {
            notThisMonth.classList.toggle('hidden');
          });
        });
      }
    });
  }
}

function initSearch() {
  const input = <HTMLInputElement>document.querySelector('#filter-js');

  if(input) {
    filterElements(input.value);

    input.addEventListener('input', () => {
      filterElements(input.value);
    });
  }
}

function filterElements(input: string) {
  const elements = document.querySelectorAll('form[data-filterable="true"]');
  let resultWrapper = <HTMLElement>document.querySelector('#filter-result-js'),
      amountShownElements = 0;

  Array.prototype.forEach.call(elements, (element: HTMLElement) => {
    // set both strings (input & dataset filter) to lowercase to not be case sensitive
    let filterString = element.dataset.filter?.toLocaleLowerCase();
    
    // bulk hide all elements
    element.style.display = 'none';

    // show if input matches
    if(filterString?.includes(input.toLocaleLowerCase())) {
      element.style.display = 'flex';
      amountShownElements ++;
    }
  });

  if(resultWrapper) {
    resultWrapper.innerHTML = (amountShownElements === 0 ? 'Kein Ergebnis gefunden' : '<strong>' + amountShownElements + '</strong>' + (amountShownElements > 1 ? ' Ergebnisse' : ' Ergebnis') + ' gefunden');
  }
}

function initSidebar() {
  const sidebarTrigger = <NodeListOf<HTMLElement>>document.querySelectorAll('[data-trigger]');

  if(sidebarTrigger) {
    Array.prototype.forEach.call(sidebarTrigger, (triggerElement: HTMLElement) => {
      if(triggerElement.dataset.trigger) {
        const sidebar = new Sidebar(triggerElement.dataset.trigger);

        triggerElement.addEventListener('click', () => {
          if(triggerElement.dataset.trigger === 'addTrip') {
            initTripSidebar(triggerElement);
          }  

          sidebar.toggle();
        });
      }
    });
  }
}

function initTripSidebar(triggerElement: HTMLElement) {
  const sidebarElement = <HTMLElement>document.querySelector('#addTrip');
  if(sidebarElement && triggerElement.dataset.form && triggerElement.dataset.header) {
    let form = <HTMLElement>document.querySelector(triggerElement.dataset.form);
    let formElement = <HTMLElement>form.cloneNode(true);
    let formContainerElement = <HTMLElement>sidebarElement.querySelector('.form-js');
    if(formContainerElement) {
      formContainerElement.innerHTML = '';
      formContainerElement.append(formElement);
    }
    if(triggerElement.dataset.day) {
      let hiddenElement = <HTMLInputElement>formElement.querySelector('.day-js');
      if(hiddenElement) {
        hiddenElement.value = triggerElement.dataset.day;
      }
    }

    let headerElement = sidebarElement.querySelector('.header-js');
    if(headerElement) {
      headerElement.innerHTML = triggerElement.dataset.header;
    }
  }
}