TDRChart

components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx

@@ -4,6 +4,7 @@ import { RootState } from "../../../../../../redux/store";
 import { useSelector } from "react-redux";
 import { Chart, registerables } from "chart.js";
 import "chartjs-adapter-date-fns";
+import { getColor } from "../../../../../../utils/colors";
 
 // 🟢 **Prop-Typ für isFullScreen hinzufügen**
 interface TDRChartProps {
@@ -42,8 +43,9 @@ const TDRChart: React.FC = () => {
                 {
                   label: "TDR Entfernung (km)",
                   data: tdrChartData,
-                  borderColor: "rgba(255, 99, 132, 1)",
-                  backgroundColor: "rgba(255, 99, 132, 0.2)",
+                  borderColor: getColor("littwin-blue"), // Nutzt automatisch die Tailwind-Farbe
+                  borderWidth: 0.5,
+                  //backgroundColor: getColor("littwin-blue"),
                   tension: 0.1,
                   parsing: {
                     xAxisKey: "t", // Schlüssel für den Zeitstempel
@@ -95,7 +97,7 @@ const TDRChart: React.FC = () => {
   }, [tdrChartData]);
 
   return (
-    <div style={{ width: "100%", height: isFullScreen ? "100%" : "20rem" }}>
+    <div style={{ width: "100%", height: isFullScreen ? "90%" : "28rem" }}>
       <canvas ref={chartRef} style={{ width: "100%", height: "100%" }} />
     </div>
   );

components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx

@@ -50,11 +50,7 @@ const TDRChartActionBar: React.FC = () => {
 
   const handleSortToggle = () => {
     setSortAscending(!sortAscending);
-    setDateiListe((prevListe) =>
-      [...prevListe].sort((a, b) =>
-        sortAscending ? a.localeCompare(b) : b.localeCompare(a)
-      )
-    );
+    setDateiListe((prevListe) => [...prevListe].reverse()); // 🔄 Umkehren der Reihenfolge
   };
 
   const handleAktualisieren = () => {
@@ -130,7 +126,8 @@ const TDRChartActionBar: React.FC = () => {
       });
   }, []);
 
-  const BASE_URL = "http://localhost:3002";
+  const BASE_URL = window.location.origin;
+  console.log("BASE_URL in TDRChartACtionBar:", BASE_URL);
 
   const [showChart, setShowChart] = useState(false);
 
@@ -214,12 +211,15 @@ const TDRChartActionBar: React.FC = () => {
         <span className="ml-1">Sortieren</span>
       </button>
 
+      {/* Aktualisieren-Button */}
+      {/* 
             <button
         onClick={handleAktualisieren}
         className="px-3 py-1 bg-green-500 text-white rounded text-sm"
       >
         Aktualisieren
       </button>
+      */}
     </div>
   );
 };

redux/slices/tdrChartSlice.ts

@@ -0,0 +1,40 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+// 🔹 State-Interface
+interface TDRChartState {
+  dateiListe: string[];
+  sortAscending: boolean;
+  tdrChartData: { t: number; m: number }[];
+}
+
+// 🔹 Anfangsstate
+const initialState: TDRChartState = {
+  dateiListe: [],
+  sortAscending: true,
+  tdrChartData: [],
+};
+
+// 🔹 Redux Slice
+const tdrChartSlice = createSlice({
+  name: "tdrChart",
+  initialState,
+  reducers: {
+    setDateiListe: (state, action: PayloadAction<string[]>) => {
+      state.dateiListe = action.payload;
+    },
+    toggleSortOrder: (state) => {
+      state.sortAscending = !state.sortAscending;
+      state.dateiListe.reverse(); // 🔄 Reihenfolge umkehren
+    },
+    setTDRChartData: (
+      state,
+      action: PayloadAction<{ t: number; m: number }[]>
+    ) => {
+      state.tdrChartData = action.payload;
+    },
+  },
+});
+
+export const { setDateiListe, toggleSortOrder, setTDRChartData } =
+  tdrChartSlice.actions;
+export default tdrChartSlice.reducer;

redux/store.ts

@@ -1,3 +1,4 @@
+// /redux/store.ts
 import { configureStore } from "@reduxjs/toolkit";
 import { useDispatch } from "react-redux";
 import authReducer from "./slices/authSlice";
@@ -12,6 +13,7 @@ import opcuaSettingsReducer from "./slices/opcuaSettingsSlice";
 import digitalOutputsReducer from "./slices/digitalOutputsSlice";
 import analogeEingaengeReducer from "./slices/analogeEingaengeSlice";
 import brushReducer from "./slices/brushSlice";
+import tdrChartReducer from "./slices/tdrChartSlice";
 
 const store = configureStore({
   reducer: {
@@ -27,6 +29,7 @@ const store = configureStore({
     digitalOutputs: digitalOutputsReducer,
     analogeEingaenge: analogeEingaengeReducer,
     brush: brushReducer,
+    tdrChart: tdrChartReducer,
   },
 });
 

utils/colors.ts

@@ -0,0 +1,7 @@
+const tailwindColors = {
+  "littwin-blue": "#00AEEF", // Hier alle Tailwind-Farben manuell eintragen
+};
+
+export const getColor = (colorName: string) => {
+  return tailwindColors[colorName] || colorName; // Falls die Farbe nicht existiert, wird der Name direkt zurückgegeben
+};