feature/syasya/testlayout #6
@ -1,26 +1,51 @@
|
||||
'use client';
|
||||
|
||||
import type { SiteName } from '@/components/dashboards/SiteStatus';
|
||||
type Option = { label: string; value: string };
|
||||
|
||||
type SiteSelectorProps = {
|
||||
selectedSite: SiteName;
|
||||
setSelectedSite: (site: SiteName) => void;
|
||||
options: Option[]; // e.g. [{label: 'Timo… (Installation)', value: 'PROJ-0008'}, …]
|
||||
selectedValue: string | null; // the selected project "name" (siteId) or null
|
||||
onChange: (value: string) => void; // called with the selected value
|
||||
label?: string;
|
||||
disabled?: boolean;
|
||||
};
|
||||
const SiteSelector = ({ selectedSite, setSelectedSite }: SiteSelectorProps) => {
|
||||
|
||||
const SiteSelector = ({
|
||||
options,
|
||||
selectedValue,
|
||||
onChange,
|
||||
label = 'Select Site:',
|
||||
disabled = false,
|
||||
}: SiteSelectorProps) => {
|
||||
const isEmpty = !options || options.length === 0;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col ">
|
||||
<label htmlFor="site" className="font-semibold text-lg dark:text-white">Select Site:</label>
|
||||
<div className="flex flex-col">
|
||||
<label htmlFor="site" className="font-semibold text-lg dark:text-white">
|
||||
{label}
|
||||
</label>
|
||||
|
||||
<select
|
||||
id="site"
|
||||
className="border p-2 rounded dark:text-white dark:bg-rtgray-800 dark:border-rtgray-700"
|
||||
value={selectedSite}
|
||||
onChange={(e) => setSelectedSite(e.target.value as SiteName)}
|
||||
value={selectedValue ?? ''} // keep controlled even when null
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
disabled={disabled || isEmpty}
|
||||
>
|
||||
<option>Site A</option>
|
||||
<option>Site B</option>
|
||||
<option>Site C</option>
|
||||
{/* Placeholder when nothing selected */}
|
||||
<option value="" disabled>
|
||||
{isEmpty ? 'No sites available' : 'Choose a site…'}
|
||||
</option>
|
||||
|
||||
{options.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SiteSelector;
|
||||
|
||||
|
||||
@ -1,217 +1,213 @@
|
||||
import axios from "axios";
|
||||
import React, { useState, useEffect } from "react";
|
||||
'use client';
|
||||
|
||||
export type SiteName = 'Site A' | 'Site B' | 'Site C';
|
||||
import axios from "axios";
|
||||
import React, { useState, useEffect, useMemo } from "react";
|
||||
|
||||
export type SiteName = string;
|
||||
|
||||
interface SiteStatusProps {
|
||||
selectedSite: SiteName;
|
||||
location: string;
|
||||
inverterProvider: string;
|
||||
emergencyContact: string;
|
||||
lastSyncTimestamp: string;
|
||||
selectedSite: string; // display label (e.g., CRM project_name)
|
||||
siteId: string; // canonical id (e.g., CRM Project.name like PROJ-0008)
|
||||
status?: string; // CRM status (Open/Completed/On Hold/…)
|
||||
location: string;
|
||||
inverterProvider: string;
|
||||
emergencyContact: string;
|
||||
lastSyncTimestamp: string;
|
||||
}
|
||||
|
||||
const API_URL = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:8000";
|
||||
const WS_URL = process.env.NEXT_PUBLIC_WS_URL ?? "ws://localhost:8000/ws";
|
||||
|
||||
const SiteStatus = ({
|
||||
selectedSite,
|
||||
location,
|
||||
inverterProvider,
|
||||
emergencyContact,
|
||||
lastSyncTimestamp,
|
||||
selectedSite,
|
||||
siteId,
|
||||
status,
|
||||
location,
|
||||
inverterProvider,
|
||||
emergencyContact,
|
||||
lastSyncTimestamp,
|
||||
}: SiteStatusProps) => {
|
||||
|
||||
useEffect(() => {
|
||||
const ws = new WebSocket("ws://localhost:8000/ws");
|
||||
|
||||
ws.onmessage = (event) => {
|
||||
const data = event.data;
|
||||
alert(`MQTT: ${data}`);
|
||||
};
|
||||
// --- WebSocket to receive MQTT-forwarded messages ---
|
||||
useEffect(() => {
|
||||
const ws = new WebSocket(WS_URL);
|
||||
|
||||
ws.onopen = () => console.log("WebSocket connected");
|
||||
ws.onclose = () => console.log("WebSocket disconnected");
|
||||
ws.onerror = (e) => console.error("WebSocket error:", e);
|
||||
|
||||
ws.onmessage = (event) => {
|
||||
// Tip: avoid alert storms; log or toast instead
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
console.log("WS:", data);
|
||||
} catch {
|
||||
console.log("WS raw:", event.data);
|
||||
}
|
||||
};
|
||||
|
||||
return () => ws.close();
|
||||
}, []);
|
||||
}, []);
|
||||
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [deviceId, setDeviceId] = useState("");
|
||||
const [functionType, setFunctionType] = useState<"Grid" | "Solar">("Grid");
|
||||
|
||||
// Track devices connected per siteId (dynamic)
|
||||
const [loggedDevices, setLoggedDevices] = useState<Record<string, string[]>>({});
|
||||
const devicesAtSite = loggedDevices[siteId] ?? [];
|
||||
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [deviceId, setDeviceId] = useState("");
|
||||
const [functionType, setFunctionType] = useState("Grid");
|
||||
const handleStartLogging = () => setShowModal(true);
|
||||
|
||||
// Map site names to site IDs
|
||||
const siteIdMap: Record<SiteName, string> = {
|
||||
"Site A": "site_01",
|
||||
"Site B": "site_02",
|
||||
"Site C": "site_03",
|
||||
};
|
||||
const handleConfirm = async () => {
|
||||
const id = deviceId.trim();
|
||||
if (!id) return;
|
||||
|
||||
// Track devices connected per site
|
||||
const [loggedDevices, setLoggedDevices] = useState<Record<string, string[]>>({
|
||||
site_01: [],
|
||||
site_02: [],
|
||||
site_03: [],
|
||||
});
|
||||
const topic = `ADW300/${siteId}/${id}/${functionType.toLowerCase()}`;
|
||||
|
||||
const siteId = siteIdMap[selectedSite];
|
||||
const devicesAtSite = loggedDevices[siteId] || [];
|
||||
try {
|
||||
const response = await axios.post(`${API_URL}/start-logging`, { topics: [topic] });
|
||||
console.log("Started logging:", response.data);
|
||||
|
||||
const handleStartLogging = () => {
|
||||
setShowModal(true);
|
||||
};
|
||||
setLoggedDevices(prev => ({
|
||||
...prev,
|
||||
[siteId]: [...(prev[siteId] ?? []), id],
|
||||
}));
|
||||
setShowModal(false);
|
||||
setDeviceId("");
|
||||
} catch (error) {
|
||||
console.error("Failed to start logging:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleConfirm = async () => {
|
||||
const siteId = siteIdMap[selectedSite];
|
||||
const topic = `ADW300/${siteId}/${deviceId}/${functionType.toLowerCase()}`;
|
||||
const handleStopLogging = async () => {
|
||||
try {
|
||||
// Stop only this site's topics (both function types for each device)
|
||||
const topics = (loggedDevices[siteId] ?? []).flatMap(did => [
|
||||
`ADW300/${siteId}/${did}/grid`,
|
||||
`ADW300/${siteId}/${did}/solar`,
|
||||
]);
|
||||
await axios.post(`${API_URL}/stop-logging`, topics.length ? { topics } : {});
|
||||
|
||||
try {
|
||||
const response = await axios.post("http://localhost:8000/start-logging", {
|
||||
topics: [topic],
|
||||
});
|
||||
console.log("Started logging:", response.data);
|
||||
setLoggedDevices(prev => ({ ...prev, [siteId]: [] }));
|
||||
console.log("Stopped logging for", siteId);
|
||||
} catch (error) {
|
||||
console.error("Failed to stop logging:", error);
|
||||
}
|
||||
};
|
||||
|
||||
// Add device to list
|
||||
setLoggedDevices((prev) => ({
|
||||
...prev,
|
||||
[siteId]: [...(prev[siteId] || []), deviceId],
|
||||
}));
|
||||
setShowModal(false);
|
||||
const statusClass = useMemo(() => {
|
||||
const s = (status ?? "").toLowerCase();
|
||||
if (s === "open" || s === "active") return "text-green-500";
|
||||
if (s === "completed" || s === "closed") return "text-blue-500";
|
||||
if (s === "inactive" || s === "on hold") return "text-orange-500";
|
||||
if (s === "faulty" || s === "cancelled") return "text-red-500";
|
||||
return "text-gray-500";
|
||||
}, [status]);
|
||||
|
||||
} catch (error) {
|
||||
console.error("Failed to start logging:", error);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div className="bg-white p-4 rounded-lg shadow-md space-y-2 dark:bg-rtgray-800 dark:text-white-light">
|
||||
<h2 className="text-xl font-semibold mb-3">Site Details</h2>
|
||||
|
||||
const handleStopLogging = async () => {
|
||||
try {
|
||||
await axios.post("http://localhost:8000/stop-logging");
|
||||
{/* Status (from CRM) */}
|
||||
<div className="flex justify-between items-center text-base">
|
||||
<p className="text-gray-600 dark:text-white/85 font-medium">Status:</p>
|
||||
<p className={`font-semibold ${statusClass}`}>{status ?? "—"}</p>
|
||||
</div>
|
||||
|
||||
// Clear all devices for the site (or modify to remove only specific one)
|
||||
setLoggedDevices((prev) => ({
|
||||
...prev,
|
||||
[siteId]: [],
|
||||
}));
|
||||
{/* Site ID */}
|
||||
<div className="flex justify-between items-center text-base">
|
||||
<p className="text-gray-600 dark:text-white/85 font-medium">Site ID:</p>
|
||||
<p className="font-medium">{siteId}</p>
|
||||
</div>
|
||||
|
||||
console.log("Stopped logging for", siteId);
|
||||
} catch (error) {
|
||||
console.error("Failed to stop logging:", error);
|
||||
}
|
||||
};
|
||||
{/* Location */}
|
||||
<div className="flex justify-between items-center text-base">
|
||||
<p className="text-gray-600 dark:text-white/85 font-medium">Location:</p>
|
||||
<p className="font-medium">{location}</p>
|
||||
</div>
|
||||
|
||||
const statusMap: Record<SiteName, string> = {
|
||||
'Site A': 'Active',
|
||||
'Site B': 'Inactive',
|
||||
'Site C': 'Faulty',
|
||||
};
|
||||
{/* Inverter Provider */}
|
||||
<div className="flex justify-between items-center text-base">
|
||||
<p className="text-gray-600 dark:text-white/85 font-medium">Inverter Provider:</p>
|
||||
<p className="font-medium">{inverterProvider}</p>
|
||||
</div>
|
||||
|
||||
return (
|
||||
<div className="bg-white p-4 rounded-lg shadow-md space-y-2 dark:bg-rtgray-800 dark:text-white-light">
|
||||
<h2 className="text-xl font-semibold mb-3">Site Details</h2>
|
||||
{/* Emergency Contact */}
|
||||
<div className="flex justify-between items-center text-base">
|
||||
<p className="text-gray-600 dark:text-white/85 font-medium">Emergency Contact:</p>
|
||||
<p className="font-medium">{emergencyContact}</p>
|
||||
</div>
|
||||
|
||||
{/* Status */}
|
||||
<div className="flex justify-between items-center text-base">
|
||||
<p className="text-gray-600 dark:text-white/85 font-medium">Status:</p>
|
||||
<p className={`font-semibold ${
|
||||
statusMap[selectedSite] === 'Active' ? 'text-green-500' :
|
||||
statusMap[selectedSite] === 'Inactive' ? 'text-orange-500' :
|
||||
'text-red-500'
|
||||
}`}>
|
||||
{statusMap[selectedSite]}
|
||||
</p>
|
||||
{/* Last Sync */}
|
||||
<div className="flex justify-between items-center text-base">
|
||||
<p className="text-gray-600 dark:text-white/85 font-medium">Last Sync:</p>
|
||||
<p className="font-medium">{lastSyncTimestamp}</p>
|
||||
</div>
|
||||
|
||||
{/* Start/Stop */}
|
||||
<div className="flex justify-between items-center text-base space-x-2">
|
||||
{devicesAtSite.length > 0 ? (
|
||||
<button
|
||||
onClick={handleStopLogging}
|
||||
className="text-sm lg:text-md bg-red-500 hover:bg-red-600 text-white font-medium px-3 py-2 rounded"
|
||||
>
|
||||
Stop Logging
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={handleStartLogging}
|
||||
className="text-sm lg:text-md btn-primary px-3 py-2"
|
||||
>
|
||||
Start Logging
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Modal */}
|
||||
{showModal && (
|
||||
<div className="fixed inset-0 z-50 bg-black bg-opacity-50 flex items-center justify-center">
|
||||
<div className="bg-white dark:bg-rtgray-800 rounded-lg p-6 w-[90%] max-w-md shadow-lg">
|
||||
<h2 className="text-lg font-semibold mb-4">Enter Device Info</h2>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Device ID (e.g. device_01)"
|
||||
className="w-full p-2 mb-4 border rounded dark:border-rtgray-800 dark:bg-rtgray-700 dark:text-white"
|
||||
value={deviceId}
|
||||
onChange={(e) => setDeviceId(e.target.value)}
|
||||
/>
|
||||
|
||||
<select
|
||||
className="w-full p-2 mb-4 border rounded dark:border-rtgray-800 dark:bg-rtgray-700 dark:text-white"
|
||||
value={functionType}
|
||||
onChange={(e) => setFunctionType(e.target.value as "Grid" | "Solar")}
|
||||
>
|
||||
<option value="Grid">Grid</option>
|
||||
<option value="Solar">Solar</option>
|
||||
</select>
|
||||
|
||||
<div className="flex justify-end space-x-2">
|
||||
<button
|
||||
onClick={() => setShowModal(false)}
|
||||
className="btn-primary bg-white border-2 border-black hover:bg-rtgray-200 px-4 py-2"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleConfirm}
|
||||
className="btn-primary px-4 py-2"
|
||||
disabled={!deviceId.trim()}
|
||||
>
|
||||
Confirm
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Site ID */}
|
||||
<div className="flex justify-between items-center text-base">
|
||||
<p className="text-gray-600 dark:text-white/85 font-medium">Site ID:</p>
|
||||
<p className="font-medium">{siteId}</p>
|
||||
</div>
|
||||
|
||||
{/* Location */}
|
||||
<div className="flex justify-between items-center text-base">
|
||||
<p className="text-gray-600 dark:text-white/85 font-medium">Location:</p>
|
||||
<p className="font-medium">{location}</p>
|
||||
</div>
|
||||
|
||||
{/* Inverter Provider */}
|
||||
<div className="flex justify-between items-center text-base">
|
||||
<p className="text-gray-600 dark:text-white/85 font-medium">Inverter Provider:</p>
|
||||
<p className="font-medium">{inverterProvider}</p>
|
||||
</div>
|
||||
|
||||
{/* Emergency Contact */}
|
||||
<div className="flex justify-between items-center text-base">
|
||||
<p className="text-gray-600 dark:text-white/85 font-medium">Emergency Contact:</p>
|
||||
<p className="font-medium">{emergencyContact}</p>
|
||||
</div>
|
||||
|
||||
{/* Last Sync */}
|
||||
<div className="flex justify-between items-center text-base">
|
||||
<p className="text-gray-600 dark:text-white/85 font-medium">Last Sync:</p>
|
||||
<p className="font-medium">{lastSyncTimestamp}</p>
|
||||
</div>
|
||||
|
||||
{/* Start Logging Button */}
|
||||
<div className="flex justify-between items-center text-base space-x-2">
|
||||
{devicesAtSite.length > 0 ? (
|
||||
<button
|
||||
onClick={handleStopLogging}
|
||||
className="text-sm lg:text-md bg-red-500 hover:bg-red-600 text-white font-medium px-3 py-2 rounded"
|
||||
>
|
||||
Stop Logging
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={handleStartLogging}
|
||||
className="text-sm lg:text-md btn-primary px-3 py-2"
|
||||
>
|
||||
Start Logging
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
{/* Modal */}
|
||||
{showModal && (
|
||||
<div className="fixed inset-0 z-50 bg-black bg-opacity-50 flex items-center justify-center">
|
||||
<div className="bg-white rounded-lg p-6 w-[90%] max-w-md shadow-lg">
|
||||
<h2 className="text-lg font-semibold mb-4">Enter Device Info</h2>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Device ID (e.g. device_01)"
|
||||
className="w-full p-2 mb-4 border rounded"
|
||||
value={deviceId}
|
||||
onChange={(e) => setDeviceId(e.target.value)}
|
||||
/>
|
||||
|
||||
<select
|
||||
className="w-full p-2 mb-4 border rounded"
|
||||
value={functionType}
|
||||
onChange={(e) => setFunctionType(e.target.value)}
|
||||
>
|
||||
<option value="Grid">Grid</option>
|
||||
<option value="Solar">Solar</option>
|
||||
</select>
|
||||
|
||||
<div className="flex justify-end space-x-2">
|
||||
<button
|
||||
onClick={() => setShowModal(false)}
|
||||
className="btn-primary bg-white border-2 border-black hover:bg-rtgray-200 px-4 py-2"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleConfirm}
|
||||
className="btn-primary px-4 py-2"
|
||||
>
|
||||
Confirm
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SiteStatus;
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user