+
+
${start.toLocaleDateString('pl-PL', {day:'2-digit', month:'2-digit'})}, ${timeRangeStr}
+
+ ${phase.label}:
+ ${cfg.label} przez ${dur} min.
+
+
Brak zarejestrowanych zdarzeń w tym zakresie.
';
+ }
+};
+
+window.showEventOnChart = function showEventOnChart(startTimeStr) {
+ const eventTime = new Date(startTimeStr).getTime();
+ const padding = 3 * 60 * 60 * 1000;
+
+ const min = eventTime - padding;
+ const max = eventTime + padding;
+
+ if (window.voltageChart) {
+ document.querySelectorAll('.time-btn').forEach(b => b.classList.remove('active'));
+
+ window.voltageChart.options.scales.x.min = min;
+ window.voltageChart.options.scales.x.max = max;
+
+ window.currentTimeRange = 'precise';
+ window.reloadDataForRange(min, max);
+ }
+};
\ No newline at end of file
diff --git a/static/js/index.js b/static/js/index.js
new file mode 100644
index 0000000..4e63c19
--- /dev/null
+++ b/static/js/index.js
@@ -0,0 +1,25 @@
+window.initMonitor = function initMonitor(phases, defaultRange) {
+ window.phasesConfig = phases;
+ window.currentTimeRange = defaultRange;
+
+ setupGauges();
+ window.setupMainChart();
+ window.bindMonitorSocketHandlers();
+
+ window.changeTimeRange(window.currentTimeRange);
+};
+
+window.changeTimeRange = function changeTimeRange(range) {
+ window.currentTimeRange = range;
+
+ if (window.voltageChart) {
+ window.voltageChart.options.scales.x.min = undefined;
+ window.voltageChart.options.scales.x.max = undefined;
+ }
+
+ document.querySelectorAll('.time-btn').forEach(btn => btn.classList.remove('active'));
+ const activeBtn = document.querySelector(`[data-range="${range}"]`);
+ if (activeBtn) activeBtn.classList.add('active');
+
+ window.reloadDataForRange(null, null, range);
+};
\ No newline at end of file
diff --git a/static/js/modal.js b/static/js/modal.js
index 65a0f47..cf186fc 100644
--- a/static/js/modal.js
+++ b/static/js/modal.js
@@ -1,11 +1,7 @@
-/**
- * Otwiera modal z wyborem własnego zakresu dat
- */
function openCustomRangePicker() {
const modal = document.getElementById('customRangeModal');
if (!modal) return;
- // Ustaw domyślne wartości - od 24h temu do teraz
const now = new Date();
const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000);
@@ -15,17 +11,11 @@ function openCustomRangePicker() {
modal.style.display = 'flex';
}
-/**
- * Zamyka modal z wyborem zakresu
- */
function closeCustomRangePicker() {
const modal = document.getElementById('customRangeModal');
if (modal) modal.style.display = 'none';
}
-/**
- * Stosuje wybrany własny zakres
- */
async function applyCustomRange() {
const startInput = document.getElementById('customStartDate');
const endInput = document.getElementById('customEndDate');
@@ -74,9 +64,6 @@ async function applyCustomRange() {
}
}
-/**
- * Formatuje datę do formatu datetime-local input
- */
function formatDateTimeLocal(date) {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
@@ -87,7 +74,6 @@ function formatDateTimeLocal(date) {
return `${year}-${month}-${day}T${hours}:${minutes}`;
}
-// Zamknij modal po kliknięciu poza nim
document.addEventListener('click', function(event) {
const modal = document.getElementById('customRangeModal');
if (modal && event.target === modal) {
diff --git a/static/js/monitor.js b/static/js/monitor.js
index 3b7b4da..9f9b1fd 100644
--- a/static/js/monitor.js
+++ b/static/js/monitor.js
@@ -1,4 +1,6 @@
-const socket = io();
+window.socket = io();
+const socket = window.socket;
+
let currentTimeRange = '6h';
let phasesConfig = {};
const gauges = {};
diff --git a/static/js/pageInit.js b/static/js/pageInit.js
new file mode 100644
index 0000000..2382b21
--- /dev/null
+++ b/static/js/pageInit.js
@@ -0,0 +1,5 @@
+function initPage(phases, defaultRange) {
+ if (typeof initMonitor === 'function') {
+ initMonitor(phases, defaultRange);
+ }
+}
\ No newline at end of file
diff --git a/static/js/socket.js b/static/js/socket.js
new file mode 100644
index 0000000..eb31f2c
--- /dev/null
+++ b/static/js/socket.js
@@ -0,0 +1,39 @@
+window.bindMonitorSocketHandlers = function bindMonitorSocketHandlers() {
+ const socket = window.socket;
+ if (!socket) return;
+
+ socket.on('voltage_update', (data) => {
+ Object.keys(window.phasesConfig).forEach(id => {
+ const val = data['phase' + id];
+ const textEl = document.getElementById('value' + id);
+ if (val !== undefined && val !== null && textEl) {
+ const num = parseFloat(val);
+ textEl.textContent = num.toFixed(1) + 'V';
+ textEl.style.color = num < 200 ? '#dc3545' : (num > 260 ? '#ffc107' : '#fff');
+ updateGaugeUI(id, num);
+ }
+ });
+
+ if (data.timestamp) {
+ const el = document.getElementById('lastUpdate');
+ if (el) {
+ el.textContent = 'Ostatni odczyt: ' + new Date(data.timestamp).toLocaleTimeString('pl-PL', { hour12: false });
+ }
+
+ const ts = new Date(data.timestamp).getTime();
+ if (!isNaN(ts)) window.lastLiveTs = ts;
+
+ const ms = window.rangeToMs(window.currentTimeRange);
+ if (ms && window.lastLiveTs) {
+ window.updateRangeLabel(window.lastLiveTs - ms, window.lastLiveTs);
+ }
+ }
+ });
+
+ socket.on('refresh_timeseries', async () => {
+ if (window.currentTimeRange === 'precise') return;
+
+ window.disableChartAnimationOnce = true;
+ await window.reloadDataForRange(null, null, window.currentTimeRange);
+ });
+};
diff --git a/static/js/socketClient.js b/static/js/socketClient.js
new file mode 100644
index 0000000..acb6fa5
--- /dev/null
+++ b/static/js/socketClient.js
@@ -0,0 +1 @@
+window.socket = window.socket || io();
\ No newline at end of file
diff --git a/static/js/state.js b/static/js/state.js
new file mode 100644
index 0000000..da7cb0d
--- /dev/null
+++ b/static/js/state.js
@@ -0,0 +1,16 @@
+window.currentTimeRange = window.currentTimeRange || '6h';
+window.phasesConfig = window.phasesConfig || {};
+window.gauges = window.gauges || {};
+window.voltageChart = window.voltageChart || null;
+window.THRESHOLDS = window.THRESHOLDS || { min: 207, max: 253 };
+window.disableChartAnimationOnce = window.disableChartAnimationOnce || false;
+window.lastLiveTs = null;
+
+window.rangeToMs = function(r){
+ const m = String(r||'').trim().match(/^(\d+)\s*([mhdw])$/i);
+ if(!m) return null;
+ const n = parseInt(m[1],10);
+ const u = m[2].toLowerCase();
+ const mult = { m:60e3, h:3600e3, d:86400e3, w:7*86400e3 }[u];
+ return n * mult;
+};
\ No newline at end of file
diff --git a/static/js/topbarStatus.js b/static/js/topbarStatus.js
new file mode 100644
index 0000000..103f98d
--- /dev/null
+++ b/static/js/topbarStatus.js
@@ -0,0 +1,35 @@
+(function () {
+ const dot = () => document.getElementById('connDot');
+ const txt = () => document.getElementById('connText');
+ const lastTop = () => document.getElementById('lastUpdateTop');
+
+ function setStatus(state) {
+ const d = dot(), t = txt();
+ if (!d || !t) return;
+
+ d.classList.remove('online', 'offline', 'connecting');
+ if (state === 'online') { d.classList.add('online'); t.textContent = 'Online'; }
+ else if (state === 'offline') { d.classList.add('offline'); t.textContent = 'Offline'; }
+ else { d.classList.add('connecting'); t.textContent = 'Łączenie…'; }
+ }
+
+ function bind() {
+ if (!window.socket) { setStatus('offline'); return; }
+
+ setStatus('connecting');
+ window.socket.on('connect', () => setStatus('online'));
+ window.socket.on('disconnect', () => setStatus('offline'));
+ if (window.socket.io) window.socket.io.on('reconnect_attempt', () => setStatus('connecting'));
+
+ window.socket.on('voltage_update', (data) => {
+ if (!data || !data.timestamp) return;
+ const el = lastTop();
+ if (!el) return;
+ const t = new Date(data.timestamp);
+ const s = t.toLocaleTimeString('pl-PL', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' });
+ el.textContent = `Aktualizacja: ${s}`;
+ });
+ }
+
+ document.addEventListener('DOMContentLoaded', bind);
+})();
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index f89ebbc..2960368 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -1,37 +1,61 @@
-
- {% block content %}{% endblock %}
-
+
+
+
+
+
+
+ Łączenie…
+
+
+
+ Aktualizacja: —
+
+
+
+
+
-
-
-
-
-
-
-
+ {% block content %}{% endblock %}
- {% block scripts %}{% endblock %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {% block scripts %}{% endblock %}
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index 9058c2e..9430db5 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,101 +1,218 @@
{% extends 'base.html' %}
{% block content %}
-
- Sieć Trójfazowa / Rokietnica, Gajowa
-
-
-
Dane chwilowe:
-
Ładowanie...
+
+
+
+
+
+
+
+
VoltMonitor
+
+
Sieć trójfazowa • Rokietnica, Gajowa
+
+
+
+ Ładowanie…
+
+ PN-EN 50160: 207–253V
+
+
+
-
-
+
+
+
+
Dane chwilowe
+ live
+
+
+
{% for id, phase in phases.items() %}
-
-
-
-
{{ phase.label }}
-
---
+
+
{{ phase.label }}
+
---
{% endfor %}
+
-
-
-
- Norma PN-EN 50160: 230V ±10% (207V - 253V)
-
-
-
+
+
+
+
Wykres
+
Zakres • zoom/pan • przeciągnięcie = precyzyjny wybór
+
-
-
Wybierz zakres wykresu:
-
-
-
-
- {% for key, r in time_ranges.items() %}
-
- {% endfor %}
-
-
+
+ {% for key, r in time_ranges.items() %}
+
+ {% endfor %}
+
+
+
-
+
-
-
Wybierz własny zakres
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+ Własny zakres
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
+
+
+
+
+
-
-
Dziennik zdarzeń
- Ładowanie...
-
-
+
+
Dziennik zdarzeń
+ Ładowanie…
+
+
+
+
+
+
+
+
+
+ API Helper
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{% endblock %}
{% block scripts %}
-
+
+
+
+
+
+
+
+
+
+
-{% endblock %}
+{% endblock %}
\ No newline at end of file