Ismail/CPLv4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

TDR Chart bekommt von Redux Daten, aber die Darstellung ist noch zu optimieren

Browse Source
This commit is contained in:
Ismail Ali
2025-02-22 10:59:40 +01:00
parent da3fe59817
commit e6bac2d4ba
9 changed files with 55 additions and 539 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx
View File

@@ -1,46 +1,15 @@
// components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx
import React, { useEffect, useRef, useState } from "react";
import React, { useEffect, useRef } from "react";
import { useSelector } from "react-redux";
import Chart from "chart.js/auto";
import "chartjs-adapter-date-fns";
import { parseISO } from "date-fns";
const TDRChart: React.FC = () => {
const chartRef = useRef<HTMLCanvasElement>(null);
const chartInstance = useRef<Chart | null>(null);
// Zustand für die Chart-Daten
const [chartData, setChartData] = useState<
{ timestamp: string; tdr: number }[]
>([]);
useEffect(() => {
// Aktuelles Jahr und Monat ermitteln
const currentYear = new Date().getFullYear();
const currentMonth = new Date().getMonth() + 1; // Monate sind 0-basiert
// Pfad zur directory.json-Datei erstellen
const yearFolder = `Year_${String(currentYear).slice(-2)}`;
const monthFolder = `Month_${String(currentMonth).padStart(2, "0")}`;
const path = `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/directory.json`;
// Daten abrufen
fetch(path)
.then((response) => {
if (!response.ok) {
throw new Error(
`Fehler beim Laden der Datei: ${response.statusText}`
);
}
return response.json();
})
.then((data) => {
// Annahme: data ist ein Array von Objekten mit den Eigenschaften 'timestamp' und 'tdr'
setChartData(data);
})
.catch((error) => {
console.error("Fehler beim Abrufen der Daten:", error);
});
}, []);
// TDR-Daten aus dem Redux Store selektieren
const chartData = useSelector((state: any) => state.tdrData.data);
useEffect(() => {
if (chartRef.current && chartData.length > 0) {
@@ -53,14 +22,17 @@ const TDRChart: React.FC = () => {
chartInstance.current = new Chart(ctx, {
type: "line",
data: {
labels: chartData.map((entry) => parseISO(entry.timestamp)),
datasets: [
{
label: "TDR Entfernung (km)",
data: chartData.map((entry) => entry.tdr ?? 0),
data: chartData,
borderColor: "rgba(255, 99, 132, 1)",
backgroundColor: "rgba(255, 99, 132, 0.2)",
tension: 0.1,
parsing: {
xAxisKey: "t", // Schlüssel für den Zeitstempel
yAxisKey: "m", // Schlüssel für den Messwert
},
},
],
},
@@ -70,11 +42,20 @@ const TDRChart: React.FC = () => {
scales: {
x: {
type: "time",
time: { unit: "minute", tooltipFormat: "dd.MM.yyyy HH:mm" },
title: { display: true, text: "Zeit" },
time: {
unit: "minute",
tooltipFormat: "dd.MM.yyyy HH:mm",
},
title: {
display: true,
text: "Zeit",
},
},
y: {
title: { display: true, text: "km" },
title: {
display: true,
text: "km",
},
min: 0,
max: 3,
},

7
components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx
View File

@@ -2,11 +2,13 @@
import React, { useState, useEffect, useRef } from "react";
import DateRangePicker from "../DateRangePicker";
import TDRChart from "../../../../kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart";
import { useDispatch } from "react-redux";
import { setChartData } from "../../../../../../redux/slices/chartDataSlice";
import { parseISO } from "date-fns";
import { useDispatch } from "react-redux";
import { setTDRData } from "../../../../../../redux/slices/tdrDataSlice";
const TDRChartActionBar: React.FC = () => {
const dispatch = useDispatch();
const [jahr, setJahr] = useState(new Date().getFullYear());
const [monat, setMonat] = useState(new Date().getMonth() + 1);
const [dateiListe, setDateiListe] = useState<string[]>([]); // Liste der Dateien
@@ -73,6 +75,8 @@ const TDRChartActionBar: React.FC = () => {
return;
}
const data = await response.json();
// Daten im Redux Store speichern
dispatch(setTDRData(data));
console.log("Daten erfolgreich in Redux gespeichert:", data);
} catch (error) {
@@ -130,7 +134,6 @@ const TDRChartActionBar: React.FC = () => {
});
}, []);
const dispatch = useDispatch();
const BASE_URL = "http://localhost:3002";
const [showChart, setShowChart] = useState(false);

232
components/modales/KueModal.jsx
View File

@@ -1,232 +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 "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
import handleChange from "./handlers/handleChange";
import handleDisplayEinschalten from "./handlers/handleDisplayEinschalten";
import handleSave from "./handlers/handleSave";
function KueModal({ showModal, onClose, slot, onModulNameChange }) {
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({});
// Werte aus dem Redux-Store abrufen
const {
kueID,
kueLimit1,
kueDelay1,
kueLimit2Low,
kueLimit2High,
kueLoopInterval,
} = useSelector((state) => state.variables);
// Initiale Werte festlegen, nur einmal beim Öffnen des Modals
useEffect(() => {
if (showModal) {
setIds(kueID ? kueID.map((id) => id.trim() || "---") : ids);
setBezeichnungen(
kueID ? kueID.map((name) => name.trim() || "---") : bezeichnungen
);
setIsolationsgrenzwerte(kueLimit1 || isolationsgrenzwerte);
setVerzoegerung(kueDelay1 || verzoegerung);
setUntereSchleifenGrenzwerte(kueLimit2Low || untereSchleifenGrenzwerte);
setObereSchleifenGrenzwerte(kueLimit2High || obereSchleifenGrenzwerte);
setSchleifenintervall(kueLoopInterval || schleifenintervall);
setOriginalValues({
ids: [...ids],
bezeichnungen: [...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
return (
<ReactModal
isOpen={showModal}
onRequestClose={onClose}
ariaHideApp={false}
style={{
overlay: {
backgroundColor: "rgba(0, 0, 0, 0.5)",
zIndex: 100,
text: "black",
},
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">
<button
onClick={() => handleDisplayEinschalten(slot)}
className="bg-littwin-blue text-white p-2 rounded flex items-center mr-2"
>
<span className="mr-2">📺</span> Display einschalten
</button>
<button
onClick={() =>
handleSave({
slot,
ids,
bezeichnungen,
isolationsgrenzwerte,
verzoegerung,
untereSchleifenGrenzwerte,
obereSchleifenGrenzwerte,
schleifenintervall,
originalValues,
onModulNameChange,
dispatch,
onClose,
})
}
className="bg-littwin-blue text-white p-2 rounded flex items-center"
>
<span className="mr-2">💾</span> Speichern
</button>
</div>
</ReactModal>
);
}
export default KueModal;

208
components/modales/kueModal/TDRPopup.tsx
View File

@@ -1,208 +0,0 @@
"use client"; // components/modules/KueModal/TDRPopup.tsx
import React, { useState, useEffect, useRef } from "react";
import ReactModal from "react-modal";
import Chart from "chart.js/auto";
import { useSelector } from "react-redux";
import KueModal from "../KueModal";
import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
import { RootState } from "../../../redux/store";
import { DataTDR } from "../../../redux/types/chartDataTypesTDR";
import { useDispatch } from "react-redux";
import {
setSelectedChartData,
setSelectedFileName,
} from "../../../redux/slices/variablesSlice";
const TDRChartActionBar: React.FC = () => {
const [jahr, setJahr] = useState(new Date().getFullYear());
const [monat, setMonat] = useState(new Date().getMonth() + 1);
const [dateiListe, setDateiListe] = useState<string[]>([]); // Liste der Dateien
const [ausgewählteDatei, setAusgewählteDatei] = useState<string>(""); // Ausgewählte Datei
const dispatch = useDispatch(); // Redux-Dispatch
const getYearFolderName = (year: number): string => {
return `Year_${String(year).slice(-2)}`;
};
const [sortAscending, setSortAscending] = useState(true);
// Fetch directory.json basierend auf Jahr und Monat
useEffect(() => {
const loadDirectory = async () => {
const yearFolder = getYearFolderName(jahr);
const monthFolder = `Month_${monat.toString().padStart(2, "0")}`;
const path = `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/directory.json`;
console.log("Verwendeter Pfad:", path);
try {
const response = await fetch(path);
if (!response.ok) {
console.error(
`Fehler beim Laden der Datei directory.json. HTTP-Status: ${response.status}`
);
setDateiListe([]); // Setze eine leere Liste
return;
}
const data = await response.json();
const files = data.files.map(
(file: { filename: string }) => file.filename
);
setDateiListe(files);
} catch (error) {
console.error("Fehler beim Laden der Datei directory.json:", error);
}
};
loadDirectory();
}, [jahr, monat]);
const handleSortToggle = () => {
setSortAscending(!sortAscending);
setDateiListe((prevListe) =>
[...prevListe].sort((a, b) =>
sortAscending ? a.localeCompare(b) : b.localeCompare(a)
)
);
};
const handleAktualisieren = () => {
console.log("Daten werden aktualisiert für:", jahr, monat);
};
//----------------------------------
const loadAndStoreChartData = async (url: string) => {
try {
const response = await fetch(url);
if (!response.ok) {
console.error(
`Fehler beim Laden der Daten. HTTP-Status: ${response.status}`
);
return;
}
const data = await response.json();
dispatch(setSelectedChartData(data));
console.log("Daten erfolgreich in Redux gespeichert:", data);
} catch (error) {
console.error("Fehler beim Laden der JSON-Daten:", error);
}
};
const handleLoadData = (filename: string) => {
const yearFolder = `Year_${jahr.toString().slice(-2)}`;
const monthFolder = `Month_${monat.toString().padStart(2, "0")}`;
const filePath = `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/${filename}`;
loadAndStoreChartData(filePath);
};
const handleDateiAuswahl = (event: React.ChangeEvent<HTMLSelectElement>) => {
const selectedFile = event.target.value;
setAusgewählteDatei(selectedFile);
console.log("Ausgewählte Datei:", selectedFile);
// Datei in Redux speichern
dispatch(setSelectedFileName(selectedFile));
// Lade die Datei und speichere sie in Redux
handleLoadData(selectedFile);
};
const loadSelectedFileData = async (filename: string) => {
const yearFolder = getYearFolderName(jahr);
const monthFolder = `Month_${monat.toString().padStart(2, "0")}`;
try {
const response = await fetch(
`/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/${filename}`
);
if (response.ok) {
const data: DataTDR[] = await response.json();
console.log("Geladene Daten:", data);
// Redux-Action zum Speichern der Daten aufrufen
dispatch(setSelectedChartData(data));
} else {
console.error("Fehler beim Laden der Datei:", filename);
}
} catch (error) {
console.error("Fehler beim Laden der Datei:", error);
}
};
return (
<div className="flex flex-wrap justify-end items-center p-2 bg-gray-100 rounded-lg space-x-2 mr-4">
<div className="flex items-center space-x-2">
<label htmlFor="jahrSelect" className="text-sm font-semibold">
Jahr
</label>
<select
id="jahrSelect"
className="border rounded px-2 py-1"
value={jahr}
onChange={(e) => setJahr(Number(e.target.value))}
>
{Array.from({ length: 11 }, (_, i) => 2020 + i).map((year) => (
<option key={year} value={year}>
{year}
</option>
))}
</select>
</div>
<div className="flex items-center space-x-2">
<label htmlFor="monatSelect" className="text-sm font-semibold">
Monat
</label>
<select
id="monatSelect"
className="border rounded px-2 py-1"
value={monat}
onChange={(e) => setMonat(Number(e.target.value))}
>
{Array.from({ length: 12 }, (_, i) => i + 1).map((month) => (
<option key={month} value={month}>
{month.toString().padStart(2, "0")}
</option>
))}
</select>
</div>
<div className="flex items-center space-x-2">
<label htmlFor="dateiSelect" className="text-sm font-semibold">
Auswahl
</label>
<select
id="dateiSelect"
className="border rounded px-2 py-1"
value={ausgewählteDatei}
onChange={handleDateiAuswahl}
>
<option value="" disabled>
Bitte wählen...
</option>
{dateiListe.map((file, index) => (
<option key={index} value={file}>
{file}
</option>
))}
</select>
</div>
<button
onClick={handleSortToggle}
className="flex items-center justify-center px-3 py-1 bg-blue-500 text-white rounded text-sm"
>
<i className={`bi bi-arrow-${sortAscending ? "down" : "up"}-short`} />
<span className="ml-1">Sortieren</span>
</button>
<button
onClick={handleAktualisieren}
className="px-3 py-1 bg-green-500 text-white rounded text-sm"
>
Aktualisieren
</button>
</div>
);
};
export default TDRChartActionBar;

28
components/modals/InputModal.tsx
View File

@@ -1,28 +0,0 @@
import React from "react";
export default function InputModal({ isOpen, input, closeModal }) {
if (!isOpen || !input) return null;
return (
<div className="fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center z-50">
<div className="bg-white rounded-lg shadow-lg p-6 w-1/3">
<h2 className="text-lg font-bold mb-4">
Details für Eingang {input.id}
</h2>
<p>
<strong>Status:</strong>{" "}
{input.status === "active" ? "Aktiv" : "Inaktiv"}
</p>
<p>
<strong>Beschreibung:</strong> {input.description}
</p>
<button
onClick={closeModal}
className="mt-4 px-4 py-2 bg-blue-500 text-white rounded-lg"
>
Schließen
</button>
</div>
</div>
);
}

28
components/modals/OutputModal.tsx
View File

@@ -1,28 +0,0 @@
import React from "react";
export default function OutputModal({ isOpen, output, closeModal }) {
if (!isOpen || !output) return null;
return (
<div className="fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center z-50">
<div className="bg-white rounded-lg shadow-lg p-6 w-1/3">
<h2 className="text-lg font-bold mb-4">
Details für Ausgang {output.id}
</h2>
<p>
<strong>Bezeichnung:</strong> {output.description}
</p>
<p>
<strong>Status:</strong>{" "}
{output.toggle ? "Eingeschaltet" : "Ausgeschaltet"}
</p>
<button
onClick={closeModal}
className="mt-4 px-4 py-2 bg-blue-500 text-white rounded-lg"
>
Schließen
</button>
</div>
</div>
);
}

2
config/webVersion.ts
View File

@@ -6,5 +6,5 @@
2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
*/
const webVersion = "1.6.85";
const webVersion = "1.6.86";
export default webVersion;

26
redux/slices/tdrDataSlice.ts Normal file
View File

@@ -0,0 +1,26 @@
// redux/slices/tdrDataSlice.ts
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
interface TDRDataState {
data: { timestamp: string; tdr: number }[];
}
const initialState: TDRDataState = {
data: [],
};
const tdrDataSlice = createSlice({
name: "tdrData",
initialState,
reducers: {
setTDRData(
state,
action: PayloadAction<{ timestamp: string; tdr: number }[]>
) {
state.data = action.payload;
},
},
});
export const { setTDRData } = tdrDataSlice.actions;
export default tdrDataSlice.reducer;

2
redux/store.ts
View File

@@ -6,6 +6,7 @@ import chartDataReducer from "./slices/chartDataSlice";
import webVersionReducer from "./slices/webVersionSlice";
import digitalInputsReducer from "./slices/digitalInputsSlice";
import kabelueberwachungChartReducer from "./slices/kabelueberwachungChartSlice";
import tdrDataReducer from "./slices/tdrDataSlice";
const store = configureStore({
reducer: {
@@ -15,6 +16,7 @@ const store = configureStore({
webVersion: webVersionReducer,
digitalInputs: digitalInputsReducer,
kabelueberwachungChart: kabelueberwachungChartReducer,
tdrData: tdrDataReducer,
},
});