dwelling-radio/web/assets/js/main.js

function $(id) { return document.getElementById(id); }

function updateRadioStatus() {
	fetch("/status")
	.then(r => r.json())
	.then(r => {
		$("radio-status").innerHTML = 
			`On-air since <time datetime="${r.server_start_iso8601}">${r.server_start_date}</time>`;
		$("radio-song").textContent = r.song;
		$("radio-listeners").textContent = r.listeners;
		$("radio-listener-peak").textContent = r.listener_peak;
	}).catch(() => {
		$("radio-status").textContent = "Radio is offline.";
		$("radio-song").textContent = "";
		$("radio-listeners").textContent =
			$("radio-listener-peak").textContent = "0";
	});
}

function updateLastPlayedSong() {
	fetch('/lastsong')
	.then(r => r.json())
	.then(last_played => {
		if ($('last-played').firstChild === null)
			$('last-played').appendChild(document.createElement("tbody"))
		else if (last_played.time == $('last-played').firstChild.lastChild.firstChild.innerText)
			return;

		if ($('last-played').firstChild.children.length == 10)
			$('last-played').firstChild.firstChild.remove();

		let row = $('last-played').insertRow();
		row.insertCell().appendChild(document.createTextNode(last_played.time));
		row.insertCell().appendChild(document.createTextNode(last_played.listeners == 0 ? "" : last_played.listeners));
		row.insertCell().appendChild(document.createTextNode(last_played.song));
	});
}

document.getElementById("btn-update").addEventListener("click", () => {
	updateLastPlayedSong();
	updateRadioStatus();
})

setInterval(updateRadioStatus, 45000);
setInterval(updateLastPlayedSong, 45000);