feat: Separate Darstellung für Loop- und TDR-Charts implementiert
- `LoopMeasurementChart.tsx` und `TDRChart.tsx` mit Mock-Daten für Tests ergänzt. - `LoopChartActionBar.tsx` und `TDRChartActionBar.tsx` korrekt in `ChartSwitcher.tsx` integriert. - `ChartModal.tsx` umbenannt zu `ChartSwitcher.tsx` für klarere Struktur. - Redux `activeMode` sorgt jetzt für den richtigen Wechsel zwischen Loop- und TDR-Charts. - Verbesserte Verzeichnisstruktur für bessere Wartbarkeit und Skalierbarkeit.
This commit is contained in:
ISA
@@ -1,65 +0,0 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import DatePicker from "react-datepicker";
|
||||
import "react-datepicker/dist/react-datepicker.css";
|
||||
|
||||
interface DateRangePickerProps {
|
||||
setVonDatum: (date: Date) => void;
|
||||
setBisDatum: (date: Date) => void;
|
||||
}
|
||||
|
||||
const DateRangePicker: React.FC<DateRangePickerProps> = ({
|
||||
setVonDatum,
|
||||
setBisDatum,
|
||||
}) => {
|
||||
// Nutze die Props als Standardwerte für das Datum
|
||||
const [startDate, setStartDate] = useState<Date>(new Date());
|
||||
const [endDate, setEndDate] = useState<Date>(new Date());
|
||||
|
||||
useEffect(() => {
|
||||
setVonDatum(startDate);
|
||||
setBisDatum(endDate);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="flex space-x-4">
|
||||
<div>
|
||||
<label className="block text-sm font-semibold">Von</label>
|
||||
<DatePicker
|
||||
selected={startDate}
|
||||
onChange={(date) => {
|
||||
if (date) {
|
||||
setStartDate(date);
|
||||
setVonDatum(date);
|
||||
}
|
||||
}}
|
||||
selectsStart
|
||||
startDate={startDate}
|
||||
endDate={endDate}
|
||||
dateFormat="dd.MM.yyyy"
|
||||
className="border px-2 py-1 rounded"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-semibold">Bis</label>
|
||||
<DatePicker
|
||||
selected={endDate}
|
||||
onChange={(date) => {
|
||||
if (date) {
|
||||
setEndDate(date);
|
||||
setBisDatum(date);
|
||||
}
|
||||
}}
|
||||
selectsEnd
|
||||
startDate={startDate}
|
||||
endDate={endDate}
|
||||
minDate={startDate || undefined}
|
||||
dateFormat="dd.MM.yyyy"
|
||||
className="border px-2 py-1 rounded"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DateRangePicker;
|
||||
@@ -1,290 +0,0 @@
|
||||
"use client"; // components/modales/KueModal.jsx
|
||||
import ReactModal from "react-modal";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import { setVariables } from "../../../redux/slices/variablesSlice";
|
||||
import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
|
||||
import handleSave, {
|
||||
OriginalValues,
|
||||
} from "../../modules/kue705FO/handlers/handleSave";
|
||||
import handleDisplayEinschalten from "../../modules/kue705FO/handlers/handleDisplayEinschalten";
|
||||
import handleChange from "../../modules/kue705FO/handlers/handleChange";
|
||||
import firmwareUpdate from "../../modules/kue705FO/handlers/firmwareUpdate";
|
||||
import decodeToken from "../../../utils/decodeToken";
|
||||
// Props-Typen definieren
|
||||
interface KueModalProps {
|
||||
showModal: boolean;
|
||||
onClose: () => void;
|
||||
slot: number;
|
||||
onModulNameChange: (id: string) => void;
|
||||
}
|
||||
|
||||
function KueModal({
|
||||
showModal,
|
||||
onClose,
|
||||
slot,
|
||||
onModulNameChange,
|
||||
}: KueModalProps): JSX.Element {
|
||||
const isAdminLoggedIn = useSelector(
|
||||
(state: any) => state.auth.isAdminLoggedIn
|
||||
);
|
||||
const [isAdmin, setIsAdmin] = useState(false);
|
||||
const dispatch = useDispatch();
|
||||
const [ids, setIds] = useState(Array(32).fill(""));
|
||||
const [bezeichnungen, setBezeichnungen] = useState(Array(32).fill(""));
|
||||
const [isolationsgrenzwerte, setIsolationsgrenzwerte] = useState(
|
||||
Array(32).fill(10.0)
|
||||
);
|
||||
const [verzoegerung, setVerzoegerung] = useState(Array(32).fill(1.0));
|
||||
const [untereSchleifenGrenzwerte, setUntereSchleifenGrenzwerte] = useState(
|
||||
Array(32).fill(0.1)
|
||||
);
|
||||
const [obereSchleifenGrenzwerte, setObereSchleifenGrenzwerte] = useState(
|
||||
Array(32).fill(1.0)
|
||||
);
|
||||
const [schleifenintervall, setSchleifenintervall] = useState(
|
||||
Array(32).fill(24)
|
||||
);
|
||||
|
||||
const [originalValues, setOriginalValues] = useState<OriginalValues>({
|
||||
kueID: Array(32).fill(""),
|
||||
kueBezeichnungen: Array(32).fill(""),
|
||||
isolationsgrenzwerte: Array(32).fill(10.0),
|
||||
verzoegerung: Array(32).fill(1.0),
|
||||
untereSchleifenGrenzwerte: Array(32).fill(0.1),
|
||||
obereSchleifenGrenzwerte: Array(32).fill(1.0),
|
||||
schleifenintervall: Array(32).fill(24),
|
||||
});
|
||||
|
||||
// Werte aus dem Redux-Store abrufen
|
||||
const {
|
||||
kueID,
|
||||
kueLimit1,
|
||||
kueDelay1,
|
||||
kueLimit2Low,
|
||||
kueLimit2High,
|
||||
kueLoopInterval,
|
||||
} = useSelector((state: any) => state.variables);
|
||||
|
||||
const handleSaveWrapper = () => {
|
||||
handleSave({
|
||||
ids,
|
||||
bezeichnungen,
|
||||
isolationsgrenzwerte,
|
||||
verzoegerung,
|
||||
untereSchleifenGrenzwerte,
|
||||
obereSchleifenGrenzwerte,
|
||||
schleifenintervall,
|
||||
originalValues,
|
||||
slot,
|
||||
dispatch,
|
||||
onModulNameChange,
|
||||
onClose,
|
||||
});
|
||||
};
|
||||
|
||||
const handleDisplayEinschaltenWrapper = () => {
|
||||
handleDisplayEinschalten(slot); // Übergebe den Slot als Parameter
|
||||
};
|
||||
//------------------------------------------------------------------------------------------------------------
|
||||
// Initiale Werte festlegen, nur einmal beim Öffnen des Modals
|
||||
useEffect(() => {
|
||||
if (showModal) {
|
||||
setIds(kueID ? kueID.map((id: string) => id.trim() || "---") : ids);
|
||||
setBezeichnungen(
|
||||
kueID
|
||||
? kueID.map((name: string) => name.trim() || "---")
|
||||
: bezeichnungen
|
||||
);
|
||||
setIsolationsgrenzwerte(kueLimit1 || isolationsgrenzwerte);
|
||||
setVerzoegerung(kueDelay1 || verzoegerung);
|
||||
setUntereSchleifenGrenzwerte(kueLimit2Low || untereSchleifenGrenzwerte);
|
||||
setObereSchleifenGrenzwerte(kueLimit2High || obereSchleifenGrenzwerte);
|
||||
setSchleifenintervall(kueLoopInterval || schleifenintervall);
|
||||
|
||||
setOriginalValues({
|
||||
kueID: [...ids],
|
||||
kueBezeichnungen: [...bezeichnungen],
|
||||
isolationsgrenzwerte: [...isolationsgrenzwerte],
|
||||
verzoegerung: [...verzoegerung],
|
||||
untereSchleifenGrenzwerte: [...untereSchleifenGrenzwerte],
|
||||
obereSchleifenGrenzwerte: [...obereSchleifenGrenzwerte],
|
||||
schleifenintervall: [...schleifenintervall],
|
||||
});
|
||||
}
|
||||
}, [showModal]); // nur von showModal abhängig ansonsten wird alle 10 Sekunden die Werte zurückgesetzt in Modal
|
||||
//------------------------------------------------------------------------------------------------------------
|
||||
useEffect(() => {
|
||||
const token = sessionStorage.getItem("token");
|
||||
if (token) {
|
||||
const decoded = decodeToken(token);
|
||||
if (decoded && decoded.role.toLowerCase() === "admin") {
|
||||
setIsAdmin(true);
|
||||
} else {
|
||||
setIsAdmin(false);
|
||||
}
|
||||
}
|
||||
}, [showModal]);
|
||||
|
||||
//------------------------------------------------------------------------------------------------------------
|
||||
return (
|
||||
<ReactModal
|
||||
isOpen={showModal}
|
||||
onRequestClose={onClose}
|
||||
ariaHideApp={false}
|
||||
style={{
|
||||
overlay: {
|
||||
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
||||
zIndex: 100,
|
||||
},
|
||||
content: {
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
right: "auto",
|
||||
bottom: "auto",
|
||||
marginRight: "-50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
width: "90%",
|
||||
maxWidth: "800px",
|
||||
padding: "10px",
|
||||
borderRadius: "8px",
|
||||
border: "none",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center justify-between bg-littwin-blue text-white p-1 rounded-t-lg">
|
||||
<h2 className="text-sm font-bold">KUE Einstellung - Slot {slot + 1}</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "10px",
|
||||
right: "20px",
|
||||
background: "transparent",
|
||||
border: "none",
|
||||
cursor: "pointer",
|
||||
fontSize: "24px",
|
||||
}}
|
||||
>
|
||||
<i className="bi bi-x-circle-fill"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="p-2 mb-4 text-black">
|
||||
<div className="mb-2 ">
|
||||
<label className="font-bold ">Kabelbezeichnung:</label>
|
||||
<input
|
||||
type="text"
|
||||
className="border rounded p-1 w-full text-sm"
|
||||
value={ids[slot]}
|
||||
onChange={(e) => handleChange(setIds, e, slot)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-2 text-black">
|
||||
<h3 className="font-bold text-center mb-4">Isolationsmessung</h3>
|
||||
<table className="w-full text-left border-collapse mb-4">
|
||||
<thead className="bg-gray-100">
|
||||
<tr>
|
||||
<th className="p-2 border text-sm text-center">
|
||||
Grenzwert (MOhm)
|
||||
</th>
|
||||
<th className="p-2 border text-sm text-center">
|
||||
Verzögerung (sek)
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="p-2 border text-center">
|
||||
<input
|
||||
type="number"
|
||||
className="w-[6rem] border rounded p-1 text-sm"
|
||||
value={isolationsgrenzwerte[slot]}
|
||||
step="0.1"
|
||||
onChange={(e) =>
|
||||
handleChange(setIsolationsgrenzwerte, e, slot)
|
||||
}
|
||||
/>
|
||||
</td>
|
||||
<td className="p-2 border text-center">
|
||||
<input
|
||||
type="number"
|
||||
className="w-[6rem] border rounded p-1 text-sm"
|
||||
value={verzoegerung[slot]}
|
||||
step="0.1"
|
||||
onChange={(e) => handleChange(setVerzoegerung, e, slot)}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 className="font-bold text-center mb-4">Schleifenmessung</h3>
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead className="bg-gray-100">
|
||||
<tr>
|
||||
<th className="p-2 border text-sm text-center">
|
||||
Grenzwert (kOhm)
|
||||
</th>
|
||||
<th className="p-2 border text-sm text-center">
|
||||
Schleifenintervall (h)
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="p-2 border text-center">
|
||||
<input
|
||||
type="number"
|
||||
className="w-[6rem] border rounded p-1 text-sm"
|
||||
value={untereSchleifenGrenzwerte[slot]}
|
||||
step="0.1"
|
||||
onChange={(e) =>
|
||||
handleChange(setUntereSchleifenGrenzwerte, e, slot)
|
||||
}
|
||||
/>
|
||||
</td>
|
||||
<td className="p-2 border text-center">
|
||||
<input
|
||||
type="number"
|
||||
className="w-[6rem] border rounded p-1 text-sm"
|
||||
value={schleifenintervall[slot]}
|
||||
step="1"
|
||||
onChange={(e) => handleChange(setSchleifenintervall, e, slot)}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end bg-gray-100 p-4 rounded-b-lg">
|
||||
{/* Bedingte Anzeige der Firmware-Update-Schaltfläche */}
|
||||
{isAdminLoggedIn && (
|
||||
<button
|
||||
onClick={() => firmwareUpdate(slot)}
|
||||
className="bg-littwin-blue text-white p-2 rounded flex items-center mr-2"
|
||||
>
|
||||
Firmware Update
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={handleDisplayEinschaltenWrapper}
|
||||
className="bg-littwin-blue text-white p-2 rounded flex items-center mr-2"
|
||||
>
|
||||
<span className="mr-2">📺</span> Display einschalten
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSaveWrapper}
|
||||
className="bg-littwin-blue text-white p-2 rounded flex items-center"
|
||||
>
|
||||
<span className="mr-2">💾</span> Speichern
|
||||
</button>
|
||||
</div>
|
||||
</ReactModal>
|
||||
);
|
||||
}
|
||||
|
||||
export default KueModal;
|
||||
@@ -1,103 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import DateRangePicker from "./DateRangePicker";
|
||||
import ChartModal from "../../modules/kue705FO/charts/ChartModal"; // Importiere das Chart-Modal
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { setChartData } from "../../../redux/slices/chartDataSlice";
|
||||
import { RootState } from "../../../redux/store";
|
||||
|
||||
const LoopTDRChartActionBar: React.FC = () => {
|
||||
const dispatch = useDispatch();
|
||||
const BASE_URL = "http://localhost:3002";
|
||||
|
||||
const [vonDatum, setVonDatum] = useState<Date>(new Date());
|
||||
const [bisDatum, setBisDatum] = useState<Date>(new Date());
|
||||
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
||||
const [showChartModal, setShowChartModal] = useState(false);
|
||||
|
||||
// Redux-Daten holen (damit sich das ChartModal darauf bezieht)
|
||||
const chartData = useSelector((state: RootState) => state.chartData.data);
|
||||
|
||||
const fetchAllData = async () => {
|
||||
let index = 0;
|
||||
let allData: any[] = [];
|
||||
|
||||
while (true) {
|
||||
const url = `${BASE_URL}/${index}`;
|
||||
try {
|
||||
const response = await fetch(url);
|
||||
|
||||
if (!response.ok) {
|
||||
if (response.status === 404) {
|
||||
console.log(
|
||||
`📡 Kein weiteres Objekt gefunden bei Index ${index}, Stoppe Abruf.`
|
||||
);
|
||||
break;
|
||||
}
|
||||
throw new Error(`Fehler beim Abrufen von ${url}: ${response.status}`);
|
||||
}
|
||||
|
||||
const jsonData = await response.json();
|
||||
allData.push(jsonData);
|
||||
index++;
|
||||
} catch (error) {
|
||||
console.error(`❌ Fehler bei ${url}:`, error);
|
||||
break;
|
||||
}
|
||||
}
|
||||
console.log("📥 Alle abgerufenen JSON-Daten:", allData);
|
||||
dispatch(setChartData(allData)); // 🔥 Daten in Redux speichern
|
||||
return allData;
|
||||
};
|
||||
|
||||
const handleAktualisieren = async () => {
|
||||
try {
|
||||
setErrorMessage(null);
|
||||
|
||||
console.log("📡 API Haupt-URL:", BASE_URL);
|
||||
|
||||
const allData = await fetchAllData();
|
||||
|
||||
if (allData.length === 0) {
|
||||
console.error("❌ Keine Daten gefunden!");
|
||||
setErrorMessage("❌ Keine Daten gefunden.");
|
||||
return;
|
||||
}
|
||||
|
||||
console.log("📥 Alle abgerufenen JSON-Daten:");
|
||||
console.table(allData);
|
||||
} catch (error) {
|
||||
console.error("❌ Fehler beim Abrufen der Daten:", error);
|
||||
setErrorMessage("❌ Fehler beim Laden der Daten.");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-wrap justify-end items-center p-2 bg-gray-100 rounded-lg space-x-2 mr-4">
|
||||
<DateRangePicker setVonDatum={setVonDatum} setBisDatum={setBisDatum} />
|
||||
|
||||
<button
|
||||
onClick={handleAktualisieren}
|
||||
className="px-3 py-1 bg-green-500 text-white rounded text-sm"
|
||||
>
|
||||
Aktualisieren
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => setShowChartModal(true)}
|
||||
className="px-3 py-1 bg-blue-500 text-white rounded text-sm"
|
||||
>
|
||||
Diagramm anzeigen
|
||||
</button>
|
||||
|
||||
{showChartModal && (
|
||||
<ChartModal
|
||||
isOpen={showChartModal}
|
||||
onClose={() => setShowChartModal(false)}
|
||||
chartRef={React.createRef<HTMLCanvasElement>()}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoopTDRChartActionBar;
|
||||
Reference in New Issue
Block a user