gru/voltage-monitor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

push

Browse Source
This commit is contained in:
Mateusz Gruszczyński
2026-02-03 21:43:42 +01:00
commit e3724e1249
12 changed files with 474 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
templates/base.html Normal file
View File

@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="pl" data-bs-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>VoltMonitor</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
<div class="container-fluid py-3 px-2">
{% block content %}{% endblock %}
<footer class="text-center mt-4 py-3">
<small class="text-muted">
© {{ footer.year }} <a href="https://{{ footer.author }}" target="_blank" class="text-decoration-none">{{ footer.author }}</a>
</small>
</footer>
</div>
<script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0.0/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
{% block scripts %}{% endblock %}
</body>
</html>

52
templates/index.html Normal file
View File

@@ -0,0 +1,52 @@
{% extends 'base.html' %}
{% block content %}
<header class="text-center mb-3">
<h5 class="mb-0">⚡ Sieć Trójfazowa</h5>
<span class="badge bg-dark border border-secondary text-muted" id="lastUpdate" style="font-size: 0.7rem;">Ładowanie...</span>
</header>
<!-- Gauge Section -->
<div class="gauge-grid mb-1">
{% for id, phase in phases.items() %}
<div class="gauge-card">
<div class="gauge-canvas-container">
<canvas id="gauge{{ id }}"></canvas>
</div>
<div class="gauge-label">{{ phase.label }}</div>
<div class="voltage-value" id="value{{ id }}">---</div>
</div>
{% endfor %}
</div>
<!-- Informacja o normie napięcia -->
<div class="text-center mb-3">
<span class="badge bg-dark border border-secondary text-muted" style="font-size: 0.65rem; font-weight: 400; opacity: 0.8;">
Norma PN-EN 50160: <span class="text-success">230V ±10% (207V - 253V)</span>
</span>
</div>
<!-- Time Selector -->
<div class="time-btn-container mb-3">
{% for key, r in time_ranges.items() %}
<button class="btn btn-sm btn-outline-primary time-btn {% if key == default_range %}active{% endif %}"
data-range="{{ key }}" onclick="changeTimeRange('{{ key }}')">
{{ key }}
</button>
{% endfor %}
</div>
<!-- Main Chart -->
<div class="main-chart-card mb-3">
<canvas id="voltageChart"></canvas>
</div>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='js/monitor.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
initMonitor({{ phases|tojson }}, '{{ default_range }}');
});
</script>
{% endblock %}