crm integration 2
This commit is contained in:
parent
37abbde5a1
commit
401a89dd7a
@ -1,26 +1,51 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
import type { SiteName } from '@/components/dashboards/SiteStatus';
|
type Option = { label: string; value: string };
|
||||||
|
|
||||||
type SiteSelectorProps = {
|
type SiteSelectorProps = {
|
||||||
selectedSite: SiteName;
|
options: Option[]; // e.g. [{label: 'Timo… (Installation)', value: 'PROJ-0008'}, …]
|
||||||
setSelectedSite: (site: SiteName) => void;
|
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 (
|
return (
|
||||||
<div className="flex flex-col ">
|
<div className="flex flex-col">
|
||||||
<label htmlFor="site" className="font-semibold text-lg dark:text-white">Select Site:</label>
|
<label htmlFor="site" className="font-semibold text-lg dark:text-white">
|
||||||
|
{label}
|
||||||
|
</label>
|
||||||
|
|
||||||
<select
|
<select
|
||||||
id="site"
|
id="site"
|
||||||
className="border p-2 rounded dark:text-white dark:bg-rtgray-800 dark:border-rtgray-700"
|
className="border p-2 rounded dark:text-white dark:bg-rtgray-800 dark:border-rtgray-700"
|
||||||
value={selectedSite}
|
value={selectedValue ?? ''} // keep controlled even when null
|
||||||
onChange={(e) => setSelectedSite(e.target.value as SiteName)}
|
onChange={(e) => onChange(e.target.value)}
|
||||||
|
disabled={disabled || isEmpty}
|
||||||
>
|
>
|
||||||
<option>Site A</option>
|
{/* Placeholder when nothing selected */}
|
||||||
<option>Site B</option>
|
<option value="" disabled>
|
||||||
<option>Site C</option>
|
{isEmpty ? 'No sites available' : 'Choose a site…'}
|
||||||
|
</option>
|
||||||
|
|
||||||
|
{options.map((opt) => (
|
||||||
|
<option key={opt.value} value={opt.value}>
|
||||||
|
{opt.label}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default SiteSelector;
|
export default SiteSelector;
|
||||||
|
|
||||||
|
|||||||
@ -1,217 +1,213 @@
|
|||||||
import axios from "axios";
|
'use client';
|
||||||
import React, { useState, useEffect } from "react";
|
|
||||||
|
|
||||||
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 {
|
interface SiteStatusProps {
|
||||||
selectedSite: SiteName;
|
selectedSite: string; // display label (e.g., CRM project_name)
|
||||||
location: string;
|
siteId: string; // canonical id (e.g., CRM Project.name like PROJ-0008)
|
||||||
inverterProvider: string;
|
status?: string; // CRM status (Open/Completed/On Hold/…)
|
||||||
emergencyContact: string;
|
location: string;
|
||||||
lastSyncTimestamp: 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 = ({
|
const SiteStatus = ({
|
||||||
selectedSite,
|
selectedSite,
|
||||||
location,
|
siteId,
|
||||||
inverterProvider,
|
status,
|
||||||
emergencyContact,
|
location,
|
||||||
lastSyncTimestamp,
|
inverterProvider,
|
||||||
|
emergencyContact,
|
||||||
|
lastSyncTimestamp,
|
||||||
}: SiteStatusProps) => {
|
}: SiteStatusProps) => {
|
||||||
|
|
||||||
useEffect(() => {
|
// --- WebSocket to receive MQTT-forwarded messages ---
|
||||||
const ws = new WebSocket("ws://localhost:8000/ws");
|
useEffect(() => {
|
||||||
|
const ws = new WebSocket(WS_URL);
|
||||||
ws.onmessage = (event) => {
|
|
||||||
const data = event.data;
|
|
||||||
alert(`MQTT: ${data}`);
|
|
||||||
};
|
|
||||||
|
|
||||||
ws.onopen = () => console.log("WebSocket connected");
|
ws.onopen = () => console.log("WebSocket connected");
|
||||||
ws.onclose = () => console.log("WebSocket disconnected");
|
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();
|
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 handleStartLogging = () => setShowModal(true);
|
||||||
const [deviceId, setDeviceId] = useState("");
|
|
||||||
const [functionType, setFunctionType] = useState("Grid");
|
|
||||||
|
|
||||||
// Map site names to site IDs
|
const handleConfirm = async () => {
|
||||||
const siteIdMap: Record<SiteName, string> = {
|
const id = deviceId.trim();
|
||||||
"Site A": "site_01",
|
if (!id) return;
|
||||||
"Site B": "site_02",
|
|
||||||
"Site C": "site_03",
|
|
||||||
};
|
|
||||||
|
|
||||||
// Track devices connected per site
|
const topic = `ADW300/${siteId}/${id}/${functionType.toLowerCase()}`;
|
||||||
const [loggedDevices, setLoggedDevices] = useState<Record<string, string[]>>({
|
|
||||||
site_01: [],
|
|
||||||
site_02: [],
|
|
||||||
site_03: [],
|
|
||||||
});
|
|
||||||
|
|
||||||
const siteId = siteIdMap[selectedSite];
|
try {
|
||||||
const devicesAtSite = loggedDevices[siteId] || [];
|
const response = await axios.post(`${API_URL}/start-logging`, { topics: [topic] });
|
||||||
|
console.log("Started logging:", response.data);
|
||||||
|
|
||||||
const handleStartLogging = () => {
|
setLoggedDevices(prev => ({
|
||||||
setShowModal(true);
|
...prev,
|
||||||
};
|
[siteId]: [...(prev[siteId] ?? []), id],
|
||||||
|
}));
|
||||||
|
setShowModal(false);
|
||||||
|
setDeviceId("");
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Failed to start logging:", error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const handleConfirm = async () => {
|
const handleStopLogging = async () => {
|
||||||
const siteId = siteIdMap[selectedSite];
|
try {
|
||||||
const topic = `ADW300/${siteId}/${deviceId}/${functionType.toLowerCase()}`;
|
// 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 {
|
setLoggedDevices(prev => ({ ...prev, [siteId]: [] }));
|
||||||
const response = await axios.post("http://localhost:8000/start-logging", {
|
console.log("Stopped logging for", siteId);
|
||||||
topics: [topic],
|
} catch (error) {
|
||||||
});
|
console.error("Failed to stop logging:", error);
|
||||||
console.log("Started logging:", response.data);
|
}
|
||||||
|
};
|
||||||
|
|
||||||
// Add device to list
|
const statusClass = useMemo(() => {
|
||||||
setLoggedDevices((prev) => ({
|
const s = (status ?? "").toLowerCase();
|
||||||
...prev,
|
if (s === "open" || s === "active") return "text-green-500";
|
||||||
[siteId]: [...(prev[siteId] || []), deviceId],
|
if (s === "completed" || s === "closed") return "text-blue-500";
|
||||||
}));
|
if (s === "inactive" || s === "on hold") return "text-orange-500";
|
||||||
setShowModal(false);
|
if (s === "faulty" || s === "cancelled") return "text-red-500";
|
||||||
|
return "text-gray-500";
|
||||||
|
}, [status]);
|
||||||
|
|
||||||
} catch (error) {
|
return (
|
||||||
console.error("Failed to start logging:", error);
|
<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 () => {
|
{/* Status (from CRM) */}
|
||||||
try {
|
<div className="flex justify-between items-center text-base">
|
||||||
await axios.post("http://localhost:8000/stop-logging");
|
<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)
|
{/* Site ID */}
|
||||||
setLoggedDevices((prev) => ({
|
<div className="flex justify-between items-center text-base">
|
||||||
...prev,
|
<p className="text-gray-600 dark:text-white/85 font-medium">Site ID:</p>
|
||||||
[siteId]: [],
|
<p className="font-medium">{siteId}</p>
|
||||||
}));
|
</div>
|
||||||
|
|
||||||
console.log("Stopped logging for", siteId);
|
{/* Location */}
|
||||||
} catch (error) {
|
<div className="flex justify-between items-center text-base">
|
||||||
console.error("Failed to stop logging:", error);
|
<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> = {
|
{/* Inverter Provider */}
|
||||||
'Site A': 'Active',
|
<div className="flex justify-between items-center text-base">
|
||||||
'Site B': 'Inactive',
|
<p className="text-gray-600 dark:text-white/85 font-medium">Inverter Provider:</p>
|
||||||
'Site C': 'Faulty',
|
<p className="font-medium">{inverterProvider}</p>
|
||||||
};
|
</div>
|
||||||
|
|
||||||
return (
|
{/* Emergency Contact */}
|
||||||
<div className="bg-white p-4 rounded-lg shadow-md space-y-2 dark:bg-rtgray-800 dark:text-white-light">
|
<div className="flex justify-between items-center text-base">
|
||||||
<h2 className="text-xl font-semibold mb-3">Site Details</h2>
|
<p className="text-gray-600 dark:text-white/85 font-medium">Emergency Contact:</p>
|
||||||
|
<p className="font-medium">{emergencyContact}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Status */}
|
{/* Last Sync */}
|
||||||
<div className="flex justify-between items-center text-base">
|
<div className="flex justify-between items-center text-base">
|
||||||
<p className="text-gray-600 dark:text-white/85 font-medium">Status:</p>
|
<p className="text-gray-600 dark:text-white/85 font-medium">Last Sync:</p>
|
||||||
<p className={`font-semibold ${
|
<p className="font-medium">{lastSyncTimestamp}</p>
|
||||||
statusMap[selectedSite] === 'Active' ? 'text-green-500' :
|
</div>
|
||||||
statusMap[selectedSite] === 'Inactive' ? 'text-orange-500' :
|
|
||||||
'text-red-500'
|
{/* Start/Stop */}
|
||||||
}`}>
|
<div className="flex justify-between items-center text-base space-x-2">
|
||||||
{statusMap[selectedSite]}
|
{devicesAtSite.length > 0 ? (
|
||||||
</p>
|
<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>
|
</div>
|
||||||
|
</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;
|
export default SiteStatus;
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user