othman.suseno/atlas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

modified storage view
Some checks failed
CI / test-build (push) Has been cancelled
Details

Browse Source
This commit is contained in:
othman hendy suseno
2025-12-18 16:19:00 +07:00
parent 11b8196d84
commit 4e8fb66e25
1 changed files with 42 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
web/templates/storage.html
View File

@@ -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>