From 1d3d04d49ca49adac1f7d97aa620447e55f8af39 Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Wed, 17 Sep 2025 12:59:37 +0200
Subject: [PATCH] style: Alarm Ui Widget

---
 .env.development                              |  2 +-
 .env.production                               |  2 +-
 components/uiWidgets/AlarmIndicator.js        | 28 ++++++++-
 .../uiWidgets/AlarmIndicator.module.css       | 62 +++++++++++++++++++
 .../uiWidgets/alarm-indicator-fastpulse.css   | 15 +++++
 package-lock.json                             |  4 +-
 package.json                                  |  2 +-
 7 files changed, 108 insertions(+), 7 deletions(-)
 create mode 100644 components/uiWidgets/AlarmIndicator.module.css
 create mode 100644 components/uiWidgets/alarm-indicator-fastpulse.css

diff --git a/.env.development b/.env.development
index 7437a4d5c..3a38bacaf 100644
--- a/.env.development
+++ b/.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
diff --git a/.env.production b/.env.production
index f27081172..12760078f 100644
--- a/.env.production
+++ b/.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
diff --git a/components/uiWidgets/AlarmIndicator.js b/components/uiWidgets/AlarmIndicator.js
index 6a4609fbd..a997a18b5 100644
--- a/components/uiWidgets/AlarmIndicator.js
+++ b/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>
   );
diff --git a/components/uiWidgets/AlarmIndicator.module.css b/components/uiWidgets/AlarmIndicator.module.css
new file mode 100644
index 000000000..20d94fee3
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/components/uiWidgets/alarm-indicator-fastpulse.css b/components/uiWidgets/alarm-indicator-fastpulse.css
new file mode 100644
index 000000000..d7afa9d4d
--- /dev/null
+++ b/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;
+}
diff --git a/package-lock.json b/package-lock.json
index 9517a18eb..3a78a5184 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index e255bc96a..e7117a96a 100644
--- a/package.json
+++ b/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",