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/kabelueberwachung/kue705FO/Kue705FO.tsx

@@ -220,67 +220,53 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
               </div>
             </div>
 
-            {/* Anzeige des Isolation und Schleifenwiderstand zusammen */}
-            <div className="relative mt-[3.125rem] mx-auto bg-black text-white w-[6.25rem] h-[3.1rem] flex flex-col items-center justify-center z-10 p-1">
-              <div className="text-center w-full">
+            {/* Schwarzes Display mit drei Zeilen: Alarm, ISO, Schleife */}
+            <div className="relative mt-[3.125rem] mx-auto bg-black text-white w-[6.8rem] h-[3.1rem] flex flex-col items-center justify-center z-10 p-1">
+              <div className="text-center w-full flex flex-col justify-center items-center h-full">
+                {/* 1. Zeile: Alarmtext in Rot, sonst leer */}
                 <span
-                  className={
+                  className={`whitespace-nowrap block text-[0.65rem] font-semibold ${
                     Number(kuePSTmMinus96V?.[slotIndex]) === 1 ||
                     Number(kueCableBreak?.[slotIndex]) === 1 ||
                     Number(kueGroundFault?.[slotIndex]) === 1 ||
                     Number(kueAlarm1?.[slotIndex]) === 1 ||
                     Number(kueAlarm2?.[slotIndex]) === 1
-                      ? "text-red-500 text-[0.65rem]"
-                      : Number(kueOverflow?.[slotIndex]) === 1
-                      ? "text-white text-[0.65rem]"
+                      ? "text-red-500"
                       : ""
-                  }
+                  }`}
                 >
-                  {Number(kuePSTmMinus96V?.[slotIndex]) === 1 ? (
-                    "PST Fehler"
-                  ) : Number(kueCableBreak?.[slotIndex]) === 1 ? (
-                    "Aderbruch"
-                  ) : Number(kueGroundFault?.[slotIndex]) === 1 ? (
-                    "Erdschluss"
-                  ) : Number(kueAlarm1?.[slotIndex]) === 1 ? (
-                    <div>
-                      <span className="text-[0.55rem] block">
-                        Isolationsfehler
-                      </span>
-                      <span className="text-[0.55rem] block">
-                        {isoDisplayValue} MOhm
-                      </span>
-                    </div>
-                  ) : Number(kueAlarm2?.[slotIndex]) === 1 ? (
-                    "Schleifenfehler"
-                  ) : (
-                    <>
-                      <span className="block text-[0.7rem] font-semibold">
-                        <span className="block text-[0.6rem] text-gray-300">
-                          ISO: {"   "}
-                          {isoDisplayValue} MOhm
-                        </span>
-                      </span>
-                    </>
-                  )}
+                  {Number(kuePSTmMinus96V?.[slotIndex]) === 1
+                    ? "Messpannung"
+                    : Number(kueCableBreak?.[slotIndex]) === 1
+                    ? "Aderbruch"
+                    : Number(kueGroundFault?.[slotIndex]) === 1
+                    ? "Erdschluss"
+                    : Number(kueAlarm1?.[slotIndex]) === 1
+                    ? "Isolationsfehler"
+                    : Number(kueAlarm2?.[slotIndex]) === 1
+                    ? "Schleifenfehler"
+                    : ""}
+                </span>
+                {/* 2. Zeile: ISO-Wert, immer anzeigen */}
+                <span
+                  className={`whitespace-nowrap block text-[0.65rem] font-semibold ${
+                    Number(kueAlarm1?.[slotIndex]) === 1 ? "text-red-500" : ""
+                  }`}
+                >
+                  {isoDisplayValue === "Abgleich"
+                    ? "ISO: Abgleich"
+                    : `ISO: ${Number(isolationswert)} MOhm`}
+                </span>
+                {/* 3. Zeile: Schleifenwert, in Rot bei Schleifenfehler, sonst normal */}
+                <span
+                  className={`whitespace-nowrap block text-[0.65rem] font-semibold ${
+                    Number(kueAlarm2?.[slotIndex]) === 1 ? "text-red-500" : ""
+                  }`}
+                >
+                  {activeButton === "Schleife" && loading
+                    ? "RSL: Messung"
+                    : `RSL: ${loopDisplayValue} kOhm`}
                 </span>
-                {/* Schleifenwiderstand immer anzeigen, außer bei Fehlern */}
-                {![
-                  Number(kuePSTmMinus96V?.[slotIndex]),
-                  Number(kueCableBreak?.[slotIndex]),
-                  Number(kueGroundFault?.[slotIndex]),
-                  Number(kueAlarm1?.[slotIndex]),
-                  Number(kueAlarm2?.[slotIndex]),
-                ].includes(1) && (
-                  <>
-                    <span className="block text-[0.7rem] mt-1 font-semibold">
-                      <span className="block text-[0.6rem] text-gray-300">
-                        Sch.: {"   "}
-                        {loopDisplayValue} kOhm
-                      </span>
-                    </span>
-                  </>
-                )}
               </div>
             </div>
 

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>
 

components/main/system/SystemCharts.tsx

@@ -38,6 +38,7 @@ type Props = {
   zeitraum: "DIA0" | "DIA1" | "DIA2";
 };
 export const SystemCharts = ({ history }: Props) => {
+  const [isLoading, setIsLoading] = React.useState(true);
   const reversedHistory = [...history].reverse();
   const labels = reversedHistory.map((h) =>
     new Date(h.time).toLocaleTimeString()
@@ -45,9 +46,21 @@ export const SystemCharts = ({ history }: Props) => {
 
   const formatValue = (v: number) => v.toFixed(2);
 
+  // Chart.js animation callback
+  const animation = {
+    onComplete: () => {
+      setIsLoading(false);
+    },
+  };
+
+  React.useEffect(() => {
+    setIsLoading(true);
+  }, [history]);
+
   const baseOptions = {
     responsive: true,
     maintainAspectRatio: false,
+    animation,
     scales: {
       y: {
         beginAtZero: false,
@@ -65,7 +78,11 @@ export const SystemCharts = ({ history }: Props) => {
   };
 
   return (
-    <div className="grid grid-cols-1 xl:grid-cols-2 gap-8">
+    <div
+      className={`grid grid-cols-1 xl:grid-cols-2 gap-8 ${
+        isLoading ? "cursor-wait" : ""
+      }`}
+    >
       <div className="h-[300px]">
         <Line
           data={{