jackmechem/server-dash
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Plug on/off

Browse source
This commit is contained in:
Jack Mechem 2026-05-21 19:17:40 -07:00
parent 130bed1d1f
commit 876da0c384
Signed by: jackmechem
SSH key fingerprint: SHA256:GjIjMAC33pzYOe+hWcX5uvgnPrVFAXSrquvt84AOJbU
4 changed files with 100 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

41
app/components/PowerCard.tsx
View file

@ -1,9 +1,13 @@
"use client";
import { type TapoDevice } from "../lib/getPower";
interface PowerCardProps {
device: TapoDevice | null;
label: string;
delay?: number;
toggling?: boolean;
onToggle?: (on: boolean) => void;
}
function powerColor(watts: number): string {
@ -12,7 +16,7 @@ function powerColor(watts: number): string {
return "#3b82f6";
}
export default function PowerCard({ device, label, delay = 0 }: PowerCardProps) {
export default function PowerCard({ device, label, delay = 0, toggling = false, onToggle }: PowerCardProps) {
const pct = device ? Math.min(100, (device.current_power_w / 500) * 100) : 0;
const runtimeHours = device ? Math.floor(device.today_runtime_min / 60) : 0;
const runtimeMins = device ? device.today_runtime_min % 60 : 0;
@ -27,18 +31,33 @@ export default function PowerCard({ device, label, delay = 0 }: PowerCardProps)
{label}
</span>
{device ? (
<span
className={`flex items-center gap-1.5 text-[0.62rem] font-medium uppercase tracking-widest ${
device.on ? "text-emerald-500" : "text-gray-400"
}`}
>
<div className="flex items-center gap-2">
<span
className={`w-1.5 h-1.5 rounded-full ${
device.on ? "bg-emerald-400" : "bg-gray-300"
className={`flex items-center gap-1.5 text-[0.62rem] font-medium uppercase tracking-widest ${
device.on ? "text-emerald-500" : "text-gray-400"
}`}
/>
{device.on ? "On" : "Off"}
</span>
>
<span
className={`w-1.5 h-1.5 rounded-full ${
device.on ? "bg-emerald-400" : "bg-gray-300"
}`}
/>
{device.on ? "On" : "Off"}
</span>
{onToggle && (
<button
onClick={() => onToggle(!device.on)}
disabled={toggling}
className={`text-[0.6rem] font-medium uppercase tracking-widest px-2 py-0.5 rounded-full border transition-colors disabled:opacity-40 disabled:cursor-not-allowed ${
device.on
? "border-red-200 text-red-400 hover:bg-red-50"
: "border-emerald-200 text-emerald-500 hover:bg-emerald-50"
}`}
>
{toggling ? "···" : device.on ? "Turn off" : "Turn on"}
</button>
)}
</div>
) : null}
</div>

36
app/components/PowerGrid.tsx
View file

@ -1,18 +1,48 @@
"use client";
import { useState } from "react";
import { type PowerData } from "../lib/getPower";
import PowerCard from "./PowerCard";
interface PowerGridProps {
power: PowerData | null;
onRefresh: () => void;
}
export default function PowerGrid({ power }: PowerGridProps) {
export default function PowerGrid({ power, onRefresh }: PowerGridProps) {
const [toggling, setToggling] = useState<string | null>(null);
const server = power?.devices.find((d) => d.name === "server") ?? null;
const desktop = power?.devices.find((d) => d.name === "desktop") ?? null;
const handleToggle = async (deviceName: string, on: boolean) => {
setToggling(deviceName);
try {
const action = on ? "on" : "off";
const res = await fetch(`/api/power/${deviceName}/${action}`, { method: "POST" });
if (!res.ok) console.error(`Toggle ${deviceName} failed:`, res.status);
else onRefresh();
} finally {
setToggling(null);
}
};
return (
<div className="grid grid-cols-1 md:grid-cols-2 gap-3.5 mb-11">
<PowerCard device={server} label="Server" delay={0} />
<PowerCard device={desktop} label="Desktop" delay={60} />
<PowerCard
device={server}
label="Server"
delay={0}
toggling={toggling === "server"}
onToggle={(on) => handleToggle("server", on)}
/>
<PowerCard
device={desktop}
label="Desktop"
delay={60}
toggling={toggling === "desktop"}
onToggle={(on) => handleToggle("desktop", on)}
/>
</div>
);
}