From 4e8fb66e25f81ae2123783310b65fd36117bcbc7 Mon Sep 17 00:00:00 2001
From: "othman.suseno" <othman.suseno@adastra.id>
Date: Thu, 18 Dec 2025 16:19:00 +0700
Subject: [PATCH] modified storage view

---
 web/templates/storage.html | 61 ++++++++++++++++++++++++++------------
 1 file changed, 42 insertions(+), 19 deletions(-)

diff --git a/web/templates/storage.html b/web/templates/storage.html
index 7d06a69..a2b89cb 100644
--- a/web/templates/storage.html
+++ b/web/templates/storage.html
@@ -100,8 +100,8 @@
         </div>
         <div class="p-6">
           <!-- Visual Disk Grid -->
-          <div id="disks-visual" class="flex flex-wrap gap-4 mb-6">
-            <p class="text-slate-400 text-sm">Loading...</p>
+          <div id="disks-visual" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4 mb-6">
+            <p class="text-slate-400 text-sm col-span-full">Loading...</p>
           </div>
           
           <!-- Legend -->
@@ -500,49 +500,72 @@ async function loadDisks() {
     // Update summary
     summaryEl.textContent = `Disk: ${disks.length}`;
 
-    // Visual disk blocks (like QNAP) - using slate theme
+    // Visual disk blocks (like QNAP) - using slate theme with numbered slots
     visualEl.innerHTML = disks.map((disk, index) => {
       // Available disks - using slate theme colors
+      const slotNumber = index + 1;
       const statusColor = 'bg-slate-700';
       const statusBorder = 'border-slate-500';
-      const accentColor = 'border-blue-500';
       
       return `
         <div class="group relative">
-          <div class="disk-block ${statusColor} ${statusBorder} border-2 rounded-xl p-5 min-w-[130px] cursor-pointer transition-all duration-200 hover:scale-110 hover:shadow-xl hover:shadow-blue-500/20 hover:-translate-y-1 hover:border-blue-500" 
-               title="${disk.name} - ${disk.size || 'Unknown size'}\n${disk.path || `/dev/${disk.name}`}"
+          <div class="disk-block ${statusColor} ${statusBorder} border-2 rounded-xl p-4 min-w-[140px] cursor-pointer transition-all duration-200 hover:scale-105 hover:shadow-xl hover:shadow-blue-500/20 hover:-translate-y-1 hover:border-blue-500" 
+               title="Slot ${slotNumber}\n${disk.name}\n${disk.size || 'Unknown size'}\n${disk.path || `/dev/${disk.name}`}"
                onclick="selectDisk('${disk.name}')">
-            <div class="flex flex-col items-center justify-center">
-              <div class="w-16 h-16 rounded-xl bg-slate-600/50 flex items-center justify-center mb-3 backdrop-blur-sm border border-slate-500/50 group-hover:bg-slate-600 group-hover:border-blue-500/50 transition-colors">
-                <svg class="w-9 h-9 text-slate-200 drop-shadow-sm group-hover:text-blue-400 transition-colors" fill="currentColor" viewBox="0 0 20 20">
+            <!-- Slot Number Badge -->
+            <div class="absolute -top-2 -left-2 w-8 h-8 rounded-full bg-blue-600 border-2 border-slate-800 flex items-center justify-center text-white font-bold text-xs shadow-lg z-10">
+              ${slotNumber}
+            </div>
+            
+            <!-- Disk Icon Container -->
+            <div class="flex flex-col items-center justify-center pt-2">
+              <div class="w-20 h-20 rounded-xl bg-gradient-to-br from-slate-600 to-slate-700 flex items-center justify-center mb-3 border-2 border-slate-500/50 group-hover:border-blue-500/70 group-hover:from-blue-600/30 group-hover:to-slate-700 transition-all shadow-inner">
+                <!-- Disk Icon -->
+                <svg class="w-12 h-12 text-slate-200 group-hover:text-blue-400 transition-colors" fill="currentColor" viewBox="0 0 20 20">
                   <path d="M4 3a2 2 0 100 4h12a2 2 0 100-4H4z"></path>
                   <path fill-rule="evenodd" d="M3 8h14v7a2 2 0 01-2 2H5a2 2 0 01-2-2V8zm5 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z" clip-rule="evenodd"></path>
                 </svg>
               </div>
-              <div class="text-center">
-                <div class="text-slate-100 font-bold text-lg mb-1 drop-shadow-sm group-hover:text-blue-400 transition-colors">${disk.name}</div>
-                <div class="text-slate-300 text-sm font-semibold">${disk.size || 'N/A'}</div>
+              
+              <!-- Device Name -->
+              <div class="text-center w-full">
+                <div class="text-slate-100 font-bold text-base mb-1 group-hover:text-blue-400 transition-colors font-mono">
+                  ${disk.name}
+                </div>
+                <div class="text-slate-300 text-xs font-semibold mb-1">
+                  ${disk.size || 'N/A'}
+                </div>
+                <div class="text-slate-400 text-xs font-mono">
+                  ${disk.path || `/dev/${disk.name}`}
+                </div>
               </div>
             </div>
+            
             <!-- Status indicator -->
-            <div class="absolute top-3 right-3">
-              <div class="w-3.5 h-3.5 bg-blue-500 rounded-full shadow-md border-2 border-slate-800"></div>
+            <div class="absolute top-2 right-2">
+              <div class="w-3 h-3 bg-green-500 rounded-full shadow-md border-2 border-slate-800 animate-pulse"></div>
             </div>
           </div>
         </div>
       `;
     }).join('');
 
-    // Detailed disk list
-    listEl.innerHTML = disks.map(disk => {
+    // Detailed disk list with slot numbers
+    listEl.innerHTML = disks.map((disk, index) => {
       const status = 'Available';
       const statusColor = 'bg-slate-700 text-slate-200';
       const diskPath = disk.path || `/dev/${disk.name}`;
+      const slotNumber = index + 1;
       
       return `
         <div class="border-b border-slate-700 last:border-0 py-4 hover:bg-slate-750 transition-colors" data-disk-name="${disk.name}">
           <div class="flex items-center justify-between">
             <div class="flex items-center gap-4 flex-1">
+              <!-- Slot Number Badge -->
+              <div class="w-12 h-12 rounded-lg bg-blue-600 border-2 border-slate-700 flex items-center justify-center flex-shrink-0 font-bold text-white text-lg shadow-lg">
+                ${slotNumber}
+              </div>
+              
               <!-- Disk Icon -->
               <div class="w-12 h-12 rounded-lg bg-slate-700 border border-slate-600 flex items-center justify-center flex-shrink-0">
                 <svg class="w-6 h-6 text-slate-300" fill="currentColor" viewBox="0 0 20 20">
@@ -554,7 +577,7 @@ async function loadDisks() {
               <!-- Disk Info -->
               <div class="flex-1">
                 <div class="flex items-center gap-3 mb-2">
-                  <h3 class="text-lg font-semibold text-white">${disk.name}</h3>
+                  <h3 class="text-lg font-semibold text-white font-mono">${disk.name}</h3>
                   <span class="px-2 py-1 rounded text-xs font-medium ${statusColor}">${status}</span>
                   <span class="text-xs text-slate-500 font-mono">${diskPath}</span>
                 </div>
@@ -572,8 +595,8 @@ async function loadDisks() {
                     </div>
                   ` : ''}
                   <div>
-                    <span class="text-slate-400">Type:</span>
-                    <span class="text-white ml-2">Physical Disk</span>
+                    <span class="text-slate-400">Slot:</span>
+                    <span class="text-white ml-2 font-semibold">#${slotNumber}</span>
                   </div>
                 </div>
               </div>