feat: Implement toast notifications for device status changes and events, and shorten page titles.
This commit is contained in:
sebseb7
139
status_server.js
139
status_server.js
@@ -85,7 +85,7 @@ const dashboardHTML = `<!DOCTYPE html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Shelly Status Dashboard</title>
|
||||
<title>Shelly Status</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
@@ -316,11 +316,96 @@ const dashboardHTML = `<!DOCTYPE html>
|
||||
margin-bottom: 1rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Toast notifications */
|
||||
.toast-container {
|
||||
position: fixed;
|
||||
bottom: 1.5rem;
|
||||
right: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
gap: 0.5rem;
|
||||
z-index: 1000;
|
||||
max-height: 80vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.toast {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
padding: 0.875rem 1rem;
|
||||
backdrop-filter: blur(10px);
|
||||
min-width: 280px;
|
||||
max-width: 360px;
|
||||
animation: toast-in 0.3s ease-out;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.toast.removing {
|
||||
animation: toast-out 0.3s ease-in forwards;
|
||||
}
|
||||
|
||||
@keyframes toast-in {
|
||||
from { opacity: 0; transform: translateX(100px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
|
||||
@keyframes toast-out {
|
||||
from { opacity: 1; transform: translateX(0); }
|
||||
to { opacity: 0; transform: translateX(100px); }
|
||||
}
|
||||
|
||||
.toast-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.toast-icon.online {
|
||||
background: rgba(34, 197, 94, 0.2);
|
||||
color: var(--accent-online);
|
||||
}
|
||||
|
||||
.toast-icon.offline {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
color: var(--accent-offline);
|
||||
}
|
||||
|
||||
.toast-icon.event {
|
||||
background: rgba(59, 130, 246, 0.2);
|
||||
color: var(--accent-blue);
|
||||
}
|
||||
|
||||
.toast-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.toast-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.8rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.toast-message {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 2px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>Shelly Status Dashboard</h1>
|
||||
<h1>Shelly Status</h1>
|
||||
<p class="status-indicator">
|
||||
<span class="status-dot" id="ws-dot"></span>
|
||||
<span id="connection-status">Connecting...</span>
|
||||
@@ -336,6 +421,8 @@ const dashboardHTML = `<!DOCTYPE html>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="toast-container" class="toast-container"></div>
|
||||
|
||||
<script>
|
||||
let devices = {};
|
||||
let ws;
|
||||
@@ -409,6 +496,21 @@ const dashboardHTML = `<!DOCTYPE html>
|
||||
// Update online status if it's a system.online event
|
||||
if (component === 'system' && field === 'online') {
|
||||
device.connected = event === 'true' || event === true ? 1 : 0;
|
||||
const isOnline = device.connected === 1;
|
||||
showToast(
|
||||
device.mac,
|
||||
isOnline ? \`Device Online\` : \`Device Offline\`,
|
||||
\`\${device.model}\`,
|
||||
isOnline ? 'online' : 'offline'
|
||||
);
|
||||
} else {
|
||||
// Show toast for other events
|
||||
showToast(
|
||||
device.mac,
|
||||
\`\${component}.\${field}\`,
|
||||
\`\${event}\`,
|
||||
'event'
|
||||
);
|
||||
}
|
||||
|
||||
// Re-render the specific device card
|
||||
@@ -423,6 +525,39 @@ const dashboardHTML = `<!DOCTYPE html>
|
||||
}
|
||||
}
|
||||
|
||||
function showToast(mac, title, message, type) {
|
||||
const container = document.getElementById('toast-container');
|
||||
const toast = document.createElement('div');
|
||||
toast.className = 'toast';
|
||||
|
||||
const iconSvg = type === 'online'
|
||||
? '<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/></svg>'
|
||||
: type === 'offline'
|
||||
? '<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/></svg>'
|
||||
: '<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/></svg>';
|
||||
|
||||
toast.innerHTML = \`
|
||||
<div class="toast-icon \${type}">\${iconSvg}</div>
|
||||
<div class="toast-content">
|
||||
<div class="toast-title">\${title}</div>
|
||||
<div class="toast-message">\${message}</div>
|
||||
</div>
|
||||
\`;
|
||||
|
||||
container.appendChild(toast);
|
||||
|
||||
// Auto-remove after 4 seconds
|
||||
setTimeout(() => {
|
||||
toast.classList.add('removing');
|
||||
setTimeout(() => toast.remove(), 300);
|
||||
}, 4000);
|
||||
|
||||
// Limit to 5 toasts max
|
||||
while (container.children.length > 5) {
|
||||
container.firstChild.remove();
|
||||
}
|
||||
}
|
||||
|
||||
function renderDevices() {
|
||||
const container = document.getElementById('devices-container');
|
||||
|
||||
|
||||
Reference in New Issue
Block a user