commit 9c73ac5e127654bbfbc461becc03abe98b2885d2
author SamarV-121 <samar@samarv121.dev> Fri Jun 02 20:45:59 2023 +0530
committer SamarV-121 <samar@samarv121.dev> Sat Jun 03 22:42:46 2023 +0530
tree 4796706ba5fd997add596fc068c4a251bda1d23f
parent 076f2290ef69271cef9b4fbfccdfa34dc2e077db

www: Add device search box

- also switch to flexbox for aside

Change-Id: I08565b9d0d85073b0d978fec4285ae8c5dd639bd

components/aside.html.twig

diff --git a/components/aside.html.twig b/components/aside.html.twig
index 12e9ff0..3064339 100644
--- a/components/aside.html.twig
+++ b/components/aside.html.twig
@@ -2,6 +2,7 @@
 
 <aside>
   <h2>Devices</h2>
+  <input type="text" id="device-search" placeholder="Search devices" onkeyup="searchDevices()">
   {% for vendor, devices in deviceVendors %}
     {% set hasSelectedDevice = false %}
     {% for device in devices %}

public/assets/app.css

diff --git a/public/assets/app.css b/public/assets/app.css
index ee58bc5..5664b9e 100644
--- a/public/assets/app.css
+++ b/public/assets/app.css
@@ -148,10 +148,9 @@
 }
 
 main aside {
-  width: 220px;
-  min-width: 220px;
+  display: flex;
+  flex-direction: column;
   box-shadow: var(--shadow);
-  min-height: 100vh;
   background-color: var(--background-color);
   z-index: 2;
 }
@@ -687,3 +686,15 @@
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
 }
+
+#device-search {
+  border-radius: 20px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  padding-left: 20px;
+  margin-left: 15px;
+  margin-right: 10px;
+  margin-bottom: 15px;
+  border: none;
+  outline: none;
+}

public/js/device_search.js

diff --git a/public/js/device_search.js b/public/js/device_search.js
new file mode 100644
index 0000000..a1a5531
--- /dev/null
+++ b/public/js/device_search.js
@@ -0,0 +1,25 @@
+const searchDevices = () => {
+  const searchInput = document.getElementById('device-search');
+  const devices = document.getElementsByClassName('device-box');
+  const filter = searchInput.value.trim().toLowerCase();
+
+  Array.from(devices).forEach(device => {
+    const deviceName = device.textContent.trim().toLowerCase();
+    const vendorElement = device.closest('.accordion-item');
+    const accordionInput = vendorElement.querySelector('input[type="checkbox"]');
+
+    const shouldDisplayDevice = deviceName.includes(filter);
+
+    if (shouldDisplayDevice) {
+      device.style.display = 'block';
+      accordionInput.checked = true;
+    } else {
+      device.style.display = 'none';
+    }
+
+    if (filter === '') {
+      device.style.display = 'block';
+      accordionInput.checked = false;
+    }
+  });
+};

templates/base.html.twig

diff --git a/templates/base.html.twig b/templates/base.html.twig
index 8f1c16b..35d4a67 100644
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -31,5 +31,6 @@
       </main>
       {% include '@components/footer.html.twig' %}
     </div>
+    <script src="{{ asset('js/device_search.js') }}"></script>
   </body>
 </html>