54 lines
1.7 KiB
JavaScript
54 lines
1.7 KiB
JavaScript
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,
|
|
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
|
|
style={{ cursor: "pointer", color: "red" }}
|
|
onClick={e => {
|
|
e.stopPropagation();
|
|
window.open(alarmLink, "_blank");
|
|
}}
|
|
aria-label="Alarm aktiv"
|
|
>
|
|
<AlarmIcon
|
|
className={`h-14 w-14 ${animationClass} text-red-800 bg-orange-500`}
|
|
style={style}
|
|
/>
|
|
</span>
|
|
</Tooltip>
|
|
);
|
|
};
|
|
|
|
export default AlarmIndicator;
|