68 lines
2.3 KiB
HTML
68 lines
2.3 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block content %}
|
|
<header class="text-center mb-3">
|
|
<h5 class="mb-0">Sieć Trójfazowa / Rokietnica, Gajowa</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 & Reset Selector -->
|
|
<div class="d-flex justify-content-center align-items-center gap-2 mb-3 flex-wrap">
|
|
<div class="d-flex gap-1 align-items-center">
|
|
{% for key, r in time_ranges.items() %}
|
|
<button class="btn btn-sm btn-outline-primary time-btn {% if key == default_range %}active{% endif %}"
|
|
style="min-width: 45px; height: 31px; display: flex; align-items: center; justify-content: center;"
|
|
data-range="{{ key }}" onclick="changeTimeRange('{{ key }}')">
|
|
{{ key }}
|
|
</button>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Chart -->
|
|
<div class="main-chart-card mb-3">
|
|
<canvas id="voltageChart"></canvas>
|
|
</div>
|
|
|
|
<div class="events-card mb-3">
|
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
|
<h6 class="mb-0">Dziennik zdarzeń (zaniki faz)</h6>
|
|
<span id="eventRangeLabel" class="text-muted" style="font-size: 0.75rem;">Ładowanie...</span>
|
|
</div>
|
|
<div id="eventLogContainer">
|
|
<div class="no-events">Ładowanie zdarzeń...</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script src="{{ static_v('js/monitor.js') }}"></script>
|
|
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
initMonitor({{ phases|tojson }}, '{{ default_range }}');
|
|
});
|
|
</script>
|
|
{% endblock %}
|