Meter new fields
This commit is contained in:
@@ -10,23 +10,20 @@ const getAuthHeaders = () => ({
|
|||||||
export interface MeterRecord {
|
export interface MeterRecord {
|
||||||
id: string;
|
id: string;
|
||||||
fields: {
|
fields: {
|
||||||
"Area Name": string;
|
device_id: string;
|
||||||
"Account Number": string;
|
meter_address: string;
|
||||||
"User Name": string;
|
manufacturer_code: string;
|
||||||
"User Address": string;
|
forward_cumulative_flow: number;
|
||||||
"Meter S/N": string;
|
reverse_cumulative_flow: number;
|
||||||
"Meter Name": string;
|
forward_instantaneous_flow: number;
|
||||||
"Meter Status": string;
|
water_temperature: number;
|
||||||
"Protocol Type": string;
|
voltage: number;
|
||||||
"Price No.": string;
|
echo_amplitude: number;
|
||||||
"Price Name": string;
|
ultrasonic_flight_time: number;
|
||||||
"DMA Partition": string;
|
timestamp: string;
|
||||||
"Supply Types": string;
|
alarm_bytes: string;
|
||||||
"Device ID": string;
|
checksum_ok: boolean;
|
||||||
"Device Name": string;
|
received_at: string;
|
||||||
"Device Type": string;
|
|
||||||
"Usage Analysis Type": string;
|
|
||||||
"Installed Time": string;
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -40,23 +37,20 @@ export interface MetersResponse {
|
|||||||
|
|
||||||
export interface Meter {
|
export interface Meter {
|
||||||
id: string;
|
id: string;
|
||||||
areaName: string;
|
deviceId: string;
|
||||||
accountNumber: string;
|
meterAddress: string;
|
||||||
userName: string;
|
manufacturerCode: string;
|
||||||
userAddress: string;
|
forwardCumulativeFlow: number;
|
||||||
meterSN: string;
|
reverseCumulativeFlow: number;
|
||||||
meterName: string;
|
forwardInstantaneousFlow: number;
|
||||||
meterStatus: string;
|
waterTemperature: number;
|
||||||
protocolType: string;
|
voltage: number;
|
||||||
priceNo: string;
|
echoAmplitude: number;
|
||||||
priceName: string;
|
ultrasonicFlightTime: number;
|
||||||
dmaPartition: string;
|
timestamp: string;
|
||||||
supplyTypes: string;
|
alarmBytes: string;
|
||||||
deviceID: string;
|
checksumOk: boolean;
|
||||||
deviceName: string;
|
receivedAt: string;
|
||||||
deviceType: string;
|
|
||||||
usageAnalysisType: string;
|
|
||||||
installedTime: string;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export const fetchMeters = async (): Promise<Meter[]> => {
|
export const fetchMeters = async (): Promise<Meter[]> => {
|
||||||
@@ -74,23 +68,20 @@ export const fetchMeters = async (): Promise<Meter[]> => {
|
|||||||
|
|
||||||
return data.records.map((r: MeterRecord) => ({
|
return data.records.map((r: MeterRecord) => ({
|
||||||
id: r.id,
|
id: r.id,
|
||||||
areaName: r.fields["Area Name"] || "",
|
deviceId: r.fields.device_id || "",
|
||||||
accountNumber: r.fields["Account Number"] || "",
|
meterAddress: r.fields.meter_address || "",
|
||||||
userName: r.fields["User Name"] || "",
|
manufacturerCode: r.fields.manufacturer_code || "",
|
||||||
userAddress: r.fields["User Address"] || "",
|
forwardCumulativeFlow: r.fields.forward_cumulative_flow || 0,
|
||||||
meterSN: r.fields["Meter S/N"] || "",
|
reverseCumulativeFlow: r.fields.reverse_cumulative_flow || 0,
|
||||||
meterName: r.fields["Meter Name"] || "",
|
forwardInstantaneousFlow: r.fields.forward_instantaneous_flow || 0,
|
||||||
meterStatus: r.fields["Meter Status"] || "",
|
waterTemperature: r.fields.water_temperature || 0,
|
||||||
protocolType: r.fields["Protocol Type"] || "",
|
voltage: r.fields.voltage || 0,
|
||||||
priceNo: r.fields["Price No."] || "",
|
echoAmplitude: r.fields.echo_amplitude || 0,
|
||||||
priceName: r.fields["Price Name"] || "",
|
ultrasonicFlightTime: r.fields.ultrasonic_flight_time || 0,
|
||||||
dmaPartition: r.fields["DMA Partition"] || "",
|
timestamp: r.fields.timestamp || "",
|
||||||
supplyTypes: r.fields["Supply Types"] || "",
|
alarmBytes: r.fields.alarm_bytes || "",
|
||||||
deviceID: r.fields["Device ID"] || "",
|
checksumOk: r.fields.checksum_ok || false,
|
||||||
deviceName: r.fields["Device Name"] || "",
|
receivedAt: r.fields.received_at || "",
|
||||||
deviceType: r.fields["Device Type"] || "",
|
|
||||||
usageAnalysisType: r.fields["Usage Analysis Type"] || "",
|
|
||||||
installedTime: r.fields["Installed Time"] || "",
|
|
||||||
}));
|
}));
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Error fetching meters:", error);
|
console.error("Error fetching meters:", error);
|
||||||
@@ -107,23 +98,20 @@ export const createMeter = async (
|
|||||||
headers: getAuthHeaders(),
|
headers: getAuthHeaders(),
|
||||||
body: JSON.stringify({
|
body: JSON.stringify({
|
||||||
fields: {
|
fields: {
|
||||||
"Area Name": meterData.areaName,
|
device_id: meterData.deviceId,
|
||||||
"Account Number": meterData.accountNumber,
|
meter_address: meterData.meterAddress,
|
||||||
"User Name": meterData.userName,
|
manufacturer_code: meterData.manufacturerCode,
|
||||||
"User Address": meterData.userAddress,
|
forward_cumulative_flow: meterData.forwardCumulativeFlow,
|
||||||
"Meter S/N": meterData.meterSN,
|
reverse_cumulative_flow: meterData.reverseCumulativeFlow,
|
||||||
"Meter Name": meterData.meterName,
|
forward_instantaneous_flow: meterData.forwardInstantaneousFlow,
|
||||||
"Meter Status": meterData.meterStatus,
|
water_temperature: meterData.waterTemperature,
|
||||||
"Protocol Type": meterData.protocolType,
|
voltage: meterData.voltage,
|
||||||
"Price No.": meterData.priceNo,
|
echo_amplitude: meterData.echoAmplitude,
|
||||||
"Price Name": meterData.priceName,
|
ultrasonic_flight_time: meterData.ultrasonicFlightTime,
|
||||||
"DMA Partition": meterData.dmaPartition,
|
timestamp: meterData.timestamp,
|
||||||
"Supply Types": meterData.supplyTypes,
|
alarm_bytes: meterData.alarmBytes,
|
||||||
"Device ID": meterData.deviceID,
|
checksum_ok: meterData.checksumOk,
|
||||||
"Device Name": meterData.deviceName,
|
received_at: meterData.receivedAt,
|
||||||
"Device Type": meterData.deviceType,
|
|
||||||
"Usage Analysis Type": meterData.usageAnalysisType,
|
|
||||||
"Installed Time": meterData.installedTime,
|
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
});
|
});
|
||||||
@@ -141,23 +129,20 @@ export const createMeter = async (
|
|||||||
|
|
||||||
return {
|
return {
|
||||||
id: createdRecord.id,
|
id: createdRecord.id,
|
||||||
areaName: createdRecord.fields["Area Name"] || meterData.areaName,
|
deviceId: createdRecord.fields.device_id || meterData.deviceId,
|
||||||
accountNumber: createdRecord.fields["Account Number"] || meterData.accountNumber,
|
meterAddress: createdRecord.fields.meter_address || meterData.meterAddress,
|
||||||
userName: createdRecord.fields["User Name"] || meterData.userName,
|
manufacturerCode: createdRecord.fields.manufacturer_code || meterData.manufacturerCode,
|
||||||
userAddress: createdRecord.fields["User Address"] || meterData.userAddress,
|
forwardCumulativeFlow: createdRecord.fields.forward_cumulative_flow || meterData.forwardCumulativeFlow,
|
||||||
meterSN: createdRecord.fields["Meter S/N"] || meterData.meterSN,
|
reverseCumulativeFlow: createdRecord.fields.reverse_cumulative_flow || meterData.reverseCumulativeFlow,
|
||||||
meterName: createdRecord.fields["Meter Name"] || meterData.meterName,
|
forwardInstantaneousFlow: createdRecord.fields.forward_instantaneous_flow || meterData.forwardInstantaneousFlow,
|
||||||
meterStatus: createdRecord.fields["Meter Status"] || meterData.meterStatus,
|
waterTemperature: createdRecord.fields.water_temperature || meterData.waterTemperature,
|
||||||
protocolType: createdRecord.fields["Protocol Type"] || meterData.protocolType,
|
voltage: createdRecord.fields.voltage || meterData.voltage,
|
||||||
priceNo: createdRecord.fields["Price No."] || meterData.priceNo,
|
echoAmplitude: createdRecord.fields.echo_amplitude || meterData.echoAmplitude,
|
||||||
priceName: createdRecord.fields["Price Name"] || meterData.priceName,
|
ultrasonicFlightTime: createdRecord.fields.ultrasonic_flight_time || meterData.ultrasonicFlightTime,
|
||||||
dmaPartition: createdRecord.fields["DMA Partition"] || meterData.dmaPartition,
|
timestamp: createdRecord.fields.timestamp || meterData.timestamp,
|
||||||
supplyTypes: createdRecord.fields["Supply Types"] || meterData.supplyTypes,
|
alarmBytes: createdRecord.fields.alarm_bytes || meterData.alarmBytes,
|
||||||
deviceID: createdRecord.fields["Device ID"] || meterData.deviceID,
|
checksumOk: createdRecord.fields.checksum_ok || meterData.checksumOk,
|
||||||
deviceName: createdRecord.fields["Device Name"] || meterData.deviceName,
|
receivedAt: createdRecord.fields.received_at || meterData.receivedAt,
|
||||||
deviceType: createdRecord.fields["Device Type"] || meterData.deviceType,
|
|
||||||
usageAnalysisType: createdRecord.fields["Usage Analysis Type"] || meterData.usageAnalysisType,
|
|
||||||
installedTime: createdRecord.fields["Installed Time"] || meterData.installedTime,
|
|
||||||
};
|
};
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Error creating meter:", error);
|
console.error("Error creating meter:", error);
|
||||||
@@ -176,23 +161,20 @@ export const updateMeter = async (
|
|||||||
body: JSON.stringify({
|
body: JSON.stringify({
|
||||||
id: id,
|
id: id,
|
||||||
fields: {
|
fields: {
|
||||||
"Area Name": meterData.areaName,
|
device_id: meterData.deviceId,
|
||||||
"Account Number": meterData.accountNumber,
|
meter_address: meterData.meterAddress,
|
||||||
"User Name": meterData.userName,
|
manufacturer_code: meterData.manufacturerCode,
|
||||||
"User Address": meterData.userAddress,
|
forward_cumulative_flow: meterData.forwardCumulativeFlow,
|
||||||
"Meter S/N": meterData.meterSN,
|
reverse_cumulative_flow: meterData.reverseCumulativeFlow,
|
||||||
"Meter Name": meterData.meterName,
|
forward_instantaneous_flow: meterData.forwardInstantaneousFlow,
|
||||||
"Meter Status": meterData.meterStatus,
|
water_temperature: meterData.waterTemperature,
|
||||||
"Protocol Type": meterData.protocolType,
|
voltage: meterData.voltage,
|
||||||
"Price No.": meterData.priceNo,
|
echo_amplitude: meterData.echoAmplitude,
|
||||||
"Price Name": meterData.priceName,
|
ultrasonic_flight_time: meterData.ultrasonicFlightTime,
|
||||||
"DMA Partition": meterData.dmaPartition,
|
timestamp: meterData.timestamp,
|
||||||
"Supply Types": meterData.supplyTypes,
|
alarm_bytes: meterData.alarmBytes,
|
||||||
"Device ID": meterData.deviceID,
|
checksum_ok: meterData.checksumOk,
|
||||||
"Device Name": meterData.deviceName,
|
received_at: meterData.receivedAt,
|
||||||
"Device Type": meterData.deviceType,
|
|
||||||
"Usage Analysis Type": meterData.usageAnalysisType,
|
|
||||||
"Installed Time": meterData.installedTime,
|
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
});
|
});
|
||||||
@@ -214,23 +196,20 @@ export const updateMeter = async (
|
|||||||
|
|
||||||
return {
|
return {
|
||||||
id: updatedRecord.id,
|
id: updatedRecord.id,
|
||||||
areaName: updatedRecord.fields["Area Name"] || meterData.areaName,
|
deviceId: updatedRecord.fields.device_id || meterData.deviceId,
|
||||||
accountNumber: updatedRecord.fields["Account Number"] || meterData.accountNumber,
|
meterAddress: updatedRecord.fields.meter_address || meterData.meterAddress,
|
||||||
userName: updatedRecord.fields["User Name"] || meterData.userName,
|
manufacturerCode: updatedRecord.fields.manufacturer_code || meterData.manufacturerCode,
|
||||||
userAddress: updatedRecord.fields["User Address"] || meterData.userAddress,
|
forwardCumulativeFlow: updatedRecord.fields.forward_cumulative_flow || meterData.forwardCumulativeFlow,
|
||||||
meterSN: updatedRecord.fields["Meter S/N"] || meterData.meterSN,
|
reverseCumulativeFlow: updatedRecord.fields.reverse_cumulative_flow || meterData.reverseCumulativeFlow,
|
||||||
meterName: updatedRecord.fields["Meter Name"] || meterData.meterName,
|
forwardInstantaneousFlow: updatedRecord.fields.forward_instantaneous_flow || meterData.forwardInstantaneousFlow,
|
||||||
meterStatus: updatedRecord.fields["Meter Status"] || meterData.meterStatus,
|
waterTemperature: updatedRecord.fields.water_temperature || meterData.waterTemperature,
|
||||||
protocolType: updatedRecord.fields["Protocol Type"] || meterData.protocolType,
|
voltage: updatedRecord.fields.voltage || meterData.voltage,
|
||||||
priceNo: updatedRecord.fields["Price No."] || meterData.priceNo,
|
echoAmplitude: updatedRecord.fields.echo_amplitude || meterData.echoAmplitude,
|
||||||
priceName: updatedRecord.fields["Price Name"] || meterData.priceName,
|
ultrasonicFlightTime: updatedRecord.fields.ultrasonic_flight_time || meterData.ultrasonicFlightTime,
|
||||||
dmaPartition: updatedRecord.fields["DMA Partition"] || meterData.dmaPartition,
|
timestamp: updatedRecord.fields.timestamp || meterData.timestamp,
|
||||||
supplyTypes: updatedRecord.fields["Supply Types"] || meterData.supplyTypes,
|
alarmBytes: updatedRecord.fields.alarm_bytes || meterData.alarmBytes,
|
||||||
deviceID: updatedRecord.fields["Device ID"] || meterData.deviceID,
|
checksumOk: updatedRecord.fields.checksum_ok || meterData.checksumOk,
|
||||||
deviceName: updatedRecord.fields["Device Name"] || meterData.deviceName,
|
receivedAt: updatedRecord.fields.received_at || meterData.receivedAt,
|
||||||
deviceType: updatedRecord.fields["Device Type"] || meterData.deviceType,
|
|
||||||
usageAnalysisType: updatedRecord.fields["Usage Analysis Type"] || meterData.usageAnalysisType,
|
|
||||||
installedTime: updatedRecord.fields["Installed Time"] || meterData.installedTime,
|
|
||||||
};
|
};
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Error updating meter:", error);
|
console.error("Error updating meter:", error);
|
||||||
|
|||||||
@@ -73,23 +73,20 @@ export default function MeterManagement() {
|
|||||||
const [editingId, setEditingId] = useState<string | null>(null);
|
const [editingId, setEditingId] = useState<string | null>(null);
|
||||||
|
|
||||||
const emptyMeter: Omit<Meter, "id"> = {
|
const emptyMeter: Omit<Meter, "id"> = {
|
||||||
areaName: selectedProject,
|
deviceId: "",
|
||||||
accountNumber: "",
|
meterAddress: "",
|
||||||
userName: "",
|
manufacturerCode: "",
|
||||||
userAddress: "",
|
forwardCumulativeFlow: 0,
|
||||||
meterSN: "",
|
reverseCumulativeFlow: 0,
|
||||||
meterName: "",
|
forwardInstantaneousFlow: 0,
|
||||||
meterStatus: "ACTIVE",
|
waterTemperature: 0,
|
||||||
protocolType: "",
|
voltage: 0,
|
||||||
priceNo: "",
|
echoAmplitude: 0,
|
||||||
priceName: "",
|
ultrasonicFlightTime: 0,
|
||||||
dmaPartition: "",
|
timestamp: new Date().toISOString(),
|
||||||
supplyTypes: "",
|
alarmBytes: "",
|
||||||
deviceID: "",
|
checksumOk: true,
|
||||||
deviceName: "",
|
receivedAt: new Date().toISOString(),
|
||||||
deviceType: "",
|
|
||||||
usageAnalysisType: "",
|
|
||||||
installedTime: new Date().toISOString().slice(0, 10),
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const [form, setForm] = useState<Omit<Meter, "id">>(emptyMeter);
|
const [form, setForm] = useState<Omit<Meter, "id">>(emptyMeter);
|
||||||
@@ -131,7 +128,7 @@ export default function MeterManagement() {
|
|||||||
}
|
}
|
||||||
setShowModal(false);
|
setShowModal(false);
|
||||||
setEditingId(null);
|
setEditingId(null);
|
||||||
setForm({ ...emptyMeter, areaName: selectedProject });
|
setForm(emptyMeter);
|
||||||
setActiveMeter(null);
|
setActiveMeter(null);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error saving meter:', error);
|
console.error('Error saving meter:', error);
|
||||||
@@ -147,7 +144,7 @@ export default function MeterManagement() {
|
|||||||
if (!activeMeter) return;
|
if (!activeMeter) return;
|
||||||
|
|
||||||
const confirmDelete = window.confirm(
|
const confirmDelete = window.confirm(
|
||||||
`Are you sure you want to delete the meter "${activeMeter.meterName}"?`
|
`Are you sure you want to delete the meter "${activeMeter.deviceId}"?`
|
||||||
);
|
);
|
||||||
|
|
||||||
if (!confirmDelete) return;
|
if (!confirmDelete) return;
|
||||||
@@ -174,10 +171,9 @@ export default function MeterManagement() {
|
|||||||
/* ================= FILTER ================= */
|
/* ================= FILTER ================= */
|
||||||
const filtered = meters.filter(
|
const filtered = meters.filter(
|
||||||
(m) =>
|
(m) =>
|
||||||
(m.meterName.toLowerCase().includes(search.toLowerCase()) ||
|
(m.deviceId.toLowerCase().includes(search.toLowerCase()) ||
|
||||||
m.meterSN.toLowerCase().includes(search.toLowerCase()) ||
|
m.meterAddress.toLowerCase().includes(search.toLowerCase()) ||
|
||||||
m.areaName.toLowerCase().includes(search.toLowerCase())) &&
|
m.manufacturerCode.toLowerCase().includes(search.toLowerCase()))
|
||||||
m.areaName === selectedProject
|
|
||||||
);
|
);
|
||||||
|
|
||||||
/* ================= UI ================= */
|
/* ================= UI ================= */
|
||||||
@@ -233,7 +229,7 @@ export default function MeterManagement() {
|
|||||||
<div className="flex gap-3">
|
<div className="flex gap-3">
|
||||||
<button
|
<button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setForm({ ...emptyMeter, areaName: selectedProject });
|
setForm(emptyMeter);
|
||||||
setEditingId(null);
|
setEditingId(null);
|
||||||
setShowModal(true);
|
setShowModal(true);
|
||||||
}}
|
}}
|
||||||
@@ -248,23 +244,20 @@ export default function MeterManagement() {
|
|||||||
if (!activeMeter) return;
|
if (!activeMeter) return;
|
||||||
setEditingId(activeMeter.id);
|
setEditingId(activeMeter.id);
|
||||||
setForm({
|
setForm({
|
||||||
areaName: activeMeter.areaName,
|
deviceId: activeMeter.deviceId,
|
||||||
accountNumber: activeMeter.accountNumber,
|
meterAddress: activeMeter.meterAddress,
|
||||||
userName: activeMeter.userName,
|
manufacturerCode: activeMeter.manufacturerCode,
|
||||||
userAddress: activeMeter.userAddress,
|
forwardCumulativeFlow: activeMeter.forwardCumulativeFlow,
|
||||||
meterSN: activeMeter.meterSN,
|
reverseCumulativeFlow: activeMeter.reverseCumulativeFlow,
|
||||||
meterName: activeMeter.meterName,
|
forwardInstantaneousFlow: activeMeter.forwardInstantaneousFlow,
|
||||||
meterStatus: activeMeter.meterStatus,
|
waterTemperature: activeMeter.waterTemperature,
|
||||||
protocolType: activeMeter.protocolType,
|
voltage: activeMeter.voltage,
|
||||||
priceNo: activeMeter.priceNo,
|
echoAmplitude: activeMeter.echoAmplitude,
|
||||||
priceName: activeMeter.priceName,
|
ultrasonicFlightTime: activeMeter.ultrasonicFlightTime,
|
||||||
dmaPartition: activeMeter.dmaPartition,
|
timestamp: activeMeter.timestamp,
|
||||||
supplyTypes: activeMeter.supplyTypes,
|
alarmBytes: activeMeter.alarmBytes,
|
||||||
deviceID: activeMeter.deviceID,
|
checksumOk: activeMeter.checksumOk,
|
||||||
deviceName: activeMeter.deviceName,
|
receivedAt: activeMeter.receivedAt,
|
||||||
deviceType: activeMeter.deviceType,
|
|
||||||
usageAnalysisType: activeMeter.usageAnalysisType,
|
|
||||||
installedTime: activeMeter.installedTime,
|
|
||||||
});
|
});
|
||||||
setShowModal(true);
|
setShowModal(true);
|
||||||
}}
|
}}
|
||||||
@@ -304,29 +297,41 @@ export default function MeterManagement() {
|
|||||||
title="Meters"
|
title="Meters"
|
||||||
isLoading={loadingMeters}
|
isLoading={loadingMeters}
|
||||||
columns={[
|
columns={[
|
||||||
{ title: "Meter Name", field: "meterName" },
|
{ title: "Device ID", field: "deviceId" },
|
||||||
{ title: "Meter S/N", field: "meterSN" },
|
{ title: "Meter Address", field: "meterAddress" },
|
||||||
{ title: "User Name", field: "userName" },
|
{ title: "Manufacturer Code", field: "manufacturerCode" },
|
||||||
{ title: "User Address", field: "userAddress" },
|
|
||||||
{
|
{
|
||||||
title: "Meter Status",
|
title: "Forward Flow",
|
||||||
field: "meterStatus",
|
field: "forwardCumulativeFlow",
|
||||||
|
render: (rowData) => `${rowData.forwardCumulativeFlow?.toFixed(3) || 0} m³`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Water Temp",
|
||||||
|
field: "waterTemperature",
|
||||||
|
render: (rowData) => `${rowData.waterTemperature?.toFixed(1) || 0}°C`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Voltage",
|
||||||
|
field: "voltage",
|
||||||
|
render: (rowData) => `${rowData.voltage || 0}V`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Checksum OK",
|
||||||
|
field: "checksumOk",
|
||||||
render: (rowData) => (
|
render: (rowData) => (
|
||||||
<span
|
<span
|
||||||
className={`px-3 py-1 rounded-full text-xs font-semibold border ${
|
className={`px-3 py-1 rounded-full text-xs font-semibold border ${
|
||||||
rowData.meterStatus === "ACTIVE"
|
rowData.checksumOk
|
||||||
? "text-blue-600 border-blue-600"
|
? "text-green-600 border-green-600"
|
||||||
: "text-red-600 border-red-600"
|
: "text-red-600 border-red-600"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{rowData.meterStatus}
|
{rowData.checksumOk ? "OK" : "ERROR"}
|
||||||
</span>
|
</span>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{ title: "Protocol Type", field: "protocolType" },
|
{ title: "Timestamp", field: "timestamp", type: "datetime" },
|
||||||
{ title: "Device Name", field: "deviceName" },
|
{ title: "Received At", field: "receivedAt", type: "datetime" },
|
||||||
{ title: "Area Name", field: "areaName" },
|
|
||||||
{ title: "Installed Time", field: "installedTime", type: "date" },
|
|
||||||
]}
|
]}
|
||||||
data={filtered}
|
data={filtered}
|
||||||
onRowClick={(_, rowData) => setActiveMeter(rowData as Meter)}
|
onRowClick={(_, rowData) => setActiveMeter(rowData as Meter)}
|
||||||
@@ -360,178 +365,155 @@ export default function MeterManagement() {
|
|||||||
{editingId ? "Edit Meter" : "Add Meter"}
|
{editingId ? "Edit Meter" : "Add Meter"}
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
<div className="space-y-1">
|
|
||||||
<label className="block text-sm font-medium text-gray-700">Area Name</label>
|
|
||||||
<input
|
|
||||||
className="w-full border px-3 py-2 rounded"
|
|
||||||
placeholder="Area Name"
|
|
||||||
value={form.areaName}
|
|
||||||
onChange={(e) => setForm({ ...form, areaName: e.target.value })}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-1">
|
|
||||||
<label className="block text-sm font-medium text-gray-700">Account Number</label>
|
|
||||||
<input
|
|
||||||
className="w-full border px-3 py-2 rounded"
|
|
||||||
placeholder="Account Number"
|
|
||||||
value={form.accountNumber}
|
|
||||||
onChange={(e) => setForm({ ...form, accountNumber: e.target.value })}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-1">
|
|
||||||
<label className="block text-sm font-medium text-gray-700">User Name</label>
|
|
||||||
<input
|
|
||||||
className="w-full border px-3 py-2 rounded"
|
|
||||||
placeholder="User Name"
|
|
||||||
value={form.userName}
|
|
||||||
onChange={(e) => setForm({ ...form, userName: e.target.value })}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-1">
|
|
||||||
<label className="block text-sm font-medium text-gray-700">User Address</label>
|
|
||||||
<input
|
|
||||||
className="w-full border px-3 py-2 rounded"
|
|
||||||
placeholder="User Address"
|
|
||||||
value={form.userAddress}
|
|
||||||
onChange={(e) => setForm({ ...form, userAddress: e.target.value })}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-1">
|
|
||||||
<label className="block text-sm font-medium text-gray-700">Meter S/N</label>
|
|
||||||
<input
|
|
||||||
className="w-full border px-3 py-2 rounded"
|
|
||||||
placeholder="Meter Serial Number"
|
|
||||||
value={form.meterSN}
|
|
||||||
onChange={(e) => setForm({ ...form, meterSN: e.target.value })}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-1">
|
|
||||||
<label className="block text-sm font-medium text-gray-700">Meter Name</label>
|
|
||||||
<input
|
|
||||||
className="w-full border px-3 py-2 rounded"
|
|
||||||
placeholder="Meter Name"
|
|
||||||
value={form.meterName}
|
|
||||||
onChange={(e) => setForm({ ...form, meterName: e.target.value })}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-1">
|
|
||||||
<label className="block text-sm font-medium text-gray-700">Meter Status</label>
|
|
||||||
<button
|
|
||||||
onClick={() =>
|
|
||||||
setForm({
|
|
||||||
...form,
|
|
||||||
meterStatus: form.meterStatus === "ACTIVE" ? "INACTIVE" : "ACTIVE",
|
|
||||||
})
|
|
||||||
}
|
|
||||||
className="w-full border rounded px-3 py-2 hover:bg-gray-50"
|
|
||||||
>
|
|
||||||
Status: {form.meterStatus}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-1">
|
|
||||||
<label className="block text-sm font-medium text-gray-700">Protocol Type</label>
|
|
||||||
<input
|
|
||||||
className="w-full border px-3 py-2 rounded"
|
|
||||||
placeholder="Protocol Type"
|
|
||||||
value={form.protocolType}
|
|
||||||
onChange={(e) => setForm({ ...form, protocolType: e.target.value })}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-1">
|
|
||||||
<label className="block text-sm font-medium text-gray-700">Price No.</label>
|
|
||||||
<input
|
|
||||||
className="w-full border px-3 py-2 rounded"
|
|
||||||
placeholder="Price Number"
|
|
||||||
value={form.priceNo}
|
|
||||||
onChange={(e) => setForm({ ...form, priceNo: e.target.value })}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-1">
|
|
||||||
<label className="block text-sm font-medium text-gray-700">Price Name</label>
|
|
||||||
<input
|
|
||||||
className="w-full border px-3 py-2 rounded"
|
|
||||||
placeholder="Price Name"
|
|
||||||
value={form.priceName}
|
|
||||||
onChange={(e) => setForm({ ...form, priceName: e.target.value })}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-1">
|
|
||||||
<label className="block text-sm font-medium text-gray-700">DMA Partition</label>
|
|
||||||
<input
|
|
||||||
className="w-full border px-3 py-2 rounded"
|
|
||||||
placeholder="DMA Partition"
|
|
||||||
value={form.dmaPartition}
|
|
||||||
onChange={(e) => setForm({ ...form, dmaPartition: e.target.value })}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-1">
|
|
||||||
<label className="block text-sm font-medium text-gray-700">Supply Types</label>
|
|
||||||
<input
|
|
||||||
className="w-full border px-3 py-2 rounded"
|
|
||||||
placeholder="Supply Types"
|
|
||||||
value={form.supplyTypes}
|
|
||||||
onChange={(e) => setForm({ ...form, supplyTypes: e.target.value })}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-1">
|
<div className="space-y-1">
|
||||||
<label className="block text-sm font-medium text-gray-700">Device ID</label>
|
<label className="block text-sm font-medium text-gray-700">Device ID</label>
|
||||||
<input
|
<input
|
||||||
className="w-full border px-3 py-2 rounded"
|
className="w-full border px-3 py-2 rounded"
|
||||||
placeholder="Device ID"
|
placeholder="Device ID"
|
||||||
value={form.deviceID}
|
value={form.deviceId}
|
||||||
onChange={(e) => setForm({ ...form, deviceID: e.target.value })}
|
onChange={(e) => setForm({ ...form, deviceId: e.target.value })}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-1">
|
<div className="space-y-1">
|
||||||
<label className="block text-sm font-medium text-gray-700">Device Name</label>
|
<label className="block text-sm font-medium text-gray-700">Meter Address</label>
|
||||||
<input
|
<input
|
||||||
className="w-full border px-3 py-2 rounded"
|
className="w-full border px-3 py-2 rounded"
|
||||||
placeholder="Device Name"
|
placeholder="Meter Address"
|
||||||
value={form.deviceName}
|
value={form.meterAddress}
|
||||||
onChange={(e) => setForm({ ...form, deviceName: e.target.value })}
|
onChange={(e) => setForm({ ...form, meterAddress: e.target.value })}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-1">
|
<div className="space-y-1">
|
||||||
<label className="block text-sm font-medium text-gray-700">Device Type</label>
|
<label className="block text-sm font-medium text-gray-700">Manufacturer Code</label>
|
||||||
<input
|
<input
|
||||||
className="w-full border px-3 py-2 rounded"
|
className="w-full border px-3 py-2 rounded"
|
||||||
placeholder="Device Type"
|
placeholder="Manufacturer Code"
|
||||||
value={form.deviceType}
|
value={form.manufacturerCode}
|
||||||
onChange={(e) => setForm({ ...form, deviceType: e.target.value })}
|
onChange={(e) => setForm({ ...form, manufacturerCode: e.target.value })}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-1">
|
<div className="space-y-1">
|
||||||
<label className="block text-sm font-medium text-gray-700">Usage Analysis Type</label>
|
<label className="block text-sm font-medium text-gray-700">Forward Cumulative Flow (m³)</label>
|
||||||
<input
|
<input
|
||||||
|
type="number"
|
||||||
|
step="0.001"
|
||||||
className="w-full border px-3 py-2 rounded"
|
className="w-full border px-3 py-2 rounded"
|
||||||
placeholder="Usage Analysis Type"
|
placeholder="0.000"
|
||||||
value={form.usageAnalysisType}
|
value={form.forwardCumulativeFlow}
|
||||||
onChange={(e) => setForm({ ...form, usageAnalysisType: e.target.value })}
|
onChange={(e) => setForm({ ...form, forwardCumulativeFlow: parseFloat(e.target.value) || 0 })}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-1">
|
<div className="space-y-1">
|
||||||
<label className="block text-sm font-medium text-gray-700">Installed Time</label>
|
<label className="block text-sm font-medium text-gray-700">Reverse Cumulative Flow (m³)</label>
|
||||||
<input
|
<input
|
||||||
type="date"
|
type="number"
|
||||||
|
step="0.001"
|
||||||
className="w-full border px-3 py-2 rounded"
|
className="w-full border px-3 py-2 rounded"
|
||||||
value={form.installedTime}
|
placeholder="0.000"
|
||||||
onChange={(e) => setForm({ ...form, installedTime: e.target.value })}
|
value={form.reverseCumulativeFlow}
|
||||||
|
onChange={(e) => setForm({ ...form, reverseCumulativeFlow: parseFloat(e.target.value) || 0 })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-1">
|
||||||
|
<label className="block text-sm font-medium text-gray-700">Forward Instantaneous Flow</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
step="0.001"
|
||||||
|
className="w-full border px-3 py-2 rounded"
|
||||||
|
placeholder="0.000"
|
||||||
|
value={form.forwardInstantaneousFlow}
|
||||||
|
onChange={(e) => setForm({ ...form, forwardInstantaneousFlow: parseFloat(e.target.value) || 0 })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-1">
|
||||||
|
<label className="block text-sm font-medium text-gray-700">Water Temperature (°C)</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
step="0.1"
|
||||||
|
className="w-full border px-3 py-2 rounded"
|
||||||
|
placeholder="0.0"
|
||||||
|
value={form.waterTemperature}
|
||||||
|
onChange={(e) => setForm({ ...form, waterTemperature: parseFloat(e.target.value) || 0 })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-1">
|
||||||
|
<label className="block text-sm font-medium text-gray-700">Voltage (V)</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
step="0.1"
|
||||||
|
className="w-full border px-3 py-2 rounded"
|
||||||
|
placeholder="0.0"
|
||||||
|
value={form.voltage}
|
||||||
|
onChange={(e) => setForm({ ...form, voltage: parseFloat(e.target.value) || 0 })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-1">
|
||||||
|
<label className="block text-sm font-medium text-gray-700">Echo Amplitude</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
className="w-full border px-3 py-2 rounded"
|
||||||
|
placeholder="0"
|
||||||
|
value={form.echoAmplitude}
|
||||||
|
onChange={(e) => setForm({ ...form, echoAmplitude: parseInt(e.target.value) || 0 })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-1">
|
||||||
|
<label className="block text-sm font-medium text-gray-700">Ultrasonic Flight Time</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
className="w-full border px-3 py-2 rounded"
|
||||||
|
placeholder="0"
|
||||||
|
value={form.ultrasonicFlightTime}
|
||||||
|
onChange={(e) => setForm({ ...form, ultrasonicFlightTime: parseInt(e.target.value) || 0 })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-1">
|
||||||
|
<label className="block text-sm font-medium text-gray-700">Timestamp</label>
|
||||||
|
<input
|
||||||
|
type="datetime-local"
|
||||||
|
className="w-full border px-3 py-2 rounded"
|
||||||
|
value={form.timestamp ? new Date(form.timestamp).toISOString().slice(0, 16) : ""}
|
||||||
|
onChange={(e) => setForm({ ...form, timestamp: new Date(e.target.value).toISOString() })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-1">
|
||||||
|
<label className="block text-sm font-medium text-gray-700">Alarm Bytes</label>
|
||||||
|
<input
|
||||||
|
className="w-full border px-3 py-2 rounded"
|
||||||
|
placeholder="Alarm Bytes"
|
||||||
|
value={form.alarmBytes}
|
||||||
|
onChange={(e) => setForm({ ...form, alarmBytes: e.target.value })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-1">
|
||||||
|
<label className="block text-sm font-medium text-gray-700">Checksum OK</label>
|
||||||
|
<button
|
||||||
|
onClick={() => setForm({ ...form, checksumOk: !form.checksumOk })}
|
||||||
|
className="w-full border rounded px-3 py-2 hover:bg-gray-50"
|
||||||
|
>
|
||||||
|
Status: {form.checksumOk ? "OK" : "ERROR"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-1">
|
||||||
|
<label className="block text-sm font-medium text-gray-700">Received At</label>
|
||||||
|
<input
|
||||||
|
type="datetime-local"
|
||||||
|
className="w-full border px-3 py-2 rounded"
|
||||||
|
value={form.receivedAt ? new Date(form.receivedAt).toISOString().slice(0, 16) : ""}
|
||||||
|
onChange={(e) => setForm({ ...form, receivedAt: new Date(e.target.value).toISOString() })}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user