add support for some samsung drives

files/dashboard/index.php

@@ -37,29 +37,26 @@ function fetchSSDData() {
     Search for disk:<br>
     <input id="search" type="text" placeholder="Search by ID, model, serial…" /><p>
     <?php 
-        $ssdData = fetchSSDData(); // Fetch data from the API
-        // Start the table
+        $ssdData = fetchSSDData(); 
         echo '<table class="ssd-list" style="border-collapse:collapse;width:100%;">';
-        // Table header (optional but handy)
         echo '<thead>
                 <tr>
-                <th>Disk ID</th>
-                <th>Model String</th>
-                <th>Serial Number</th>
-                <th>GB Written</th>
-                <th>Disk Capacity</th>
-                <th>Disk Flavor</th>
-                <th>SMART Result</th>
+                <th data-sort="id">Disk ID</th>
+                <th data-sort="model">Model String</th>
+                <th data-sort="serial">Serial Number</th>
+                <th data-sort="gb_written">GB Written</th>
+                <th data-sort="capacity">Disk Capacity</th>
+                <th data-sort="flavor">Disk Flavor</th>
+                <th data-sort="smart">SMART Result</th>
                 </tr>
             </thead>';
-        // Table body - one row per SSD
         echo '<tbody id="ssd-body">';
         foreach ($ssdData as $ssd) {
             // Escape the values so the page stays safe
             $id      = htmlspecialchars($ssd['id']);
             $model   = htmlspecialchars($ssd['model']);
             $serial  = htmlspecialchars($ssd['serial']);
-            $tbw     = htmlspecialchars($ssd['gb_written']);
+            $gbw     = htmlspecialchars($ssd['gb_written']);
             $cap     = htmlspecialchars($ssd['capacity']);
             $flavor  = htmlspecialchars($ssd['flavor']);
             $smart   = htmlspecialchars($ssd['smart']);
@@ -68,7 +65,7 @@ function fetchSSDData() {
                     <td>{$id}</td>
                     <td>{$model}</td>
                     <td>{$serial}</td>
-                    <td>{$tbw}</td>
+                    <td>{$gbw}</td>
                     <td>{$cap}</td>
                     <td>{$flavor}</td>
                     <td>{$smart}</td>
@@ -112,4 +109,82 @@ document.addEventListener('DOMContentLoaded', () => {
 });
 </script>
 
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+
+  /* ----- Search filter ----- */
+  const searchInput = document.getElementById('search');
+  const tbody = document.getElementById('ssd-body');
+  const rowsSnapshot = Array.from(tbody.rows); // keep a static snapshot
+
+  const debounce = (fn, delay) => {
+    let timer;
+    return (...args) => {
+      clearTimeout(timer);
+      timer = setTimeout(() => fn.apply(this, args), delay);
+    };
+  };
+
+  const filterRows = debounce(() => {
+    const q = searchInput.value.trim().toLowerCase();
+    rowsSnapshot.forEach(r => {
+      const rowText = Array.from(r.cells)
+                           .map(c => c.textContent.trim().toLowerCase())
+                           .join(' ');
+      r.style.display = rowText.includes(q) ? '' : 'none';
+    });
+  }, 200);
+
+  searchInput.addEventListener('input', filterRows);
+
+  /* ----- Table sorting ----- */
+  const table = document.querySelector('.ssd-list');
+  const headerCells = table.querySelectorAll('th[data-sort]');
+  const bodyRows = Array.from(tbody.rows);
+
+  headerCells.forEach((th, index) => {
+    th.classList.add('sortable');   // gives the arrow styling
+    th.style.cursor = 'pointer';
+
+    th.addEventListener('click', () => {
+      const currentSort = th.dataset.currentSort || 'none';
+      const ascending = currentSort !== 'asc';
+
+      // reset other headers
+      headerCells.forEach(h => {
+        h.dataset.currentSort = 'none';
+        h.classList.remove('asc', 'desc');
+      });
+
+      // set current header state
+      th.dataset.currentSort = ascending ? 'asc' : 'desc';
+      th.classList.toggle('asc', ascending);
+      th.classList.toggle('desc', !ascending);
+
+      // sort
+      bodyRows.sort((a, b) => {
+        const aText = a.cells[index].textContent.trim();
+        const bText = b.cells[index].textContent.trim();
+
+        // try numeric comparison
+        const aNum = parseFloat(aText.replace(/,/g, ''));
+        const bNum = parseFloat(bText.replace(/,/g, ''));
+
+        if (!isNaN(aNum) && !isNaN(bNum)) {
+          return ascending ? aNum - bNum : bNum - aNum;
+        }
+
+        // fallback to localeCompare (case‑insensitive)
+        return ascending
+          ? aText.localeCompare(bText, undefined, { sensitivity: 'base' })
+          : bText.localeCompare(aText, undefined, { sensitivity: 'base' });
+      });
+
+      // re‑attach sorted rows
+      bodyRows.forEach(r => tbody.appendChild(r));
+    });
+  });
+});
+</script>
+
 </html>

files/dashboard/styles.css

@@ -129,3 +129,17 @@ li {
     background-color: #2c3e50; /* Dark background for meter */
 }
 
+/* Sort arrow */
+th.sortable::after {
+  content: '';
+  float: right;
+  margin-left: 4px;
+  border: 4px solid transparent;
+}
+th.sortable.asc::after {
+  border-bottom-color: #333; /* ▲ */
+}
+th.sortable.desc::after {
+  border-top-color: #333; /* ▼ */
+}
+