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

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>