Ismail/CPLv4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Schleifen Chart von bis Kalendar

Browse Source
This commit is contained in:
Ismail Ali
2025-02-10 22:25:31 +01:00
parent 5f3f9bbe8d
commit 9242abae40
10 changed files with 350 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/modales/kueModal/ChartModal.tsx
View File

@@ -1,6 +1,6 @@
import React from "react";
import ReactModal from "react-modal";
import TDRPopup from "./TDRPopup";
import TDRPopup from "./LoopTDRChartActionBar";
interface ChartModalProps {
isOpen: boolean;

55
components/modales/kueModal/DateRangePicker.tsx Normal file
View File

@@ -0,0 +1,55 @@
import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
interface DateRangePickerProps {
setVonDatum: (date: Date) => void;
setBisDatum: (date: Date) => void;
}
const DateRangePicker: React.FC<DateRangePickerProps> = ({
setVonDatum,
setBisDatum,
}) => {
const [startDate, setStartDate] = useState<Date | null>(new Date());
const [endDate, setEndDate] = useState<Date | null>(new Date());
return (
<div className="flex space-x-4">
<div>
<label className="block text-sm font-semibold">Von</label>
<DatePicker
selected={startDate}
onChange={(date) => {
setStartDate(date);
if (date) setVonDatum(date);
}}
selectsStart
startDate={startDate}
endDate={endDate}
dateFormat="dd.MM.yyyy"
className="border px-2 py-1 rounded"
/>
</div>
<div>
<label className="block text-sm font-semibold">Bis</label>
<DatePicker
selected={endDate}
onChange={(date) => {
setEndDate(date);
if (date) setBisDatum(date);
}}
selectsEnd
startDate={startDate}
endDate={endDate}
minDate={startDate || undefined}
dateFormat="dd.MM.yyyy"
className="border px-2 py-1 rounded"
/>
</div>
</div>
);
};
export default DateRangePicker;

30
components/modales/kueModal/LoopTDRChartActionBar.tsx Normal file
View File

@@ -0,0 +1,30 @@
import React, { useState } from "react";
import DateRangePicker from "./DateRangePicker";
const LoopTDRChartActionBar: React.FC = () => {
const [vonDatum, setVonDatum] = useState(new Date());
const [bisDatum, setBisDatum] = useState(new Date());
const handleAktualisieren = () => {
const von = vonDatum.toISOString().split("T")[0]; // Format: YYYY-MM-DD
const bis = bisDatum.toISOString().split("T")[0];
console.log(`Daten abrufen für Zeitraum: ${von} bis ${bis}`);
// API-Call hier mit den neuen Daten (z.B. location.href="...&DIA1=von;bis")
};
return (
<div className="flex flex-wrap justify-end items-center p-2 bg-gray-100 rounded-lg space-x-2 mr-4">
<DateRangePicker setVonDatum={setVonDatum} setBisDatum={setBisDatum} />
<button
onClick={handleAktualisieren}
className="px-3 py-1 bg-green-500 text-white rounded text-sm"
>
Aktualisieren
</button>
</div>
);
};
export default LoopTDRChartActionBar;

208
components/modales/kueModal/TDRPopup.tsx
View File

@@ -1,208 +0,0 @@
"use client"; // components/modules/KueModal/TDRChartActionBar.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 "../../modales/kueModal/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;

2
components/modules/Kue705FO.tsx
View File

@@ -12,7 +12,7 @@ import {
setSelectedChartData,
setSelectedFileName,
} from "../../redux/slices/variablesSlice";
import TDRPopup from "../modales/kueModal/TDRPopup";
import TDRPopup from "../modales/kueModal/LoopTDRChartActionBar";
import { createLoopChart, createTDRChart } from "../../utils/chartUtils";
import { getAlarmDisplayText } from "../../utils/alarmUtils";
import { goLoop } from "../../utils/goLoop";