status in der settings hinzugefügt aktualisieren button hinzugefügt
This commit is contained in:
parent
86af6b9b10
commit
eb95281642
|
|
@ -324,6 +324,66 @@
|
||||||
border: 1px solid #3a3a5a;
|
border: 1px solid #3a3a5a;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Status Badges */
|
||||||
|
.status-badges {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
margin-top: 8px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-badge {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 5px;
|
||||||
|
padding: 4px 10px;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-badge.smoke {
|
||||||
|
background: #1a3a1a;
|
||||||
|
color: #4ade80;
|
||||||
|
border: 1px solid #22c55e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-badge.smoke.active {
|
||||||
|
background: #5c1a1a;
|
||||||
|
color: #ff6b6b;
|
||||||
|
border: 1px solid #dc3545;
|
||||||
|
animation: pulse-red 1.5s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-badge.siren {
|
||||||
|
background: #1a2a3a;
|
||||||
|
color: #60a5fa;
|
||||||
|
border: 1px solid #3b82f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-badge.siren.active {
|
||||||
|
background: #5c3a1a;
|
||||||
|
color: #ffa502;
|
||||||
|
border: 1px solid #ff9500;
|
||||||
|
animation: pulse-orange 1.5s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-badge.no-siren {
|
||||||
|
background: #2a2a3a;
|
||||||
|
color: #888;
|
||||||
|
border: 1px solid #444;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse-red {
|
||||||
|
0%, 100% { opacity: 1; }
|
||||||
|
50% { opacity: 0.6; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse-orange {
|
||||||
|
0%, 100% { opacity: 1; }
|
||||||
|
50% { opacity: 0.6; }
|
||||||
|
}
|
||||||
|
|
||||||
.card-header {
|
.card-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
@ -522,6 +582,24 @@
|
||||||
box-shadow: 0 5px 20px rgba(56, 239, 125, 0.4);
|
box-shadow: 0 5px 20px rgba(56, 239, 125, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.refresh-page-btn {
|
||||||
|
flex: 1;
|
||||||
|
padding: 15px;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
border: none;
|
||||||
|
border-radius: 10px;
|
||||||
|
color: white;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform 0.2s, box-shadow 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refresh-page-btn:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
.empty-state {
|
.empty-state {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 30px;
|
padding: 30px;
|
||||||
|
|
@ -615,6 +693,13 @@
|
||||||
💾 Alle Gruppen speichern
|
💾 Alle Gruppen speichern
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Refresh Button -->
|
||||||
|
<div class="actions" style="margin-top: 15px;">
|
||||||
|
<button class="refresh-page-btn" onclick="refreshPage()">
|
||||||
|
🔄 Seite aktualisieren
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -627,6 +712,7 @@
|
||||||
let smokeEntities = [];
|
let smokeEntities = [];
|
||||||
let sirenEntities = [];
|
let sirenEntities = [];
|
||||||
let mobileAppEntities = [];
|
let mobileAppEntities = [];
|
||||||
|
let entityStates = {}; // Aktueller Zustand aller Entities
|
||||||
|
|
||||||
let groupCounter = 0;
|
let groupCounter = 0;
|
||||||
let detectorCounter = 0;
|
let detectorCounter = 0;
|
||||||
|
|
@ -772,6 +858,12 @@
|
||||||
if (statesResponse.ok) {
|
if (statesResponse.ok) {
|
||||||
const states = await statesResponse.json();
|
const states = await statesResponse.json();
|
||||||
|
|
||||||
|
// Alle States speichern für Status-Anzeige
|
||||||
|
entityStates = {};
|
||||||
|
states.forEach(s => {
|
||||||
|
entityStates[s.entity_id] = s.state;
|
||||||
|
});
|
||||||
|
|
||||||
// Rauchmelder
|
// Rauchmelder
|
||||||
smokeEntities = states
|
smokeEntities = states
|
||||||
.filter(s => s.entity_id.startsWith('binary_sensor.') &&
|
.filter(s => s.entity_id.startsWith('binary_sensor.') &&
|
||||||
|
|
@ -1443,6 +1535,13 @@
|
||||||
detector.sensor ||
|
detector.sensor ||
|
||||||
'Neuer Rauchmelder';
|
'Neuer Rauchmelder';
|
||||||
|
|
||||||
|
// Status ermitteln
|
||||||
|
const smokeState = detector.sensor ? entityStates[detector.sensor] : null;
|
||||||
|
const sirenState = detector.siren ? entityStates[detector.siren] : null;
|
||||||
|
|
||||||
|
const smokeActive = smokeState === 'on';
|
||||||
|
const sirenActive = sirenState === 'on';
|
||||||
|
|
||||||
return `
|
return `
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
|
|
@ -1454,6 +1553,26 @@
|
||||||
<button class="delete-btn" onclick="deleteDetector(${group.id}, ${detector.id})">🗑️</button>
|
<button class="delete-btn" onclick="deleteDetector(${group.id}, ${detector.id})">🗑️</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
${detector.sensor || detector.siren ? `
|
||||||
|
<div class="status-badges">
|
||||||
|
${detector.sensor ? `
|
||||||
|
<span class="status-badge smoke ${smokeActive ? 'active' : ''}">
|
||||||
|
${smokeActive ? '🔴 RAUCH ERKANNT' : '✅ Kein Rauch'}
|
||||||
|
${smokeState ? '' : ' (unbekannt)'}
|
||||||
|
</span>
|
||||||
|
` : ''}
|
||||||
|
${detector.siren ? `
|
||||||
|
<span class="status-badge siren ${sirenActive ? 'active' : ''}">
|
||||||
|
${sirenActive ? '🔔 Sirene AN' : '🔕 Sirene aus'}
|
||||||
|
${sirenState ? '' : ' (unbekannt)'}
|
||||||
|
</span>
|
||||||
|
` : `
|
||||||
|
<span class="status-badge no-siren">
|
||||||
|
⚠️ Keine Sirene
|
||||||
|
</span>
|
||||||
|
`}
|
||||||
|
</div>
|
||||||
|
` : ''}
|
||||||
<div class="card-fields">
|
<div class="card-fields">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>Rauchmelder-Sensor</label>
|
<label>Rauchmelder-Sensor</label>
|
||||||
|
|
@ -1668,9 +1787,43 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Seite komplett neu laden
|
||||||
|
function refreshPage() {
|
||||||
|
window.location.reload();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Status automatisch aktualisieren (alle 5 Sekunden)
|
||||||
|
async function refreshStatus() {
|
||||||
|
const token = getToken();
|
||||||
|
if (!token) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch('/api/states', {
|
||||||
|
headers: {
|
||||||
|
'Authorization': `Bearer ${token}`,
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
const states = await response.json();
|
||||||
|
entityStates = {};
|
||||||
|
states.forEach(s => {
|
||||||
|
entityStates[s.entity_id] = s.state;
|
||||||
|
});
|
||||||
|
renderGroups();
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.log('Status-Refresh fehlgeschlagen:', error.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Start
|
// Start
|
||||||
checkIframeMode();
|
checkIframeMode();
|
||||||
init();
|
init();
|
||||||
|
|
||||||
|
// Status alle 5 Sekunden aktualisieren
|
||||||
|
setInterval(refreshStatus, 5000);
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue