TDR-Chart findet die dateien, aber zeichnet die Chart noch nicht
This commit is contained in:
Ismail Ali
@@ -1,6 +1,5 @@
|
||||
import React, { useEffect, useRef } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
import { RootState } from "../../../../../../redux/store";
|
||||
// components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import Chart from "chart.js/auto";
|
||||
import "chartjs-adapter-date-fns";
|
||||
import { parseISO } from "date-fns";
|
||||
@@ -9,15 +8,42 @@ const TDRChart: React.FC = () => {
|
||||
const chartRef = useRef<HTMLCanvasElement>(null);
|
||||
const chartInstance = useRef<Chart | null>(null);
|
||||
|
||||
// Nutze entweder Redux-Daten oder Mock-Daten
|
||||
const chartData = useSelector((state: RootState) => state.chartData.data) || [
|
||||
{ timestamp: "2025-02-13T12:00:00", tdr: 2.1 },
|
||||
{ timestamp: "2025-02-13T12:10:00", tdr: 2.3 },
|
||||
{ timestamp: "2025-02-13T12:20:00", tdr: 2.6 },
|
||||
];
|
||||
// Zustand für die Chart-Daten
|
||||
const [chartData, setChartData] = useState<
|
||||
{ timestamp: string; tdr: number }[]
|
||||
>([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (chartRef.current) {
|
||||
// Aktuelles Jahr und Monat ermitteln
|
||||
const currentYear = new Date().getFullYear();
|
||||
const currentMonth = new Date().getMonth() + 1; // Monate sind 0-basiert
|
||||
|
||||
// Pfad zur directory.json-Datei erstellen
|
||||
const yearFolder = `Year_${String(currentYear).slice(-2)}`;
|
||||
const monthFolder = `Month_${String(currentMonth).padStart(2, "0")}`;
|
||||
const path = `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/directory.json`;
|
||||
|
||||
// Daten abrufen
|
||||
fetch(path)
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error(
|
||||
`Fehler beim Laden der Datei: ${response.statusText}`
|
||||
);
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then((data) => {
|
||||
// Annahme: data ist ein Array von Objekten mit den Eigenschaften 'timestamp' und 'tdr'
|
||||
setChartData(data);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Fehler beim Abrufen der Daten:", error);
|
||||
});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (chartRef.current && chartData.length > 0) {
|
||||
if (chartInstance.current) {
|
||||
chartInstance.current.destroy();
|
||||
}
|
||||
@@ -57,16 +83,13 @@ const TDRChart: React.FC = () => {
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (chartInstance.current) {
|
||||
chartInstance.current.destroy();
|
||||
chartInstance.current = null;
|
||||
}
|
||||
};
|
||||
}, [chartData]);
|
||||
|
||||
return <canvas ref={chartRef} style={{ width: "100%", height: "20rem" }} />;
|
||||
return (
|
||||
<div>
|
||||
<canvas ref={chartRef} style={{ width: "100%", height: "20rem" }} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TDRChart;
|
||||
|
||||
@@ -1,11 +1,135 @@
|
||||
// /components/modules/kue705FO/charts/TDRChart/TDRChartActionBar.tsx
|
||||
import React, { useState } from "react";
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import DateRangePicker from "../DateRangePicker";
|
||||
import TDRChart from "../../../../kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { setChartData } from "../../../../../../redux/slices/chartDataSlice";
|
||||
import { parseISO } from "date-fns";
|
||||
|
||||
const TDRChartActionBar: 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 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();
|
||||
|
||||
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);
|
||||
|
||||
// Lade die Datei und speichere sie in Redux
|
||||
handleLoadData(selectedFile);
|
||||
};
|
||||
|
||||
const chartRef = useRef<HTMLCanvasElement>(null);
|
||||
|
||||
// Zustand für die Chart-Daten
|
||||
const [chartData, setChartData] = useState<
|
||||
{ timestamp: string; tdr: number }[]
|
||||
>([]);
|
||||
|
||||
useEffect(() => {
|
||||
// Aktuelles Jahr und Monat ermitteln
|
||||
const currentYear = new Date().getFullYear();
|
||||
const currentMonth = new Date().getMonth() + 1; // Monate sind 0-basiert
|
||||
|
||||
// Pfad zur directory.json-Datei erstellen
|
||||
const yearFolder = `Year_${String(currentYear).slice(-2)}`;
|
||||
const monthFolder = `Month_${String(currentMonth).padStart(2, "0")}`;
|
||||
const path = `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/directory.json`;
|
||||
|
||||
// Daten abrufen
|
||||
fetch(path)
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error(
|
||||
`Fehler beim Laden der Datei: ${response.statusText}`
|
||||
);
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then((data) => {
|
||||
// Annahme: data ist ein Array von Objekten mit den Eigenschaften 'timestamp' und 'tdr'
|
||||
setChartData(data);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Fehler beim Abrufen der Daten:", error);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const dispatch = useDispatch();
|
||||
const BASE_URL = "http://localhost:3002";
|
||||
|
||||
@@ -17,7 +141,7 @@ const TDRChartActionBar: React.FC = () => {
|
||||
if (!response.ok) throw new Error("Fehler beim Abrufen der Daten");
|
||||
|
||||
const data = await response.json();
|
||||
dispatch(setChartData(data));
|
||||
|
||||
setShowChart(true);
|
||||
} catch (error) {
|
||||
console.error("Fehler beim Laden der Daten:", error);
|
||||
@@ -25,15 +149,78 @@ const TDRChartActionBar: React.FC = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex justify-end items-center p-2 bg-gray-100 rounded-lg space-x-2">
|
||||
<DateRangePicker setVonDatum={() => {}} setBisDatum={() => {}} />
|
||||
<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={handleFetchData}
|
||||
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>
|
||||
{showChart && null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
232
components/modales/KueModal.jsx
Normal file
232
components/modales/KueModal.jsx
Normal file
@@ -0,0 +1,232 @@
|
||||
"use client"; // components/modales/KueModal.jsx
|
||||
import ReactModal from "react-modal";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
|
||||
import handleChange from "./handlers/handleChange";
|
||||
import handleDisplayEinschalten from "./handlers/handleDisplayEinschalten";
|
||||
import handleSave from "./handlers/handleSave";
|
||||
|
||||
function KueModal({ showModal, onClose, slot, onModulNameChange }) {
|
||||
const dispatch = useDispatch();
|
||||
const [ids, setIds] = useState(Array(32).fill("---"));
|
||||
const [bezeichnungen, setBezeichnungen] = useState(Array(32).fill("---"));
|
||||
const [isolationsgrenzwerte, setIsolationsgrenzwerte] = useState(
|
||||
Array(32).fill(10.0)
|
||||
);
|
||||
const [verzoegerung, setVerzoegerung] = useState(Array(32).fill(1.0));
|
||||
const [untereSchleifenGrenzwerte, setUntereSchleifenGrenzwerte] = useState(
|
||||
Array(32).fill(0.1)
|
||||
);
|
||||
const [obereSchleifenGrenzwerte, setObereSchleifenGrenzwerte] = useState(
|
||||
Array(32).fill(1.0)
|
||||
);
|
||||
const [schleifenintervall, setSchleifenintervall] = useState(
|
||||
Array(32).fill(24)
|
||||
);
|
||||
|
||||
const [originalValues, setOriginalValues] = useState({});
|
||||
|
||||
// Werte aus dem Redux-Store abrufen
|
||||
const {
|
||||
kueID,
|
||||
kueLimit1,
|
||||
kueDelay1,
|
||||
kueLimit2Low,
|
||||
kueLimit2High,
|
||||
kueLoopInterval,
|
||||
} = useSelector((state) => state.variables);
|
||||
|
||||
// Initiale Werte festlegen, nur einmal beim Öffnen des Modals
|
||||
useEffect(() => {
|
||||
if (showModal) {
|
||||
setIds(kueID ? kueID.map((id) => id.trim() || "---") : ids);
|
||||
setBezeichnungen(
|
||||
kueID ? kueID.map((name) => name.trim() || "---") : bezeichnungen
|
||||
);
|
||||
setIsolationsgrenzwerte(kueLimit1 || isolationsgrenzwerte);
|
||||
setVerzoegerung(kueDelay1 || verzoegerung);
|
||||
setUntereSchleifenGrenzwerte(kueLimit2Low || untereSchleifenGrenzwerte);
|
||||
setObereSchleifenGrenzwerte(kueLimit2High || obereSchleifenGrenzwerte);
|
||||
setSchleifenintervall(kueLoopInterval || schleifenintervall);
|
||||
|
||||
setOriginalValues({
|
||||
ids: [...ids],
|
||||
bezeichnungen: [...bezeichnungen],
|
||||
isolationsgrenzwerte: [...isolationsgrenzwerte],
|
||||
verzoegerung: [...verzoegerung],
|
||||
untereSchleifenGrenzwerte: [...untereSchleifenGrenzwerte],
|
||||
obereSchleifenGrenzwerte: [...obereSchleifenGrenzwerte],
|
||||
schleifenintervall: [...schleifenintervall],
|
||||
});
|
||||
}
|
||||
}, [showModal]); // nur von showModal abhängig ansonsten wird alle 10 Sekunden die Werte zurückgesetzt in Modal
|
||||
|
||||
return (
|
||||
<ReactModal
|
||||
isOpen={showModal}
|
||||
onRequestClose={onClose}
|
||||
ariaHideApp={false}
|
||||
style={{
|
||||
overlay: {
|
||||
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
||||
zIndex: 100,
|
||||
text: "black",
|
||||
},
|
||||
content: {
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
right: "auto",
|
||||
bottom: "auto",
|
||||
marginRight: "-50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
width: "90%",
|
||||
maxWidth: "800px",
|
||||
padding: "10px",
|
||||
borderRadius: "8px",
|
||||
border: "none",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center justify-between bg-littwin-blue text-white p-1 rounded-t-lg">
|
||||
<h2 className="text-sm font-bold">KUE Einstellung - Slot {slot + 1}</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "10px",
|
||||
right: "20px",
|
||||
background: "transparent",
|
||||
border: "none",
|
||||
cursor: "pointer",
|
||||
fontSize: "24px",
|
||||
}}
|
||||
>
|
||||
<i className="bi bi-x-circle-fill"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="p-2 mb-4 text-black">
|
||||
<div className="mb-2 ">
|
||||
<label className="font-bold ">Kabelbezeichnung:</label>
|
||||
<input
|
||||
type="text"
|
||||
className="border rounded p-1 w-full text-sm"
|
||||
value={ids[slot]}
|
||||
onChange={(e) => handleChange(setIds, e, slot)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-2 text-black">
|
||||
<h3 className="font-bold text-center mb-4">Isolationsmessung</h3>
|
||||
<table className="w-full text-left border-collapse mb-4">
|
||||
<thead className="bg-gray-100">
|
||||
<tr>
|
||||
<th className="p-2 border text-sm text-center">
|
||||
Grenzwert (MOhm)
|
||||
</th>
|
||||
<th className="p-2 border text-sm text-center">
|
||||
Verzögerung (sek)
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="p-2 border text-center">
|
||||
<input
|
||||
type="number"
|
||||
className="w-[6rem] border rounded p-1 text-sm"
|
||||
value={isolationsgrenzwerte[slot]}
|
||||
step="0.1"
|
||||
onChange={(e) =>
|
||||
handleChange(setIsolationsgrenzwerte, e, slot)
|
||||
}
|
||||
/>
|
||||
</td>
|
||||
<td className="p-2 border text-center">
|
||||
<input
|
||||
type="number"
|
||||
className="w-[6rem] border rounded p-1 text-sm"
|
||||
value={verzoegerung[slot]}
|
||||
step="0.1"
|
||||
onChange={(e) => handleChange(setVerzoegerung, e, slot)}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 className="font-bold text-center mb-4">Schleifenmessung</h3>
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead className="bg-gray-100">
|
||||
<tr>
|
||||
<th className="p-2 border text-sm text-center">
|
||||
Grenzwert (kOhm)
|
||||
</th>
|
||||
<th className="p-2 border text-sm text-center">
|
||||
Schleifenintervall (h)
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="p-2 border text-center">
|
||||
<input
|
||||
type="number"
|
||||
className="w-[6rem] border rounded p-1 text-sm"
|
||||
value={untereSchleifenGrenzwerte[slot]}
|
||||
step="0.1"
|
||||
onChange={(e) =>
|
||||
handleChange(setUntereSchleifenGrenzwerte, e, slot)
|
||||
}
|
||||
/>
|
||||
</td>
|
||||
<td className="p-2 border text-center">
|
||||
<input
|
||||
type="number"
|
||||
className="w-[6rem] border rounded p-1 text-sm"
|
||||
value={schleifenintervall[slot]}
|
||||
step="1"
|
||||
onChange={(e) => handleChange(setSchleifenintervall, e, slot)}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end bg-gray-100 p-4 rounded-b-lg">
|
||||
<button
|
||||
onClick={() => handleDisplayEinschalten(slot)}
|
||||
className="bg-littwin-blue text-white p-2 rounded flex items-center mr-2"
|
||||
>
|
||||
<span className="mr-2">📺</span> Display einschalten
|
||||
</button>
|
||||
<button
|
||||
onClick={() =>
|
||||
handleSave({
|
||||
slot,
|
||||
ids,
|
||||
bezeichnungen,
|
||||
isolationsgrenzwerte,
|
||||
verzoegerung,
|
||||
untereSchleifenGrenzwerte,
|
||||
obereSchleifenGrenzwerte,
|
||||
schleifenintervall,
|
||||
originalValues,
|
||||
onModulNameChange,
|
||||
dispatch,
|
||||
onClose,
|
||||
})
|
||||
}
|
||||
className="bg-littwin-blue text-white p-2 rounded flex items-center"
|
||||
>
|
||||
<span className="mr-2">💾</span> Speichern
|
||||
</button>
|
||||
</div>
|
||||
</ReactModal>
|
||||
);
|
||||
}
|
||||
|
||||
export default KueModal;
|
||||
208
components/modales/kueModal/TDRPopup.tsx
Normal file
208
components/modales/kueModal/TDRPopup.tsx
Normal file
@@ -0,0 +1,208 @@
|
||||
"use client"; // components/modules/KueModal/TDRPopup.tsx
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import ReactModal from "react-modal";
|
||||
import Chart from "chart.js/auto";
|
||||
import { useSelector } from "react-redux";
|
||||
import KueModal from "../KueModal";
|
||||
import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
|
||||
import { RootState } from "../../../redux/store";
|
||||
import { DataTDR } from "../../../redux/types/chartDataTypesTDR";
|
||||
import { useDispatch } from "react-redux";
|
||||
import {
|
||||
setSelectedChartData,
|
||||
setSelectedFileName,
|
||||
} from "../../../redux/slices/variablesSlice";
|
||||
const TDRChartActionBar: 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>
|
||||
);
|
||||
};
|
||||
|
||||
export default TDRChartActionBar;
|
||||
Reference in New Issue
Block a user