photochamber-webserver/static/public/js/uiFilter.js

$(() => {
    window.ReloadFilters = function(mediaManager) {
        let buildFilterBar = (labelText, canBeEmpty, possibleValues) => {
            let result = document.createElement("div");
            result.className = "col-12 col-xl-4 col-md-6"
            let label = document.createElement('label');
            result.appendChild(label);
            label.textContent = labelText;
            let select = document.createElement('select');
            select.multiple = 'multiple';
            label.appendChild(select);
            for (let i of [].concat(canBeEmpty ? [undefined] : [], possibleValues)) {
                let opt = document.createElement("option");
                opt.textContent = i ? i : "(Empty)";
                opt.value = i ?? "";
                select.appendChild(opt);
            }
            $(select).change(e => {
                let val = Array.from(select.children).filter(i => i.selected).map(i => i.value === '' ? undefined : i.value);
                window.FilterManager.setFilterValue(labelText, val);
            });
            $(select).bsMultiSelect({cssPatch: {
                picks: { backgroundColor: 'inherit' },
                pick: { color: 'var(--bs-body-color)' },
                choiceContent: { color: 'var(--bs-body-color)' }
            }});
            return {
                content: result
            };
        };

        let container = document.getElementById('pch-filterbar');
        container.textContent = '';
        for (let i of Object.keys(mediaManager.allMetaTypes).filter(i => mediaManager.allMetaTypes[i].type === 'string')) {
            let filterUi = buildFilterBar(i, mediaManager.allMetaTypes[i].canBeEmpty, Array.from(mediaManager.allMeta[i]).sort());
            container.appendChild(filterUi.content);
        }

        let filterUi = buildFilterBar("Tags", true, Array.from(mediaManager.allTags).sort());
        container.appendChild(filterUi.content);
    }

    document.getElementById('pch-navbar-filterToggle').addEventListener('click', e => {
        e.preventDefault();
        let filterBarDom = document.getElementById('pch-filterbarContainer');
        if (filterBarDom.style.display)
            filterBarDom.style.display = "";
        else
            filterBarDom.style.display = "flex"
    });

    document.addEventListener("keydown", evt => {
        if (evt.keyCode === 27)
            document.getElementById('pch-filterbarContainer').style.display = "";
    });
});