53 lines
1.6 KiB
HTML
53 lines
1.6 KiB
HTML
{% 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 %}
|