feat: Auslagerung der TDRPopup-Komponente in eine eigene Datei
- TDRPopup-Komponente in `components/modules/KueModal/TDRPopup.tsx` ausgelagert - Importpfad in Kue705FO angepasst, um die ausgelagerte Komponente korrekt zu referenzieren
This commit is contained in:
ISA
@@ -12,6 +12,7 @@ import {
|
||||
setSelectedChartData,
|
||||
setSelectedFileName,
|
||||
} from "../../redux/store/variablesSlice";
|
||||
import TDRPopup from "../modales/kueModal/TDRPopup";
|
||||
|
||||
const Kue705FO: React.FC<Kue705FOProps> = ({
|
||||
isolationswert,
|
||||
@@ -815,199 +816,3 @@ interface Kue705FOProps {
|
||||
tdrLocation: number[];
|
||||
alarmStatus?: boolean;
|
||||
}
|
||||
//-------------------------------------------------------------
|
||||
// TDRPopup Komponente
|
||||
//-------------------------------------------------------------
|
||||
|
||||
const TDRPopup: 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>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user