diff --git a/static/icon-map.js b/static/icon-map.js new file mode 100644 index 0000000..325fae1 --- /dev/null +++ b/static/icon-map.js @@ -0,0 +1,25 @@ +// In this file, you can define the paths to your local icon image files. +const iconMap = { + ltcStatus: { + 'LOCK': 'assets/lock.svg', + 'FREE': 'assets/lock-open.svg', + 'default': 'assets/question-circle.svg' + }, + ntpActive: { + true: 'assets/check-circle.svg', + false: 'assets/times-circle.svg' + }, + syncStatus: { + 'IN SYNC': 'assets/arrows-rotate.svg', + 'CLOCK AHEAD': 'assets/forward.svg', + 'CLOCK BEHIND': 'assets/backward.svg', + 'TIMETURNING': 'assets/wand-magic-sparkles.svg', + 'default': 'assets/question-circle.svg' + }, + jitterStatus: { + 'GOOD': 'assets/thumbs-up.svg', + 'AVERAGE': 'assets/face-meh.svg', + 'BAD': 'assets/thumbs-down.svg', + 'default': 'assets/question-circle.svg' + } +}; diff --git a/static/index.html b/static/index.html index 5b78de8..e67216a 100644 --- a/static/index.html +++ b/static/index.html @@ -5,7 +5,6 @@ NTP TimeTurner -
@@ -107,6 +106,7 @@
+ diff --git a/static/script.js b/static/script.js index 2280008..901cc5e 100644 --- a/static/script.js +++ b/static/script.js @@ -41,72 +41,34 @@ document.addEventListener('DOMContentLoaded', () => { const dateMessage = document.getElementById('date-message'); function updateStatus(data) { - let ltcStatusIcon = ''; - switch (data.ltc_status) { - case 'LOCK': - ltcStatusIcon = ''; - break; - case 'FREE': - ltcStatusIcon = ''; - break; - default: - ltcStatusIcon = ''; - } - statusElements.ltcStatus.innerHTML = `${ltcStatusIcon} ${data.ltc_status}`; + const ltcIconSrc = iconMap.ltcStatus[data.ltc_status] || iconMap.ltcStatus.default; + statusElements.ltcStatus.innerHTML = `${data.ltc_status} icon ${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; + const ntpIconSrc = iconMap.ntpActive[data.ntp_active]; if (data.ntp_active) { - statusElements.ntpActive.innerHTML = ' Active'; + statusElements.ntpActive.innerHTML = `Active icon Active`; statusElements.ntpActive.className = 'active'; } else { - statusElements.ntpActive.innerHTML = ' Inactive'; + statusElements.ntpActive.innerHTML = `Inactive icon Inactive`; statusElements.ntpActive.className = 'inactive'; } 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}`; + const syncIconSrc = iconMap.syncStatus[data.sync_status] || iconMap.syncStatus.default; + statusElements.syncStatus.innerHTML = `${data.sync_status} icon ${data.sync_status}`; statusElements.syncStatus.className = syncStatusClass; statusElements.deltaMs.textContent = data.timecode_delta_ms; statusElements.deltaFrames.textContent = data.timecode_delta_frames; 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}`; + const jitterIconSrc = iconMap.jitterStatus[data.jitter_status] || iconMap.jitterStatus.default; + statusElements.jitterStatus.innerHTML = `${data.jitter_status} icon ${data.jitter_status}`; statusElements.jitterStatus.className = jitterStatusClass; statusElements.interfaces.innerHTML = '';