Feat: Add search to list of scripts to import

CHANGELOG.md

@@ -29,6 +29,7 @@ With endless scrolling, a long-delayed feature is now also available. It can be
 - Feat: New trigger event for smart playlist update #1389
 - Feat: Add `current_album` to `mympd_state` Lua table
 - Feat: Add option for "Endless scrolling"
+- Feat: Add search to list of scripts to import
 - Upd: libmympdclient 1.0.33
 
 ***

docs/_includes/translating_status.md

@@ -1,14 +1,14 @@
-- bg-BG: 1093 missing phrases
-- es-AR: 4 missing phrases
-- es-ES: 960 missing phrases
-- es-VE: 948 missing phrases
-- fi-FI: 945 missing phrases
-- fr-FR: 4 missing phrases
-- it-IT: 4 missing phrases
-- ja-JP: 4 missing phrases
-- ko-KR: 4 missing phrases
-- nl-NL: 4 missing phrases
-- pl-PL: 93 missing phrases
-- ru-RU: 10 missing phrases
-- zh-Hans: 4 missing phrases
-- zh-Hant: 127 missing phrases
+- bg-BG: 1094 missing phrases
+- es-AR: 5 missing phrases
+- es-ES: 961 missing phrases
+- es-VE: 949 missing phrases
+- fi-FI: 946 missing phrases
+- fr-FR: 5 missing phrases
+- it-IT: 5 missing phrases
+- ja-JP: 5 missing phrases
+- ko-KR: 5 missing phrases
+- nl-NL: 5 missing phrases
+- pl-PL: 94 missing phrases
+- ru-RU: 11 missing phrases
+- zh-Hans: 5 missing phrases
+- zh-Hant: 128 missing phrases

htdocs/index.html

@@ -2346,6 +2346,9 @@ <h5 class="modal-title"><span class="mi title-icon">code</span> <span data-phras
               </div>
             </div>
             <div class="tab-pane active" id="modalScriptsImportTab">
+              <div class="input-group">
+                <input id="modalScriptsImportSearchStr" data-is="mympd-input-clear" data-clear-event="keydown" data-placeholder-phrase="Search" class="form-control rounded-end mb-2"/>
+              </div>
               <ul id="modalScriptsImportList" class="list-group"></ul>
             </div>
           </div>

htdocs/js/modalScripts.js

@@ -95,6 +95,19 @@ function initModalScripts() {
             importScript(target);
         }
     }, false);
+
+    initSearchSimpleInput(elGetById('modalScriptsImportSearchStr'), function(value) {
+        const valueLwr = value.toLowerCase();
+        const items = document.querySelectorAll('#modalScriptsImportList > li');
+        for (const item of items) {
+            if (item.textContent.toLowerCase().indexOf(valueLwr) > -1) {
+                item.classList.remove('d-none');
+            }
+            else {
+                item.classList.add('d-none');
+            }
+        }
+    });
 }
 
 /**
@@ -510,9 +523,24 @@ function showImportScript() {
     elHideId('modalScriptsListFooter');
     elHideId('modalScriptsEditFooter');
     elShowId('modalScriptsImportFooter');
+    if (userAgentData.isMobile === false) {
+        setFocusId('modalScriptsImportSearchStr');
+    }
     const list = elGetById('modalScriptsImportList');
     elClear(list);
+    list.appendChild(
+        elCreateTextTn('li', {"class": ["list-group-item", "not-clickable"]}, 'Loading...')
+    );
     httpGet(subdir + '/proxy?uri=' + myEncodeURI(scriptsImportUri + 'index.json'), function(obj) {
+        elClear(list);
+        if (obj === null) {
+            list.appendChild(
+                elCreateNode('li', {"class": ["list-group-item", "not-clickable"]},
+                    elCreateTextTn('div', {"class": ["alert", "alert-danger"]}, 'Failure loading script list.')
+                )
+            );
+            return;
+        }
         for (const key in obj) {
             const script = obj[key];
             const clickable = elGetById('modalScriptsList').querySelector('[data-file="' + key + '"') === null

htdocs/js/searchSimple.js

@@ -26,25 +26,35 @@ function handleSearchSimple(appid) {
  * @returns {void}
  */
 function initSearchSimple(appid) {
-    elGetById(appid + 'SearchStr').addEventListener('keydown', function(event) {
+    initSearchSimpleInput(elGetById(appid + 'SearchStr'), execSearchSimple);
+}
+
+/**
+ * Initializes simple search element
+ * @param {Object} el Element to initialize
+ * @param {function} cb Callback
+ * @returns {void}
+ */
+function initSearchSimpleInput(el, cb) {
+    el.addEventListener('keydown', function(event) {
         //handle Enter key on keydown for IME composing compatibility
         if (event.key !== 'Enter') {
             return;
         }
         clearSearchTimer();
-        execSearchSimple(event.target.value);
+        cb(event.target.value);
     }, false);
 
     // Android does not support search on type
     if (userAgentData.isAndroid === false) {
-        elGetById(appid + 'SearchStr').addEventListener('keyup', function(event) {
+        el.addEventListener('keyup', function(event) {
             if (ignoreKeys(event) === true) {
                 return;
             }
             clearSearchTimer();
             const value = event.target.value;
             searchTimer = setTimeout(function() {
-                execSearchSimple(value);
+                cb(value);
             }, searchTimerTimeout);
         }, false);
     }

src/i18n/json/de-DE.json

@@ -1239,5 +1239,6 @@
     "wasapi": "Windows Audio Session API",
     "Endless scrolling": "Endlos Scrollen",
     "helpEndlessScroll": "Schaltet von seitenweiser Anzeige auf endloses Scrollen um.",
-    "Lookup HTTP header": "HTTP-Header abrufen."
+    "Lookup HTTP header": "HTTP-Header abrufen.",
+    "Failure loading script list.": "Skriptliste konnte nicht geladen werden."
 }

src/i18n/json/i18n.json

@@ -2,13 +2,13 @@
     "default": {"desc":"Browser default", "missingPhrases": 0},
     "de-DE": {"desc":"Deutsch (de-DE)", "missingPhrases": 0},
     "en-US": {"desc":"English (en-US)", "missingPhrases": 0},
-    "es-AR": {"desc":"Español (es-AR)", "missingPhrases": 4},
-    "fr-FR": {"desc":"Français (fr-FR)", "missingPhrases": 4},
-    "it-IT": {"desc":"Italiano (it-IT)", "missingPhrases": 4},
-    "ja-JP": {"desc":"日本語 (ja-JP)", "missingPhrases": 4},
-    "ko-KR": {"desc":"한국어 (ko-KR)", "missingPhrases": 4},
-    "nl-NL": {"desc":"Nederlands (nl-NL)", "missingPhrases": 4},
-    "pl-PL": {"desc":"Polish (pl-PL)", "missingPhrases": 93},
-    "ru-RU": {"desc":"Russian (ru-RU)", "missingPhrases": 10},
-    "zh-Hans": {"desc":"简体中文 (zh-Hans)", "missingPhrases": 4}
+    "es-AR": {"desc":"Español (es-AR)", "missingPhrases": 5},
+    "fr-FR": {"desc":"Français (fr-FR)", "missingPhrases": 5},
+    "it-IT": {"desc":"Italiano (it-IT)", "missingPhrases": 5},
+    "ja-JP": {"desc":"日本語 (ja-JP)", "missingPhrases": 5},
+    "ko-KR": {"desc":"한국어 (ko-KR)", "missingPhrases": 5},
+    "nl-NL": {"desc":"Nederlands (nl-NL)", "missingPhrases": 5},
+    "pl-PL": {"desc":"Polish (pl-PL)", "missingPhrases": 94},
+    "ru-RU": {"desc":"Russian (ru-RU)", "missingPhrases": 11},
+    "zh-Hans": {"desc":"简体中文 (zh-Hans)", "missingPhrases": 5}
 }

src/i18n/json/phrases.json

@@ -324,6 +324,7 @@
 {"term":"Failure adding songs to jukebox queue"},
 {"term":"Failure getting inserted song id"},
 {"term":"Failure listing stickernames"},
+{"term":"Failure loading script list."},
 {"term":"Fast forward"},
 {"term":"Fast rewind"},
 {"term":"Favorite and WebradioDb entry are different"},