From 350b2d6d95a638656b1cb94a72c62b28ccfc8733 Mon Sep 17 00:00:00 2001
From: Boris Sekachev <boris.sekachev@yandex.ru>
Date: Thu, 17 Jan 2019 12:51:14 +0300
Subject: [PATCH] Memorizeable filter values

---
 .../engine/static/engine/js/shapeFilter.js    | 73 ++++++++++++-------
 .../engine/templates/engine/annotation.html   |  3 +-
 2 files changed, 49 insertions(+), 27 deletions(-)

diff --git a/cvat/apps/engine/static/engine/js/shapeFilter.js b/cvat/apps/engine/static/engine/js/shapeFilter.js
index 06310e8ab68c..607f2604db16 100644
--- a/cvat/apps/engine/static/engine/js/shapeFilter.js
+++ b/cvat/apps/engine/static/engine/js/shapeFilter.js
@@ -9,7 +9,7 @@
 
 class FilterModel {
     constructor(update) {
-        this._filter = '';
+        this._filter = "";
         this._update = update;
         this._labels = window.cvat.labelsInfo.labels();
         this._attributes = window.cvat.labelsInfo.attributes();
@@ -19,8 +19,8 @@ class FilterModel {
         return {
             id: shape.model.id,
             label: shape.model.label,
-            type: shape.model.type.split('_')[1],
-            mode: shape.model.type.split('_')[0],
+            type: shape.model.type.split("_")[1],
+            mode: shape.model.type.split("_")[0],
             occluded: shape.interpolation.position.occluded ? true : false,
             attr: convertAttributes(shape.interpolation.attributes),
             lock: shape.model.lock
@@ -30,7 +30,7 @@ class FilterModel {
         function convertAttributes(attributes) {
             let converted = {};
             for (let attrId in attributes) {
-                converted[attributes[attrId].name.toLowerCase().replace(/-/g, "_")] = ('' + attributes[attrId].value).toLowerCase();
+                converted[attributes[attrId].name.toLowerCase().replace(/-/g, "_")] = ("" + attributes[attrId].value).toLowerCase();
             }
             return converted;
         }
@@ -79,9 +79,9 @@ class FilterController {
 
     updateFilter(value, silent) {
         if (value.length) {
-            value = value.split('|').map(x => '/d:data/' + x).join('|').toLowerCase().replace(/-/g, "_");
+            value = value.split("|").map(x => "/d:data/" + x).join("|").toLowerCase().replace(/-/g, "_");
             try {
-                document.evaluate(value, document, () => 'ns');
+                document.evaluate(value, document, () => "ns");
             }
             catch (error) {
                 return false;
@@ -90,7 +90,7 @@ class FilterController {
             return true;
         }
         else {
-            this._model.updateFilter('', silent);
+            this._model.updateFilter("", silent);
             return true;
         }
     }
@@ -104,41 +104,62 @@ class FilterController {
 class FilterView {
     constructor(filterController) {
         this._controller = filterController;
-        this._filterString = $('#filterInputString');
-        this._resetFilterButton = $('#resetFilterButton');
+        this._filterString = $("#filterInputString");
+        this._resetFilterButton = $("#resetFilterButton");
+        this._filterString.on("keypress keydown keyup", (e) => e.stopPropagation());
+        this._filterSubmitList = $("#filterSubmitList");
+
+        let predefinedValues = null;
+        try {
+            predefinedValues = JSON.parse(localStorage.getItem("filterValues")) || [];
+        }
+        catch {
+            predefinedValues = [];
+        }
+        
+        let initSubmitList = () => {
+            this._filterSubmitList.empty();
+            for (let value of predefinedValues) {
+                this._filterSubmitList.append(`<option value=${value}> ${value} </option>`);
+            }
+        }
+        initSubmitList();
 
-        this._filterString.attr('placeholder', 'car[attr/model="mazda"]');
-        this._filterString.on('keypress keydown keyup', (e) => e.stopPropagation());
-        this._filterString.on('change', (e) => {
+        this._filterString.on("change", (e) => {
             let value = $.trim(e.target.value);
             if (this._controller.updateFilter(value, false)) {
-                this._filterString.css('color', 'green');
+                this._filterString.css("color", "green");
+                if (!predefinedValues.includes(value)) {
+                    predefinedValues = (predefinedValues.concat([value])).slice(-10);
+                    localStorage.setItem("filterValues", JSON.stringify(predefinedValues));
+                    initSubmitList();
+                }
             }
             else {
-                this._filterString.css('color', 'red');
-                this._controller.updateFilter('', false);
+                this._filterString.css("color", "red");
+                this._controller.updateFilter("", false);
             }
         });
 
         let shortkeys = window.cvat.config.shortkeys;
-        this._filterString.attr('title', `
-            ${shortkeys['prev_filter_frame'].view_value} - ${shortkeys['prev_filter_frame'].description}` + `\n` +
-            `${shortkeys['next_filter_frame'].view_value} - ${shortkeys['next_filter_frame'].description}`);
+        this._filterString.attr("title", `
+            ${shortkeys["prev_filter_frame"].view_value} - ${shortkeys["prev_filter_frame"].description}` + `\n` +
+            `${shortkeys["next_filter_frame"].view_value} - ${shortkeys["next_filter_frame"].description}`);
 
-        this._resetFilterButton.on('click', () => {
-            this._filterString.prop('value', '');
-            this._controller.updateFilter('', false);
+        this._resetFilterButton.on("click", () => {
+            this._filterString.prop("value", "");
+            this._controller.updateFilter("", false);
         });
 
-        let initialFilter = window.cvat.search.get('filter');
+        let initialFilter = window.cvat.search.get("filter");
         if (initialFilter) {
-            this._filterString.prop('value', initialFilter);
+            this._filterString.prop("value", initialFilter);
             if (this._controller.updateFilter(initialFilter, true)) {
-                this._filterString.css('color', 'green');
+                this._filterString.css("color", "green");
             }
             else {
-                this._filterString.prop('value', '');
-                this._filterString.css('color', 'red');
+                this._filterString.prop("value", "");
+                this._filterString.css("color", "red");
             }
         }
     }
diff --git a/cvat/apps/engine/templates/engine/annotation.html b/cvat/apps/engine/templates/engine/annotation.html
index b5d612ffd8a4..55798e05304f 100644
--- a/cvat/apps/engine/templates/engine/annotation.html
+++ b/cvat/apps/engine/templates/engine/annotation.html
@@ -134,7 +134,8 @@
         <div style="margin-top: 20px">
             <button id="menuButton" class="regular h1"> Open Menu </button>
             <label class="regular h1" style="margin-left: 50px"> Filter: </label>
-            <input type="text" id="filterInputString" class="regular h2"/>
+            <datalist id="filterSubmitList" style="display: none;"> </datalist>
+            <input type="text" list="filterSubmitList" id="filterInputString" class="regular h2" placeholder='car[attr/model=/"mazda"'/>
             <button id="resetFilterButton" class="regular h1"> Reset </button>
             <button class="regular h1" id="undoButton" disabled> &#x27F2; </button>
             <select size="2" class="regular" style="overflow: hidden; width: 15%; top: 0.5em; position: relative;" disabled>