This commit is contained in:
2025-03-05 16:41:17 +02:00
parent f913062ea9
commit 4837372702
5 changed files with 564 additions and 20 deletions

View File

@@ -27,6 +27,18 @@
color: #6c757d;
text-align: right;
}
.status-indicator {
width: 20px;
height: 20px;
display: inline-block;
border-radius: 50%;
}
.status-on {
background-color: #28a745;
}
.status-off {
background-color: #dc3545;
}
</style>
<script>
function updateLogs() {
@@ -41,6 +53,22 @@
logItem.innerHTML = `<strong>${log.timestamp}</strong>: ${log.message}`;
logsContainer.appendChild(logItem);
});
// Update relay status indicators and messages
for (let i = 1; i <= 4; i++) {
const relayIndicator = document.getElementById(`relay-status-${i}`);
relayIndicator.className = `status-indicator ${data.relay_status[`relay${i}`] === 'on' ? 'status-on' : 'status-off'}`;
const relayMessage = document.getElementById(`relay-message-${i}`);
relayMessage.innerText = data.logs.find(log => log.message.includes(`Relay ${i} turned`)).message;
}
// Update input status indicators and messages
for (let i = 1; i <= 4; i++) {
const inputIndicator = document.getElementById(`input-status-${i}`);
inputIndicator.className = `status-indicator ${data.input_status[`input${i}`] === 'on' ? 'status-on' : 'status-off'}`;
const inputMessage = document.getElementById(`input-message-${i}`);
inputMessage.innerText = data.logs.find(log => log.message.includes(`Input ${i}`)).message;
}
});
}
@@ -73,7 +101,7 @@
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="col-md-6">
<div class="card mb-4">
<div class="card-body">
<h5 class="card-title">Logs for {{ hostname }}</h5>
@@ -87,6 +115,38 @@
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
{% for i in range(4) %}
<div class="col-md-6 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Relay {{ i + 1 }}</h5>
<p class="card-text">Status:
<span id="relay-status-{{ i + 1 }}" class="status-indicator {{ 'status-on' if relay_status[i] == 'on' else 'status-off' }}"></span>
</p>
<p class="card-text" id="relay-message-{{ i + 1 }}">{{ relay_messages[i] }}</p>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="row">
{% for i in range(4) %}
<div class="col-md-6 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Input {{ i + 1 }}</h5>
<p class="card-text">Status:
<span id="input-status-{{ i + 1 }}" class="status-indicator {{ 'status-on' if input_status[i] == 'on' else 'status-off' }}"></span>
</p>
<p class="card-text" id="input-message-{{ i + 1 }}">{{ input_messages[i] }}</p>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</body>