li7y/static/app.js

// SPDX-FileCopyrightText: 2024 Simon Bruder <simon@sbruder.de>
//
// SPDX-License-Identifier: AGPL-3.0-or-later

(() => {
  // Allows a form checkbox to toggle an input element.
  // This requires the form to have a structure like described in the bootstrap documentation:
  // https://getbootstrap.com/docs/5.3/forms/input-group/#checkboxes-and-radios
  const inputToggle = target => {
    target.parentElement.parentElement.querySelector("input:not(.input-toggle)").disabled = !target.checked
  }
  Array.from(document.getElementsByClassName("input-toggle")).forEach(el => {
    inputToggle(el)
    el.addEventListener("change", e => inputToggle(e.target))
  })

  const datalistHint = (input, hint) => {
    const selected = input.list.querySelector(`option[value="${input.value}"]`);
    hint.innerHTML = ""
    if (selected !== null) {
      const linkPrefix = input.list.dataset.linkPrefix;
      if (linkPrefix === undefined) {
        hint.innerHTML = selected.innerHTML
      } else {
        let link = document.createElement("a")
        link.href = `${linkPrefix}${input.value}`
        link.innerHTML = selected.innerHTML
        hint.appendChild(link)
      }
    }
  }
  Array.from(document.getElementsByClassName("datalist-hint")).forEach(hint => {
    const input = hint.parentElement.querySelector("input[list]")
    datalistHint(input, hint)
    input.addEventListener("input", _ => datalistHint(input, hint))
  })

  // there probably is a better way
  if (document.location.pathname === "/labels") {
    const multiselect = document.getElementById("ids-multiselect")
    const updateSelectedItemList = _ => {
      const list = document.getElementById("simple-items")
      list.innerHTML = ""
      Array.from(multiselect.selectedOptions)
        .map(option => {
          let li = document.createElement("li")
          let a = document.createElement("a")
          a.innerHTML = document.getElementById("items-datalist").querySelector(`option[value="${option.value}"]`).innerHTML
          a.href = `/item/${option.value}`
          li.appendChild(a)
          let remove = document.createElement("a")
          remove.classList = "btn btn-sm btn-danger ms-2 my-1 simple-items-remove"
          remove.dataset.id = option.value
          remove.innerText = "Remove"
          remove.addEventListener("click", e => {
            multiselect.querySelector(`option[value="${option.value}"]`).selected = false
            updateSelectedItemList()
          })
          li.appendChild(remove)
          return li
        })
        .forEach(li => list.appendChild(li))
    }
    updateSelectedItemList()
    addEventListener("input", _ => updateSelectedItemList())

    const addFromSimple = _ => {
      const inputEl = document.getElementById("simple-add")
      document.getElementById("ids-multiselect").querySelector(`option[value="${inputEl.value}"]`).selected = true
      inputEl.value = ""
      updateSelectedItemList()
    }
    document.getElementById("simple-add-button").addEventListener("click", addFromSimple)
    document.getElementById("simple-add").addEventListener("keydown", e => {
      if (e.key === "Enter") {
        e.preventDefault() // do not submit form
        addFromSimple()
      }
    })

    document.getElementById("label-form").addEventListener("submit", e => {
      document.getElementById("ids").value = Array.from(multiselect.selectedOptions)
        .map(option => option.value)
        .join(",")
    })
  }

  document.getElementById("add-event-modal").addEventListener("show.bs.modal", e => {
    document.getElementById("event").value = e.relatedTarget.dataset.eventType
  })
})()