feat:

Anzeige KÜ-Display:

1. Zeile Alarm: Isolationsfehler, Schleifenfehler, Aderbruch, Erdschluß, Messpannung: Immer in Rot; wenn kein Alarm, bleibt die Zeile leer

2. Zeile: Isowert: xx MOhm (großes M)

in Rot, wenn Iso-Fehler ansteht

Beispiel: ISO: 100 MOHm der beim Abliech:  ISO: Abgleich

3. Zeile: Schleifenwert, xx kOhm (kleines k)

in Rot, wenn Schleifenfehler ansteht

Beispiel:: RSL: 1,7 kOhm oder wenn Schleifenmessung aktiv: RSL: Messung

components/main/system/DetailModal.tsx

@@ -126,6 +126,7 @@ export const DetailModal = ({
   const [chartData, setChartData] = useState<any>({
     datasets: [],
   });
+  const [isLoading, setIsLoading] = useState(false);
   const vonDatum = useSelector(
     (state: RootState) => state.kabelueberwachungChartSlice.vonDatum
   );
@@ -186,6 +187,7 @@ export const DetailModal = ({
   }, []);
 
   const handleFetchData = () => {
+    setIsLoading(true);
     let sortedData = [...reduxData].reverse();
 
     if (vonDatum && bisDatum) {
@@ -254,10 +256,31 @@ export const DetailModal = ({
     }
   }, [isOpen, selectedKey]);
 
+  // Chart.js animation complete callback to set isLoading false
+  useEffect(() => {
+    if (chartRef.current && isLoading) {
+      const chartInstance = chartRef.current;
+      // Save previous callback to restore later
+      const prevCallback = chartInstance.options.animation?.onComplete;
+      chartInstance.options.animation = {
+        ...chartInstance.options.animation,
+        onComplete: () => {
+          setIsLoading(false);
+          if (typeof prevCallback === "function") prevCallback();
+        },
+      };
+      chartInstance.update();
+    }
+  }, [chartData, isLoading]);
+
   if (!isOpen || !selectedKey) return null;
 
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-40 flex items-center justify-center z-50">
+    <div
+      className={`fixed inset-0 bg-black bg-opacity-40 flex items-center justify-center z-50 ${
+        isLoading ? "cursor-wait" : ""
+      }`}
+    >
       <div
         className={`bg-white p-6 rounded-xl overflow-auto shadow-2xl transition-all duration-300 ${
           isFullScreen ? "w-[95vw] h-[90vh]" : "w-[50%] h-[60%]"
@@ -347,9 +370,12 @@ export const DetailModal = ({
           </Listbox>
           <button
             onClick={handleFetchData}
-            className="px-4 py-1 bg-littwin-blue text-white rounded text-sm"
+            className={`px-4 py-1 bg-littwin-blue text-white rounded text-sm ${
+              isLoading ? "cursor-wait" : ""
+            }`}
+            disabled={isLoading}
           >
-            Daten laden
+            {isLoading ? "Laden..." : "Daten laden"}
           </button>
         </div>