Feature: Ontime (#373)

* Feature: Ontime support, WebSocket, Embedded fonts.

* Fix: Clock matching operator view

Also more notes showing

* Fix: ws path+font assets
This commit is contained in:
Linus Wileryd
2026-05-15 15:39:29 +02:00
committed by GitHub
parent 857226a702
commit c3ddbd8353
16 changed files with 768 additions and 0 deletions
+81
View File
@@ -0,0 +1,81 @@
<%
function formatMs(ms) {
if (ms === null || ms === undefined) return '--:--';
var neg = ms < 0;
var abs = Math.abs(ms);
var h = Math.floor(abs / 3600000);
var m = Math.floor((abs % 3600000) / 60000);
var s = Math.floor((abs % 60000) / 1000);
var result = h > 0
? h + ':' + String(m).padStart(2, '0') + ':' + String(s).padStart(2, '0')
: m + ':' + String(s).padStart(2, '0');
return (neg ? '-' : '') + result;
}
function formatClock(ms) {
if (ms === null || ms === undefined) return '';
var h = Math.floor(ms / 3600000) % 24;
var m = Math.floor((ms % 3600000) / 60000);
return String(h).padStart(2, '0') + ':' + String(m).padStart(2, '0');
}
var playback = data.timer ? data.timer.playback : 'stop';
var current = data.timer ? data.timer.current : null;
var duration = data.timer ? data.timer.duration : null;
var overtime = current !== null && current < 0;
%>
<header>
<h1><%= listName %></h1>
</header>
<div class="ontime-top-bar <%= playback %><%= overtime ? ' overtime' : '' %>">
<div class="ontime-top-section">
<div class="ontime-top-label">Running timer</div>
<div class="ontime-timer-value"><%= formatMs(current) %></div>
<% if (data.timer && data.timer.addedTime && data.timer.addedTime !== 0) { %>
<div class="ontime-added-time"><%= data.timer.addedTime > 0 ? '+' : '' %><%= Math.round(data.timer.addedTime / 1000) %>s</div>
<% } %>
</div>
<% if (data.clock !== null && data.clock !== undefined) { %>
<div class="ontime-top-section ontime-top-clock">
<div class="ontime-top-label">Time now</div>
<div class="ontime-clock-value"><%= formatClock(data.clock) %></div>
</div>
<% } %>
</div>
<% if (duration !== null && duration !== undefined && duration > 0) { %>
<% var elapsed = data.timer && data.timer.elapsed !== null && data.timer.elapsed !== undefined ? data.timer.elapsed : null; %>
<% var pct = elapsed !== null ? Math.max(0, Math.min(100, (elapsed / duration) * 100)) : 0; %>
<div class="ontime-progress-bar"><div class="ontime-progress-fill" style="width:<%= Math.round(pct) %>%"></div></div>
<% } %>
<% if (data.eventNow) { %>
<div class="ontime-event ontime-event-now" style="<%= data.eventNow.colour ? 'border-left-color:' + data.eventNow.colour : '' %>">
<div class="ontime-event-header">
<span class="ontime-event-cue"><%= data.eventNow.cue || '' %></span>
<span class="ontime-event-label">Now</span>
</div>
<div class="ontime-event-title"><%= data.eventNow.title || '' %></div>
<% if (data.eventNow.timeStart !== undefined && data.eventNow.timeEnd !== undefined) { %>
<div class="ontime-event-times"><%= formatClock(data.eventNow.timeStart) %> <%= formatClock(data.eventNow.timeEnd) %></div>
<% } %>
<% if (data.eventNow.note) { %>
<div class="ontime-event-note"><%= data.eventNow.note %></div>
<% } %>
</div>
<% } %>
<% if (data.eventNext) { %>
<div class="ontime-event ontime-event-next" style="<%= data.eventNext.colour ? 'border-left-color:' + data.eventNext.colour : '' %>">
<div class="ontime-event-header">
<span class="ontime-event-cue"><%= data.eventNext.cue || '' %></span>
<span class="ontime-event-label">Next</span>
</div>
<div class="ontime-event-title"><%= data.eventNext.title || '' %></div>
<% if (data.eventNext.timeStart !== undefined && data.eventNext.timeEnd !== undefined) { %>
<div class="ontime-event-times"><%= formatClock(data.eventNext.timeStart) %> <%= formatClock(data.eventNext.timeEnd) %></div>
<% } %>
<% if (data.eventNext.note) { %>
<div class="ontime-event-note"><%= data.eventNext.note %></div>
<% } %>
</div>
<% } %>