TDR Chart von Dropdown Menü Auwahl zeichnen
This commit is contained in:
ISA
@@ -1,158 +1,61 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { setTDRChartData } from "../../../../../../redux/slices/kabelueberwachungChartSlice";
|
||||
// /components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx
|
||||
import React, { useState } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { RootState } from "../../../../../../redux/store";
|
||||
import { fetchTDRChartDataById } from "../../../../../../services/fetchTDRChartDataById";
|
||||
import {
|
||||
setTDRChartDataById,
|
||||
setSelectedTDRId,
|
||||
} from "../../../../../../redux/slices/tdrDataByIdSlice";
|
||||
|
||||
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[]>([]);
|
||||
const [ausgewählteDatei, setAusgewählteDatei] = useState<string>("");
|
||||
const [sortAscending, setSortAscending] = useState(true);
|
||||
|
||||
const getYearFolderName = (year: number): string => {
|
||||
return `Year_${String(year).slice(-2)}`;
|
||||
};
|
||||
const tdmChartData = useSelector((state: RootState) => state.tdmChart.data);
|
||||
const selectedSlot = useSelector(
|
||||
(state: RootState) => state.kueChartMode.selectedSlot
|
||||
);
|
||||
|
||||
// 📌 Laden der Datei-Liste aus directory.json
|
||||
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`;
|
||||
const idsForSlot =
|
||||
selectedSlot !== null ? tdmChartData[selectedSlot] ?? [] : [];
|
||||
|
||||
try {
|
||||
const response = await fetch(path);
|
||||
if (!response.ok) {
|
||||
console.error(`Fehler beim Laden der Datei.`);
|
||||
setDateiListe([]);
|
||||
setAusgewählteDatei("");
|
||||
return;
|
||||
}
|
||||
const [selectedId, setSelectedId] = useState<number | null>(null);
|
||||
|
||||
const data = await response.json();
|
||||
let files = data.files.map(
|
||||
(file: { filename: string }) => file.filename
|
||||
);
|
||||
const handleSelectChange = async (
|
||||
e: React.ChangeEvent<HTMLSelectElement>
|
||||
) => {
|
||||
const id = parseInt(e.target.value);
|
||||
setSelectedId(id);
|
||||
|
||||
if (!sortAscending) {
|
||||
files.reverse(); // 🔄 Falls bereits sortiert, Reihenfolge umkehren
|
||||
}
|
||||
const data = await fetchTDRChartDataById(id);
|
||||
if (!data) return;
|
||||
|
||||
setDateiListe(files);
|
||||
if (files.length > 0) {
|
||||
setAusgewählteDatei(files[0]); // 🟢 Automatische Auswahl der ersten Datei
|
||||
loadAndStoreChartData(files[0]); // 🟢 Chart-Daten sofort aktualisieren
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Fehler beim Laden der Datei directory.json:", error);
|
||||
}
|
||||
};
|
||||
|
||||
loadDirectory();
|
||||
}, [jahr, monat, sortAscending]);
|
||||
|
||||
// 📌 Daten für die ausgewählte Datei laden
|
||||
const handleDateiAuswahl = (event: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
const selectedFile = event.target.value;
|
||||
setAusgewählteDatei(selectedFile);
|
||||
loadAndStoreChartData(selectedFile);
|
||||
};
|
||||
|
||||
// 📌 Sortieren der Datei-Liste und Chart sofort aktualisieren
|
||||
const handleSortToggle = () => {
|
||||
setSortAscending(!sortAscending);
|
||||
setDateiListe((prevListe) => {
|
||||
const newListe = [...prevListe].reverse(); // 🔄 Reihenfolge umkehren
|
||||
if (newListe.length > 0) {
|
||||
setAusgewählteDatei(newListe[0]); // 🟢 Erste Datei nach dem Sortieren auswählen
|
||||
loadAndStoreChartData(newListe[0]); // 🟢 Chart sofort aktualisieren
|
||||
}
|
||||
return newListe;
|
||||
});
|
||||
};
|
||||
|
||||
// 📌 Daten abrufen und in Redux speichern
|
||||
const loadAndStoreChartData = async (filename: string) => {
|
||||
const yearFolder = getYearFolderName(jahr);
|
||||
const monthFolder = `Month_${monat.toString().padStart(2, "0")}`;
|
||||
const filePath = `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/${filename}`;
|
||||
|
||||
try {
|
||||
const response = await fetch(filePath);
|
||||
if (!response.ok) {
|
||||
console.error(`Fehler beim Laden der Datei.`);
|
||||
return;
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
dispatch(setTDRChartData(data));
|
||||
} catch (error) {
|
||||
console.error("Fehler beim Laden der JSON-Daten:", error);
|
||||
}
|
||||
dispatch(setTDRChartDataById({ id, data }));
|
||||
dispatch(setSelectedTDRId(id)); // 👉 wichtig!
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-wrap justify-end items-center p-2 bg-gray-100 rounded-lg space-x-2">
|
||||
{/* Jahr Auswahl */}
|
||||
<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>
|
||||
|
||||
{/* Monat Auswahl */}
|
||||
<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>
|
||||
|
||||
{/* Datei Auswahl */}
|
||||
<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}
|
||||
>
|
||||
{dateiListe.map((file, index) => (
|
||||
<option key={index} value={file}>
|
||||
{file}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
{/* Sortieren-Button */}
|
||||
<button
|
||||
onClick={handleSortToggle}
|
||||
className="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>
|
||||
{idsForSlot.length > 0 && (
|
||||
<>
|
||||
<label htmlFor="tdrIdSelect" className="text-sm font-semibold">
|
||||
Messung ID
|
||||
</label>
|
||||
<select
|
||||
id="tdrIdSelect"
|
||||
value={selectedId ?? ""}
|
||||
onChange={handleSelectChange}
|
||||
className="border rounded px-2 py-1 text-sm"
|
||||
>
|
||||
<option value="">-- Wähle Messung --</option>
|
||||
{idsForSlot.map((entry) => (
|
||||
<option key={entry.id} value={entry.id}>
|
||||
ID {entry.id} – {entry.t}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user