iobroker.mywebui 1.92.0 → 1.93.0

package/default-controls/controls/WebuiConnectionMonitor1.control

@@ -1 +1 @@
-{"html": "<div id=\"monitor\" class=\"connection-monitor\"><div class=\"status-indicator\">\n    <svg class=\"status-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\n        <circle id=\"circle\" cx=\"12\" cy=\"12\" r=\"9\"></circle>\n        <path id=\"check\" d=\"M9 12l2 2 4-4\" display=\"none\"></path>\n        <path id=\"cross\" d=\"M9 9l6 6 M15 9l-6 6\" display=\"none\"></path>\n    </svg>\n<span id=\"statusText\" class=\"status-text\"></span>\n</div><div class=\"pulse-ring\"></div></div>\n<!-- Popup Modal -->\n<div id=\"connectionPopup\" class=\"connection-popup\" style=\"display:none;\">\n    <div class=\"popup-overlay\"></div>\n    <div class=\"popup-content\">\n        <div class=\"popup-icon-wrapper\">\n            <svg id=\"popupIcon\" class=\"popup-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <circle cx=\"12\" cy=\"12\" r=\"9\"></circle>\n                <path id=\"popupCheck\" d=\"M9 12l2 2 4-4\" display=\"none\"></path>\n                <path id=\"popupCross\" d=\"M9 9l6 6 M15 9l-6 6\" display=\"none\"></path>\n            </svg>\n<div class=\"popup-pulse-ring\"></div>\n        </div>\n        <h2 id=\"popupTitle\" class=\"popup-title\"></h2>\n        <p id=\"popupMessage\" class=\"popup-message\"></p>\n    </div>\n</div>\n", "style": ":host {\n    display: inline-block;\n    font-family: system-ui, -apple-system, sans-serif;\n}\n\n* {\n    box-sizing: border-box;\n}\n\n.connection-monitor {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 10px 16px;\n    border-radius: 10px;\n    background: rgba(255, 255, 255, 0.95);\n    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);\n    backdrop-filter: blur(8px);\n    transition: all 0.3s ease;\n    border: 2px solid transparent;\n}\n\n.status-indicator {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.status-icon {\n    width: 24px;\n    height: 24px;\n    transition: all 0.3s ease;\n}\n\n.status-text {\n    font-size: 14px;\n    font-weight: 600;\n    white-space: nowrap;\n}\n\n/* Bağlı vəziyyət (Yaşıl) */\n.connection-monitor.connected {\n    background: rgba(16, 185, 129, 0.1);\n    border-color: var(--ui-ok,#10b981);\n}\n\n.connection-monitor.connected .status-icon {\n    color: var(--ui-ok,#10b981);\n}\n\n.connection-monitor.connected .status-text {\n    color: var(--ui-ok,#10b981);\n}\n\n.connection-monitor.connected .pulse-ring {\n    animation: pulse-green 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n/* Kəsilmiş vəziyyət (Qırmızı) */\n.connection-monitor.disconnected {\n    background: rgba(239, 68, 68, 0.1);\n    border-color: var(--ui-error,#ef4444);\n    animation: shake 0.5s ease;\n}\n\n.connection-monitor.disconnected .status-icon {\n    color: var(--ui-error,#ef4444);\n}\n\n.connection-monitor.disconnected .status-text {\n    color: var(--ui-error,#ef4444);\n}\n\n.connection-monitor.disconnected .pulse-ring {\n    animation: pulse-red 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n/* Yoxlanma vəziyyəti (Sarı) */\n.connection-monitor.checking {\n    background: rgba(251, 191, 36, 0.1);\n    border-color: var(--ui-warn,#fbbf24);\n}\n\n.connection-monitor.checking .status-icon {\n    color: var(--ui-warn,#fbbf24);\n    animation: rotate 1.5s linear infinite;\n}\n\n.connection-monitor.checking .status-text {\n    color: var(--ui-warn,#fbbf24);\n}\n\n/* Pulse halqası */\n.pulse-ring {\n    position: absolute;\n    top: 50%;\n    left: 15px;\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n    pointer-events: none;\n    transform: translate(-50%, -50%);\n}\n\n/* ==================== POPUP STYLES ==================== */\n\n.connection-popup {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 999999;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    animation: fadeIn 0.3s ease;\n}\n\n.popup-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(0, 0, 0, 0.7);\n    backdrop-filter: blur(8px);\n}\n\n.popup-content {\n    position: relative;\n    background: white;\n    border-radius: 24px;\n    padding: 48px 64px;\n    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);\n    text-align: center;\n    max-width: 500px;\n    width: 90%;\n    animation: slideUp 0.4s ease;\n}\n\n.popup-icon-wrapper {\n    position: relative;\n    width: 120px;\n    height: 120px;\n    margin: 0 auto 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.popup-icon {\n    width: 120px;\n    height: 120px;\n    transition: all 0.3s ease;\n}\n\n.popup-pulse-ring {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 120px;\n    height: 120px;\n    border-radius: 50%;\n    pointer-events: none;\n    transform: translate(-50%, -50%);\n}\n\n.popup-title {\n    font-size: 32px;\n    font-weight: 700;\n    margin: 0 0 16px 0;\n    color: var(--ui-surface,#1f2937);\n}\n\n.popup-message {\n    font-size: 20px;\n    font-weight: 500;\n    margin: 0;\n    color: #6b7280;\n}\n\n/* Popup Connected State */\n.connection-popup.connected .popup-icon {\n    color: var(--ui-ok,#10b981);\n}\n\n.connection-popup.connected .popup-pulse-ring {\n    animation: pulse-green-big 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n.connection-popup.connected .popup-title {\n    color: var(--ui-ok,#10b981);\n}\n\n.connection-popup.connected .popup-message {\n    color: #059669;\n}\n\n/* Popup Disconnected State */\n.connection-popup.disconnected .popup-icon {\n    color: var(--ui-error,#ef4444);\n    animation: shake-big 0.5s ease;\n}\n\n.connection-popup.disconnected .popup-pulse-ring {\n    animation: pulse-red-big 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n.connection-popup.disconnected .popup-title {\n    color: var(--ui-error,#ef4444);\n}\n\n.connection-popup.disconnected .popup-message {\n    color: #dc2626;\n}\n\n/* Popup Checking State */\n.connection-popup.checking .popup-icon {\n    color: var(--ui-warn,#fbbf24);\n    animation: rotate 1.5s linear infinite;\n}\n\n.connection-popup.checking .popup-title {\n    color: var(--ui-warn,#fbbf24);\n}\n\n.connection-popup.checking .popup-message {\n    color: #f59e0b;\n}\n\n/* Animasiyalar */\n@keyframes pulse-green {\n    0%, 100% {\n        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);\n    }\n    50% {\n        box-shadow: 0 0 0 12px rgba(16, 185, 129, 0);\n    }\n}\n\n@keyframes pulse-red {\n    0%, 100% {\n        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);\n    }\n    50% {\n        box-shadow: 0 0 0 12px rgba(239, 68, 68, 0);\n    }\n}\n\n@keyframes pulse-green-big {\n    0%, 100% {\n        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);\n    }\n    50% {\n        box-shadow: 0 0 0 30px rgba(16, 185, 129, 0);\n    }\n}\n\n@keyframes pulse-red-big {\n    0%, 100% {\n        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);\n    }\n    50% {\n        box-shadow: 0 0 0 30px rgba(239, 68, 68, 0);\n    }\n}\n\n@keyframes shake {\n    0%, 100% { transform: translateX(0); }\n    25% { transform: translateX(-4px); }\n    75% { transform: translateX(4px); }\n}\n\n@keyframes shake-big {\n    0%, 100% { transform: translateX(0) rotate(0deg); }\n    25% { transform: translateX(-10px) rotate(-5deg); }\n    75% { transform: translateX(10px) rotate(5deg); }\n}\n\n@keyframes rotate {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n}\n\n@keyframes fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n}\n\n@keyframes slideUp {\n    from {\n        opacity: 0;\n        transform: translateY(50px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n/* Qaranlıq tema */\n@media (prefers-color-scheme: dark) {\n    .connection-monitor {\n        background: rgba(31, 41, 55, 0.95);\n        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);\n    }\n    \n    .popup-content {\n        -webkit-backdrop-filter:var(--ui-backdrop,none);backdrop-filter:var(--ui-backdrop,none);background: var(--ui-surface,#1f2937);\n    }\n    \n    .popup-title {\n        color: #f3f4f6;\n    }\n    \n    .popup-message {\n        color: #d1d5db;\n    }\n}\n\n/* Kiçik ölçü */\n.connection-monitor.size-small {\n    padding: 6px 12px;\n    font-size: 12px;\n}\n\n.connection-monitor.size-small .status-icon {\n    width: 18px;\n    height: 18px;\n}\n\n/* Böyük ölçü */\n.connection-monitor.size-large {\n    padding: 14px 20px;\n    font-size: 16px;\n}\n\n.connection-monitor.size-large .status-icon {\n    width: 32px;\n    height: 32px;\n}", "script": "let checkInterval = null;\nlet isConnected = false;\nlet onConnectHandler = null;\nlet onDisconnectHandler = null;\nlet onReconnectHandler = null;\nlet onErrorHandler = null;\nlet popupTimeout = null;\nlet currentStatus = 'checking';\nlet _langChangedHandler = null;\n\n/**\n* @param {BaseScreenViewerAndControl} instance\n*/\nexport function connectedCallback(instance) {\n    const monitorEl = instance._getDomElement('monitor');\n    const statusTextEl = instance._getDomElement('statusText');\n    const checkIcon = instance._getDomElement('check');\n    const crossIcon = instance._getDomElement('cross');\n    const circleIcon = instance._getDomElement('circle');\n    \n    // Popup elementləri\n    const popupEl = instance._getDomElement('connectionPopup');\n    const popupTitleEl = instance._getDomElement('popupTitle');\n    const popupMessageEl = instance._getDomElement('popupMessage');\n    const popupCheckIcon = instance._getDomElement('popupCheck');\n    const popupCrossIcon = instance._getDomElement('popupCross');\n    \n    // Ölçü classı əlavə et\n    if (instance.size) {\n        monitorEl.classList.add('size-' + instance.size);\n    }\n    \n    // IOB connection hazır olana qədər gözlə\n    const waitForConnection = setInterval(() => {\n        if (window.IOB && window.IOB.connection) {\n            clearInterval(waitForConnection);\n            setupMonitoring();\n        }\n    }, 100);\n    \n    function setupMonitoring() {\n        const connection = window.IOB.connection;\n        \n        console.log('[ConnectionMonitor] 🚀 Monitoring başladı');\n        console.log('[ConnectionMonitor] Connection obyekti:', connection);\n        console.log('[ConnectionMonitor] İlkin status:', connection.connected);\n        \n        // İlk status yoxlaması\n        checkConnection();\n        \n        // Dövri yoxlama\n        const interval = instance.checkInterval || 5000;\n        checkInterval = setInterval(() => {\n            checkConnection();\n        }, interval);\n        \n        // Socket event-lərinə abunə ol\n        if (connection._socket) {\n            const socket = connection._socket;\n            \n            onConnectHandler = function() {\n                console.log('[ConnectionMonitor] ✅ Socket CONNECT event');\n                handleConnectionSuccess();\n            };\n            \n            onReconnectHandler = function() {\n                console.log('[ConnectionMonitor] 🔄 Socket RECONNECT event');\n                handleConnectionSuccess();\n            };\n            \n            onDisconnectHandler = function(reason) {\n                console.log('[ConnectionMonitor] ❌ Socket DISCONNECT event:', reason);\n                handleConnectionFailure();\n            };\n            \n            onErrorHandler = function(error) {\n                console.error('[ConnectionMonitor] ⚠️ Socket ERROR event:', error);\n                handleConnectionFailure();\n            };\n            \n            socket.on('connect', onConnectHandler);\n            socket.on('reconnect', onReconnectHandler);\n            socket.on('disconnect', onDisconnectHandler);\n            socket.on('connect_error', onErrorHandler);\n            socket.on('error', onErrorHandler);\n        }\n    }\n    \n    function checkConnection() {\n        if (!window.IOB || !window.IOB.connection) {\n            handleConnectionFailure();\n            return;\n        }\n        \n        const connection = window.IOB.connection;\n        \n        // Connection obyektinin connected property-sini yoxla\n        if (connection.connected === true) {\n            handleConnectionSuccess();\n        } \n        // Socket-in connected statusunu yoxla\n        else if (connection._socket && connection._socket.connected === true) {\n            handleConnectionSuccess();\n        }\n        // Navigator.onLine yoxla (fallback)\n        else if (navigator.onLine === false) {\n            handleConnectionFailure();\n        }\n        else {\n            // Əlaqə statusu qeyri-müəyyəndirsə, yoxlanılır statusu göstər\n            updateStatus('checking');\n        }\n    }\n    \n    function handleConnectionSuccess() {\n        const wasDisconnected = !isConnected;\n        \n        if (wasDisconnected) {\n            console.log('[ConnectionMonitor] 💚 Server əlaqəsi BƏRPA OLUNDU');\n            isConnected = true;\n            \n            // Əlaqə bərpa olundu popup-u göstər (3 saniyə)\n            showPopup('connected');\n            if (popupTimeout) clearTimeout(popupTimeout);\n            popupTimeout = setTimeout(() => {\n                hidePopup();\n            }, 3000);\n        }\n        \n        updateStatus('connected');\n    }\n    \n    function handleConnectionFailure() {\n        if (isConnected) {\n            console.error('[ConnectionMonitor] 💔 Server əlaqəsi KƏSİLDİ');\n            isConnected = false;\n            \n            // Əlaqə kəsildi popup-u göstər (daimi)\n            showPopup('disconnected');\n        }\n        \n        updateStatus('disconnected');\n    }\n    \n    function updateStatus(status) {\n        currentStatus = status;\n        monitorEl.classList.remove('connected', 'disconnected', 'checking');\n        monitorEl.classList.add(status);\n        \n        checkIcon.style.display = 'none';\n        crossIcon.style.display = 'none';\n        circleIcon.style.display = 'block';\n        \n        if (status === 'connected') {\n            statusTextEl.textContent = t('WebuiConnectionMonitor.connectedtext');\n            checkIcon.style.display = 'block';\n            circleIcon.style.display = 'none';\n        } else if (status === 'disconnected') {\n            statusTextEl.textContent = t('WebuiConnectionMonitor.disconnectedtext');\n            crossIcon.style.display = 'block';\n            circleIcon.style.display = 'none';\n        } else if (status === 'checking') {\n            statusTextEl.textContent = t('WebuiConnectionMonitor.checkingtext');\n        }\n        \n        if (instance.showText === false) {\n            statusTextEl.style.display = 'none';\n        } else {\n            statusTextEl.style.display = 'inline';\n        }\n    }\n    \n    function showPopup(status) {\n        popupEl.style.display = 'flex';\n        popupEl.classList.remove('connected', 'disconnected', 'checking');\n        popupEl.classList.add(status);\n        \n        // İkonları yenilə\n        popupCheckIcon.style.display = 'none';\n        popupCrossIcon.style.display = 'none';\n        \n        if (status === 'connected') {\n            popupTitleEl.textContent = t('WebuiConnectionMonitor.connectedtext');\n            popupMessageEl.textContent =  t('WebuiConnectionMonitor.popupmessageconnected');\n            popupCheckIcon.style.display = 'block';\n        } else if (status === 'disconnected') {\n            popupTitleEl.textContent =  t('WebuiConnectionMonitor.disconnectedtext');\n            popupMessageEl.textContent =  t('WebuiConnectionMonitor.popupmessagedisconnected');\n            popupCrossIcon.style.display = 'block';\n        } else if (status === 'checking') {\n            popupTitleEl.textContent = t('WebuiConnectionMonitor.checkingtext');\n            popupMessageEl.textContent =  t('WebuiConnectionMonitor.popupmessagechecking');\n        }\n    }\n    \n    function hidePopup() {\n        popupEl.style.display = 'none';\n        if (popupTimeout) {\n            clearTimeout(popupTimeout);\n            popupTimeout = null;\n        }\n    }\n\n    _langChangedHandler = () => updateStatus(currentStatus);\n    window.addEventListener('languageChanged', _langChangedHandler);\n}\n\n/**\n* @param {BaseScreenViewerAndControl} instance\n*/\nexport function disconnectedCallback(instance) {\n    if (checkInterval) {\n        clearInterval(checkInterval);\n        checkInterval = null;\n    }\n    \n    if (_langChangedHandler) {\n        window.removeEventListener('languageChanged', _langChangedHandler);\n        _langChangedHandler = null;\n    }\n\n    if (popupTimeout) {\n        clearTimeout(popupTimeout);\n        popupTimeout = null;\n    }\n    \n    // Event listener-ləri təmizlə\n    if (window.IOB && window.IOB.connection && window.IOB.connection._socket) {\n        const socket = window.IOB.connection._socket;\n        \n        if (onConnectHandler) socket.off('connect', onConnectHandler);\n        if (onReconnectHandler) socket.off('reconnect', onReconnectHandler);\n        if (onDisconnectHandler) socket.off('disconnect', onDisconnectHandler);\n        if (onErrorHandler) {\n            socket.off('connect_error', onErrorHandler);\n            socket.off('error', onErrorHandler);\n        }\n    }\n}", "properties": {"checkInterval": {"type": "number", "default": "5000"}, "showText": {"type": "boolean", "default": "false"}, "size": {"type": "enum", "default": "medium", "values": ["small", "medium", "large"]}}, "settings": {"visibilityEnabled": "false", "visibilityGroups": "", "visibilityAction": "hide", "visibilityRedirectScreen": ""}, "translations": {"az": {"WebuiConnectionMonitor": {"connectedtext": "Serverlə əlaqə var", "disconnectedtext": "Serverlə əlaqə yoxdur", "checkingtext": "Yoxlanılır...", "popupmessageconnected": "Əlaqə uğurla bərpa olundu", "popupmessagedisconnected": "Zəhmət olmasa əlaqənizi yoxlayın", "popupmessagechecking": "Server əlaqəsi yoxlanılır"}}, "ru": {"WebuiConnectionMonitor": {"connectedtext": "Соединение с сервером установлено", "disconnectedtext": "Соединение с сервером потеряно", "checkingtext": "Проверяется...", "popupmessageconnected": "Соединение успешно восстановлено", "popupmessagedisconnected": "Пожалуйста, проверьте подключение", "popupmessagechecking": "Проверка соединения с сервером"}}, "de": {"WebuiConnectionMonitor": {"connectedtext": "Verbindung zum Server hergestellt", "disconnectedtext": "Verbindung zum Server unterbrochen", "checkingtext": "Wird geprüft...", "popupmessageconnected": "Verbindung erfolgreich wiederhergestellt", "popupmessagedisconnected": "Bitte überprüfen Sie Ihre Verbindung", "popupmessagechecking": "Serververbindung wird geprüft"}}, "en": {"WebuiConnectionMonitor": {"connectedtext": "Connected to server", "disconnectedtext": "Disconnected from server", "checkingtext": "Checking...", "popupmessageconnected": "Connection successfully restored", "popupmessagedisconnected": "Please check your connection", "popupmessagechecking": "Checking server connection"}}, "tr": {"WebuiConnectionMonitor": {"connectedtext": "Sunucuya bağlantı kuruldu", "disconnectedtext": "Sunucu bağlantısı kesildi", "checkingtext": "Kontrol ediliyor...", "popupmessageconnected": "Bağlantı başarıyla yeniden kuruldu", "popupmessagedisconnected": "Lütfen bağlantınızı kontrol edin", "popupmessagechecking": "Sunucu bağlantısı kontrol ediliyor"}}}}
+{"html": "<div id=\"monitor\" class=\"connection-monitor\"><div class=\"status-indicator\">\n    <svg class=\"status-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\n        <circle id=\"circle\" cx=\"12\" cy=\"12\" r=\"9\"></circle>\n        <path id=\"check\" d=\"M9 12l2 2 4-4\" display=\"none\"></path>\n        <path id=\"cross\" d=\"M9 9l6 6 M15 9l-6 6\" display=\"none\"></path>\n    </svg>\n<span id=\"statusText\" class=\"status-text\"></span>\n</div><div class=\"pulse-ring\"></div></div>\n<!-- Popup Modal -->\n<div id=\"connectionPopup\" class=\"connection-popup\" style=\"display:none;\">\n    <div class=\"popup-overlay\"></div>\n    <div class=\"popup-content\">\n        <div class=\"popup-icon-wrapper\">\n            <svg id=\"popupIcon\" class=\"popup-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <circle cx=\"12\" cy=\"12\" r=\"9\"></circle>\n                <path id=\"popupCheck\" d=\"M9 12l2 2 4-4\" display=\"none\"></path>\n                <path id=\"popupCross\" d=\"M9 9l6 6 M15 9l-6 6\" display=\"none\"></path>\n            </svg>\n<div class=\"popup-pulse-ring\"></div>\n        </div>\n        <h2 id=\"popupTitle\" class=\"popup-title\"></h2>\n        <p id=\"popupMessage\" class=\"popup-message\"></p>\n    </div>\n</div>\n", "style": ":host {\n    display: inline-block;\n    font-family: system-ui, -apple-system, sans-serif;\n}\n\n* {\n    box-sizing: border-box;\n}\n\n.connection-monitor {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 10px 16px;\n    border-radius: 10px;\n    background: rgba(255, 255, 255, 0.95);\n    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);\n    backdrop-filter: blur(8px);\n    transition: all 0.3s ease;\n    border: 2px solid transparent;\n}\n\n.status-indicator {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.status-icon {\n    width: 24px;\n    height: 24px;\n    transition: all 0.3s ease;\n}\n\n.status-text {\n    font-size: 14px;\n    font-weight: 600;\n    white-space: nowrap;\n}\n\n/* Bağlı vəziyyət (Yaşıl) */\n.connection-monitor.connected {\n    background: rgba(16, 185, 129, 0.1);\n    border-color: var(--ui-ok,#10b981);\n}\n\n.connection-monitor.connected .status-icon {\n    color: var(--ui-ok,#10b981);\n}\n\n.connection-monitor.connected .status-text {\n    color: var(--ui-ok,#10b981);\n}\n\n.connection-monitor.connected .pulse-ring {\n    animation: pulse-green 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n/* Kəsilmiş vəziyyət (Qırmızı) */\n.connection-monitor.disconnected {\n    background: rgba(239, 68, 68, 0.1);\n    border-color: var(--ui-error,#ef4444);\n    animation: shake 0.5s ease;\n}\n\n.connection-monitor.disconnected .status-icon {\n    color: var(--ui-error,#ef4444);\n}\n\n.connection-monitor.disconnected .status-text {\n    color: var(--ui-error,#ef4444);\n}\n\n.connection-monitor.disconnected .pulse-ring {\n    animation: pulse-red 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n/* Yoxlanma vəziyyəti (Sarı) */\n.connection-monitor.checking {\n    background: rgba(251, 191, 36, 0.1);\n    border-color: var(--ui-warn,#fbbf24);\n}\n\n.connection-monitor.checking .status-icon {\n    color: var(--ui-warn,#fbbf24);\n    animation: rotate 1.5s linear infinite;\n}\n\n.connection-monitor.checking .status-text {\n    color: var(--ui-warn,#fbbf24);\n}\n\n/* Pulse halqası */\n.pulse-ring {\n    position: absolute;\n    top: 50%;\n    left: 15px;\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n    pointer-events: none;\n    transform: translate(-50%, -50%);\n}\n\n/* ==================== POPUP STYLES ==================== */\n\n.connection-popup {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 999999;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    animation: fadeIn 0.3s ease;\n}\n\n.popup-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(0, 0, 0, 0.7);\n    backdrop-filter: blur(8px);\n}\n\n.popup-content {\n    position: relative;\n    background: white;\n    border-radius: 24px;\n    padding: 48px 64px;\n    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);\n    text-align: center;\n    max-width: 500px;\n    width: 90%;\n    animation: slideUp 0.4s ease;\n}\n\n.popup-icon-wrapper {\n    position: relative;\n    width: 120px;\n    height: 120px;\n    margin: 0 auto 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.popup-icon {\n    width: 120px;\n    height: 120px;\n    transition: all 0.3s ease;\n}\n\n.popup-pulse-ring {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 120px;\n    height: 120px;\n    border-radius: 50%;\n    pointer-events: none;\n    transform: translate(-50%, -50%);\n}\n\n.popup-title {\n    font-size: 32px;\n    font-weight: 700;\n    margin: 0 0 16px 0;\n    color: var(--ui-surface,#1f2937);\n}\n\n.popup-message {\n    font-size: 20px;\n    font-weight: 500;\n    margin: 0;\n    color: #6b7280;\n}\n\n/* Popup Connected State */\n.connection-popup.connected .popup-icon {\n    color: var(--ui-ok,#10b981);\n}\n\n.connection-popup.connected .popup-pulse-ring {\n    animation: pulse-green-big 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n.connection-popup.connected .popup-title {\n    color: var(--ui-ok,#10b981);\n}\n\n.connection-popup.connected .popup-message {\n    color: #059669;\n}\n\n/* Popup Disconnected State */\n.connection-popup.disconnected .popup-icon {\n    color: var(--ui-error,#ef4444);\n    animation: shake-big 0.5s ease;\n}\n\n.connection-popup.disconnected .popup-pulse-ring {\n    animation: pulse-red-big 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n.connection-popup.disconnected .popup-title {\n    color: var(--ui-error,#ef4444);\n}\n\n.connection-popup.disconnected .popup-message {\n    color: #dc2626;\n}\n\n/* Popup Checking State */\n.connection-popup.checking .popup-icon {\n    color: var(--ui-warn,#fbbf24);\n    animation: rotate 1.5s linear infinite;\n}\n\n.connection-popup.checking .popup-title {\n    color: var(--ui-warn,#fbbf24);\n}\n\n.connection-popup.checking .popup-message {\n    color: #f59e0b;\n}\n\n/* Animasiyalar */\n@keyframes pulse-green {\n    0%, 100% {\n        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);\n    }\n    50% {\n        box-shadow: 0 0 0 12px rgba(16, 185, 129, 0);\n    }\n}\n\n@keyframes pulse-red {\n    0%, 100% {\n        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);\n    }\n    50% {\n        box-shadow: 0 0 0 12px rgba(239, 68, 68, 0);\n    }\n}\n\n@keyframes pulse-green-big {\n    0%, 100% {\n        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);\n    }\n    50% {\n        box-shadow: 0 0 0 30px rgba(16, 185, 129, 0);\n    }\n}\n\n@keyframes pulse-red-big {\n    0%, 100% {\n        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);\n    }\n    50% {\n        box-shadow: 0 0 0 30px rgba(239, 68, 68, 0);\n    }\n}\n\n@keyframes shake {\n    0%, 100% { transform: translateX(0); }\n    25% { transform: translateX(-4px); }\n    75% { transform: translateX(4px); }\n}\n\n@keyframes shake-big {\n    0%, 100% { transform: translateX(0) rotate(0deg); }\n    25% { transform: translateX(-10px) rotate(-5deg); }\n    75% { transform: translateX(10px) rotate(5deg); }\n}\n\n@keyframes rotate {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n}\n\n@keyframes fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n}\n\n@keyframes slideUp {\n    from {\n        opacity: 0;\n        transform: translateY(50px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n/* Qaranlıq tema */\n@media (prefers-color-scheme: dark) {\n    .connection-monitor {\n        background: rgba(31, 41, 55, 0.95);\n        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);\n    }\n    \n    .popup-content {\n        -webkit-backdrop-filter:var(--ui-backdrop,none);backdrop-filter:var(--ui-backdrop,none);background: var(--ui-surface,#1f2937);\n    }\n    \n    .popup-title {\n        color: #f3f4f6;\n    }\n    \n    .popup-message {\n        color: #d1d5db;\n    }\n}\n\n/* Kiçik ölçü */\n.connection-monitor.size-small {\n    padding: 6px 12px;\n    font-size: 12px;\n}\n\n.connection-monitor.size-small .status-icon {\n    width: 18px;\n    height: 18px;\n}\n\n/* Böyük ölçü */\n.connection-monitor.size-large {\n    padding: 14px 20px;\n    font-size: 16px;\n}\n\n.connection-monitor.size-large .status-icon {\n    width: 32px;\n    height: 32px;\n}", "script": "let checkInterval = null;\nlet isConnected = false;\nlet onConnectHandler = null;\nlet onDisconnectHandler = null;\nlet onReconnectHandler = null;\nlet onErrorHandler = null;\nlet popupTimeout = null;\nlet currentStatus = 'checking';\nlet _langChangedHandler = null;\n\n/**\n* @param {BaseScreenViewerAndControl} instance\n*/\nexport function connectedCallback(instance) {\n    const monitorEl = instance._getDomElement('monitor');\n    const statusTextEl = instance._getDomElement('statusText');\n    const checkIcon = instance._getDomElement('check');\n    const crossIcon = instance._getDomElement('cross');\n    const circleIcon = instance._getDomElement('circle');\n    \n    // Popup elementləri\n    const popupEl = instance._getDomElement('connectionPopup');\n    const popupTitleEl = instance._getDomElement('popupTitle');\n    const popupMessageEl = instance._getDomElement('popupMessage');\n    const popupCheckIcon = instance._getDomElement('popupCheck');\n    const popupCrossIcon = instance._getDomElement('popupCross');\n    \n    // Ölçü classı əlavə et\n    if (instance.size) {\n        monitorEl.classList.add('size-' + instance.size);\n    }\n    \n    // IOB connection hazır olana qədər gözlə\n    const waitForConnection = setInterval(() => {\n        if (window.IOB && window.IOB.connection) {\n            clearInterval(waitForConnection);\n            setupMonitoring();\n        }\n    }, 100);\n    \n    function setupMonitoring() {\n        const connection = window.IOB.connection;\n        \n        console.log('[ConnectionMonitor] 🚀 Monitoring başladı');\n        console.log('[ConnectionMonitor] Connection obyekti:', connection);\n        console.log('[ConnectionMonitor] İlkin status:', connection.connected);\n        \n        // İlk status yoxlaması\n        checkConnection();\n        \n        // Dövri yoxlama\n        const interval = instance.checkInterval || 5000;\n        checkInterval = setInterval(() => {\n            checkConnection();\n        }, interval);\n        \n        // Socket event-lərinə abunə ol\n        if (connection._socket) {\n            const socket = connection._socket;\n            \n            onConnectHandler = function() {\n                console.log('[ConnectionMonitor] ✅ Socket CONNECT event');\n                handleConnectionSuccess();\n            };\n            \n            onReconnectHandler = function() {\n                console.log('[ConnectionMonitor] 🔄 Socket RECONNECT event');\n                handleConnectionSuccess();\n            };\n            \n            onDisconnectHandler = function(reason) {\n                console.log('[ConnectionMonitor] ❌ Socket DISCONNECT event:', reason);\n                handleConnectionFailure();\n            };\n            \n            onErrorHandler = function(error) {\n                console.error('[ConnectionMonitor] ⚠️ Socket ERROR event:', error);\n                handleConnectionFailure();\n            };\n            \n            socket.on('connect', onConnectHandler);\n            socket.on('reconnect', onReconnectHandler);\n            socket.on('disconnect', onDisconnectHandler);\n            socket.on('connect_error', onErrorHandler);\n            socket.on('error', onErrorHandler);\n        }\n    }\n    \n    function checkConnection() {\n        if (!window.IOB || !window.IOB.connection) {\n            handleConnectionFailure();\n            return;\n        }\n        \n        const connection = window.IOB.connection;\n        \n        // Connection obyektinin connected property-sini yoxla\n        if (connection.connected === true) {\n            handleConnectionSuccess();\n        } \n        // Socket-in connected statusunu yoxla\n        else if (connection._socket && connection._socket.connected === true) {\n            handleConnectionSuccess();\n        }\n        // Navigator.onLine yoxla (fallback)\n        else if (navigator.onLine === false) {\n            handleConnectionFailure();\n        }\n        else {\n            // Əlaqə statusu qeyri-müəyyəndirsə, yoxlanılır statusu göstər\n            updateStatus('checking');\n        }\n    }\n    \n    function handleConnectionSuccess() {\n        const wasDisconnected = !isConnected;\n        \n        if (wasDisconnected) {\n            console.log('[ConnectionMonitor] 💚 Server əlaqəsi BƏRPA OLUNDU');\n            isConnected = true;\n            \n            // Əlaqə bərpa olundu popup-u göstər (3 saniyə)\n            showPopup('connected');\n            if (popupTimeout) clearTimeout(popupTimeout);\n            popupTimeout = setTimeout(() => {\n                hidePopup();\n            }, 3000);\n        }\n        \n        updateStatus('connected');\n    }\n    \n    function handleConnectionFailure() {\n        if (isConnected) {\n            console.error('[ConnectionMonitor] 💔 Server əlaqəsi KƏSİLDİ');\n            isConnected = false;\n            \n            // Əlaqə kəsildi popup-u göstər (daimi)\n            showPopup('disconnected');\n        }\n        \n        updateStatus('disconnected');\n    }\n    \n    function updateStatus(status) {\n        currentStatus = status;\n        monitorEl.classList.remove('connected', 'disconnected', 'checking');\n        monitorEl.classList.add(status);\n        \n        checkIcon.style.display = 'none';\n        crossIcon.style.display = 'none';\n        circleIcon.style.display = 'block';\n        \n        if (status === 'connected') {\n            statusTextEl.textContent = t('WebuiConnectionMonitor.connectedtext', statusTextEl);\n            checkIcon.style.display = 'block';\n            circleIcon.style.display = 'none';\n        } else if (status === 'disconnected') {\n            statusTextEl.textContent = t('WebuiConnectionMonitor.disconnectedtext', statusTextEl);\n            crossIcon.style.display = 'block';\n            circleIcon.style.display = 'none';\n        } else if (status === 'checking') {\n            statusTextEl.textContent = t('WebuiConnectionMonitor.checkingtext', statusTextEl);\n        }\n        \n        if (instance.showText === false) {\n            statusTextEl.style.display = 'none';\n        } else {\n            statusTextEl.style.display = 'inline';\n        }\n    }\n    \n    function showPopup(status) {\n        popupEl.style.display = 'flex';\n        popupEl.classList.remove('connected', 'disconnected', 'checking');\n        popupEl.classList.add(status);\n        \n        // İkonları yenilə\n        popupCheckIcon.style.display = 'none';\n        popupCrossIcon.style.display = 'none';\n        \n        if (status === 'connected') {\n            popupTitleEl.textContent = t('WebuiConnectionMonitor.connectedtext', popupTitleEl);\n            popupMessageEl.textContent = t('WebuiConnectionMonitor.popupmessageconnected', popupMessageEl);\n            popupCheckIcon.style.display = 'block';\n        } else if (status === 'disconnected') {\n            popupTitleEl.textContent = t('WebuiConnectionMonitor.disconnectedtext', popupTitleEl);\n            popupMessageEl.textContent = t('WebuiConnectionMonitor.popupmessagedisconnected', popupMessageEl);\n            popupCrossIcon.style.display = 'block';\n        } else if (status === 'checking') {\n            popupTitleEl.textContent = t('WebuiConnectionMonitor.checkingtext', popupTitleEl);\n            popupMessageEl.textContent = t('WebuiConnectionMonitor.popupmessagechecking', popupMessageEl);\n        }\n    }\n    \n    function hidePopup() {\n        popupEl.style.display = 'none';\n        if (popupTimeout) {\n            clearTimeout(popupTimeout);\n            popupTimeout = null;\n        }\n    }\n\n    _langChangedHandler = () => updateStatus(currentStatus);\n    window.addEventListener('languageChanged', _langChangedHandler);\n}\n\n/**\n* @param {BaseScreenViewerAndControl} instance\n*/\nexport function disconnectedCallback(instance) {\n    if (checkInterval) {\n        clearInterval(checkInterval);\n        checkInterval = null;\n    }\n    \n    if (_langChangedHandler) {\n        window.removeEventListener('languageChanged', _langChangedHandler);\n        _langChangedHandler = null;\n    }\n\n    if (popupTimeout) {\n        clearTimeout(popupTimeout);\n        popupTimeout = null;\n    }\n    \n    // Event listener-ləri təmizlə\n    if (window.IOB && window.IOB.connection && window.IOB.connection._socket) {\n        const socket = window.IOB.connection._socket;\n        \n        if (onConnectHandler) socket.off('connect', onConnectHandler);\n        if (onReconnectHandler) socket.off('reconnect', onReconnectHandler);\n        if (onDisconnectHandler) socket.off('disconnect', onDisconnectHandler);\n        if (onErrorHandler) {\n            socket.off('connect_error', onErrorHandler);\n            socket.off('error', onErrorHandler);\n        }\n    }\n}", "properties": {"checkInterval": {"type": "number", "default": "5000"}, "showText": {"type": "boolean", "default": "false"}, "size": {"type": "enum", "default": "medium", "values": ["small", "medium", "large"]}}, "settings": {"visibilityEnabled": "false", "visibilityGroups": "", "visibilityAction": "hide", "visibilityRedirectScreen": ""}, "translations": {"az": {"WebuiConnectionMonitor": {"connectedtext": "Serverlə əlaqə var", "disconnectedtext": "Serverlə əlaqə yoxdur", "checkingtext": "Yoxlanılır...", "popupmessageconnected": "Əlaqə uğurla bərpa olundu", "popupmessagedisconnected": "Zəhmət olmasa əlaqənizi yoxlayın", "popupmessagechecking": "Server əlaqəsi yoxlanılır"}}, "ru": {"WebuiConnectionMonitor": {"connectedtext": "Соединение с сервером установлено", "disconnectedtext": "Соединение с сервером потеряно", "checkingtext": "Проверяется...", "popupmessageconnected": "Соединение успешно восстановлено", "popupmessagedisconnected": "Пожалуйста, проверьте подключение", "popupmessagechecking": "Проверка соединения с сервером"}}, "de": {"WebuiConnectionMonitor": {"connectedtext": "Verbindung zum Server hergestellt", "disconnectedtext": "Verbindung zum Server unterbrochen", "checkingtext": "Wird geprüft...", "popupmessageconnected": "Verbindung erfolgreich wiederhergestellt", "popupmessagedisconnected": "Bitte überprüfen Sie Ihre Verbindung", "popupmessagechecking": "Serververbindung wird geprüft"}}, "en": {"WebuiConnectionMonitor": {"connectedtext": "Connected to server", "disconnectedtext": "Disconnected from server", "checkingtext": "Checking...", "popupmessageconnected": "Connection successfully restored", "popupmessagedisconnected": "Please check your connection", "popupmessagechecking": "Checking server connection"}}, "tr": {"WebuiConnectionMonitor": {"connectedtext": "Sunucuya bağlantı kuruldu", "disconnectedtext": "Sunucu bağlantısı kesildi", "checkingtext": "Kontrol ediliyor...", "popupmessageconnected": "Bağlantı başarıyla yeniden kuruldu", "popupmessagedisconnected": "Lütfen bağlantınızı kontrol edin", "popupmessagechecking": "Sunucu bağlantısı kontrol ediliyor"}}}}

package/default-controls/controls/alarms/alarm-viewer.control

@@ -0,0 +1 @@
+{"properties": {"jsonsignal": {"type": "signal", "default": "myalarm.0.info.AlarmJson"}, "acksignal": {"type": "signal", "default": "myalarm.0.info.AcknowledgeId"}, "adapterinstance": {"type": "string", "default": "myalarm.0"}, "mode": {"type": "enum", "default": "live", "values": ["live", "history"]}, "showfilter": {"type": "enum", "default": "true", "values": ["true", "false"]}, "soundenabled": {"type": "enum", "default": "false", "values": ["true", "false"]}, "soundurl": {"type": "string", "default": ""}, "maxrows": {"type": "number", "default": 500}}, "settings": {"width": "1000px", "height": "420px"}, "html": "<div id=\"wrap\" class=\"av\"><audio id=\"snd\" loop style=\"display:none\"></audio><div class=\"av-bar\"><span class=\"av-title\"><t-t>alarm.title</t-t></span><span class=\"av-count\" css:display=\"[[this.unacked>0?'':'none']]\">[[this.unacked]]</span><span class=\"av-grow\"></span><div class=\"av-hist\" css:display=\"[[this.mode=='history'?'flex':'none']]\"><input id=\"from\" type=\"datetime-local\" class=\"av-inp\"><input id=\"to\" type=\"datetime-local\" class=\"av-inp\"><button class=\"av-btn\" @click=\"[[this._loadHistory()]]\"><t-t>alarm.Getalarms</t-t></button></div><button class=\"av-btn\" @click=\"[[this._exportCsv()]]\"><t-t>alarm.export</t-t></button><button class=\"av-btn av-accent\" css:display=\"[[this.mode=='live'?'':'none']]\" @click=\"[[this._ackAll()]]\"><t-t>alarm.ackall</t-t></button></div><div class=\"av-scroll\"><div class=\"av-grid av-head\"><span><t-t>alarm.id</t-t></span><span><t-t>alarm.tagname</t-t></span><span><t-t>alarm.type</t-t></span><span><t-t>alarm.time</t-t></span><span><t-t>alarm.description</t-t></span><span><t-t>alarm.limitvalue</t-t></span><span><t-t>alarm.limitmsg</t-t></span><span><t-t>alarm.highlow</t-t></span><span><t-t>alarm.value</t-t></span><span><t-t>alarm.ack</t-t></span><span><t-t>alarm.acktime</t-t></span><span><t-t>alarm.ackbtn</t-t></span></div><div class=\"av-grid av-filters\" css:display=\"[[this.showfilter=='false'?'none':'grid']]\"><input class=\"av-f\" data-f=\"id\"><input class=\"av-f\" data-f=\"Tagname\"><input class=\"av-f\" data-f=\"Alarmtype\"><input class=\"av-f\" data-f=\"alarmtime\"><input class=\"av-f\" data-f=\"Description\"><input class=\"av-f\" data-f=\"LimitValue\"><input class=\"av-f\" data-f=\"Limitmessage\"><input class=\"av-f\" data-f=\"HIGH_LOW\"><input class=\"av-f\" data-f=\"AlarmValue\"><input class=\"av-f\" data-f=\"Acknowledge\"><input class=\"av-f\" data-f=\"acknowledgetime\"><span></span></div><div class=\"av-body\"><template repeat:row=\"[[this.rows]]\"><div class=\"av-grid av-row\" class:unack=\"[[String(row.Acknowledge)!='true']]\" class:talarm=\"[[row.Alarmtype=='alarm']]\" class:twarning=\"[[row.Alarmtype=='warning']]\" class:tinfo=\"[[row.Alarmtype=='info']]\"><span title=\"[[row.id]]\">[[row.id]]</span><span title=\"[[row.Tagname]]\">[[row.Tagname]]</span><span title=\"[[row.Alarmtype]]\">[[row.Alarmtype]]</span><span title=\"[[row.alarmtime]]\">[[row.alarmtime]]</span><span title=\"[[row.Description]]\">[[row.Description]]</span><span title=\"[[row.LimitValue]]\">[[row.LimitValue]]</span><span title=\"[[row.Limitmessage]]\">[[row.Limitmessage]]</span><span title=\"[[row.HIGH_LOW]]\">[[row.HIGH_LOW]]</span><span title=\"[[row.AlarmValue]]\">[[row.AlarmValue]]</span><span>[[String(row.Acknowledge)=='true'?'\\u2713':'\\u2014']]</span><span title=\"[[row.acknowledgetime]]\">[[row.acknowledgetime]]</span><button class=\"av-ack\" @click=\"[[this._ack(row)]]\" css:visibility=\"[[String(row.Acknowledge)=='true'?'hidden':'visible']]\"><t-t>alarm.ackbtn</t-t></button></div></template><div class=\"av-empty\" css:display=\"[[this.rows.length?'none':'block']]\"><t-t>alarm.noalarms</t-t></div></div></div></div>", "style": ":host{display:block;width:100%;height:100%;font-family:'Segoe UI',system-ui,sans-serif;font-size:12px;}.av{display:flex;flex-direction:column;height:100%;box-sizing:border-box;border:1px solid var(--ui-border,#3b4250);border-radius:10px;overflow:hidden;background:var(--ui-surface,#252b38);color:var(--ui-text,#e2e6ec);-webkit-backdrop-filter:var(--ui-backdrop,none);backdrop-filter:var(--ui-backdrop,none);}.av-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;flex:none;border-bottom:1px solid var(--ui-border,#3b4250);background:var(--ui-surface-2,#2f3545);}.av-title{font-size:14px;font-weight:700;}.av-grow{flex:1;}.av-count{background:var(--ui-error,#ef4d5e);color:#fff;font-weight:700;border-radius:999px;padding:1px 8px;font-size:11px;}.av-hist{display:flex;align-items:center;gap:6px;}.av-inp{background:var(--ui-input,#3a3f4b);color:var(--ui-text,#e2e6ec);border:1px solid var(--ui-border,#3b4250);border-radius:5px;padding:3px 6px;font-size:11px;color-scheme:inherit;}.av-btn{appearance:none;cursor:pointer;border-radius:6px;padding:4px 12px;font-size:12px;font-weight:600;background:color-mix(in srgb,var(--ui-text,#fff) 8%,transparent);color:var(--ui-text,#e2e6ec);border:1px solid var(--ui-border,#3b4250);}.av-btn:hover{background:color-mix(in srgb,var(--ui-text,#fff) 14%,transparent);}.av-accent{background:color-mix(in srgb,var(--accent,#2680eb) 25%,transparent);border-color:color-mix(in srgb,var(--accent,#2680eb) 55%,transparent);}.av-scroll{flex:1;overflow:auto;min-height:0;}.av-grid{display:grid;grid-template-columns:52px 120px 86px 150px minmax(140px,1fr) 86px 130px 80px 90px 58px 150px 74px;gap:0;align-items:center;min-width:1200px;}.av-grid>*{padding:5px 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.av-head{position:sticky;top:0;z-index:2;background:var(--ui-surface-2,#2f3545);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--ui-dim,#9aa3b0);border-bottom:1px solid var(--ui-border,#3b4250);}.av-filters{position:sticky;top:26px;z-index:2;background:var(--ui-surface,#252b38);border-bottom:1px solid var(--ui-border,#3b4250);}.av-f{width:100%;box-sizing:border-box;background:var(--ui-input,#3a3f4b);color:var(--ui-text,#e2e6ec);border:1px solid var(--ui-border,#3b4250);border-radius:4px;padding:2px 5px;font-size:11px;margin:3px 4px;}.av-row{border-bottom:1px solid color-mix(in srgb,var(--ui-border,#3b4250) 55%,transparent);}.av-row:hover{background:color-mix(in srgb,var(--ui-text,#fff) 6%,transparent);}.av-row.talarm{background:color-mix(in srgb,var(--ui-error,#ef4d5e) 16%,transparent);}.av-row.twarning{background:color-mix(in srgb,var(--ui-warn,#f6b73c) 14%,transparent);}.av-row.tinfo{background:color-mix(in srgb,var(--ui-info,#2b8bff) 12%,transparent);}.av-row.unack{font-weight:700;}.av-row.unack.talarm{background:color-mix(in srgb,var(--ui-error,#ef4d5e) 30%,transparent);}.av-row.unack.twarning{background:color-mix(in srgb,var(--ui-warn,#f6b73c) 26%,transparent);}.av-ack{appearance:none;cursor:pointer;margin:2px 4px;padding:2px 8px;font-size:11px;font-weight:700;border-radius:5px;background:color-mix(in srgb,var(--ui-ok,#37d67a) 25%,transparent);color:var(--ui-text,#e2e6ec);border:1px solid color-mix(in srgb,var(--ui-ok,#37d67a) 55%,transparent);}.av-ack:hover{background:color-mix(in srgb,var(--ui-ok,#37d67a) 40%,transparent);}.av-empty{text-align:center;padding:26px;color:var(--ui-dim,#9aa3b0);}", "script": "function num(v,d){v=parseInt(v);return isNaN(v)?d:v;}\nfunction updateSound(instance){\n    const a=instance._getDomElement('snd');\n    if(!a) return;\n    const on = instance.soundenabled==='true' && instance.unacked>0 && instance.soundurl;\n    if(on){ if(a.getAttribute('src')!==instance.soundurl) a.setAttribute('src',instance.soundurl);\n        a.play().catch(()=>{}); }\n    else { a.pause(); }\n}\nfunction applyFilters(instance){\n    let rows=instance._raw||[];\n    const f=instance._filters||{};\n    for(const k in f){ const v=String(f[k]||'').toLowerCase(); if(!v) continue;\n        rows=rows.filter(r=>String(r[k]??'').toLowerCase().includes(v)); }\n    instance.unacked=(instance._raw||[]).filter(r=>String(r.Acknowledge)!=='true').length;\n    instance.rows=rows.slice(0,num(instance.maxrows,500));\n    try{ instance._bindingsRefresh(); }catch(e){}\n    updateSound(instance);\n}\nfunction setRows(instance,arr){ instance._raw=Array.isArray(arr)?arr:[]; applyFilters(instance); }\nfunction parseVal(instance,val){\n    let arr=[]; try{ arr=JSON.parse(val||'[]'); }catch(e){ arr=[]; }\n    setRows(instance,arr);\n}\nfunction inst(instance){ return instance.adapterinstance||'myalarm.0'; }\nexport function init(instance){\n    instance.rows=[]; instance._filters={}; instance.unacked=0; instance._raw=[];\n    instance._ack=(row)=>{\n        if(!row||row.id==null) return;\n        try{ window.IOB.connection._socket.emit('sendTo',inst(instance),'ackAlarm',{alarmId:row.id},()=>{}); }catch(e){}\n        if(instance.acksignal){ try{ window.IOB.setState(instance.acksignal,{val:row.id}); }catch(e){} }\n    };\n    instance._ackAll=()=>{ for(const r of (instance._raw||[])) if(String(r.Acknowledge)!=='true') instance._ack(r); };\n    instance._loadHistory=()=>{\n        const f=instance._getDomElement('from')?.value, t=instance._getDomElement('to')?.value;\n        try{ window.IOB.connection._socket.emit('sendTo',inst(instance),'getlog',{startdate:f,enddate:t},(cb)=>{\n            let d=(cb&&cb.result!==undefined)?cb.result:cb;\n            if(typeof d==='string'){ try{ d=JSON.parse(d); }catch(e){} }\n            setRows(instance, Array.isArray(d)?d:(d&&d.rows)||[]);\n        }); }catch(e){ console.warn('[alarm-viewer] getlog failed',e); }\n    };\n    instance._exportCsv=()=>{\n        const cols=['id','Tagname','Alarmtype','alarmtime','Description','LimitValue','Limitmessage','HIGH_LOW','AlarmValue','Acknowledge','acknowledgetime'];\n        const esc=(v)=>{ v=String(v??''); return (v.includes(',')||v.includes('\"')||v.includes('\\n'))?'\"'+v.replaceAll('\"','\"\"')+'\"':v; };\n        const lines=[cols.join(',')];\n        for(const r of instance.rows) lines.push(cols.map(c=>esc(r[c])).join(','));\n        const blob=new Blob([''+lines.join('\\r\\n')],{type:'text/csv;charset=utf-8'});\n        const a=document.createElement('a');\n        a.href=URL.createObjectURL(blob); a.download='alarms.csv'; a.click();\n        setTimeout(()=>URL.revokeObjectURL(a.href),2000);\n    };\n    for(const inp of instance._getDomElements('.av-f')){\n        inp.addEventListener('input',()=>{ instance._filters[inp.dataset.f]=inp.value; applyFilters(instance); });\n    }\n    const sig=instance.jsonsignal||'myalarm.0.info.AlarmJson';\n    try{ window.IOB.getState(sig).then(s=>parseVal(instance,s&&s.val)).catch(()=>{}); }catch(e){}\n    instance.__avCb=(_id,s)=>parseVal(instance,s&&s.val);\n    if((instance.mode||'live')==='live'){ try{ window.IOB.subscribeState(sig,instance.__avCb); }catch(e){} }\n}\nexport function disconnectedCallback(instance){\n    try{ window.IOB.unsubscribeState(instance.jsonsignal||'myalarm.0.info.AlarmJson',instance.__avCb); }catch(e){}\n    try{ instance._getDomElement('snd')?.pause(); }catch(e){}\n}", "translations": {"az": {"alarm": {"id": "No", "time": "Alarm Vaxtı", "type": "Alarm Tipi", "tagname": "Teq Adı", "description": "Açıqlama", "highlow": "Tip", "limitvalue": "Limit Dəyəri", "limitmsg": "Limit Mesajı", "value": "Alarm Dəyəri", "ack": "Təsdiq", "acktime": "Təsdiq Vaxtı", "ackbtn": "Təsdiqlə", "yes": "Bəli", "no": "Xeyr", "Getalarms": "Alarmları Gətir", "DownloadXLSX": "XLSX Yüklə", "DownloadCSV": "CSV Yüklə", "DownloadPDF": "PDF Yüklə", "selectdate": "Tarix aralığı seçin", "header": "Aktiv Alarmlar", "ackall": "Hamısını təsdiqlə", "clear": "Təsdiqlənənləri Sil", "mute": "Səsi Kəs", "unmute": "Səsi Aç", "title": "Alarmlar", "export": "CSV yüklə", "noalarms": "Alarm yoxdur"}}, "en": {"alarm": {"id": "ID", "time": "Alarm Time", "type": "Alarm Type", "tagname": "Tag Name", "description": "Description", "highlow": "Type", "limitvalue": "Limit Value", "limitmsg": "Limit Message", "value": "Alarm Value", "ack": "Acknowledge", "acktime": "Ack Time", "ackbtn": "ACK", "yes": "Yes", "no": "No", "Getalarms": "Get Alarms", "DownloadXLSX": "Download XLSX", "DownloadCSV": "Download CSV", "DownloadPDF": "Download PDF", "selectdate": "Select date range", "header": "Active Alarms", "ackall": "Acknowledge all", "clear": "Clear Acknowledged", "mute": "Mute Sound", "unmute": "Unmute Sound", "title": "Alarms", "export": "Export CSV", "noalarms": "No alarms"}}, "ru": {"alarm": {"id": "No", "time": "Время аларма", "type": "Тип аларма", "tagname": "Тег", "description": "Описание", "highlow": "Тип", "limitvalue": "Предел", "limitmsg": "Сообщение", "value": "Значение", "ack": "Квитирование", "acktime": "Время квит.", "ackbtn": "Квит.", "yes": "Да", "no": "Нет", "Getalarms": "Получить аларма", "DownloadXLSX": "Скачать XLSX", "DownloadCSV": "Скачать CSV", "DownloadPDF": "Скачать PDF", "selectdate": "Выберите дату", "header": "Активные аларма", "ackall": "Квитировать все", "clear": "Очистить", "mute": "Отключить звук", "unmute": "Включить звук", "title": "Алармы", "export": "Скачать CSV", "noalarms": "Нет алармов"}}, "de": {"alarm": {"id": "Nr", "time": "Alarmzeit", "type": "Alarmtyp", "tagname": "Tag-Name", "description": "Beschreibung", "highlow": "Typ", "limitvalue": "Grenzwert", "limitmsg": "Grenznachricht", "value": "Alarmwert", "ack": "Quittierung", "acktime": "Quitt.-Zeit", "ackbtn": "Quitt.", "yes": "Ja", "no": "Nein", "Getalarms": "Alarme abrufen", "DownloadXLSX": "XLSX laden", "DownloadCSV": "CSV laden", "DownloadPDF": "PDF laden", "selectdate": "Datumsbereich wählen", "header": "Aktive Alarme", "ackall": "Alle quittieren", "clear": "Bestätigte löschen", "mute": "Ton stumm", "unmute": "Ton ein", "title": "Alarme", "export": "CSV exportieren", "noalarms": "Keine Alarme"}}, "tr": {"alarm": {"id": "No", "time": "Alarm Zamanı", "type": "Alarm Tipi", "tagname": "Etiket Adı", "description": "Açıklama", "highlow": "Tip", "limitvalue": "Limit Değeri", "limitmsg": "Limit Mesajı", "value": "Alarm Değeri", "ack": "Onay", "acktime": "Onay Zamanı", "ackbtn": "Onayla", "yes": "Evet", "no": "Hayır", "Getalarms": "Alarmları Getir", "DownloadXLSX": "XLSX İndir", "DownloadCSV": "CSV İndir", "DownloadPDF": "PDF İndir", "selectdate": "Tarih Aralığı Seçin", "header": "Aktif Alarmlar", "ackall": "Tümünü onayla", "clear": "Onaylanları Sil", "mute": "Sesi Kapat", "unmute": "Sesi Aç", "title": "Alarmlar", "export": "CSV indir", "noalarms": "Alarm yok"}}}}