numbus/Numbus
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Disks minor step improvements.

Browse Source
This commit is contained in:
Raphaël Numbus
2026-03-29 16:52:19 +02:00
parent d9c983b401
commit cf1601f2b9
1 changed files with 35 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
configurator/index.html
+35 -14
View File
@@ -403,32 +403,35 @@
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-10">
<div class="grid grid-cols-1 md:grid-cols-2 gap-10 items-start">
<!-- Boot Selection -->
<div class="space-y-6">
<div class="space-y-6 flex flex-col">
<h3 class="text-xl font-bold text-white flex items-center gap-2">
<i class="mdi mdi-boot text-sky-400"></i> Boot Disks
<i class="mdi mdi-nix text-sky-400"></i> Boot Disks
</h3>
<p class="text-sm text-slate-400">Choose 1 (Stripe) or 2 (Mirror) disks for the operating system.</p>
<div class="space-y-3">
<template x-for="disk in hardwareData.disks" :key="disk.id">
<template x-for="disk in sortedDisks()" :key="disk.id">
<button @click="toggleDisk(disk.id, 'boot')"
x-show="!formData.disks.data.includes(disk.id)"
:class="formData.disks.boot.includes(disk.id) ? 'bg-fuchsia-600/20 border-fuchsia-500' : 'bg-slate-900 border-slate-700 opacity-60 hover:opacity-100'"
class="w-full p-4 border rounded-xl text-left transition-all group">
<div class="flex justify-between items-center">
<div class="flex items-center gap-3">
<i class="mdi mdi-harddisk text-2xl" :class="formData.disks.boot.includes(disk.id) ? 'text-white' : 'text-slate-500'"></i>
<i :class="'mdi ' + getDiskIcon(disk.type) + ' text-2xl'" :class="formData.disks.boot.includes(disk.id) ? 'text-white' : 'text-slate-500'"></i>
<div>
<div class="font-bold text-sm" x-text="disk.name"></div>
<div class="text-[10px] uppercase text-slate-500 font-bold" x-text="disk.size + ' • ' + disk.type"></div>
<div class="text-xs uppercase text-slate-500 font-bold" x-text="disk.size + ' • ' + disk.type"></div>
</div>
</div>
<div class="text-right">
<div class="text-[10px] font-bold" :class="disk.health === 'PASSED' ? 'text-green-500' : 'text-amber-500'" x-text="'Health: ' + disk.health"></div>
<div class="text-xs font-bold" :class="disk.health === 'PASSED' ? 'text-green-500' : 'text-amber-500'" x-text="'Health: ' + disk.health"></div>
</div>
</div>
<div x-show="formData.disks.boot.includes(disk.id) && disk.health !== 'PASSED'" class="mt-3 p-2 bg-amber-500/10 border border-amber-500/30 rounded-lg">
<p class="text-[10px] text-amber-200/80"><i class="mdi mdi-alert-circle mr-1"></i> Disk health is not optimal. Use for boot with caution.</p>
</div>
</button>
</template>
</div>
@@ -440,30 +443,33 @@
</div>
<!-- Data Selection -->
<div class="space-y-6">
<div class="space-y-6 flex flex-col">
<h3 class="text-xl font-bold text-white flex items-center gap-2">
<i class="mdi mdi-database text-sky-400"></i> Data Disks
<i class="mdi mdi-server text-sky-400"></i> Data Disks
</h3>
<p class="text-sm text-slate-400">Select disks for storage. SnapRAID parity is used if >1 disk is chosen.</p>
<div class="space-y-3">
<template x-for="disk in hardwareData.disks" :key="disk.id">
<template x-for="disk in sortedDisks()" :key="disk.id">
<button @click="toggleDisk(disk.id, 'data')"
df81ec3e7f29dfdb84a3a7eec1ea38348003b908x-show="!formData.disks.boot.includes(disk.id)"
x-show="!formData.disks.boot.includes(disk.id)"
:class="formData.disks.data.includes(disk.id) ? 'bg-fuchsia-600/20 border-fuchsia-500' : 'bg-slate-900 border-slate-700 opacity-60 hover:opacity-100'"
class="w-full p-4 border rounded-xl text-left transition-all group">
<div class="flex justify-between items-center">
<div class="flex items-center gap-3">
<i class="mdi mdi-server text-2xl" :class="formData.disks.data.includes(disk.id) ? 'text-white' : 'text-slate-500'"></i>
<i :class="'mdi ' + getDiskIcon(disk.type) + ' text-2xl'" :class="formData.disks.data.includes(disk.id) ? 'text-white' : 'text-slate-500'"></i>
<div>
<div class="font-bold text-sm" x-text="disk.name"></div>
<div class="text-[10px] uppercase text-slate-500 font-bold" x-text="disk.size + ' • ' + disk.type"></div>
<div class="text-xs uppercase text-slate-500 font-bold" x-text="disk.size + ' • ' + disk.type"></div>
</div>
</div>
<div class="text-right">
<div class="text-[10px] font-bold" :class="disk.health === 'PASSED' ? 'text-green-500' : 'text-amber-500'" x-text="'Health: ' + disk.health"></div>
<div class="text-xs font-bold" :class="disk.health === 'PASSED' ? 'text-green-500' : 'text-amber-500'" x-text="'Health: ' + disk.health"></div>
</div>
</div>
<div x-show="formData.disks.data.includes(disk.id) && disk.health !== 'PASSED'" class="mt-3 p-2 bg-amber-500/10 border border-amber-500/30 rounded-lg">
<p class="text-[10px] text-amber-200/80"><i class="mdi mdi-alert-circle mr-1"></i> SMART health warning. Consider replacing before use as data storage.</p>
</div>
</button>
</template>
</div>
@@ -1192,6 +1198,21 @@
}
}
},
sortedDisks() {
const order = { 'NVMe': 0, 'SSD': 1, 'HDD': 2, 'USB': 3, 'Other': 4 };
return [...this.hardwareData.disks].sort((a, b) => {
return (order[a.type] ?? 5) - (order[b.type] ?? 5);
});
},
getDiskIcon(type) {
switch(type) {
case 'NVMe': return 'mdi-flash';
case 'SSD': return 'mdi-memory';
case 'HDD': return 'mdi-harddisk';
case 'USB': return 'mdi-usb';
default: return 'mdi-harddisk';
}
},
toggleDisk(id, category) {
const list = this.formData.disks[category];
const index = list.indexOf(id);