a9f6484fb0
- useAdminAuth aus KueEinstellung entfernt und einmalig in SettingsModalWrapper ausgelagert - isAdminLoggedIn als Prop übergeben, um ständige Aktualisierungen zu vermeiden - Button wird jetzt stabil angezeigt ohne console-Logs oder Intervall-Aufrufe
56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
"use client";
|
|
// components/main/kabelueberwachung/kue705FO/modals/SuccessProgressModal.tsx
|
|
import React, { useEffect, useState } from "react";
|
|
|
|
interface Props {
|
|
visible: boolean;
|
|
duration?: number; // in Sekunden
|
|
onClose: () => void;
|
|
}
|
|
|
|
const SuccessProgressModal: React.FC<Props> = ({
|
|
visible,
|
|
duration = 10,
|
|
onClose,
|
|
}) => {
|
|
const [progress, setProgress] = useState(0);
|
|
|
|
useEffect(() => {
|
|
if (!visible) return;
|
|
setProgress(0);
|
|
const interval = setInterval(() => {
|
|
setProgress((prev) => {
|
|
if (prev >= 100) {
|
|
clearInterval(interval);
|
|
setTimeout(onClose, 500); // Schließen nach kurzer Verzögerung
|
|
return 100;
|
|
}
|
|
return prev + 100 / duration;
|
|
});
|
|
}, 1000);
|
|
|
|
return () => clearInterval(interval);
|
|
}, [visible, duration, onClose]);
|
|
|
|
if (!visible) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 bg-black bg-opacity-40 flex items-center justify-center">
|
|
<div className="bg-white p-6 rounded-lg shadow-md text-center w-72">
|
|
<h2 className="text-lg font-bold text-green-600 mb-4">
|
|
✅ Firmwareupdate erfolgreich abgeschlossen.
|
|
</h2>
|
|
<div className="w-full bg-gray-200 rounded h-3 overflow-hidden">
|
|
<div
|
|
className="h-3 bg-green-500 transition-all duration-100"
|
|
style={{ width: `${progress}%` }}
|
|
></div>
|
|
</div>
|
|
<p className="text-sm mt-2">{Math.floor(progress)}%</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SuccessProgressModal;
|