tesla-charge-controller/webapp/script.js

const api_url = window.location.protocol + "//" + window.location.hostname + ":" + window.location.port;

Object.prototype.disable = function () {
	var that = this;
	for (var i = 0, len = that.length; i < len; i++) {
		that[i].disabled = true;
	}
	return that;
};

Object.prototype.enable = function () {
	var that = this;
	for (var i = 0, len = that.length; i < len; i++) {
		that[i].disabled = false;
	}
	return that;
};


function init_main() {
	refresh_interval = register(refresh);

	refresh();
	document.addEventListener("visibilitychange", () => {
		if (document.hidden) {
			clearInterval(refresh_interval);
		} else {
			refresh();
			refresh_interval = register(refresh);
		}
	});
}

function init_pid() {
	refresh_gains();
	document.addEventListener("visibilitychange", () => {
		if (!document.hidden) {
			refresh_gains();
		}
	});
}

function init_shutoff() {
	refresh_shutoff();
	document.addEventListener("visibilitychange", () => {
		if (!document.hidden) {
			refresh_shutoff();
		}
	});
}

function init_info() {
	refresh_interval = register(refresh_info);

	refresh_info();
	document.addEventListener("visibilitychange", () => {
		if (document.hidden) {
			clearInterval(refresh_interval);
		} else {
			refresh_info();
			refresh_interval = register(refresh_info);
		}
	});
}

function init_regulator() {

	refresh_interval = register(refresh_regulator_state);

	refresh_regulator_state();
	document.addEventListener("visibilitychange", () => {
		if (document.hidden) {
			clearInterval(refresh_interval);
		} else {
			refresh_regulator_state();
			refresh_interval = register(refresh_regulator_state);
		}
	});
}

function register(func) {
	return setInterval(func, 5000);
}

function flash() {
	fetch(api_url + "/flash", { method: "POST" });
}

var is_automatic_control;
var current_min_rate;
var current_max_rate;

const delay = (time) => {
	return new Promise(resolve => setTimeout(resolve, time));
};

function set_minimum() {
	var set_button = document.getElementById("set-minimum");
	var number_input = document.getElementById("min-rate");
	if (!isNaN(number_input.value)) {
		set_button.disabled = true;
		number_input.disabled = true;
		fetch(api_url + "/set-min/" + number_input.value, { method: "POST" })
			.then(async (response) => {
				let delayres = await delay(100);
				refresh_buttons();
			});
	}
}

function change_min() {
	var set_button = document.getElementById("set-minimum");
	var number_input = document.getElementById("min-rate");
	set_button.disabled = (number_input.value == current_min_rate);
}

function set_maximum() {
	var set_button = document.getElementById("set-maximum");
	var number_input = document.getElementById("max-rate");
	if (!isNaN(number_input.value)) {
		set_button.disabled = true;
		number_input.disabled = true;
		fetch(api_url + "/set-max/" + number_input.value, { method: "POST" })
			.then(async (response) => {
				let delayres = await delay(100);
				refresh_buttons();
			});
	}
}

function change_max() {
	var set_button = document.getElementById("set-maximum");
	var number_input = document.getElementById("max-rate");
	set_button.disabled = (number_input.value == current_max_rate);
}

function set_proportional() {
	var set_button = document.getElementById("set-proportional");
	var number_input = document.getElementById("proportional-gain");
	if (!isNaN(number_input.value)) {
		set_button.disabled = true;
		number_input.disabled = true;
		fetch(api_url + "/pid-settings/proportional/" + number_input.value, { method: "POST" })
			.then(async (response) => {
				let delayres = await delay(100);
				refresh_gains();
			});
	}
}

function set_derivative() {
	var set_button = document.getElementById("set-derivative");
	var number_input = document.getElementById("derivative-gain");
	if (!isNaN(number_input.value)) {
		set_button.disabled = true;
		number_input.disabled = true;
		fetch(api_url + "/pid-settings/derivative/" + number_input.value, { method: "POST" })
			.then(async (response) => {
				let delayres = await delay(100);
				refresh_gains();
			});
	}
}

function set_shutoff_voltage() {
	var set_button = document.getElementById("set-shutoff-voltage");
	var number_input = document.getElementById("shutoff-voltage");
	if (!isNaN(number_input.value)) {
		set_button.disabled = true;
		number_input.disabled = true;
		fetch(api_url + "/shutoff/voltage/" + number_input.value, { method: "POST" })
			.then(async (response) => {
				let delayres = await delay(100);
				refresh_shutoff();
			});
	}
}

function set_shutoff_time() {
	var set_button = document.getElementById("set-shutoff-time");
	var number_input = document.getElementById("shutoff-time");
	if (!isNaN(number_input.value)) {
		set_button.disabled = true;
		number_input.disabled = true;
		fetch(api_url + "/shutoff/time/" + number_input.value, { method: "POST" })
			.then(async (response) => {
				let delayres = await delay(100);
				refresh_shutoff();
			});
	}
}

function set_regulator_state() {
	var set_button = document.getElementById("set-regulator-state");
	var state_input = document.getElementById("regstate");

	set_button.disabled = true;
	state_input.disabled = true;

	fetch(api_url + "/set-regulator-state/" + state_input.value, { method: "POST" })
		.then(async (response) => {
			let delayres = await delay(300);
			refresh_regulator_state();
		});

}

function set_load_divisor() {
	var set_button = document.getElementById("set-load-divisor");
	var number_input = document.getElementById("load-divisor");
	if (!isNaN(number_input.value)) {
		set_button.disabled = true;
		number_input.disabled = true;
		fetch(api_url + "/pid-settings/load_divisor/" + number_input.value, { method: "POST" })
			.then(async (response) => {
				let delayres = await delay(100);
				refresh_gains();
			});
	}
}

function disable_automatic_control() {
	if (is_automatic_control) {
		document.getElementById('control-disabled').checked = true;
		document.body.classList.add("loading");

		fetch(api_url + "/disable-control", { method: "POST" })
			.then(async (response) => {
				let delayres = await delay(100);
				refresh_buttons();
			});
	}
}

function enable_automatic_control() {
	if (!is_automatic_control) {
		document.getElementById('control-enabled').checked = true;
		document.body.classList.add("loading");
		fetch(api_url + "/enable-control", { method: "POST" })
			.then(async (response) => {
				let delayres = await delay(100);
				refresh_buttons();
			});
	}
}

function update_control_buttons(data) {
	current_max_rate = data.max_rate;
	current_min_rate = data.min_rate;

	var number_input_min = document.getElementById("min-rate");
	if (number_input_min.disabled || number_input_min.value == "") {
		number_input_min.value = data.min_rate;
		number_input_min.disabled = false;
	}
	document.getElementById("set-minimum").disabled = (number_input_min.value == current_min_rate);

	var number_input_max = document.getElementById("max-rate");
	if (number_input_max.disabled || number_input_max.value == "") {
		number_input_max.value = data.max_rate;
		number_input_max.disabled = false;
	}
	document.getElementById("set-maximum").disabled = (number_input_max.value == current_max_rate);

	document.body.classList.remove("loading");
	is_automatic_control = data.control_enable;
	if (data.control_enable) {
		document.getElementById('control-enabled').checked = true;
	} else {
		document.getElementById('control-disabled').checked = true;
	}

	var control_selector = document.getElementById("control-selector");
	if (data.is_charging_at_home) {
		if (control_selector.classList.contains('disabled')) {
			control_selector.classList.remove('disabled');
		}
		document.getElementsByName('control').enable();
	}
	else {
		if (!control_selector.classList.contains('disabled')) {
			control_selector.classList.add('disabled');
		}
		document.getElementsByName('control').disable();
	}
}

function refresh_gains() {
	fetch(api_url + "/pid-settings/status")
		.then((response) => response.json())
		.then((json) => update_gains(json));
}

function update_gains(data) {
	var proportional_set_button = document.getElementById("set-proportional");
	var proportional_number_input = document.getElementById("proportional-gain");
	proportional_set_button.disabled = false;
	proportional_number_input.disabled = false;
	proportional_number_input.value = data.proportional_gain;
	var derivative_set_button = document.getElementById("set-derivative");
	var derivative_number_input = document.getElementById("derivative-gain");
	derivative_set_button.disabled = false;
	derivative_number_input.disabled = false;
	derivative_number_input.value = data.derivative_gain;
	var load_divisor_button = document.getElementById("set-load-divisor");
	var load_divisor_input = document.getElementById("load-divisor");
	load_divisor_button.disabled = false;
	load_divisor_input.disabled = false;
	load_divisor_input.value = data.load_divisor;
}

function refresh_shutoff() {
	fetch(api_url + "/shutoff/status")
		.then((response) => response.json())
		.then((json) => update_shutoff(json));
}

function refresh_regulator_state() {
	var set_button = document.getElementById("set-regulator-state");
	var state_input = document.getElementById("regstate");

	set_button.disabled = false;
	state_input.disabled = false;

	fetch(api_url + "/regulator-state")
		.then((response) => response.json())
		.catch(() => null)
		.then((json) => update_regulator_state(json));
}

function update_shutoff(data) {
	var voltage_set_button = document.getElementById("set-shutoff-voltage");
	var voltage_number_input = document.getElementById("shutoff-voltage");
	voltage_set_button.disabled = false;
	voltage_number_input.disabled = false;
	voltage_number_input.value = data.voltage;
	var time_set_button = document.getElementById("set-shutoff-time");
	var time_number_input = document.getElementById("shutoff-time");
	time_set_button.disabled = false;
	time_number_input.disabled = false;
	time_number_input.value = data.time;
}

function update_regulator_state(state) {
	console.log(state);
	if (state == null) { var cur = "Unknown" } else { var cur = state.regulator_state }

	var current_state = document.getElementById("current-state");
	current_state.textContent = "Current state: " + cur;
}

function refresh_buttons() {
	fetch(api_url + "/control-state")
		.then((response) => response.json())
		.then((json) => update_control_buttons(json));
}

function refresh() {
	set_favicon(null);

	refresh_buttons();

	fetch(api_url + "/car-state")
		.then((response) => response.json())
		.then((json) => update_state(json));
}

function refresh_info() {
	set_favicon(null);

	fetch(api_url + "/car-state")
		.then((response) => response.json())
		.then((json) => update_info(json));
}

function update_info(state) {
	set_favicon(state.charge_state);

	var info_div = document.getElementById("info");
	while (info_div.childElementCount > 0) { info_div.removeChild(info_div.firstChild) }

	el = document.createElement('p');

	state_json = document.createElement('pre');
	state_json.appendChild(document.createTextNode(JSON.stringify(state, null, '\t')));
	el.appendChild(state_json);
	info_div.appendChild(el);
}

function update_state(state) {
	set_favicon(state.charge_state);

	var info_div = document.getElementById("info");
	while (info_div.childElementCount > 0) { info_div.removeChild(info_div.firstChild) }

	el = document.createElement('p');

	var charging_state_info = "";

	switch (state.charge_state.charging_state) {
		case "Charging":
			charging_state_info = "charging at " + state.charge_state.charge_rate + "A";
			break;
		case "Stopped":
			charging_state_info = "charge stopped";
			break;
		case "Disconnected":
			charging_state_info = "disconnected"
			break;
	}

	if (state.location_data.home) {
		if (state.charge_state.charging_state == "Charging") {
			charging_state_info = "set at " + state.charge_state.charge_current_request + "A, " + charging_state_info;
		}
		charging_state_info = "At home; " + charging_state_info;
	} else {
		charging_state_info = "Not home; " + charging_state_info;
	}

	el.appendChild(document.createTextNode(charging_state_info));

	info_div.appendChild(el);
}

function set_favicon(charge_state) {
	let favicon = document.getElementById("favicon");

	favicon.setAttribute("href", "data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>" + get_emoji(charge_state) + "</text></svg>");
}

function get_emoji(charge_state) {
	if (charge_state == null) {
		return "⏳";
	}
	else if (charge_state.charge_rate > 0) {
		return "🔌";
	} else if (charge_state.battery_level < 60) {
		return "🪫"
	} else return "🔋";
}