110 lines
3.9 KiB
TypeScript
110 lines
3.9 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { Wifi, WifiOff } from "lucide-react";
|
|
import { useSensorStore } from "../stores/sensorStore";
|
|
import { VoltageDisplay } from "./VoltageDisplay";
|
|
import { BatteryStatus } from "./BatteryStatus";
|
|
import { LoginIndicator } from "./LoginIndicator";
|
|
import TCKLogo from "../../../../logo/tck_logo.svg";
|
|
|
|
export function Header() {
|
|
const [currentTime, setCurrentTime] = useState(new Date());
|
|
|
|
const { data } = useSensorStore();
|
|
const isOnline = data.communication.percentage > 0;
|
|
const isLoggedIn = false;
|
|
|
|
useEffect(() => {
|
|
const timer = setInterval(() => {
|
|
setCurrentTime(new Date());
|
|
}, 1000);
|
|
|
|
return () => clearInterval(timer);
|
|
}, []);
|
|
|
|
const formatTime = (date: Date) => {
|
|
return date.toLocaleTimeString("en-US", {
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
second: "2-digit",
|
|
hour12: false
|
|
});
|
|
};
|
|
|
|
const formatDate = (date: Date) => {
|
|
return date.toLocaleDateString("en-CA"); // YYYY-MM-DD format
|
|
};
|
|
|
|
return (
|
|
<div className="bg-gray-950 border-b border-gray-700 px-2 py-1 flex items-center gap-2 text-xs">
|
|
{/* Logo */}
|
|
<div className="flex items-center gap-1">
|
|
<img src={TCKLogo} alt="TCK" className="w-6 h-6" />
|
|
<span className="text-white font-semibold">RTU</span>
|
|
</div>
|
|
|
|
<div className="flex-1 flex items-center gap-2 justify-end">
|
|
{/* Time */}
|
|
<div className="flex items-center gap-1 px-2 py-1 bg-gray-800 rounded">
|
|
<span className="text-gray-400">Time:</span>
|
|
<span className="text-green-400 font-mono font-semibold">{formatTime(currentTime)}</span>
|
|
</div>
|
|
|
|
{/* Date */}
|
|
<div className="flex items-center gap-1 px-2 py-1 bg-gray-800 rounded">
|
|
<span className="text-gray-400">Date:</span>
|
|
<span className="text-blue-400 font-mono font-semibold">{formatDate(currentTime)}</span>
|
|
</div>
|
|
|
|
{/* Station ID */}
|
|
<div className="flex items-center gap-1 px-2 py-1 bg-gray-800 rounded">
|
|
<span className="text-gray-400">Station:</span>
|
|
<span className="text-white font-semibold">{data.station.id}</span>
|
|
</div>
|
|
|
|
{/* Comm Status */}
|
|
<div className="flex items-center gap-1 px-2 py-1 bg-gray-800 rounded">
|
|
{isOnline ? (
|
|
<>
|
|
<Wifi className="w-3 h-3 text-green-500" />
|
|
<span className="text-green-500">
|
|
{data.communication.asu}ASU/{data.communication.dBm}dBm({data.communication.percentage}%)
|
|
</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<WifiOff className="w-3 h-3 text-red-500" />
|
|
<span className="text-red-500">OFFLINE</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* Version */}
|
|
<div className="flex items-center gap-1 px-2 py-1 bg-gray-800 rounded">
|
|
<span className="text-gray-400">Ver:</span>
|
|
<span className="text-white">{data.station.version}</span>
|
|
</div>
|
|
|
|
{/* Login Status */}
|
|
<LoginIndicator isLoggedIn={isLoggedIn} />
|
|
|
|
{/* Solar Voltage */}
|
|
<div className="flex items-center gap-1 px-2 py-1 bg-gray-800 rounded">
|
|
<span className="text-gray-400">Solar:</span>
|
|
<span className="text-yellow-500 font-mono">{data.voltage.solar.toFixed(1)}V</span>
|
|
</div>
|
|
|
|
{/* Battery Voltage */}
|
|
<div className="flex items-center gap-1 px-2 py-1 bg-gray-800 rounded">
|
|
<span className="text-gray-400">Battery:</span>
|
|
<span className={`font-mono ${data.voltage.batteryStatus === 'HIGH' ? 'text-green-500' : 'text-red-500'}`}>
|
|
{data.voltage.battery.toFixed(1)}V
|
|
</span>
|
|
<span className={`text-xs px-1 rounded ${data.voltage.batteryStatus === 'HIGH' ? 'bg-green-500/20 text-green-500' : 'bg-red-500/20 text-red-500'}`}>
|
|
{data.voltage.batteryStatus}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|