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

feat: Decouple status icons; use local images via icon-map.js

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:11:22 +01:00
parent 80953e7f6d
commit 8b7e832225
3 changed files with 35 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

25
static/icon-map.js Normal file
View file

@ -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'
}
};

2
static/index.html
View file

@ -5,7 +5,6 @@
<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">
@ -107,6 +106,7 @@
</div>
</div>
</div>
<script src="icon-map.js"></script>
<script src="script.js"></script>
</body>
</html>

56
static/script.js
View file

@ -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 = '<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}`;
const ltcIconSrc = iconMap.ltcStatus[data.ltc_status] || iconMap.ltcStatus.default;
statusElements.ltcStatus.innerHTML = `<img src="${ltcIconSrc}" class="status-icon" alt="${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 = '<i class="fa-solid fa-check-circle"></i> Active';
statusElements.ntpActive.innerHTML = `<img src="${ntpIconSrc}" class="status-icon" alt="Active icon"> Active`;
statusElements.ntpActive.className = 'active';
} else {
statusElements.ntpActive.innerHTML = '<i class="fa-solid fa-times-circle"></i> Inactive';
statusElements.ntpActive.innerHTML = `<img src="${ntpIconSrc}" class="status-icon" alt="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 = '<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}`;
const syncIconSrc = iconMap.syncStatus[data.sync_status] || iconMap.syncStatus.default;
statusElements.syncStatus.innerHTML = `<img src="${syncIconSrc}" class="status-icon" alt="${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 = '<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}`;
const jitterIconSrc = iconMap.jitterStatus[data.jitter_status] || iconMap.jitterStatus.default;
statusElements.jitterStatus.innerHTML = `<img src="${jitterIconSrc}" class="status-icon" alt="${data.jitter_status} icon"> ${data.jitter_status}`;
statusElements.jitterStatus.className = jitterStatusClass;
statusElements.interfaces.innerHTML = '';