From d94a431537214d90d7afef0f9dc2259b1932fb52 Mon Sep 17 00:00:00 2001 From: j433866 Date: Thu, 30 May 2019 13:28:45 +0100 Subject: [PATCH] Improve searching for tabs UI. Content / filename search is now a regex. Use .toLocaleString() for loading / baking stats --- src/web/InputWaiter.mjs | 31 ++++-- src/web/InputWorker.mjs | 54 +++++++---- src/web/Manager.mjs | 7 +- src/web/OutputWaiter.mjs | 55 ++++++++++- src/web/WorkerWaiter.mjs | 10 +- src/web/html/index.html | 149 +++++++++++++++-------------- src/web/stylesheets/layout/_io.css | 56 ++++++++++- 7 files changed, 250 insertions(+), 112 deletions(-) diff --git a/src/web/InputWaiter.mjs b/src/web/InputWaiter.mjs index 12b60338..fec0f1b8 100644 --- a/src/web/InputWaiter.mjs +++ b/src/web/InputWaiter.mjs @@ -284,6 +284,9 @@ class InputWaiter { case "displayTabSearchResults": this.displayTabSearchResults(r.data); break; + case "filterTabError": + this.app.handleError(r.data); + break; case "setUrl": this.setUrl(r.data); break; @@ -886,20 +889,20 @@ class InputWaiter { const loaded = loadedData.loaded; const total = loadedData.total; - let width = total.toString().length; + let width = total.toLocaleString().length; width = width < 2 ? 2 : width; - const totalStr = total.toString().padStart(width, " ").replace(/ /g, " "); + const totalStr = total.toLocaleString().padStart(width, " ").replace(/ /g, " "); let msg = "Total: " + totalStr; - const loadedStr = loaded.toString().padStart(width, " ").replace(/ /g, " "); + const loadedStr = loaded.toLocaleString().padStart(width, " ").replace(/ /g, " "); msg += "
Loaded: " + loadedStr; if (pending > 0) { - const pendingStr = pending.toString().padStart(width, " ").replace(/ /g, " "); + const pendingStr = pending.toLocaleString().padStart(width, " ").replace(/ /g, " "); msg += "
Pending: " + pendingStr; } else if (loading > 0) { - const loadingStr = loading.toString().padStart(width, " ").replace(/ /g, " "); + const loadingStr = loading.toLocaleString().padStart(width, " ").replace(/ /g, " "); msg += "
Loading: " + loadingStr; } @@ -1377,8 +1380,8 @@ class InputWaiter { const showLoading = document.getElementById("input-show-loading").checked; const showLoaded = document.getElementById("input-show-loaded").checked; - const fileNameFilter = document.getElementById("input-filename-filter").value; - const contentFilter = document.getElementById("input-content-filter").value; + const filter = document.getElementById("input-filter").value; + const filterType = document.getElementById("input-filter-button").innerText; const numResults = parseInt(document.getElementById("input-num-results").value, 10); this.inputWorker.postMessage({ @@ -1387,13 +1390,23 @@ class InputWaiter { showPending: showPending, showLoading: showLoading, showLoaded: showLoaded, - fileNameFilter: fileNameFilter, - contentFilter: contentFilter, + filter: filter, + filterType: filterType, numResults: numResults } }); } + /** + * Handle when an option in the filter drop down box is clicked + * + * @param {event} mouseEvent + */ + filterOptionClick(mouseEvent) { + document.getElementById("input-filter-button").innerText = mouseEvent.target.innerText; + this.filterTabSearch(); + } + /** * Displays the results of a tab search in the find tab box * diff --git a/src/web/InputWorker.mjs b/src/web/InputWorker.mjs index 3af85289..3c098f00 100644 --- a/src/web/InputWorker.mjs +++ b/src/web/InputWorker.mjs @@ -908,17 +908,26 @@ self.updateMaxTabs = function(maxTabs, activeTab) { * @param {boolean} searchData.showPending - If true, include pending inputs in the results * @param {boolean} searchData.showLoading - If true, include loading inputs in the results * @param {boolean} searchData.showLoaded - If true, include loaded inputs in the results - * @param {string} searchData.fileNameFilter - A string that must be present in the filename of an input - * @param {string} searchData.contentFilter - A string that must be present in the input contents + * @param {string} searchData.filter - A regular expression to match the inputs on + * @param {string} searchData.filterType - Either "CONTENT" or "FILENAME". Detemines what should be matched with filter * @param {number} searchData.numResults - The maximum number of results to be returned */ self.filterTabs = function(searchData) { - const showPending = searchData.showPending; - const showLoading = searchData.showLoading; - const showLoaded = searchData.showLoaded; + const showPending = searchData.showPending, + showLoading = searchData.showLoading, + showLoaded = searchData.showLoaded, + filterType = searchData.filterType; - const fileNameFilter = searchData.fileNameFilter; - const contentFilter = searchData.contentFilter; + let filterExp; + try { + filterExp = new RegExp(searchData.filter, "i"); + } catch (error) { + self.postMessage({ + action: "filterTabError", + data: error.message + }); + return; + } const numResults = searchData.numResults; const inputs = []; @@ -930,17 +939,28 @@ self.filterTabs = function(searchData) { if (self.inputs[iNum].status === "pending" && showPending || self.inputs[iNum].status === "loading" && showLoading || self.inputs[iNum].status === "loaded" && showLoaded) { - if (typeof self.inputs[iNum].data === "string") { - if (self.inputs[iNum].data.slice(0, 4096).toLowerCase().includes(contentFilter)) { - textDisplay = self.inputs[iNum].data.slice(0, 4096); - addInput = true; - } - } else { - if (self.inputs[iNum].data.name.toLowerCase().includes(fileNameFilter) && - Utils.arrayBufferToStr(self.inputs[iNum].data.fileBuffer.slice(0, 4096)).toLowerCase().includes(contentFilter)) { - textDisplay = self.inputs[iNum].data.name; - addInput = true; + try { + if (typeof self.inputs[iNum].data === "string") { + if (filterType.toLowerCase() === "content" && + filterExp.test(self.inputs[iNum].data.slice(0, 4096))) { + textDisplay = self.inputs[iNum].data.slice(0, 4096); + addInput = true; + } + } else { + if ((filterType.toLowerCase() === "filename" && + filterExp.test(self.inputs[iNum].data.name)) || + filterType.toLowerCase() === "content" && + filterExp.test(Utils.arrayBufferToStr(self.inputs[iNum].data.fileBuffer.slice(0, 4096)))) { + textDisplay = self.inputs[iNum].data.name; + addInput = true; + } } + } catch (error) { + self.postMessage({ + action: "filterTabError", + data: error.message + }); + return; } } diff --git a/src/web/Manager.mjs b/src/web/Manager.mjs index 6015a9dd..602a3ec7 100755 --- a/src/web/Manager.mjs +++ b/src/web/Manager.mjs @@ -166,10 +166,9 @@ class Manager { document.getElementById("input-show-pending").addEventListener("change", this.input.filterTabSearch.bind(this.input)); document.getElementById("input-show-loading").addEventListener("change", this.input.filterTabSearch.bind(this.input)); document.getElementById("input-show-loaded").addEventListener("change", this.input.filterTabSearch.bind(this.input)); - document.getElementById("input-filename-filter").addEventListener("change", this.input.filterTabSearch.bind(this.input)); - document.getElementById("input-filename-filter").addEventListener("keyup", this.input.filterTabSearch.bind(this.input)); - document.getElementById("input-content-filter").addEventListener("change", this.input.filterTabSearch.bind(this.input)); - document.getElementById("input-content-filter").addEventListener("keyup", this.input.filterTabSearch.bind(this.input)); + this.addListeners("#input-filter-content,#input-filter-filename", "click", this.input.filterOptionClick, this.input); + document.getElementById("input-filter").addEventListener("change", this.input.filterTabSearch.bind(this.input)); + document.getElementById("input-filter").addEventListener("keyup", this.input.filterTabSearch.bind(this.input)); document.getElementById("input-num-results").addEventListener("change", this.input.filterTabSearch.bind(this.input)); document.getElementById("input-num-results").addEventListener("keyup", this.input.filterTabSearch.bind(this.input)); document.getElementById("input-filter-refresh").addEventListener("click", this.input.filterTabSearch.bind(this.input)); diff --git a/src/web/OutputWaiter.mjs b/src/web/OutputWaiter.mjs index 03510b08..f6806ff3 100755 --- a/src/web/OutputWaiter.mjs +++ b/src/web/OutputWaiter.mjs @@ -705,6 +705,28 @@ class OutputWaiter { } const newOutputs = this.getNearbyNums(inputNum, direction); + + const tabsLeft = (newOutputs[0] !== this.getSmallestInputNum()); + const tabsRight = (newOutputs[newOutputs.length - 1] !== this.getLargestInputNum()); + + const firstTabElement = document.getElementById("output-tabs").firstElementChild; + const lastTabElement = document.getElementById("output-tabs").lastElementChild; + + if (firstTabElement) { + if (tabsLeft) { + firstTabElement.style.boxShadow = "15px 0px 15px -15px var(--primary-border-colour) inset"; + } else { + firstTabElement.style.boxShadow = ""; + } + } + if (lastTabElement) { + if (tabsRight) { + lastTabElement.style.boxShadow = "-15px 0px 15px -15px var(--primary-border-colour) inset"; + } else { + lastTabElement.style.boxShadow = ""; + } + } + for (let i = 0; i < newOutputs.length; i++) { tabs.item(i).setAttribute("inputNum", newOutputs[i].toString()); this.displayTabInfo(newOutputs[i]); @@ -908,6 +930,27 @@ class OutputWaiter { this.displayTabInfo(newInputs[i]); } + const tabsLeft = (newInputs[0] !== this.getSmallestInputNum()); + const tabsRight = (newInputs[newInputs.length - 1] !== this.getLargestInputNum()); + + const firstTabElement = document.getElementById("output-tabs").firstElementChild; + const lastTabElement = document.getElementById("output-tabs").lastElementChild; + + if (firstTabElement) { + if (tabsLeft) { + firstTabElement.style.boxShadow = "15px 0px 15px -15px var(--primary-border-colour) inset"; + } else { + firstTabElement.style.boxShadow = ""; + } + } + if (lastTabElement) { + if (tabsRight) { + lastTabElement.style.boxShadow = "-15px 0px 15px -15px var(--primary-border-colour) inset"; + } else { + lastTabElement.style.boxShadow = ""; + } + } + if (newInputs.length > 1) { tabsList.parentElement.style.display = "block"; @@ -1320,6 +1363,14 @@ class OutputWaiter { inputNums = Object.keys(this.outputs), results = []; + let contentFilterExp; + try { + contentFilterExp = new RegExp(contentFilter, "i"); + } catch (error) { + this.app.handleError(error); + return; + } + // Search through the outputs for matching output results for (let i = 0; i < inputNums.length; i++) { const iNum = inputNums[i], @@ -1347,7 +1398,7 @@ class OutputWaiter { data = Utils.arrayBufferToStr(data); } data = data.replace(/[\r\n]/g, ""); - if (data.toLowerCase().includes(contentFilter)) { + if (contentFilterExp.test(data)) { results.push({ inputNum: iNum, textDisplay: data.slice(0, 100) @@ -1359,7 +1410,7 @@ class OutputWaiter { data = Utils.arrayBufferToStr(data); } data = data.replace(/[\r\n]/g, ""); - if (data.toLowerCase().includes(contentFilter)) { + if (contentFilterExp.test(data)) { results.push({ inputNum: iNum, textDisplay: data.slice(0, 100) diff --git a/src/web/WorkerWaiter.mjs b/src/web/WorkerWaiter.mjs index 0650823e..2867b906 100644 --- a/src/web/WorkerWaiter.mjs +++ b/src/web/WorkerWaiter.mjs @@ -626,13 +626,13 @@ class WorkerWaiter { } const bakeInfo = document.getElementById("bake-info"); - let width = progress.total.toString().length; + let width = progress.total.toLocaleString().length; width = width < 2 ? 2 : width; - const totalStr = progress.total.toString().padStart(width, " ").replace(/ /g, " "); - const bakedStr = progress.baked.toString().padStart(width, " ").replace(/ /g, " "); - const pendingStr = progress.pending.toString().padStart(width, " ").replace(/ /g, " "); - const bakingStr = progress.baking.toString().padStart(width, " ").replace(/ /g, " "); + const totalStr = progress.total.toLocaleString().padStart(width, " ").replace(/ /g, " "); + const bakedStr = progress.baked.toLocaleString().padStart(width, " ").replace(/ /g, " "); + const pendingStr = progress.pending.toLocaleString().padStart(width, " ").replace(/ /g, " "); + const bakingStr = progress.baking.toLocaleString().padStart(width, " ").replace(/ /g, " "); let msg = "Total: " + totalStr; msg += "
Baked: " + bakedStr; diff --git a/src/web/html/index.html b/src/web/html/index.html index 052a282d..3f65f484 100755 --- a/src/web/html/index.html +++ b/src/web/html/index.html @@ -768,38 +768,44 @@
Load Status
- -
-
- - +
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+ + +
-
- - -
-
- - +
+
+ + +
+
+ +
+ Content + Filename +
+

Results
@@ -821,46 +827,47 @@
Bake Status
-
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
-
-
- - -
-
- - +
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+ + +
+
+ + +

Results
diff --git a/src/web/stylesheets/layout/_io.css b/src/web/stylesheets/layout/_io.css index b01b8d7e..1c6ca399 100755 --- a/src/web/stylesheets/layout/_io.css +++ b/src/web/stylesheets/layout/_io.css @@ -297,19 +297,67 @@ #input-find-options, #output-find-options { - list-style: none; + display: flex; + flex-direction: row; + flex-wrap: wrap; width: 100%; } -#input-find-options li, -#output-find-options li { +.form-group.input-find-option { + width: 80%; + margin-left: auto; + margin-right: auto; +} + +.input-find-option .toggle-string { + width: 70%; + display: inline-block; +} + +.input-find-option-append button { + border-top-right-radius: 4px; + background-color: var(--arg-background) !important; + margin: unset; +} + +.input-find-option-append button:hover { + filter: brightness(97%); +} + +#input-num-results-container { + width: 20%; + float: right; + margin: 0; +} + +.form-group.output-find-option { + width: 70%; + float: left; +} + +#output-num-results-container { + width: 20%; + float: right; + margin: 0; + margin-left: 10%; +} + +#input-find-options-checkboxes, +#output-find-options-checkboxes { + list-style: none; + width: 70%; + margin-top: auto; + margin-bottom: auto; +} + +#input-find-options-checkboxes li, +#output-find-options-checkboxes li { display: flex; flex-direction: row; float: left; padding: 10px; width: auto; text-align: center; - vertical-align: middle; }