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

Struktur für components/main verbessert

Browse Source
This commit is contained in:
ISA
2025-02-13 15:28:35 +01:00
parent 42bff4b3ad
commit 3480efa754
16 changed files with 23 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
components/main/modules/kue705FO/charts/ChartSwitcher.tsx Normal file
View File

@@ -0,0 +1,76 @@
// /components/modules/kue705FO/charts/ChartSwitcher.tsx
import React from "react";
import ReactModal from "react-modal";
import LoopChartActionBar from "./LoopMeasurementChart/LoopChartActionBar";
import TDRChartActionBar from "./TDRChart/TDRChartActionBar";
import LoopMeasurementChart from "./LoopMeasurementChart/LoopMeasurementChart";
import TDRChart from "./TDRChart/TDRChart";
import { useSelector } from "react-redux";
import { RootState } from "../../../../redux/store";
interface ChartSwitcherProps {
isOpen: boolean;
onClose: () => void;
}
const ChartSwitcher: React.FC<ChartSwitcherProps> = ({ isOpen, onClose }) => {
const activeMode = useSelector(
(state: RootState) => state.chartData.activeMode
);
return (
<ReactModal
isOpen={isOpen}
onRequestClose={onClose}
ariaHideApp={false}
style={{
overlay: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
content: {
top: "50%",
left: "50%",
right: "auto",
bottom: "auto",
marginRight: "-50%",
transform: "translate(-50%, -50%)",
width: "80%",
maxWidth: "50rem",
height: "35rem",
padding: "1rem",
overflow: "hidden",
},
}}
>
<button
onClick={onClose}
style={{
position: "absolute",
top: "0.625rem",
right: "0.625rem",
background: "transparent",
border: "none",
fontSize: "1.5rem",
cursor: "pointer",
}}
>
<i className="bi bi-x-circle-fill"></i>
</button>
{/* Nur die richtige ActionBar und das richtige Chart basierend auf dem Modus anzeigen */}
{activeMode === "Schleife" ? (
<>
<h3 className="text-lg font-semibold">Schleifenmessung</h3>
<LoopChartActionBar />
<LoopMeasurementChart /> {/* 🎯 Hier wird das Chart gerendert */}
</>
) : (
<>
<h3 className="text-lg font-semibold">TDR-Messung</h3>
<TDRChartActionBar />
<TDRChart /> {/* 🎯 Hier wird das Chart gerendert */}
</>
)}
</ReactModal>
);
};
export default ChartSwitcher;

66
components/main/modules/kue705FO/charts/DateRangePicker.tsx Normal file
View File

@@ -0,0 +1,66 @@
// /components/modules/kue705FO/charts/DateRangePicker.tsx
import React, { useState, useEffect } 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,
}) => {
// Nutze die Props als Standardwerte für das Datum
const [startDate, setStartDate] = useState<Date>(new Date());
const [endDate, setEndDate] = useState<Date>(new Date());
useEffect(() => {
setVonDatum(startDate);
setBisDatum(endDate);
}, []);
return (
<div className="flex space-x-4">
<div>
<label className="block text-sm font-semibold">Von</label>
<DatePicker
selected={startDate}
onChange={(date) => {
if (date) {
setStartDate(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) => {
if (date) {
setEndDate(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;

41
components/main/modules/kue705FO/charts/LoopMeasurementChart/LoopChartActionBar.tsx Normal file
View File

@@ -0,0 +1,41 @@
// /components/modules/kue705FO/charts/LoopMeasurementChart/LoopChartActionBar.tsx
import React, { useState } from "react";
import DateRangePicker from "../DateRangePicker";
import LoopMeasurementChart from "./LoopMeasurementChart";
import { useDispatch } from "react-redux";
import { setChartData } from "../../../../../../redux/slices/chartDataSlice";
const LoopChartActionBar: React.FC = () => {
const dispatch = useDispatch();
const BASE_URL = "http://localhost:3002";
const [showChart, setShowChart] = useState(false);
const handleFetchData = async () => {
try {
const response = await fetch(`${BASE_URL}/loop`);
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);
}
};
return (
<div className="flex justify-end items-center p-2 bg-gray-100 rounded-lg space-x-2">
<DateRangePicker setVonDatum={() => {}} setBisDatum={() => {}} />
<button
onClick={handleFetchData}
className="px-3 py-1 bg-green-500 text-white rounded text-sm"
>
Aktualisieren
</button>
{showChart && <LoopMeasurementChart />}
</div>
);
};
export default LoopChartActionBar;

72
components/main/modules/kue705FO/charts/LoopMeasurementChart/LoopMeasurementChart.tsx Normal file
View File

@@ -0,0 +1,72 @@
import React, { useEffect, useRef } from "react";
import { useSelector } from "react-redux";
import { RootState } from "../../../../redux/store";
import Chart from "chart.js/auto";
import "chartjs-adapter-date-fns";
import { parseISO } from "date-fns";
const LoopMeasurementChart: 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", loop: 0.8 },
{ timestamp: "2025-02-13T12:10:00", loop: 1.2 },
{ timestamp: "2025-02-13T12:20:00", loop: 1.5 },
];
useEffect(() => {
if (chartRef.current) {
if (chartInstance.current) {
chartInstance.current.destroy();
}
const ctx = chartRef.current.getContext("2d");
if (ctx) {
chartInstance.current = new Chart(ctx, {
type: "line",
data: {
labels: chartData.map((entry) => parseISO(entry.timestamp)),
datasets: [
{
label: "Schleifenwiderstand (kOhm)",
data: chartData.map((entry) => entry.loop ?? 0),
borderColor: "rgba(0, 123, 255, 1)",
backgroundColor: "rgba(0, 123, 255, 0.2)",
tension: 0.1,
},
],
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
type: "time",
time: { unit: "minute", tooltipFormat: "dd.MM.yyyy HH:mm" },
title: { display: true, text: "Zeit" },
},
y: {
title: { display: true, text: "kOhm" },
min: 0,
max: 2,
},
},
},
});
}
}
return () => {
if (chartInstance.current) {
chartInstance.current.destroy();
chartInstance.current = null;
}
};
}, [chartData]);
return <canvas ref={chartRef} style={{ width: "100%", height: "20rem" }} />;
};
export default LoopMeasurementChart;

72
components/main/modules/kue705FO/charts/TDRChart/TDRChart.tsx Normal file
View File

@@ -0,0 +1,72 @@
import React, { useEffect, useRef } from "react";
import { useSelector } from "react-redux";
import { RootState } from "../../../../redux/store";
import Chart from "chart.js/auto";
import "chartjs-adapter-date-fns";
import { parseISO } from "date-fns";
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 },
];
useEffect(() => {
if (chartRef.current) {
if (chartInstance.current) {
chartInstance.current.destroy();
}
const ctx = chartRef.current.getContext("2d");
if (ctx) {
chartInstance.current = new Chart(ctx, {
type: "line",
data: {
labels: chartData.map((entry) => parseISO(entry.timestamp)),
datasets: [
{
label: "TDR Entfernung (km)",
data: chartData.map((entry) => entry.tdr ?? 0),
borderColor: "rgba(255, 99, 132, 1)",
backgroundColor: "rgba(255, 99, 132, 0.2)",
tension: 0.1,
},
],
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
type: "time",
time: { unit: "minute", tooltipFormat: "dd.MM.yyyy HH:mm" },
title: { display: true, text: "Zeit" },
},
y: {
title: { display: true, text: "km" },
min: 0,
max: 3,
},
},
},
});
}
}
return () => {
if (chartInstance.current) {
chartInstance.current.destroy();
chartInstance.current = null;
}
};
}, [chartData]);
return <canvas ref={chartRef} style={{ width: "100%", height: "20rem" }} />;
};
export default TDRChart;

41
components/main/modules/kue705FO/charts/TDRChart/TDRChartActionBar.tsx Normal file
View File

@@ -0,0 +1,41 @@
// /components/modules/kue705FO/charts/TDRChart/TDRChartActionBar.tsx
import React, { useState } from "react";
import DateRangePicker from "../DateRangePicker";
import TDRChart from "./TDRChart";
import { useDispatch } from "react-redux";
import { setChartData } from "../../../../../../redux/slices/chartDataSlice";
const TDRChartActionBar: React.FC = () => {
const dispatch = useDispatch();
const BASE_URL = "http://localhost:3002";
const [showChart, setShowChart] = useState(false);
const handleFetchData = async () => {
try {
const response = await fetch(`${BASE_URL}/tdr`);
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);
}
};
return (
<div className="flex justify-end items-center p-2 bg-gray-100 rounded-lg space-x-2">
<DateRangePicker setVonDatum={() => {}} setBisDatum={() => {}} />
<button
onClick={handleFetchData}
className="px-3 py-1 bg-green-500 text-white rounded text-sm"
>
Aktualisieren
</button>
{showChart && <TDRChart />}
</div>
);
};
export default TDRChartActionBar;