idolpx/meatloaf-config
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(DeviceDetailOverlay): conditionally render UI elements based on device type and improve cache handling

Browse Source
This commit is contained in:
Jaime Idolpx 2026-06-11 22:20:14 -04:00
parent fefb7699fa
commit e4a5eac676
1 changed files with 132 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/app/components/DeviceDetailOverlay.tsx
View File

@ -311,6 +311,7 @@ export default function DeviceDetailOverlay({
<div className="p-4 space-y-6"> <div className="p-4 space-y-6">
<div className="space-y-4"> <div className="space-y-4">
{!device.physical && (
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<label className="text-sm text-neutral-500">Enabled</label> <label className="text-sm text-neutral-500">Enabled</label>
<button <button
@ -329,6 +330,7 @@ export default function DeviceDetailOverlay({
/> />
</button> </button>
</div> </div>
)}
<div> <div>
<label className="text-sm text-neutral-500 block mb-2">Type</label> <label className="text-sm text-neutral-500 block mb-2">Type</label>
@ -350,6 +352,7 @@ export default function DeviceDetailOverlay({
/> />
</div> </div>
{!device.physical && <>
<div> <div>
<label className="text-sm text-neutral-500 block mb-2">Base URL</label> <label className="text-sm text-neutral-500 block mb-2">Base URL</label>
<div className="flex gap-2"> <div className="flex gap-2">
@ -466,11 +469,16 @@ export default function DeviceDetailOverlay({
</div> </div>
</div> </div>
)} )}
</>}
{deviceData.mode !== undefined && ( {deviceData.mode !== undefined && (
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<label className="text-sm text-neutral-500">Mode</label> <label className="text-sm text-neutral-500">Mode</label>
<div className="flex rounded-lg border border-neutral-300 overflow-hidden text-sm"> {device.physical
? <span className="text-sm text-neutral-700 px-3 py-2">
{(deviceData.mode ?? 0) === 0 ? 'Read Only' : 'Write Enabled'}
</span>
: <div className="flex rounded-lg border border-neutral-300 overflow-hidden text-sm">
{([0, 1] as const).map((val, i) => ( {([0, 1] as const).map((val, i) => (
<button <button
key={val} key={val}
@ -485,6 +493,7 @@ export default function DeviceDetailOverlay({
</button> </button>
))} ))}
</div> </div>
}
</div> </div>
)} )}