gru/voltage-monitor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

poprawki

Browse Source
This commit is contained in:
Mateusz Gruszczyński
2026-02-04 14:55:40 +01:00
parent 64887698d2
commit 18c67fd728
4 changed files with 218 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
static/js/monitor.js
View File

@@ -260,57 +260,88 @@ function renderEventLog(events, range) {
const container = document.getElementById('eventLogContainer');
if (!container) return;
container.innerHTML = '';
if (events && events.error === "range_too_large") {
container.innerHTML = `
<div style="text-align: center; padding: 30px; color: #ffbb33; border: 1px dashed #ffbb33; border-radius: 12px; margin: 10px;">
<div style="font-size: 2rem; margin-bottom: 10px;">⚠️</div>
<p style="margin: 0;">${events.message}</p>
</div>`;
return;
}
if (events && events.length > 0) {
events.forEach(ev => {
const start = new Date(ev.start);
const end = new Date(ev.end);
const dur = ev.duration;
const dur = ev.duration;
const phase = phasesConfig[ev.phase];
const typeConfig = {
'zanik': { label: 'Brak zasilania', color: '#ff4444' },
'niskie': { label: 'Zbyt niskie', color: '#ffbb33' },
'wysokie': { label: 'Zbyt wysokie', color: '#aa66cc' }
};
const config = typeConfig[ev.type] || { label: 'Problem', color: '#888' };
const item = document.createElement('div');
item.className = 'event-item';
item.style.display = 'flex';
item.style.alignItems = 'center';
item.style.gap = '10px';
item.style.justifyContent = 'space-between';
const dateOpt = { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit', hour12: false };
const timeRangeStr = `${start.toLocaleTimeString('pl-PL', {hour:'2-digit', minute:'2-digit'})} - ${end.toLocaleTimeString('pl-PL', {hour:'2-digit', minute:'2-digit'})}`;
item.innerHTML = `
<div class="event-badge" style="background-color: ${phase.color}"></div>
<div class="event-time">${start.toLocaleString('pl-PL', dateOpt)} - ${end.toLocaleTimeString('pl-PL', {hour:'2-digit', minute:'2-digit'})}</div>
<div class="event-desc" style="flex-grow: 1;">Faza <strong>${phase.label}</strong>: brak przez ${dur} min.</div>
<button class="btn btn-sm btn-outline-info show-event-btn" title="Pokaż 3h wokół zdarzenia"
style="padding: 2px 8px; font-size: 11px; height: 24px; color: #58a6ff; border-color: #30363d; min-width: 50px;">
Pokaż
<div style="display: flex; align-items: center; flex-grow: 1;">
<!-- Badge statusu z pierścieniem w kolorze fazy -->
<div class="event-badge" style="
background-color: ${config.color};
box-shadow: 0 0 0 2px ${phase.color};
margin-left: 2px;
margin-right: 14px;
width: 10px; height: 10px;">
</div>
<div class="event-time">
<div>${start.toLocaleDateString('pl-PL', {day:'2-digit', month:'2-digit'})}, ${timeRangeStr}</div>
</div>
<div class="event-desc">
<span style="color: ${phase.color}; font-weight: bold;">${phase.label}</span>:
<strong>${config.label}</strong> przez ${dur} min.
</div>
</div>
<button onclick="showEventOnChart('${ev.start}')" class="time-btn" style="padding: 4px 8px !important; margin-left: 10px;">
Pokaż 🔍
</button>
`;
const btn = item.querySelector('.show-event-btn');
btn.addEventListener('click', async () => {
const eventCenter = start.getTime() + (end.getTime() - start.getTime()) / 2;
const windowMs = 3 * 60 * 60 * 1000;
const viewStart = eventCenter - (windowMs / 2);
const viewEnd = eventCenter + (windowMs / 2);
document.querySelectorAll('.time-btn').forEach(b => b.classList.remove('active'));
currentTimeRange = 'precise';
if (voltageChart) {
voltageChart.options.scales.x.min = undefined;
voltageChart.options.scales.x.max = undefined;
}
await reloadDataForRange(viewStart, viewEnd, null);
document.getElementById('voltageChart').scrollIntoView({ behavior: 'smooth' });
});
container.appendChild(item);
});
} else {
container.innerHTML = '<div class="no-events">Brak zarejestrowanych zaników.</div>';
container.innerHTML = '<div class="no-events">Brak zarejestrowanych zdarzeń w tym zakresie.</div>';
}
}
/**
* Funkcja przybliżająca wykres do konkretnego zdarzenia (zakres 3h)
*/
window.showEventOnChart = function(startTimeStr) {
const eventTime = new Date(startTimeStr).getTime();
const padding = 1.5 * 60 * 60 * 1000; // 1.5 godziny w milisekundach
const min = eventTime - padding;
const max = eventTime + padding;
if (voltageChart) {
document.querySelectorAll('.time-btn').forEach(b => b.classList.remove('active'));
voltageChart.options.scales.x.min = min;
voltageChart.options.scales.x.max = max;
currentTimeRange = 'precise';
reloadDataForRange(min, max);
}
};
function setupGauges() {
const config = {