102 lines
3.5 KiB
HTML
102 lines
3.5 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block content %}
|
|
<header class="text-center mb-3">
|
|
<h4 class="mb-0">Sieć Trójfazowa / Rokietnica, Gajowa</h4>
|
|
</header>
|
|
<div class="text-center mb-3">
|
|
<h5>Dane chwilowe:</h5>
|
|
<span class="badge bg-dark border border-secondary text-muted" id="lastUpdate" style="font-size: 0.7rem;">Ładowanie...</span>
|
|
</div>
|
|
|
|
<!-- 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"><strong>230V ±10% (207V - 253V)</strong></span>
|
|
</span>
|
|
</div>
|
|
<hr class="border-dotted">
|
|
|
|
<div class="text-center mb-3">
|
|
<h5>Wybierz zakres wykresu:</h5>
|
|
</div>
|
|
<!-- Time & Reset Selector -->
|
|
<div class="d-flex justify-content-center align-items-center gap-2 mb-3 flex-wrap">
|
|
<div class="time-selector-wrapper 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 %}
|
|
<button class="btn btn-sm btn-outline-primary time-btn"
|
|
id="customRangeBtn" onclick="openCustomRangePicker()">
|
|
Własny zakres
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal dla własnego zakresu -->
|
|
<div id="customRangeModal">
|
|
<div class="modal-content">
|
|
<h3>Wybierz własny zakres</h3>
|
|
|
|
<div class="modal-form-group">
|
|
<label class="modal-label">Data i czas od:</label>
|
|
<input type="datetime-local" id="customStartDate" class="modal-input">
|
|
</div>
|
|
|
|
<div class="modal-form-group">
|
|
<label class="modal-label">Data i czas do:</label>
|
|
<input type="datetime-local" id="customEndDate" class="modal-input">
|
|
</div>
|
|
|
|
<div class="modal-buttons">
|
|
<button onclick="closeCustomRangePicker()" class="modal-btn modal-btn-cancel">Anuluj</button>
|
|
<button onclick="applyCustomRange()" class="modal-btn modal-btn-apply">Zastosuj</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Chart -->
|
|
<div class="main-chart-card" style="position: relative;">
|
|
<span id="chartRangeDisplay" class="chart-range-badge"></span>
|
|
<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ń</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/gauge.js') }}"></script>
|
|
<script src="{{ static_v('js/monitor.js') }}"></script>
|
|
<script src="{{ static_v('js/modal.js') }}"></script>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
initMonitor({{ phases|tojson }}, '{{ default_range }}');
|
|
});
|
|
</script>
|
|
{% endblock %}
|