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

Redux Dateien in redux/store/ verschoben

Browse Source
This commit is contained in:
ISA
2025-01-28 10:25:24 +01:00
parent 243099fc75
commit b1e50188ab
9 changed files with 2220 additions and 1979 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
components/modales/kueModal/KueModal.tsx
View File

@@ -2,9 +2,9 @@
import ReactModal from "react-modal";
import { useState, useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { setVariables } from "../../../store/variablesSlice";
import { setVariables } from "../../../redux/store/variablesSlice";
import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
import handleSave , { OriginalValues } from "./handlers/handleSave";
import handleSave, { OriginalValues } from "./handlers/handleSave";
import handleDisplayEinschalten from "./handlers/handleDisplayEinschalten";
import handleChange from "./handlers/handleChange";
import firmwareUpdate from "./handlers/firmwareUpdate";
@@ -23,7 +23,9 @@ function KueModal({
slot,
onModulNameChange,
}: KueModalProps): JSX.Element {
const isAdminLoggedIn = useSelector((state: any) => state.auth.isAdminLoggedIn);
const isAdminLoggedIn = useSelector(
(state: any) => state.auth.isAdminLoggedIn
);
const [isAdmin, setIsAdmin] = useState(false);
const dispatch = useDispatch();
const [ids, setIds] = useState(Array(32).fill(""));
@@ -51,10 +53,9 @@ function KueModal({
obereSchleifenGrenzwerte: Array(32).fill(1.0),
schleifenintervall: Array(32).fill(24),
});
// Werte aus dem Redux-Store abrufen
const {
// Werte aus dem Redux-Store abrufen
const {
kueID,
kueLimit1,
kueDelay1,
@@ -89,7 +90,9 @@ function KueModal({
if (showModal) {
setIds(kueID ? kueID.map((id: string) => id.trim() || "---") : ids);
setBezeichnungen(
kueID ? kueID.map((name: string) => name.trim() || "---") : bezeichnungen
kueID
? kueID.map((name: string) => name.trim() || "---")
: bezeichnungen
);
setIsolationsgrenzwerte(kueLimit1 || isolationsgrenzwerte);
setVerzoegerung(kueDelay1 || verzoegerung);
@@ -106,7 +109,6 @@ function KueModal({
obereSchleifenGrenzwerte: [...obereSchleifenGrenzwerte],
schleifenintervall: [...schleifenintervall],
});
}
}, [showModal]); // nur von showModal abhängig ansonsten wird alle 10 Sekunden die Werte zurückgesetzt in Modal
//------------------------------------------------------------------------------------------------------------
@@ -132,7 +134,6 @@ function KueModal({
overlay: {
backgroundColor: "rgba(0, 0, 0, 0.5)",
zIndex: 100,
},
content: {
top: "50%",

155
components/modales/kueModal/TDRPopup.tsx Normal file
View File

@@ -0,0 +1,155 @@
import React, { useState, useEffect } from "react";
const TDRPopup = () => {
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 [sortAscending, setSortAscending] = useState(true);
// Fetch directory.json basierend auf Jahr und Monat
useEffect(() => {
const loadDirectory = async () => {
try {
const response = await fetch(
`/CPLmockData/LastTDR/kue_01/Year_${jahr}/Month_${monat
.toString()
.padStart(2, "0")}/directory.json`
);
if (response.ok) {
const data = await response.json();
const files = data.files.map(
(file: { filename: string }) => file.filename
);
setDateiListe(files); // Dateien setzen
} else {
console.error("Fehler beim Laden der Datei directory.json");
setDateiListe([]); // Leere Liste bei Fehler
}
} catch (error) {
console.error("Fehler beim Laden der Datei directory.json:", error);
setDateiListe([]);
}
};
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 handleDateiAuswahl = (event: React.ChangeEvent<HTMLSelectElement>) => {
setAusgewählteDatei(event.target.value);
console.log("Ausgewählte Datei:", event.target.value);
// Hier kannst du die Logik hinzufügen, um die Datei zu laden und die Diagrammdaten zu aktualisieren
loadSelectedFileData(event.target.value);
};
// Laden der ausgewählten Datei
const loadSelectedFileData = async (filename: string) => {
try {
const response = await fetch(
`/CPLmockData/LastTDR/kue_01/Year_${jahr}/Month_${monat
.toString()
.padStart(2, "0")}/${filename}`
);
if (response.ok) {
const data = await response.json();
console.log("Geladene Daten:", data);
// Hier kannst du die Daten für das Diagramm verwenden
} 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 TDRPopup;

4
components/modales/kueModal/handlers/handleSave.ts
View File

@@ -1,7 +1,7 @@
// components/modales/kueModal/handlers/handleSave.ts
import { setVariables } from "../../../../store/variablesSlice";
import { setVariables } from "../../../../redux/store/variablesSlice";
export interface OriginalValues {
export interface OriginalValues {
kueID: string[];
kueBezeichnungen: string[];
isolationsgrenzwerte: number[];

144
components/modules/Kue705FO.tsx
View File

@@ -5,7 +5,7 @@ import Chart from "chart.js/auto";
import { useSelector } from "react-redux";
import KueModal from "../modales/kueModal/KueModal";
import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
import { RootState } from "../../store/store";
import { RootState } from "../../redux/store/store";
interface DataTDR {
t: number; // Oder Date, falls t ein Datum ist
@@ -170,15 +170,21 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
const handleCloseChartModal = () => setShowChartModal(false);
// Funktion zum Erstellen des TDR-Charts
const chartInstance = useRef<Chart | null>(null);
const createTDRChart = (dataTDR: DataTDR[]) => {
const canvas = document.getElementById("myChart") as HTMLCanvasElement;
const ctx = canvas?.getContext("2d");
if (!ctx) {
console.error("Canvas context konnte nicht gefunden werden");
return;
if (!canvas) return;
const ctx = canvas.getContext("2d");
if (!ctx) return;
// Zerstöre das vorherige Diagramm, falls vorhanden
if (chartInstance.current) {
chartInstance.current.destroy();
}
new Chart(ctx, {
chartInstance.current = new Chart(ctx, {
type: "line",
data: {
labels: dataTDR.map((row) => row.t),
@@ -188,21 +194,12 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
data: dataTDR.map((row) => row.m),
borderColor: "#00AEEF",
borderWidth: 1,
pointBorderWidth: 0,
pointStyle: false,
fill: false,
yAxisID: "y",
},
],
},
options: {
scales: {
x: {
type: "linear",
position: "left",
title: { display: true, text: "Meter" },
},
},
responsive: true,
plugins: {
zoom: {
pan: {
@@ -211,15 +208,22 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
},
zoom: {
wheel: {
enabled: true, // Zoom mit Mausrad
enabled: true,
},
pinch: {
enabled: true, // Pinch-Zoom für Touchgeräte
enabled: true,
},
mode: "xy", // x und y Achsen zoomen
mode: "xy",
},
},
},
scales: {
x: {
type: "linear",
position: "bottom",
title: { display: true, text: "Meter" },
},
},
},
});
};
@@ -733,23 +737,97 @@ interface Kue705FOProps {
//-------------------------------------------------------------
// TDRPopup Komponente
//-------------------------------------------------------------
// Im Modal für TDR
const TDRPopup = () => {
const TDRPopup = ({
onDataSelect,
}: {
onDataSelect: (data: DataTDR[]) => void;
}) => {
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 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); // Jahr in Year_xx umwandeln
const monthFolder = `Month_${monat.toString().padStart(2, "0")}`;
try {
const response = await fetch(
`/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/directory.json`
);
//link in console anzeigen
console.log(
`/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/directory.json`
);
if (!response.ok) {
console.error(
`Fehler beim Laden der Datei directory.json. HTTP-Status: ${response.status}`
);
setDateiListe([]);
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);
console.log(
"Sortierung umkehren:",
sortAscending ? "Absteigend" : "Aufsteigend"
setDateiListe((prevListe) =>
[...prevListe].sort((a, b) =>
sortAscending ? a.localeCompare(b) : b.localeCompare(a)
)
);
};
const handleAktualisieren = () => {
console.log("Aktualisieren mit Jahr:", jahr, "Monat:", monat);
// Logik für die Aktualisierung hinzufügen
console.log("Daten werden aktualisiert für:", jahr, monat);
};
const handleDateiAuswahl = (event: React.ChangeEvent<HTMLSelectElement>) => {
setAusgewählteDatei(event.target.value);
console.log("Ausgewählte Datei:", event.target.value);
// Hier kannst du die Logik hinzufügen, um die Datei zu laden und die Diagrammdaten zu aktualisieren
loadSelectedFileData(event.target.value);
};
// Laden der ausgewählten Datei
const loadSelectedFileData = async (filename: string) => {
const yearFolder = `Year_${jahr.toString().slice(-2)}`;
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 = await response.json();
console.log("Geladene Daten:", data);
// Hier kannst du die Daten für das Diagramm verwenden
} else {
console.error("Fehler beim Laden der Datei:", filename);
}
} catch (error) {
console.error("Fehler beim Laden der Datei:", error);
}
};
return (
@@ -784,24 +862,30 @@ const TDRPopup = () => {
>
{Array.from({ length: 12 }, (_, i) => i + 1).map((month) => (
<option key={month} value={month}>
{month}
{month.toString().padStart(2, "0")}
</option>
))}
</select>
</div>
<div className="flex items-center space-x-2">
<label htmlFor="emptySelect" className="text-sm font-semibold">
<label htmlFor="dateiSelect" className="text-sm font-semibold">
Auswahl
</label>
<select
id="emptySelect"
id="dateiSelect"
className="border rounded px-2 py-1"
defaultValue=""
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>