Fix #40 manage short polling update on filters

static/public/js/filters.js

@@ -18,6 +18,13 @@ window.FilterManager = (() => {
                 document.body.classList.remove("filter-active");
         }
 
+        getFilterValues(key) {
+            return {
+                include: this.#filters[key] || [],
+                exclude: this.#excludeFilters[key] || []
+            };
+        }
+
         setFilterValue(key, val) {
             this.#filters[key] = val;
         }

static/public/js/medias.js

@@ -166,8 +166,8 @@ class MediaStorage extends EventTarget
                         this.loadingVersion = parseInt(data.maxVersion);
                     if ((data.data?.length || 0) < requestCount) {
                         this.#isLoading = false;
-                        this.#updateDbVersion(this.loadingVersion);
-                        window.ReloadFilters(MediaStorage.Instance);
+                        let updated = this.#updateDbVersion(this.loadingVersion);
+                        window.ReloadFilters(MediaStorage.Instance, updated);
                         this.dispatchEvent(new CustomEvent("doneLoading"));
                         document.getElementById("pch-infiniteScrollLoading").classList.add("hidden");
                     } else {
@@ -188,7 +188,9 @@ class MediaStorage extends EventTarget
     getDbVersion() { return this.#dbVersion; }
 
     #updateDbVersion(version) {
+        let previousVal = this.#dbVersion;
         this.#dbVersion = Math.max(this.#dbVersion, version);
+        return previousVal !== this.#dbVersion;
     }
 
     #pushMeta(metaKey, metaVal) {

static/public/js/uiFilter.js

@@ -79,7 +79,7 @@ $(() => {
 
     const EMPTY_STRING = "(Empty)";
 
-    window.ReloadFilters = function(mediaManager) {
+    window.ReloadFilters = function(mediaManager, onNewData) {
         let buildFilterBar = (labelText, canBeEmpty, possibleValues) => {
             let result = document.createElement("div");
             result.className = INPUT_CONTAINER_CLASSES;
@@ -91,10 +91,21 @@ $(() => {
             select.multiple = 'multiple';
             label.appendChild(select);
             let allPossibleValues = [].concat(canBeEmpty ? [undefined] : [], possibleValues);
+            let currentSelection = window.FilterManager.getFilterValues(labelText);
+            let existingValue = currentSelection.include.filter(x => allPossibleValues.indexOf(x) >= 0);
+            if (existingValue.length != currentSelection.include.length)
+                window.FilterManager.setFilterValue(labelText, existingValue);
+            existingValue = currentSelection.exclude.filter(x => allPossibleValues.indexOf(x) >= 0);
+            if (existingValue.length != currentSelection.exclude.length)
+                window.FilterManager.setExclusionFilter(labelText, existingValue);
             for (let i of allPossibleValues) {
                 let opt = document.createElement("option");
                 opt.textContent = i ? i : EMPTY_STRING;
                 opt.value = i ?? "";
+                if (currentSelection.include.indexOf(opt.value) >= 0)
+                    opt.selected = true;
+                else if (currentSelection.exclude.indexOf(opt.value) >= 0)
+                    opt.selected = opt.indeterminate = true;
                 select.appendChild(opt);
             }
             let multiselect = makeMultiselect(select);
@@ -111,6 +122,8 @@ $(() => {
         };
 
         let container = document.getElementById('pch-filterbar');
+        if (container.children.length && !onNewData)
+            return;
         container.textContent = '';
         if (MediaStorage.Instance.isLoading())
             return;