refactor v2
This commit is contained in:
Mateusz Gruszczyński
@@ -1,37 +1,61 @@
|
||||
<!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="{{ static_v('css/style.css') }}">
|
||||
<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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||
|
||||
<link rel="stylesheet" href="{{ static_v('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 }} {{ footer.project }} |
|
||||
Autor:
|
||||
<a href="{{ footer.owner.url }}" target="_blank" class="text-decoration-none">
|
||||
{{ footer.owner.name }}
|
||||
</a>
|
||||
{% if footer.version %}
|
||||
| v{{ footer.version }}
|
||||
{% endif %}
|
||||
</small>
|
||||
</footer>
|
||||
<div class="container-fluid py-3 px-2 vm-shell">
|
||||
|
||||
<!-- TOPBAR -->
|
||||
<div class="vm-topbar">
|
||||
<div class="vm-topbar-left">
|
||||
<span class="vm-dot connecting" id="connDot"></span>
|
||||
<span class="vm-topbar-text" id="connText">Łączenie…</span>
|
||||
</div>
|
||||
|
||||
<div class="vm-topbar-right">
|
||||
<span class="vm-topbar-text d-none d-sm-inline" id="lastUpdateTop">Aktualizacja: —</span>
|
||||
|
||||
<button class="btn btn-sm btn-outline-info" id="openApiHelperBtn" type="button" title="API Helper">
|
||||
<i class="fa-solid fa-code"></i>
|
||||
</button>
|
||||
|
||||
<button class="btn btn-sm btn-outline-secondary" type="button" onclick="location.reload()" title="Odśwież">
|
||||
<i class="fa-solid fa-rotate-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Chart.js -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/date-fns@2.29.3/locale/pl/index.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom"></script>
|
||||
|
||||
<!-- Socket.IO -->
|
||||
<script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
|
||||
{% block content %}{% endblock %}
|
||||
|
||||
{% block scripts %}{% endblock %}
|
||||
<footer class="text-center mt-4 py-3">
|
||||
<small class="text-muted">
|
||||
© {{ footer.year }} {{ footer.project }} |
|
||||
Autor:
|
||||
<a href="{{ footer.owner.url }}" target="_blank" class="text-decoration-none">{{ footer.owner.name }}</a>
|
||||
{% if footer.version %}| v{{ footer.version }}{% endif %}
|
||||
</small>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<!-- libs -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/date-fns@2.29.3/locale/pl/index.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom"></script>
|
||||
<script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
|
||||
|
||||
<!-- app: core -->
|
||||
<script src="{{ static_v('js/socketClient.js') }}"></script>
|
||||
<script src="{{ static_v('js/topbarStatus.js') }}"></script>
|
||||
|
||||
{% block scripts %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,101 +1,218 @@
|
||||
{% 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>
|
||||
|
||||
<!-- HEADER -->
|
||||
<div class="vm-card p-3 mb-3">
|
||||
<div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-2">
|
||||
<div>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<i class="fa-solid fa-bolt text-warning"></i>
|
||||
<h4 class="mb-0">VoltMonitor</h4>
|
||||
</div>
|
||||
<div class="text-muted small mt-1">Sieć trójfazowa • Rokietnica, Gajowa</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center gap-2 flex-wrap">
|
||||
<span class="badge bg-dark border border-secondary text-muted" id="lastUpdate" style="font-size:.72rem;">Ładowanie…</span>
|
||||
<span class="badge bg-dark border border-secondary text-muted" style="font-size:.72rem;">
|
||||
PN-EN 50160: <span class="text-success fw-semibold">207–253V</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Gauge Section -->
|
||||
<div class="gauge-grid mb-1">
|
||||
<!-- GAUGES -->
|
||||
<div class="vm-card p-3 mb-3">
|
||||
<div class="d-flex align-items-center justify-content-between mb-2">
|
||||
<h6 class="mb-0"><i class="fa-solid fa-gauge-high me-2 text-info"></i>Dane chwilowe</h6>
|
||||
<span class="text-muted small">live</span>
|
||||
</div>
|
||||
|
||||
<div class="gauge-grid mb-0">
|
||||
{% 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 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>
|
||||
</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">
|
||||
<!-- CONTROLS -->
|
||||
<div class="vm-card p-3 mb-3">
|
||||
<div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-2 mb-2">
|
||||
<h6 class="mb-0"><i class="fa-solid fa-chart-line me-2 text-primary"></i>Wykres</h6>
|
||||
<div class="text-muted small">Zakres • zoom/pan • przeciągnięcie = precyzyjny wybór</div>
|
||||
</div>
|
||||
|
||||
<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 class="time-selector-wrapper mb-0">
|
||||
{% 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 }}')">
|
||||
<i class="fa-regular fa-clock me-1"></i>{{ key }}
|
||||
</button>
|
||||
{% endfor %}
|
||||
|
||||
<button class="btn btn-sm btn-outline-primary time-btn" id="customRangeBtn" onclick="openCustomRangePicker()">
|
||||
<i class="fa-solid fa-calendar-days me-1"></i>Własny
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal dla własnego zakresu -->
|
||||
<!-- Modal: custom range -->
|
||||
<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 class="modal-content">
|
||||
<h3 class="d-flex align-items-center gap-2">
|
||||
<i class="fa-solid fa-calendar-days text-primary"></i>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">
|
||||
<i class="fa-solid fa-xmark me-1"></i>Anuluj
|
||||
</button>
|
||||
<button onclick="applyCustomRange()" class="modal-btn modal-btn-apply">
|
||||
<i class="fa-solid fa-check me-1"></i>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>
|
||||
<!-- CHART -->
|
||||
<div class="main-chart-card mb-3" style="position:relative;">
|
||||
<span id="chartRangeDisplay" class="chart-range-badge"></span>
|
||||
<canvas id="voltageChart"></canvas>
|
||||
</div>
|
||||
|
||||
<!-- EVENTS -->
|
||||
<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 class="d-flex justify-content-between align-items-center mb-2 flex-wrap gap-2">
|
||||
<h6 class="mb-0"><i class="fa-solid fa-list-ul me-2 text-warning"></i>Dziennik zdarzeń</h6>
|
||||
<span id="eventRangeLabel" class="text-muted" style="font-size:.75rem;">Ładowanie…</span>
|
||||
</div>
|
||||
|
||||
<div id="eventLogContainer">
|
||||
<div class="no-events"><i class="fa-solid fa-spinner fa-spin me-2"></i>Ładowanie zdarzeń…</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal: API Helper -->
|
||||
<div id="apiHelperModal">
|
||||
<div class="modal-content vm-modal-wide">
|
||||
<div class="vm-modal-head">
|
||||
<h3 class="m-0 d-flex align-items-center gap-2">
|
||||
<i class="fa-solid fa-code text-info"></i>API Helper
|
||||
</h3>
|
||||
<button class="vm-icon-btn" type="button" id="closeApiHelperBtn" title="Zamknij">
|
||||
<i class="fa-solid fa-xmark"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="vm-modal-grid">
|
||||
<div>
|
||||
<label class="modal-label">Endpoint</label>
|
||||
<select id="apiEndpoint" class="modal-input">
|
||||
<option value="/api/timeseries/1">/api/timeseries/1</option>
|
||||
<option value="/api/timeseries/2">/api/timeseries/2</option>
|
||||
<option value="/api/timeseries/3">/api/timeseries/3</option>
|
||||
<option value="/api/events">/api/events</option>
|
||||
<option value="/api/outages/1">/api/outages/1</option>
|
||||
<option value="/api/outages/2">/api/outages/2</option>
|
||||
<option value="/api/outages/3">/api/outages/3</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="modal-label">range (opcjonalnie)</label>
|
||||
|
||||
<div class="vm-range-quick">
|
||||
<button type="button" class="vm-range-btn" data-range="6h">6h</button>
|
||||
<button type="button" class="vm-range-btn" data-range="12h">12h</button>
|
||||
<button type="button" class="vm-range-btn" data-range="24h">24h</button>
|
||||
<button type="button" class="vm-range-btn" data-range="7d">7d</button>
|
||||
<button type="button" class="vm-range-btn" data-range="30d">30d</button>
|
||||
</div>
|
||||
|
||||
<input id="apiRange" class="modal-input mt-2" placeholder="np. 24h / 7d">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="modal-label">start (opcjonalnie)</label>
|
||||
<input id="apiStart" type="datetime-local" class="modal-input">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="modal-label">end (opcjonalnie)</label>
|
||||
<input id="apiEnd" type="datetime-local" class="modal-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vm-modal-block">
|
||||
<label class="modal-label">URL</label>
|
||||
<div class="vm-inline">
|
||||
<input id="apiUrlOutput" class="modal-input vm-mono" readonly>
|
||||
<button class="modal-btn modal-btn-apply" type="button" id="copyApiUrlBtn">
|
||||
<i class="fa-regular fa-copy me-1"></i>Kopiuj
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vm-modal-block">
|
||||
<label class="modal-label">curl</label>
|
||||
<div class="vm-inline">
|
||||
<input id="apiCurlOutput" class="modal-input vm-mono" readonly>
|
||||
<button class="modal-btn modal-btn-cancel" type="button" id="copyCurlBtn">
|
||||
<i class="fa-regular fa-copy me-1"></i>Kopiuj
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vm-modal-actions">
|
||||
<button class="modal-btn modal-btn-cancel" type="button" id="genApiBtn">
|
||||
<i class="fa-solid fa-link me-1"></i>Generuj
|
||||
</button>
|
||||
<button class="modal-btn modal-btn-apply" type="button" id="callApiBtn">
|
||||
<i class="fa-solid fa-play me-1"></i>Wyślij
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="vm-modal-block">
|
||||
<label class="modal-label">Response</label>
|
||||
<pre id="apiResponse" class="vm-pre">(pusto)</pre>
|
||||
</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/state.js') }}"></script>
|
||||
<script src="{{ static_v('js/chart.js') }}"></script>
|
||||
<script src="{{ static_v('js//events.js') }}"></script>
|
||||
<script src="{{ static_v('js/data.js') }}"></script>
|
||||
<script src="{{ static_v('js/socket.js') }}"></script>
|
||||
<script src="{{ static_v('js/index.js') }}"></script>
|
||||
|
||||
<script src="{{ static_v('js/modal.js') }}"></script>
|
||||
<script src="{{ static_v('js/apiHelper.js') }}"></script>
|
||||
<script src="{{ static_v('js/pageInit.js') }}"></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
initMonitor({{ phases|tojson }}, '{{ default_range }}');
|
||||
});
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
initPage({{ phases|tojson }}, '{{ default_range }}');
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user