homespeakersServer/public/script.js

(function(){
	function httpApi(url, method, callback) {
		var req = new XMLHttpRequest();
		req.onreadystatechange = function(e) {
			if (this.readyState === XMLHttpRequest.DONE)
				callback(this.status, JSON.parse(this.responseText));
		};
		req.open(method, url, true);
		req.send();
	}

	function setInputState(output, input, state) {
		httpApi("/api/setState?output=" +encodeURIComponent(output) +"&input=" +encodeURIComponent(input) +"&state=" +(state ? 1 : 0), "POST", (status, outputs) => {
			if (status !== 200)
				console.error("Cannot set output list");
			else
				displayOutputs(outputs);
		});
	}

	function makeOutputStatus(data) {
		var statusDiv = document.createElement("div");
		statusDiv.className = "status";
		if (data.status) {
			if (data.status.status.plugged) {
				var pluggedIcon = document.createElement("img");
				pluggedIcon.className = "icon"
				pluggedIcon.src = "charging.svg";
				statusDiv.appendChild(pluggedIcon);
			}
			if (data.status.status.battery !== undefined) {
				var batteryLvl = document.createElement("span"),
					batteryIcon = document.createElement("img"),
					batteryRes = [ "lowbattery.svg", "quarterbattery.svg", "batteryalmostcharged.svg", "batteryfullycharged.svg" ];
				batteryIcon.src = batteryRes[Math.min(batteryRes.length -1, Math.floor((data.status.status.battery * batteryRes.length) / 100))];
				batteryIcon.className = "icon";
				batteryLvl.appendChild(batteryIcon);
				batteryLvl.innerHTML += data.status.status.battery +"%";
				statusDiv.appendChild(batteryLvl);
			}
			if (data.status.ping) {
				var ping = document.createElement("div"),
					icon = document.createElement("img");
				icon.className = "icon";
				icon.src = "wifi.svg";
				ping.appendChild(icon);
				ping.innerHTML += data.status.ping.duration +"ms";
				statusDiv.appendChild(ping);
			}
			if (data.volumeControl) {
				var volumeControl = document.createElement("div"),
					label = document.createElement("label"),
					labelIcon = document.createElement("img"),
					labelText = document.createElement("span"),
					input = document.createElement("input"),
					submit = document.createElement("button");

				labelIcon.className = "icon";
				labelIcon.src = "volume.svg";
				labelText.textContent = "Volume: ";
				input.className = "input-percent"
				input.type = "number";
				input.min = 0;
				input.max = 100;
				input.value = data.status.status.volume;
				submit.textContent = "Set volume";
				submit.outputId = data.id;
				submit.volumeInput = input;
				submit.onclick = function() {
					var value = Math.min(100, Math.max(0, this.volumeInput.value));
					httpApi("/api/setVol?output=" +this.outputId +"&volume=" +value, "POST", () => {
						setTimeout(refreshOutput, 1000);
					});
				};

				label.appendChild(labelIcon);
				label.appendChild(labelText);
				label.appendChild(input);
				volumeControl.appendChild(label);
				volumeControl.appendChild(submit);
				statusDiv.appendChild(volumeControl);
			}
		} else {
			statusDiv.classList.add("no-status");
		}
		return statusDiv;
	}

	function makeOutputNode(data) {
		var child = document.createElement("fieldset"),
			inputList = document.createElement("ul");
		child.classList.add("output");
		child.innerHTML += "<legend>" +data.name +"</legend>";
		child.appendChild(makeOutputStatus(data));
		for (var i in data.inputs) {
			var inputItem = document.createElement("li");
			inputItem.classList.add("input");
			inputItem.classList.add(data.inputs[i] ? "input-enabled" : "input-disabled");
			inputItem.textContent = i;
			(function() {
				var output = data.id,
					input = i,
					state = data.inputs[i];
				inputItem.addEventListener("click", () => setInputState(output, input, !state));
			})();
			inputList.appendChild(inputItem);
		}
		child.appendChild(inputList);
		return child;
	}

	function displayOutputs(outputs) {
		var div = document.getElementById("outputs");
		div.innerHTML = "";
		outputs.forEach(i => div.appendChild(makeOutputNode(i)));
	}

	function refreshOutput() {
		httpApi("/api/outputs", "GET", (status, outputs) => {
			if (status !== 200)
				console.error("Cannot fetch output list");
			else
				displayOutputs(outputs);
		});
	}

	refreshOutput();
})()