chaos/NTP-Timeturner
1
0
Fork 0
mirror of https://github.com/cjfranko/NTP-Timeturner.git synced 2025-11-08 10:22:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: Add Font Awesome icons for status indicators

Browse source 
Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>
This commit is contained in:
Chris Frankland-Wright 2025-08-07 23:05:03 +01:00
parent 32712d1f3c
commit dad59ed9ff
2 changed files with 57 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

1
static/index.html
View file

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NTP TimeTurner</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
</head>
<body>
<div class="container">

63
static/script.js
View file

@ -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 = '<i class="fa-solid fa-lock"></i>';
break;
case 'FREE':
ltcStatusIcon = '<i class="fa-solid fa-lock-open"></i>';
break;
default:
ltcStatusIcon = '<i class="fa-solid fa-question-circle"></i>';
}
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 = '<i class="fa-solid fa-check-circle"></i> Active';
statusElements.ntpActive.className = 'active';
} else {
statusElements.ntpActive.innerHTML = '<i class="fa-solid fa-times-circle"></i> 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 = '<i class="fa-solid fa-arrows-rotate"></i>';
break;
case 'CLOCK AHEAD':
syncIcon = '<i class="fa-solid fa-forward"></i>';
break;
case 'CLOCK BEHIND':
syncIcon = '<i class="fa-solid fa-backward"></i>';
break;
case 'TIMETURNING':
syncIcon = '<i class="fa-solid fa-wand-magic-sparkles"></i>';
break;
default:
syncIcon = '<i class="fa-solid fa-question-circle"></i>';
}
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 = '<i class="fa-solid fa-thumbs-up"></i>';
break;
case 'AVERAGE':
jitterIcon = '<i class="fa-solid fa-face-meh"></i>';
break;
case 'BAD':
jitterIcon = '<i class="fa-solid fa-thumbs-down"></i>';
break;
default:
jitterIcon = '<i class="fa-solid fa-question-circle"></i>';
}
statusElements.jitterStatus.innerHTML = `${jitterIcon} ${data.jitter_status}`;
statusElements.jitterStatus.className = jitterStatusClass;
statusElements.interfaces.innerHTML = '';
if (data.interfaces.length > 0) {