feat: Struktur für Charts verbessert und Komponenten getrennt
- `LoopMeasurementChart.tsx` und `TDRChart.tsx` erstellt für separate Diagramm-Darstellungen. - Neue Struktur unter `/components/modules/kue705FO/charts/` eingeführt. - `ChartModal.tsx` bleibt für generelle Nutzung erhalten. - Erhöhte Wartbarkeit und Modularität durch Trennung der Chart-Komponenten.
This commit is contained in:
ISA
@@ -1,66 +0,0 @@
|
||||
import React from "react";
|
||||
import ReactModal from "react-modal";
|
||||
import TDRPopup from "./LoopTDRChartActionBar";
|
||||
|
||||
interface ChartModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
chartRef: React.RefObject<HTMLCanvasElement>;
|
||||
}
|
||||
|
||||
const ChartModal: React.FC<ChartModalProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
chartRef,
|
||||
}) => {
|
||||
return (
|
||||
<ReactModal
|
||||
isOpen={isOpen}
|
||||
onRequestClose={onClose}
|
||||
ariaHideApp={false}
|
||||
style={{
|
||||
overlay: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
|
||||
content: {
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
right: "auto",
|
||||
bottom: "auto",
|
||||
marginRight: "-50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
width: "80%",
|
||||
maxWidth: "50rem",
|
||||
height: "30rem",
|
||||
padding: "1rem",
|
||||
overflow: "hidden",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<button
|
||||
onClick={onClose}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "0.625rem",
|
||||
right: "0.625rem",
|
||||
background: "transparent",
|
||||
border: "none",
|
||||
fontSize: "1.5rem",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
<i className="bi bi-x-circle-fill"></i>
|
||||
</button>
|
||||
|
||||
<div style={{ maxHeight: "100%", overflow: "auto" }}>
|
||||
<TDRPopup />
|
||||
</div>
|
||||
|
||||
<canvas
|
||||
id="myChart"
|
||||
ref={chartRef}
|
||||
style={{ width: "100%", height: "20rem" }}
|
||||
></canvas>
|
||||
</ReactModal>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChartModal;
|
||||
@@ -4,10 +4,12 @@ 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 "./handlers/handleSave";
|
||||
import handleDisplayEinschalten from "./handlers/handleDisplayEinschalten";
|
||||
import handleChange from "./handlers/handleChange";
|
||||
import firmwareUpdate from "./handlers/firmwareUpdate";
|
||||
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 {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { useState } from "react";
|
||||
import DateRangePicker from "./DateRangePicker";
|
||||
import ChartModal from "./ChartModal"; // Importiere das Chart-Modal
|
||||
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";
|
||||
@@ -93,6 +93,7 @@ const LoopTDRChartActionBar: React.FC = () => {
|
||||
<ChartModal
|
||||
isOpen={showChartModal}
|
||||
onClose={() => setShowChartModal(false)}
|
||||
chartRef={React.createRef<HTMLCanvasElement>()}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -1,16 +0,0 @@
|
||||
const firmwareUpdate = (slot: number) => {
|
||||
const url = `${window.location.origin}/CPL?/kabelueberwachung.html&KSU${slot}=1`;
|
||||
fetch(url, { method: "GET" })
|
||||
.then((response) => {
|
||||
if (response.ok) {
|
||||
alert(`Update an ${slot + 1} erfolgreich gestartet!`);
|
||||
} else {
|
||||
alert("Fehler beim Update!");
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Fehler:", error);
|
||||
alert("Fehler beim Update!");
|
||||
});
|
||||
};
|
||||
export default firmwareUpdate;
|
||||
@@ -1,18 +0,0 @@
|
||||
import { Dispatch, SetStateAction } from "react";
|
||||
|
||||
// Funktion zur Änderung der Werte
|
||||
const handleChange = (
|
||||
setter: Dispatch<SetStateAction<any[]>>, // Typ für den Setter
|
||||
e: React.ChangeEvent<HTMLInputElement>, // Typ für das Event
|
||||
slot: number // Typ für den Slot
|
||||
) => {
|
||||
const value = e.target.value;
|
||||
setter((prev: any[]) => {
|
||||
// Typ für den vorherigen Zustand
|
||||
const updated = [...prev];
|
||||
updated[slot] = value;
|
||||
return updated;
|
||||
});
|
||||
};
|
||||
|
||||
export default handleChange;
|
||||
@@ -1,16 +0,0 @@
|
||||
const handleDisplayEinschalten = (slot: number) => {
|
||||
const url = `/CPL?/kabelueberwachung.html&KSD${slot}=1`;
|
||||
fetch(url, { method: "GET" })
|
||||
.then((response) => {
|
||||
if (response.ok) {
|
||||
alert(`Display für Slot ${slot + 1} erfolgreich eingeschaltet!`);
|
||||
} else {
|
||||
alert("Fehler beim Einschalten des Displays!");
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Fehler:", error);
|
||||
alert("Fehler beim Einschalten des Displays!");
|
||||
});
|
||||
};
|
||||
export default handleDisplayEinschalten;
|
||||
@@ -1,123 +0,0 @@
|
||||
// components/modales/kueModal/handlers/handleSave.ts
|
||||
import { setVariables } from "../../../../redux/slices/variablesSlice";
|
||||
|
||||
export interface OriginalValues {
|
||||
kueID: string[];
|
||||
kueBezeichnungen: string[];
|
||||
isolationsgrenzwerte: number[];
|
||||
verzoegerung: number[];
|
||||
untereSchleifenGrenzwerte: number[];
|
||||
obereSchleifenGrenzwerte: number[];
|
||||
schleifenintervall: number[];
|
||||
}
|
||||
|
||||
interface HandleSaveParams {
|
||||
ids: string[]; // kueID im Redux-Slice
|
||||
bezeichnungen: string[]; // kueBezeichnungen im Redux-Slice
|
||||
isolationsgrenzwerte: number[];
|
||||
verzoegerung: number[];
|
||||
untereSchleifenGrenzwerte: number[];
|
||||
obereSchleifenGrenzwerte: number[];
|
||||
schleifenintervall: number[];
|
||||
originalValues: OriginalValues;
|
||||
slot: number;
|
||||
dispatch: (action: any) => void;
|
||||
onModulNameChange: (id: string) => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const handleSave = ({
|
||||
ids,
|
||||
bezeichnungen,
|
||||
isolationsgrenzwerte,
|
||||
verzoegerung,
|
||||
untereSchleifenGrenzwerte,
|
||||
obereSchleifenGrenzwerte,
|
||||
schleifenintervall,
|
||||
originalValues,
|
||||
slot,
|
||||
dispatch,
|
||||
onModulNameChange,
|
||||
onClose,
|
||||
}: HandleSaveParams): void => {
|
||||
const changes: Partial<{
|
||||
KID: string;
|
||||
KIA: string;
|
||||
KL_: number;
|
||||
KD_: number;
|
||||
KR_: number;
|
||||
KRO_: number;
|
||||
KRI: number;
|
||||
}> = {};
|
||||
|
||||
if (ids[slot] !== originalValues.kueID[slot]) {
|
||||
changes.KID = ids[slot];
|
||||
}
|
||||
if (bezeichnungen[slot] !== originalValues.kueBezeichnungen[slot]) {
|
||||
changes.KIA = bezeichnungen[slot];
|
||||
}
|
||||
if (
|
||||
isolationsgrenzwerte[slot] !== originalValues.isolationsgrenzwerte[slot]
|
||||
) {
|
||||
changes.KL_ = isolationsgrenzwerte[slot];
|
||||
}
|
||||
if (verzoegerung[slot] !== originalValues.verzoegerung[slot]) {
|
||||
changes.KD_ = verzoegerung[slot];
|
||||
}
|
||||
if (
|
||||
untereSchleifenGrenzwerte[slot] !==
|
||||
originalValues.untereSchleifenGrenzwerte[slot]
|
||||
) {
|
||||
changes.KR_ = untereSchleifenGrenzwerte[slot];
|
||||
}
|
||||
if (
|
||||
obereSchleifenGrenzwerte[slot] !==
|
||||
originalValues.obereSchleifenGrenzwerte[slot]
|
||||
) {
|
||||
changes.KRO_ = obereSchleifenGrenzwerte[slot];
|
||||
}
|
||||
if (schleifenintervall[slot] !== originalValues.schleifenintervall[slot]) {
|
||||
changes.KRI = schleifenintervall[slot];
|
||||
}
|
||||
|
||||
if (Object.keys(changes).length > 0) {
|
||||
let url = `/cpl?/kabelueberwachung.html&slot=${slot}`;
|
||||
Object.entries(changes).forEach(([paramKey, paramValue]) => {
|
||||
if (paramValue !== undefined) {
|
||||
url += `&${paramKey}${slot}=${encodeURIComponent(paramValue)}`;
|
||||
}
|
||||
});
|
||||
|
||||
fetch(url, { method: "GET" })
|
||||
.then((response) => {
|
||||
if (response.ok) {
|
||||
alert("Daten erfolgreich gespeichert!");
|
||||
onModulNameChange(ids[slot]);
|
||||
|
||||
dispatch(
|
||||
setVariables({
|
||||
kueID: [...ids],
|
||||
kueBezeichnungen: [...bezeichnungen],
|
||||
isolationsgrenzwerte: [...isolationsgrenzwerte],
|
||||
verzoegerung: [...verzoegerung],
|
||||
untereSchleifenGrenzwerte: [...untereSchleifenGrenzwerte],
|
||||
obereSchleifenGrenzwerte: [...obereSchleifenGrenzwerte],
|
||||
schleifenintervall: [...schleifenintervall],
|
||||
})
|
||||
);
|
||||
} else {
|
||||
alert("Fehler beim Speichern der Daten!");
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Fehler:", error);
|
||||
alert("Fehler beim Senden der Daten!");
|
||||
});
|
||||
} else {
|
||||
alert("Keine Änderungen vorgenommen.");
|
||||
}
|
||||
|
||||
onClose();
|
||||
};
|
||||
|
||||
export default handleSave;
|
||||
Reference in New Issue
Block a user