Plug on/off

app/api/power/[device]/[action]/route.ts

@@ -0,0 +1,25 @@
+import { NextRequest, NextResponse } from "next/server";
+
+const ALLOWED_ACTIONS = ["on", "off"];
+
+export async function POST(
+	req: NextRequest,
+	{ params }: { params: Promise<{ device: string; action: string }> },
+) {
+	const token = req.cookies.get("token")?.value;
+	if (!token) {
+		return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+	}
+
+	const { device, action } = await params;
+
+	if (!ALLOWED_ACTIONS.includes(action)) {
+		return NextResponse.json({ error: "Invalid action" }, { status: 400 });
+	}
+
+	const res = await fetch(`http://localhost:3001/power/${device}/${action}`, {
+		method: "POST",
+	});
+
+	return new NextResponse(null, { status: res.status });
+}

app/components/PowerCard.tsx

@@ -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
+					<div className="flex items-center gap-2">
-						className={`flex items-center gap-1.5 text-[0.62rem] font-medium uppercase tracking-widest ${
-							device.on ? "text-emerald-500" : "text-gray-400"
-						}`}
-					>
 						<span
-							className={`w-1.5 h-1.5 rounded-full ${
+							className={`flex items-center gap-1.5 text-[0.62rem] font-medium uppercase tracking-widest ${
-								device.on ? "bg-emerald-400" : "bg-gray-300"
+								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>
 

app/components/PowerGrid.tsx

@@ -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
-			<PowerCard device={desktop} label="Desktop" delay={60} />
+				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>
 	);
 }

app/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState, useRef } from "react";
+import { useEffect, useState, useRef, useCallback } from "react";
 import { getStats, type Stats, type NetworkInterface } from "./lib/getStats";
 
 import NavBar from "./components/NavBar";
@@ -141,20 +141,20 @@ export default function Home() {
 		return () => clearInterval(id);
 	}, []);
 
-	useEffect(() => {
+	const fetchPower = useCallback(async () => {
-		const fetchPower = async () => {
+		try {
-			try {
+			setPower(await getPower());
-				setPower(await getPower());
+		} catch (e) {
-			} catch (e) {
+			if (e instanceof Error && e.message === "UNAUTHORIZED") return;
-				if (e instanceof Error && e.message === "UNAUTHORIZED") return;
+			console.error("Power fetch failed:", e);
-				console.error("Power fetch failed:", e);
+		}
-			}
+	}, []);
-		};
 
+	useEffect(() => {
 		fetchPower();
 		const id = setInterval(fetchPower, 10000);
 		return () => clearInterval(id);
-	}, []);
+	}, [fetchPower]);
 
 	const primaryIface = stats
 		? Object.keys(stats.network).find(
@@ -209,7 +209,7 @@ export default function Home() {
 						</h2>
 					</div>
 
-					<PowerGrid power={power} />
+					<PowerGrid power={power} onRefresh={fetchPower} />
 
 					<LinksGrid />
 				</div>