Fixes to Add Melody Page, minor UI Tweaks
This commit is contained in:
@@ -7,10 +7,15 @@ import ConfirmDialog from "../components/ConfirmDialog";
|
||||
function Field({ label, children }) {
|
||||
return (
|
||||
<div>
|
||||
<dt className="text-xs font-medium text-gray-500 uppercase tracking-wide">
|
||||
<dt
|
||||
className="text-xs font-medium uppercase tracking-wide"
|
||||
style={{ color: "var(--text-muted)" }}
|
||||
>
|
||||
{label}
|
||||
</dt>
|
||||
<dd className="mt-1 text-sm text-gray-900">{children || "-"}</dd>
|
||||
<dd className="mt-1 text-sm" style={{ color: "var(--text-primary)" }}>
|
||||
{children || "-"}
|
||||
</dd>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -18,9 +23,12 @@ function Field({ label, children }) {
|
||||
function BoolBadge({ value, yesLabel = "Yes", noLabel = "No" }) {
|
||||
return (
|
||||
<span
|
||||
className={`px-2 py-0.5 text-xs rounded-full ${
|
||||
value ? "bg-green-100 text-green-700" : "bg-gray-100 text-gray-500"
|
||||
}`}
|
||||
className="px-2 py-0.5 text-xs rounded-full"
|
||||
style={
|
||||
value
|
||||
? { backgroundColor: "var(--success-bg)", color: "var(--success-text)" }
|
||||
: { backgroundColor: "var(--bg-card-hover)", color: "var(--text-muted)" }
|
||||
}
|
||||
>
|
||||
{value ? yesLabel : noLabel}
|
||||
</span>
|
||||
@@ -65,12 +73,23 @@ export default function DeviceDetail() {
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <div className="text-center py-8 text-gray-500">Loading...</div>;
|
||||
return (
|
||||
<div className="text-center py-8" style={{ color: "var(--text-muted)" }}>
|
||||
Loading...
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="bg-red-50 border border-red-200 text-red-700 text-sm rounded-md p-3">
|
||||
<div
|
||||
className="text-sm rounded-md p-3 border"
|
||||
style={{
|
||||
backgroundColor: "var(--danger-bg)",
|
||||
borderColor: "var(--danger)",
|
||||
color: "var(--danger-text)",
|
||||
}}
|
||||
>
|
||||
{error}
|
||||
</div>
|
||||
);
|
||||
@@ -90,18 +109,23 @@ export default function DeviceDetail() {
|
||||
<div>
|
||||
<button
|
||||
onClick={() => navigate("/devices")}
|
||||
className="text-sm text-blue-600 hover:text-blue-800 mb-2 inline-block"
|
||||
className="text-sm hover:underline mb-2 inline-block"
|
||||
style={{ color: "var(--accent)" }}
|
||||
>
|
||||
← Back to Devices
|
||||
</button>
|
||||
<div className="flex items-center gap-3">
|
||||
<h1 className="text-2xl font-bold text-gray-900">
|
||||
<h1
|
||||
className="text-2xl font-bold"
|
||||
style={{ color: "var(--text-heading)" }}
|
||||
>
|
||||
{device.device_name || "Unnamed Device"}
|
||||
</h1>
|
||||
<span
|
||||
className={`inline-block w-3 h-3 rounded-full ${
|
||||
device.is_Online ? "bg-green-500" : "bg-gray-300"
|
||||
device.is_Online ? "bg-green-500" : ""
|
||||
}`}
|
||||
style={!device.is_Online ? { backgroundColor: "var(--border-primary)" } : undefined}
|
||||
title={device.is_Online ? "Online" : "Offline"}
|
||||
/>
|
||||
</div>
|
||||
@@ -110,13 +134,15 @@ export default function DeviceDetail() {
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => navigate(`/devices/${id}/edit`)}
|
||||
className="px-4 py-2 bg-blue-600 text-white text-sm rounded-md hover:bg-blue-700 transition-colors"
|
||||
className="px-4 py-2 text-sm rounded-md transition-colors"
|
||||
style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-heading)" }}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowDelete(true)}
|
||||
className="px-4 py-2 bg-red-600 text-white text-sm rounded-md hover:bg-red-700 transition-colors"
|
||||
className="px-4 py-2 text-sm rounded-md transition-colors"
|
||||
style={{ backgroundColor: "var(--danger)", color: "#fff" }}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
@@ -128,8 +154,14 @@ export default function DeviceDetail() {
|
||||
{/* Left column */}
|
||||
<div className="space-y-6">
|
||||
{/* Basic Info */}
|
||||
<section className="bg-white rounded-lg border border-gray-200 p-6">
|
||||
<h2 className="text-lg font-semibold text-gray-800 mb-4">
|
||||
<section
|
||||
className="rounded-lg border p-6"
|
||||
style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}
|
||||
>
|
||||
<h2
|
||||
className="text-lg font-semibold mb-4"
|
||||
style={{ color: "var(--text-heading)" }}
|
||||
>
|
||||
Basic Information
|
||||
</h2>
|
||||
<dl className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
@@ -137,7 +169,9 @@ export default function DeviceDetail() {
|
||||
<span className="font-mono">{device.device_id}</span>
|
||||
</Field>
|
||||
<Field label="Document ID">
|
||||
<span className="font-mono text-xs text-gray-500">{device.id}</span>
|
||||
<span className="font-mono text-xs" style={{ color: "var(--text-muted)" }}>
|
||||
{device.id}
|
||||
</span>
|
||||
</Field>
|
||||
<Field label="Status">
|
||||
<BoolBadge value={device.is_Online} yesLabel="Online" noLabel="Offline" />
|
||||
@@ -157,8 +191,14 @@ export default function DeviceDetail() {
|
||||
</section>
|
||||
|
||||
{/* Device Attributes */}
|
||||
<section className="bg-white rounded-lg border border-gray-200 p-6">
|
||||
<h2 className="text-lg font-semibold text-gray-800 mb-4">
|
||||
<section
|
||||
className="rounded-lg border p-6"
|
||||
style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}
|
||||
>
|
||||
<h2
|
||||
className="text-lg font-semibold mb-4"
|
||||
style={{ color: "var(--text-heading)" }}
|
||||
>
|
||||
Device Attributes
|
||||
</h2>
|
||||
<dl className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
@@ -184,8 +224,14 @@ export default function DeviceDetail() {
|
||||
</section>
|
||||
|
||||
{/* Network */}
|
||||
<section className="bg-white rounded-lg border border-gray-200 p-6">
|
||||
<h2 className="text-lg font-semibold text-gray-800 mb-4">
|
||||
<section
|
||||
className="rounded-lg border p-6"
|
||||
style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}
|
||||
>
|
||||
<h2
|
||||
className="text-lg font-semibold mb-4"
|
||||
style={{ color: "var(--text-heading)" }}
|
||||
>
|
||||
Network Settings
|
||||
</h2>
|
||||
<dl className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
@@ -198,13 +244,22 @@ export default function DeviceDetail() {
|
||||
{/* Right column */}
|
||||
<div className="space-y-6">
|
||||
{/* Subscription */}
|
||||
<section className="bg-white rounded-lg border border-gray-200 p-6">
|
||||
<h2 className="text-lg font-semibold text-gray-800 mb-4">
|
||||
<section
|
||||
className="rounded-lg border p-6"
|
||||
style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}
|
||||
>
|
||||
<h2
|
||||
className="text-lg font-semibold mb-4"
|
||||
style={{ color: "var(--text-heading)" }}
|
||||
>
|
||||
Subscription
|
||||
</h2>
|
||||
<dl className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
<Field label="Tier">
|
||||
<span className="px-2 py-0.5 text-xs rounded-full bg-blue-50 text-blue-700 capitalize">
|
||||
<span
|
||||
className="px-2 py-0.5 text-xs rounded-full capitalize"
|
||||
style={{ backgroundColor: "var(--badge-blue-bg)", color: "var(--badge-blue-text)" }}
|
||||
>
|
||||
{sub.subscrTier}
|
||||
</span>
|
||||
</Field>
|
||||
@@ -216,8 +271,14 @@ export default function DeviceDetail() {
|
||||
</section>
|
||||
|
||||
{/* Clock Settings */}
|
||||
<section className="bg-white rounded-lg border border-gray-200 p-6">
|
||||
<h2 className="text-lg font-semibold text-gray-800 mb-4">
|
||||
<section
|
||||
className="rounded-lg border p-6"
|
||||
style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}
|
||||
>
|
||||
<h2
|
||||
className="text-lg font-semibold mb-4"
|
||||
style={{ color: "var(--text-heading)" }}
|
||||
>
|
||||
Clock Settings
|
||||
</h2>
|
||||
<dl className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
@@ -239,8 +300,16 @@ export default function DeviceDetail() {
|
||||
</Field>
|
||||
</dl>
|
||||
{(clock.isDaySilenceOn || clock.isNightSilenceOn) && (
|
||||
<div className="mt-4 pt-4 border-t border-gray-100">
|
||||
<h3 className="text-sm font-semibold text-gray-700 mb-3">Silence Periods</h3>
|
||||
<div
|
||||
className="mt-4 pt-4 border-t"
|
||||
style={{ borderColor: "var(--border-secondary)" }}
|
||||
>
|
||||
<h3
|
||||
className="text-sm font-semibold mb-3"
|
||||
style={{ color: "var(--text-primary)" }}
|
||||
>
|
||||
Silence Periods
|
||||
</h3>
|
||||
<dl className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
{clock.isDaySilenceOn && (
|
||||
<>
|
||||
@@ -262,8 +331,14 @@ export default function DeviceDetail() {
|
||||
</section>
|
||||
|
||||
{/* Statistics */}
|
||||
<section className="bg-white rounded-lg border border-gray-200 p-6">
|
||||
<h2 className="text-lg font-semibold text-gray-800 mb-4">
|
||||
<section
|
||||
className="rounded-lg border p-6"
|
||||
style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}
|
||||
>
|
||||
<h2
|
||||
className="text-lg font-semibold mb-4"
|
||||
style={{ color: "var(--text-heading)" }}
|
||||
>
|
||||
Statistics & Warranty
|
||||
</h2>
|
||||
<dl className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
@@ -282,8 +357,14 @@ export default function DeviceDetail() {
|
||||
</section>
|
||||
|
||||
{/* Melodies & Users summary */}
|
||||
<section className="bg-white rounded-lg border border-gray-200 p-6">
|
||||
<h2 className="text-lg font-semibold text-gray-800 mb-4">
|
||||
<section
|
||||
className="rounded-lg border p-6"
|
||||
style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}
|
||||
>
|
||||
<h2
|
||||
className="text-lg font-semibold mb-4"
|
||||
style={{ color: "var(--text-heading)" }}
|
||||
>
|
||||
Melodies & Users
|
||||
</h2>
|
||||
<dl className="grid grid-cols-2 gap-4">
|
||||
|
||||
Reference in New Issue
Block a user