style: Alarm Ui Widget

.env.development

@@ -23,4 +23,4 @@ NEXT_PUBLIC_USE_MOCKS=true
 # z.B. http://10.10.0.13/xyz/index.aspx -> basePath in config.json auf /xyz setzen
 # basePath wird jetzt in public/config.json gepflegt
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.1.386
+NEXT_PUBLIC_APP_VERSION=1.1.387

.env.production

@@ -24,4 +24,4 @@ NEXT_PUBLIC_USE_MOCKS=false
 # basePath wird jetzt in public/config.json gepflegt
 
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.1.386
+NEXT_PUBLIC_APP_VERSION=1.1.387

components/uiWidgets/AlarmIndicator.js

@@ -1,15 +1,36 @@
 import React from "react";
 import AlarmIcon from "@/components/icons/material-symbols/AlarmIcon";
 import Tooltip from "@mui/material/Tooltip";
+import styles from "./AlarmIndicator.module.css";
 
 /**
  * AlarmIndicator zeigt ein Alarm-Icon, das bei Klick den AlarmLink in neuem Tab öffnet.
  * @param {boolean} hasAlarm - Ob ein Alarm aktiv ist
  * @param {string} alarmLink - Link zur Alarm-Detailseite
  * @param {string} [alarmText] - Optionaler Tooltip-Text
+ * @param {string} [animation] - "shake" | "rotate" | "blink" | "pulse" (default: "shake")
+ * @param {number} [pulseDuration] - Animationsdauer in Sekunden (default: 0.5)
  */
-const AlarmIndicator = ({ hasAlarm, alarmLink, alarmText }) => {
+const AlarmIndicator = ({
+  hasAlarm,
+  alarmLink,
+  alarmText,
+  animation = "pulse",
+  pulseDuration = 0.5,
+}) => {
   if (!hasAlarm || !alarmLink) return null;
+  // Animation-Klasse wählen
+  let animationClass = styles.fastPulse;
+  let style = { animationDuration: `${pulseDuration}s` };
+  if (animation === "shake") {
+    animationClass = styles.shakeAlarm;
+  } else if (animation === "rotate") {
+    animationClass = styles.rotateAlarm;
+  } else if (animation === "blink") {
+    animationClass = styles.blinkAlarm;
+  } else if (animation === "pulse") {
+    animationClass = styles.fastPulse;
+  }
   return (
     <Tooltip title={alarmText || "Alarm aktiv"}>
       <span
@@ -20,7 +41,10 @@ const AlarmIndicator = ({ hasAlarm, alarmLink, alarmText }) => {
         }}
         aria-label="Alarm aktiv"
       >
-        <AlarmIcon className="h-8 w-8 animate-pulse text-red-500" />
+        <AlarmIcon
+          className={`h-14 w-14 ${animationClass} text-red-800 bg-orange-500`}
+          style={style}
+        />
       </span>
     </Tooltip>
   );

components/uiWidgets/AlarmIndicator.module.css

@@ -0,0 +1,62 @@
+.fastPulse {
+  animation: fast-pulse 0.5s infinite;
+}
+
+@keyframes fast-pulse {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.6;
+    transform: scale(1.15);
+  }
+}
+
+.shakeAlarm {
+  animation: shake-alarm 0.5s infinite cubic-bezier(0.36, 0.07, 0.19, 0.97);
+}
+
+@keyframes shake-alarm {
+  10%,
+  90% {
+    transform: translateX(-1px);
+  }
+  20%,
+  80% {
+    transform: translateX(2px);
+  }
+  30%,
+  50%,
+  70% {
+    transform: translateX(-4px);
+  }
+  40%,
+  60% {
+    transform: translateX(4px);
+  }
+}
+
+.rotateAlarm {
+  animation: rotate-alarm 1s linear infinite;
+}
+
+@keyframes rotate-alarm {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.blinkAlarm {
+  animation: blink-alarm 0.7s steps(2, start) infinite;
+}
+
+@keyframes blink-alarm {
+  to {
+    visibility: hidden;
+  }
+}

components/uiWidgets/alarm-indicator-fastpulse.css

@@ -0,0 +1,15 @@
+@keyframes fast-pulse {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.6;
+    transform: scale(1.15);
+  }
+}
+
+.fast-pulse {
+  animation: fast-pulse 0.5s infinite;
+}

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "nodemap",
-  "version": "1.1.386",
+  "version": "1.1.387",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "nodemap",
-      "version": "1.1.386",
+      "version": "1.1.387",
       "dependencies": {
         "@emotion/react": "^11.13.3",
         "@emotion/styled": "^11.13.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodemap",
-  "version": "1.1.386",
+  "version": "1.1.387",
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",