From 430eefb27d565342566f9a56fb95f2ae70017dbb Mon Sep 17 00:00:00 2001
From: RG <rishabhgautam727@gmail.com>
Date: Sun, 22 Oct 2023 18:34:33 +0530
Subject: [PATCH] [REFACTOR] using already existing select

---
 www/index.html           | 20 +++++++++++---------
 www/js/app.js            |  6 ++++--
 www/js/lib/fileSystem.js |  5 +++--
 3 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/www/index.html b/www/index.html
index a5fc778ad..90361f226 100644
--- a/www/index.html
+++ b/www/index.html
@@ -467,12 +467,6 @@ <h2 data-i18n="configure-title">Configuration</h2>
                                 <a href="#" id="selectorsDisplayLink" data-i18n="configure-selectordisplay-link">display file selectors</a>.</p>
                         </div>
                         <div id="openLocalFiles" style="display: none; display: flex;flex-direction: row;">
-                            <div style="display: flex;flex-direction: row;">
-                                <p id="numberOfFilesDisplay">0</p>
-                                <span>&nbsp;archives found in selected location:</span>
-                            </div>
-                            <select id="zimSelectDropdown" style="display: none;">
-                            </select>
                             <p data-i18n="configure-select-instructions" id="selectInstructions">Please select or drag and drop a .zim file (or all the .zimaa, .zimab etc in
                                 case of a split ZIM file):</p>
                             <span id="fileSelectionButtonContainer">
@@ -497,10 +491,18 @@ <h2 data-i18n="configure-title">Configuration</h2>
                             <br /> Scanning for archives... Please wait <img src="img/spinner.gif" alt="Please wait..." />
                         </div>
                         <div id="chooseArchiveFromLocalStorage" style="display: none;">
-                            <br /> Please select the archive you want to use : <select id="archiveList"
+                            <div style="float: left;display: none;" id="fileCountDisplay">
+                                <p id="numberOfFilesDisplay" style="float: left;">0</p>
+                                <span>&nbsp;archives found in selected location.&nbsp;</span>
+                            </div>
+
+                            Please select the archive you want to use : <select id="archiveList"
                                 class="form-control"></select>
-                            <br /><button type="button" class="btn btn-light" id="btnRescanDeviceStorage">Rescan</button>
-                            Rescans your SD Cards and internal memory
+                            <br />
+                            <span id="rescanButtonAndText" style="display: none;">
+                                <button type="button" class="btn btn-light" id="btnRescanDeviceStorage">Rescan</button>
+                                Rescans your SD Cards and internal memory
+                            </span>
                         </div>
                     </div>
                     <br />
diff --git a/www/js/app.js b/www/js/app.js
index 5e5f1df6c..d9b3f0d7d 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -1161,6 +1161,7 @@ window.onpopstate = function (event) {
 function populateDropDownListOfArchives (archiveDirectories) {
     document.getElementById('scanningForArchives').style.display = 'none';
     document.getElementById('chooseArchiveFromLocalStorage').style.display = '';
+    document.getElementById('rescanButtonAndText').style.display = '';
     var comboArchiveList = document.getElementById('archiveList');
     comboArchiveList.options.length = 0;
     for (var i = 0; i < archiveDirectories.length; i++) {
@@ -1266,7 +1267,7 @@ function displayFileSelect () {
 
     document.getElementById('openLocalFiles').style.display = 'block';
     if (isFileSystemAPISupported || isWebkitSupported) {
-        document.getElementById('zimSelectDropdown').style.display = '';
+        document.getElementById('chooseArchiveFromLocalStorage').style.display = '';
         document.getElementById('folderSelect').style.display = '';
     }
 
@@ -1285,7 +1286,7 @@ function displayFileSelect () {
         globalDropZone.addEventListener('drop', handleFileDrop);
     }
 
-    document.getElementById('zimSelectDropdown').addEventListener('change', async function (e) {
+    document.getElementById('archiveList').addEventListener('change', async function (e) {
         // handle zim selection from dropdown if multiple files are loaded via webkitdirectory or filesystem api
         if (isFileSystemAPISupported) {
             const files = await fileSystem.getSelectedZimFromCache(e.target.value)
@@ -1312,6 +1313,7 @@ function displayFileSelect () {
                 filenames.push(file.name);
             }
             webKitFileList = e.target.files;
+            // populateDropDownListOfArchives(filenames);
             await fileSystem.updateZimDropdownOptions({ fileOrDirHandle: null, files: filenames }, '');
         })
     }
diff --git a/www/js/lib/fileSystem.js b/www/js/lib/fileSystem.js
index 79233b177..f7dbaf761 100644
--- a/www/js/lib/fileSystem.js
+++ b/www/js/lib/fileSystem.js
@@ -14,7 +14,7 @@ import cache from './cache.js';
  * @returns {Promise<Array<string>>} Array of unique filenames (if a split zim is considered a single file)
  */
 async function updateZimDropdownOptions (fileSystemHandler, selectedFile) {
-    const select = document.getElementById('zimSelectDropdown');
+    const select = document.getElementById('archiveList');
     let options = '';
     let count = 0;
     if (fileSystemHandler.files.length !== 0) options += '<option value="">Select an archive..</option>';
@@ -26,8 +26,9 @@ async function updateZimDropdownOptions (fileSystemHandler, selectedFile) {
         }
     });
     select.innerHTML = options;
-    document.getElementById('zimSelectDropdown').value = selectedFile;
+    document.getElementById('archiveList').value = selectedFile;
     document.getElementById('numberOfFilesDisplay').innerText = count;
+    document.getElementById('fileCountDisplay').style.display = '';
 }
 
 /**