diff --git a/static/index.html b/static/index.html
index 26bf760..5b78de8 100644
--- a/static/index.html
+++ b/static/index.html
@@ -5,6 +5,7 @@
NTP TimeTurner
+
diff --git a/static/script.js b/static/script.js
index 6fd3475..2280008 100644
--- a/static/script.js
+++ b/static/script.js
@@ -41,24 +41,73 @@ document.addEventListener('DOMContentLoaded', () => {
const dateMessage = document.getElementById('date-message');
function updateStatus(data) {
- statusElements.ltcStatus.textContent = data.ltc_status;
+ let ltcStatusIcon = '';
+ switch (data.ltc_status) {
+ case 'LOCK':
+ ltcStatusIcon = '';
+ break;
+ case 'FREE':
+ ltcStatusIcon = '';
+ break;
+ default:
+ ltcStatusIcon = '';
+ }
+ statusElements.ltcStatus.innerHTML = `${ltcStatusIcon} ${data.ltc_status}`;
statusElements.ltcTimecode.textContent = data.ltc_timecode;
statusElements.frameRate.textContent = data.frame_rate;
statusElements.lockRatio.textContent = data.lock_ratio.toFixed(2);
statusElements.systemClock.textContent = data.system_clock;
statusElements.systemDate.textContent = data.system_date;
- statusElements.ntpActive.textContent = data.ntp_active ? 'Active' : 'Inactive';
- statusElements.ntpActive.className = data.ntp_active ? 'active' : 'inactive';
+ if (data.ntp_active) {
+ statusElements.ntpActive.innerHTML = ' Active';
+ statusElements.ntpActive.className = 'active';
+ } else {
+ statusElements.ntpActive.innerHTML = ' Inactive';
+ statusElements.ntpActive.className = 'inactive';
+ }
- statusElements.syncStatus.textContent = data.sync_status;
- statusElements.syncStatus.className = data.sync_status.replace(/\s+/g, '-').toLowerCase();
+ const syncStatusClass = data.sync_status.replace(/\s+/g, '-').toLowerCase();
+ let syncIcon = '';
+ switch (data.sync_status) {
+ case 'IN SYNC':
+ syncIcon = '';
+ break;
+ case 'CLOCK AHEAD':
+ syncIcon = '';
+ break;
+ case 'CLOCK BEHIND':
+ syncIcon = '';
+ break;
+ case 'TIMETURNING':
+ syncIcon = '';
+ break;
+ default:
+ syncIcon = '';
+ }
+ statusElements.syncStatus.innerHTML = `${syncIcon} ${data.sync_status}`;
+ statusElements.syncStatus.className = syncStatusClass;
statusElements.deltaMs.textContent = data.timecode_delta_ms;
statusElements.deltaFrames.textContent = data.timecode_delta_frames;
- statusElements.jitterStatus.textContent = data.jitter_status;
- statusElements.jitterStatus.className = data.jitter_status.toLowerCase();
+ const jitterStatusClass = data.jitter_status.toLowerCase();
+ let jitterIcon = '';
+ switch (data.jitter_status) {
+ case 'GOOD':
+ jitterIcon = '';
+ break;
+ case 'AVERAGE':
+ jitterIcon = '';
+ break;
+ case 'BAD':
+ jitterIcon = '';
+ break;
+ default:
+ jitterIcon = '';
+ }
+ statusElements.jitterStatus.innerHTML = `${jitterIcon} ${data.jitter_status}`;
+ statusElements.jitterStatus.className = jitterStatusClass;
statusElements.interfaces.innerHTML = '';
if (data.interfaces.length > 0) {