Code for the main.js starting point in the Pi Simulator

main.js

var rhit = rhit || {};

rhit.PiSimulatorController = class {
	
	constructor() {
		// No separate model object.  Just do it within the controller.
		this.button = 1;
		this.leds = {red: 0, yellow: 1, green: 0};
		this.servos = [-45, 0, 90];


		// There are SO many elements and HTML ids that I made a map of them.
		// Step #1 make an array of many ids that are used.
		const ids = ["getStatusButton",
			"redValue",
			"yellowValue",
			"greenValue",
			"joint1Value",
			"joint2Value",
			"joint3Value",
			"pushbuttonValue",
			"setServosButton",
			"redOnButton",
			"redOffButton",
			"yellowOnButton",
			"yellowOffButton",
			"greenOnButton",
			"greenOffButton",
			"joint1Input",
			"joint2Input",
			"joint3Input"
		];
		// Step #2 make a map using that array
		this.elements = {};
		ids.forEach(idName => {
			this.elements[idName] = document.querySelector(`#${idName}`);
		});

		// Step #3 Add on the wierd toggle elements that I used (and now regret using)
		this.redToggleElements = [
			document.querySelector("#redOnButton"),
			document.querySelector("#redOnInput"),  // Not visible but still set.
			document.querySelector("#redOffButton"),
			document.querySelector("#redOffInput"),  // Not visible but still set.
		];
		this.yellowToggleElements = [
			document.querySelector("#yellowOnButton"),
			document.querySelector("#yellowOnInput"),  // Not visible but still set.
			document.querySelector("#yellowOffButton"),
			document.querySelector("#yellowOffInput"),  // Not visible but still set.
		];
		this.greenToggleElements = [
			document.querySelector("#greenOnButton"),
			document.querySelector("#greenOnInput"),  // Not visible but still set.
			document.querySelector("#greenOffButton"),
			document.querySelector("#greenOffInput"),  // Not visible but still set.
		];


		this.elements.getStatusButton.onclick = (event) => {
			console.log("TODO: Get Status");
			// TODO: Communicate with the server
		};
		this.elements.setServosButton.onclick = (event) => {
			console.log("TODO: Set Servos");
			const newAngles = [
				parseInt(this.elements.joint1Input.value),
				parseInt(this.elements.joint2Input.value),
				parseInt(this.elements.joint3Input.value)
			];
			// TODO: Communicate with the server
		};
		this.elements.redOnButton.onclick = (event) => {
			console.log("TODO: Handle Red on");
			// TODO: Communicate with the server
		};
		this.elements.redOffButton.onclick = (event) => {
			console.log("TODO: Handle Red off");
			// TODO: Communicate with the server
		};
		this.elements.yellowOnButton.onclick = (event) => {
			console.log("TODO: Handle Yellow on");
			// TODO: Communicate with the server
		};
		this.elements.yellowOffButton.onclick = (event) => {
			console.log("TODO: Handle Yellow off");
			// TODO: Communicate with the server
		};
		this.elements.greenOnButton.onclick = (event) => {
			console.log("TODO: Handle Green on");
			// TODO: Communicate with the server
		};
		this.elements.greenOffButton.onclick = (event) => {
			console.log("TODO: Handle Green off");
			// TODO: Communicate with the server
		};

		// TODO: Communicate with the server to get the status
		this.updateView();
	}

	ledString(value) {
		return value == 1 ? "On" : "Off"
	}

	buttonString(value) {
		return value == 1 ? "High" : "Low"
	}

	updateView() {
		// Updating the text in the GET area
		this.elements.redValue.innerHTML = this.ledString(this.leds["red"]);
		this.elements.yellowValue.innerHTML = this.ledString(this.leds["yellow"]);
		this.elements.greenValue.innerHTML = this.ledString(this.leds["green"]);
		
		this.elements.joint1Value.innerHTML = this.servos[0];
		this.elements.joint2Value.innerHTML = this.servos[1];
		this.elements.joint3Value.innerHTML = this.servos[2];
		this.elements.pushbuttonValue.innerHTML = this.buttonString(this.button);

		// Updating the elements in the SET area
		this.elements.joint1Input.value = this.servos[0];
		this.elements.joint2Input.value = this.servos[1];
		this.elements.joint3Input.value = this.servos[2];
		this.updateToggle(this.redToggleElements, this.leds["red"]);
		this.updateToggle(this.yellowToggleElements, this.leds["yellow"]);
		this.updateToggle(this.greenToggleElements, this.leds["green"]);
	}

	updateToggle(elements, isOn) {
		// This got ugly and I regretted using this HTML complexity.  Oh well.
		// Element order: onButton, onInput, offButton, offInput
		elements.forEach((element, index) => {
			if (index == 0 || index == 2) { // The buttons
				// Buttons: 0 is the on button, 2 is the off button
				if (index == 0 && isOn || index == 2 && !isOn) {
					$(element).addClass("active");
				} else {
					$(element).removeClass("active");
				}
			} else {
				// Inputs: 1 is the on input, 3 is the off input
				$(element).prop('checked', index == 1 && isOn || index == 3 && !isOn);
			}
		});
	}
}

/* Main */
/** function and class syntax examples */
rhit.main = function () {
	console.log("Ready");
	new rhit.PiSimulatorController();
};

rhit.main();