93 lines
3.6 KiB
JavaScript
93 lines
3.6 KiB
JavaScript
// 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}"]`);
|
|
if (selected === null)
|
|
hint.innerText = ""
|
|
else {
|
|
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
|
|
})
|
|
})()
|