feat: add searching for apps

reisxd · Dec 16, 2022 · a7c0524 · a7c0524
1 parent ef5ab11
commit a7c0524
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 31 deletions.
diff --git a/public/apps/index.html b/public/apps/index.html
@@ -24,6 +24,14 @@ <h2 class="prog"></h2>
           <button class="upl highlighted" onclick="apkField.click()">
             <i class="gg-software-upload"></i>Upload APK
           </button>
+          <div>
+            <input
+              class="searchBox"
+              id="search"
+              type="text"
+              placeholder="Search for an app..."
+            />
+          </div>
           <button
             class="shw"
             onclick="this.style.display = 'none'; document.querySelector('ul').style.display = 'block';document.querySelector('.prog').style.display = 'none';document.querySelector('.upl').style.display = 'inline-flex'; document.querySelector('.inf').remove();document.getElementById('continue').setAttribute('onClick', 'setApp()');"

diff --git a/public/index.js b/public/index.js
@@ -243,6 +243,32 @@ function installReVanced() {
   sendCommand({ event: 'installReVanced' });
 }
 
+function addSearch(isPatches) {
+  document.getElementById('search').addEventListener('keyup', () => {
+    const searchText = document
+      .getElementById('search')
+      .value.toLowerCase();
+
+    Array.from(document.getElementsByTagName('li')).forEach(
+      (x) => (x.style.display = 'none')
+    );
+
+    if (isPatches) {
+      Array.from(document.getElementsByClassName('patchName'))
+      .filter((x) => x.innerText.toLowerCase().includes(searchText))
+      .forEach(
+        (x) => (x.parentNode.parentNode.parentNode.style.display = 'flex')
+      );
+    } else {
+      Array.from(document.getElementsByClassName('appName'))
+      .filter((x) => x.innerText.toLowerCase().includes(searchText))
+      .forEach(
+        (x) => (x.parentNode.style.display = 'flex')
+      );
+    }
+  });
+}
+
 ws.onmessage = (msg) => {
   /** @type {Record<string, any>} */
   const message = JSON.parse(msg.data);
@@ -277,21 +303,8 @@ ws.onmessage = (msg) => {
   </label>
 </li>`;
         }
-        document.getElementById('search').addEventListener('keyup', () => {
-          const searchText = document
-            .getElementById('search')
-            .value.toLowerCase();
-
-          Array.from(document.getElementsByTagName('li')).forEach(
-            (x) => (x.style.display = 'none')
-          );
-
-          Array.from(document.getElementsByClassName('patchName'))
-            .filter((x) => x.innerText.toLowerCase().includes(searchText))
-            .forEach(
-              (x) => (x.parentNode.parentNode.parentNode.style.display = 'flex')
-            );
-        });
+
+        addSearch(true);
 
         Array.from(document.getElementsByClassName('select'))
           .filter((patch) =>
@@ -520,11 +533,13 @@ ws.onmessage = (msg) => {
                   value="${app.appPackage}"
                   link="${link}"
                   appName="${appName}"
-                /><label for="app-${id}">${appName} (${app.appPackage})</label>
+                /><label class="appName" for="app-${id}">${appName} (${app.appPackage})</label>
               </li>`;
 
         id++;
       }
+
+      addSearch(false);
       break;
     }
 

diff --git a/public/styles/core.css b/public/styles/core.css
@@ -245,3 +245,19 @@ i.social-icon::before {
 .log * {
   user-select: text;
 }
+
+html.black .searchBox {
+  background-color: black !important;
+}
+
+.searchBox {
+  width: 100%;
+  color: var(--textColor);
+  border-radius: var(--border-radius);
+  padding: 12px;
+  background-color: var(--interactableColor);
+  border: 2px solid #dddddd2e;
+  font-size: 14px;
+  margin-top: 5px;
+  user-select: auto;
+}
diff --git a/public/styles/patches.css b/public/styles/patches.css
@@ -1,9 +1,6 @@
 html.black
   input[type='checkbox'].select
   + label:not(input[type='checkbox'].select:checked + label),
-html.black .searchBox {
-  background-color: black !important;
-}
 
 input[type='checkbox'] {
   display: none;
@@ -51,18 +48,6 @@ li {
   margin-bottom: 15px;
 }
 
-.searchBox {
-  width: 100%;
-  color: var(--textColor);
-  border-radius: var(--border-radius);
-  padding: 12px;
-  background-color: var(--interactableColor);
-  border: 2px solid #dddddd2e;
-  font-size: 14px;
-  margin-top: 5px;
-  user-select: auto;
-}
-
 .no-root {
   float: right;
 }