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>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<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">
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||||
<style>
|
<style>
|
||||||
:root {
|
:root {
|
||||||
@@ -316,11 +316,96 @@ const dashboardHTML = `<!DOCTYPE html>
|
|||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
opacity: 0.5;
|
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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<h1>Shelly Status Dashboard</h1>
|
<h1>Shelly Status</h1>
|
||||||
<p class="status-indicator">
|
<p class="status-indicator">
|
||||||
<span class="status-dot" id="ws-dot"></span>
|
<span class="status-dot" id="ws-dot"></span>
|
||||||
<span id="connection-status">Connecting...</span>
|
<span id="connection-status">Connecting...</span>
|
||||||
@@ -335,6 +420,8 @@ const dashboardHTML = `<!DOCTYPE html>
|
|||||||
<p>Loading devices...</p>
|
<p>Loading devices...</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div id="toast-container" class="toast-container"></div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
let devices = {};
|
let devices = {};
|
||||||
@@ -409,6 +496,21 @@ const dashboardHTML = `<!DOCTYPE html>
|
|||||||
// Update online status if it's a system.online event
|
// Update online status if it's a system.online event
|
||||||
if (component === 'system' && field === 'online') {
|
if (component === 'system' && field === 'online') {
|
||||||
device.connected = event === 'true' || event === true ? 1 : 0;
|
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
|
// 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() {
|
function renderDevices() {
|
||||||
const container = document.getElementById('devices-container');
|
const container = document.getElementById('devices-container');
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user