426 lines
16 KiB
JavaScript
426 lines
16 KiB
JavaScript
const commit = document.getElementById("commit");
|
|
const download = document.getElementById("download");
|
|
const remove = document.getElementById("remove");
|
|
const motor_table = document.getElementById("motor_table");
|
|
const motor_plot = document.getElementById("motor_plot");
|
|
const throttle_table = document.getElementById("throttle_table");
|
|
const throttle_plot = document.getElementById("throttle_plot");
|
|
const map_name = document.getElementById("map_name");
|
|
const map_id = document.getElementById("map_id");
|
|
const map_description = document.getElementById("map_description");
|
|
|
|
var changes = 0;
|
|
|
|
function setEventListeners(element, cb) {
|
|
element.onmouseenter = async function () {
|
|
this.style.backgroundColor = "blue";
|
|
};
|
|
element.onmouseleave = async function () {
|
|
this.style.backgroundColor = "";
|
|
};
|
|
element.onmousedown = async function () {
|
|
this.style.backgroundColor = "red";
|
|
};
|
|
element.ondblclick = async function () {
|
|
cb();
|
|
this.style.backgroundColor = "blue";
|
|
};
|
|
}
|
|
|
|
setEventListeners(remove, async () => {
|
|
const map_filename = (new URLSearchParams(window.location.search)).get("element");
|
|
|
|
try {
|
|
const response = await fetch(`/app/remove?element=${map_filename}`, {
|
|
method: "DELETE"
|
|
});
|
|
if (!response.ok) {
|
|
throw new Error(`Response status: ${response.status}`);
|
|
} else {
|
|
window.location.href = "/app";
|
|
}
|
|
} catch (error) {
|
|
alert(`Remove unsuccessful. ${error.message}`);
|
|
console.error(error.message);
|
|
}
|
|
});
|
|
|
|
setEventListeners(commit, async () => {
|
|
if (changes) {
|
|
const map_filename = (new URLSearchParams(window.location.search)).get("element");
|
|
let req_body = {};
|
|
|
|
req_body["meta"] = {};
|
|
req_body["throttle"] = {};
|
|
req_body["motor"] = { 0: {}, 1: {} };
|
|
|
|
if (map_name.style.backgroundColor == "blue") {
|
|
req_body["meta"]["name"] = map_name.value;
|
|
}
|
|
if (map_id.style.backgroundColor == "blue") {
|
|
req_body["meta"]["id"] = map_id.value;
|
|
}
|
|
if (map_description.style.backgroundColor == "blue") {
|
|
req_body["meta"]["description"] = map_description.value;
|
|
}
|
|
|
|
for (let i = 1; i < throttle_table.rows[1].cells.length; i++) {
|
|
if (throttle_table.rows[1].cells[i].style.backgroundColor == "blue") {
|
|
req_body["throttle"][i - 1] = throttle_table.rows[1].cells[i].firstChild.value;
|
|
}
|
|
}
|
|
|
|
for (let i = 1; i < motor_table.rows[1].cells.length; i++) {
|
|
if (motor_table.rows[1].cells[i].style.backgroundColor == "blue") {
|
|
req_body["motor"][0][i - 1] = motor_table.rows[1].cells[i].firstChild.value;
|
|
}
|
|
}
|
|
|
|
for (let i = 1; i < motor_table.rows[2].cells.length; i++) {
|
|
if (motor_table.rows[2].cells[i].style.backgroundColor == "blue") {
|
|
req_body["motor"][1][i - 1] = motor_table.rows[2].cells[i].firstChild.value;
|
|
}
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`/app/edit?element=${map_filename}`, {
|
|
method: "POST",
|
|
body: JSON.stringify(req_body),
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
}
|
|
});
|
|
if (!response.ok) {
|
|
throw new Error(`Response status: ${response.status}`);
|
|
} else {
|
|
window.location.href = "/app";
|
|
}
|
|
} catch (error) {
|
|
alert(`Edit unsuccessful. ${error.message}`);
|
|
console.error(error.message);
|
|
}
|
|
} else {
|
|
alert("Nothing to commit.");
|
|
}
|
|
});
|
|
|
|
setEventListeners(download, () => {
|
|
const map_filename = (new URLSearchParams(window.location.search)).get("element");
|
|
|
|
window.location.href = `/app/download?element=${map_filename}`;
|
|
});
|
|
|
|
var parsed_map = JSON.parse(map);
|
|
|
|
(function () {
|
|
let data = [];
|
|
|
|
const throttle_percentage_row = document.createElement("tr"),
|
|
throttle_output_row = document.createElement("tr");
|
|
|
|
throttle_percentage_row.appendChild(Object.assign(document.createElement("th"), { textContent: "Throttle Value" }));
|
|
throttle_output_row.appendChild(Object.assign(document.createElement("th"), { textContent: "Throttle output" }));
|
|
|
|
for (const i in Object.keys(parsed_map)) {
|
|
let c_percentage = i * ((max_throttle * 100) / steps);
|
|
let c_output = parseFloat(parsed_map[i][2]);
|
|
|
|
data.push({ percentage: c_percentage, output: c_output });
|
|
|
|
throttle_percentage_row.appendChild(Object.assign(document.createElement("td"), { textContent: `${c_percentage}%` }));
|
|
|
|
throttle_output_row.appendChild(
|
|
Object.assign(document.createElement("td"), {})
|
|
).appendChild(
|
|
(() => {
|
|
const input = Object.assign(document.createElement("input"), {
|
|
type: "text",
|
|
style: "width: 100%; height: 100%; box-sizing: border-box; font-size: 16px;",
|
|
placeholder: c_output
|
|
})
|
|
|
|
input.onchange = async function () {
|
|
if (this.value) {
|
|
let value = parseFloat(this.value);
|
|
if (!isNaN(value) && (value != this.placeholder)) {
|
|
if (this.style.backgroundColor != "blue") {
|
|
changes++;
|
|
}
|
|
this.parentElement.style.backgroundColor = "blue";
|
|
this.style.backgroundColor = "blue";
|
|
this.value = value;
|
|
|
|
throttle_chart.data.datasets[0].data[this.parentElement.cellIndex - 1] = value;
|
|
throttle_chart.update();
|
|
} else {
|
|
if (this.style.backgroundColor == "blue") {
|
|
this.parentElement.style.backgroundColor = "";
|
|
this.style.backgroundColor = "";
|
|
changes--;
|
|
|
|
throttle_chart.data.datasets[0].data[this.parentElement.cellIndex - 1] = this.placeholder;
|
|
throttle_chart.update();
|
|
}
|
|
this.value = "";
|
|
}
|
|
} else {
|
|
this.parentElement.style.backgroundColor = "";
|
|
this.style.backgroundColor = "";
|
|
changes--;
|
|
|
|
throttle_chart.data.datasets[0].data[this.parentElement.cellIndex - 1] = this.placeholder;
|
|
throttle_chart.update();
|
|
}
|
|
}
|
|
|
|
return input;
|
|
})()
|
|
);
|
|
}
|
|
|
|
throttle_table.appendChild(throttle_percentage_row);
|
|
throttle_table.appendChild(throttle_output_row);
|
|
|
|
const throttle_chart = new Chart(
|
|
throttle_plot,
|
|
{
|
|
type: "line",
|
|
data: {
|
|
labels: data.map(row => row.percentage),
|
|
datasets: [
|
|
{
|
|
label: "Throttle output",
|
|
data: data.map(row => row.output)
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false
|
|
}
|
|
}
|
|
);
|
|
})();
|
|
|
|
(function () {
|
|
let data = [];
|
|
|
|
const rpm_row = document.createElement("tr"),
|
|
motor_current_row = document.createElement("tr"),
|
|
motor_brake_current_row = document.createElement("tr");
|
|
|
|
rpm_row.appendChild(Object.assign(document.createElement("th"), { textContent: "RPM" }));
|
|
motor_current_row.appendChild(Object.assign(document.createElement("th"), { textContent: "Max motor current" }));
|
|
motor_brake_current_row.appendChild(Object.assign(document.createElement("th"), { textContent: "Max motor brake current" }));
|
|
|
|
for (const i in Object.keys(parsed_map)) {
|
|
let c_rpm = i * (max_rpm / steps);
|
|
let c_mc = parseInt(parsed_map[i][0]);
|
|
let c_mbc = parseInt(parsed_map[i][1]);
|
|
data.push({ rpm: c_rpm, motor_current: c_mc, motor_brake_current: c_mbc });
|
|
|
|
rpm_row.appendChild(Object.assign(document.createElement("td"), { textContent: c_rpm }));
|
|
|
|
motor_current_row.appendChild(
|
|
Object.assign(document.createElement("td"), {})
|
|
).appendChild(
|
|
(() => {
|
|
const input = Object.assign(document.createElement("input"), {
|
|
type: "text",
|
|
style: "width: 100%; height: 100%; box-sizing: border-box; font-size: 16px;",
|
|
placeholder: c_mc
|
|
})
|
|
|
|
input.onchange = async function () {
|
|
if (this.value) {
|
|
let value = parseInt(this.value);
|
|
if (!isNaN(value) && (value != this.placeholder)) {
|
|
if (this.style.backgroundColor != "blue") {
|
|
changes++;
|
|
}
|
|
this.parentElement.style.backgroundColor = "blue";
|
|
this.style.backgroundColor = "blue";
|
|
this.value = value;
|
|
|
|
motor_chart.data.datasets[0].data[this.parentElement.cellIndex - 1] = value;
|
|
motor_chart.update();
|
|
} else {
|
|
if (this.style.backgroundColor == "blue") {
|
|
this.parentElement.style.backgroundColor = "";
|
|
this.style.backgroundColor = "";
|
|
changes--;
|
|
}
|
|
this.value = "";
|
|
|
|
motor_chart.data.datasets[0].data[this.parentElement.cellIndex - 1] = this.placeholder;
|
|
motor_chart.update();
|
|
}
|
|
} else {
|
|
this.parentElement.style.backgroundColor = "";
|
|
this.style.backgroundColor = "";
|
|
changes--;
|
|
|
|
motor_chart.data.datasets[0].data[this.parentElement.cellIndex - 1] = this.placeholder;
|
|
motor_chart.update();
|
|
}
|
|
}
|
|
|
|
return input;
|
|
})()
|
|
);
|
|
|
|
motor_brake_current_row.appendChild(
|
|
Object.assign(document.createElement("td"), {})
|
|
).appendChild(
|
|
(() => {
|
|
const input = Object.assign(document.createElement("input"), {
|
|
type: "text",
|
|
style: "width: 100%; height: 100%; box-sizing: border-box; font-size: 16px;",
|
|
placeholder: c_mbc
|
|
})
|
|
|
|
input.onchange = async function () {
|
|
if (this.value) {
|
|
let value = parseInt(this.value);
|
|
if (!isNaN(value) && (value != this.placeholder)) {
|
|
if (this.style.backgroundColor != "blue") {
|
|
changes++;
|
|
}
|
|
this.parentElement.style.backgroundColor = "blue";
|
|
this.style.backgroundColor = "blue";
|
|
this.value = value;
|
|
|
|
motor_chart.data.datasets[1].data[this.parentElement.cellIndex - 1] = value;
|
|
motor_chart.update();
|
|
} else {
|
|
if (this.style.backgroundColor == "blue") {
|
|
this.parentElement.style.backgroundColor = "";
|
|
this.style.backgroundColor = "";
|
|
changes--;
|
|
}
|
|
this.value = "";
|
|
|
|
motor_chart.data.datasets[1].data[this.parentElement.cellIndex - 1] = this.placeholder;
|
|
motor_chart.update();
|
|
}
|
|
} else {
|
|
this.parentElement.style.backgroundColor = "";
|
|
this.style.backgroundColor = "";
|
|
changes--;
|
|
|
|
motor_chart.data.datasets[1].data[this.parentElement.cellIndex - 1] = this.placeholder;
|
|
motor_chart.update();
|
|
}
|
|
}
|
|
|
|
return input;
|
|
})()
|
|
);
|
|
}
|
|
|
|
motor_table.appendChild(rpm_row);
|
|
motor_table.appendChild(motor_current_row);
|
|
motor_table.appendChild(motor_brake_current_row);
|
|
|
|
const motor_chart = new Chart(
|
|
motor_plot,
|
|
{
|
|
type: "line",
|
|
data: {
|
|
labels: data.map(row => row.rpm),
|
|
datasets: [
|
|
{
|
|
label: "Max motor current",
|
|
data: data.map(row => row.motor_current)
|
|
},
|
|
{
|
|
label: "Max motor brake current",
|
|
data: data.map(row => row.motor_brake_current)
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false
|
|
}
|
|
}
|
|
);
|
|
})();
|
|
|
|
(function () {
|
|
const map_meta_json = JSON.parse(map_meta);
|
|
|
|
if ("name" in map_meta_json) {
|
|
map_name.placeholder = map_meta_json["name"];
|
|
map_name.value = "";
|
|
}
|
|
if ("id" in map_meta_json) {
|
|
map_id.placeholder = map_meta_json["id"];
|
|
map_id.value = "";
|
|
}
|
|
if ("description" in map_meta_json) {
|
|
map_description.placeholder = map_meta_json["description"];
|
|
map_description.value = "";
|
|
}
|
|
|
|
map_name.onchange = async function () {
|
|
if (this.value == this.placeholder) {
|
|
this.value = "";
|
|
this.style.backgroundColor = "";
|
|
this.parentElement.style.backgroundColor = "";
|
|
changes--;
|
|
} else {
|
|
if (this.style.backgroundColor == "") {
|
|
this.style.backgroundColor = "blue";
|
|
this.parentElement.style.backgroundColor = "blue";
|
|
changes++;
|
|
}
|
|
}
|
|
}
|
|
|
|
map_id.onchange = async function () {
|
|
let value = parseInt(this.value);
|
|
|
|
if (!isNaN(value)) {
|
|
if (this.value == this.placeholder) {
|
|
if (this.style.backgroundColor == "blue") {
|
|
this.style.backgroundColor = "";
|
|
this.parentElement.style.backgroundColor = "";
|
|
changes--;
|
|
}
|
|
this.value = "";
|
|
} else {
|
|
if (this.style.backgroundColor == "") {
|
|
this.style.backgroundColor = "blue";
|
|
this.parentElement.style.backgroundColor = "blue";
|
|
changes++;
|
|
}
|
|
this.value = value;
|
|
}
|
|
} else {
|
|
if (this.style.backgroundColor == "blue") {
|
|
this.style.backgroundColor = "";
|
|
this.parentElement.style.backgroundColor = "";
|
|
changes--;
|
|
}
|
|
|
|
this.value = "";
|
|
}
|
|
}
|
|
|
|
map_description.onchange = async function () {
|
|
if (this.value == this.placeholder) {
|
|
this.value = "";
|
|
this.style.backgroundColor = "";
|
|
this.parentElement.style.backgroundColor = "";
|
|
changes--;
|
|
} else {
|
|
if (this.style.backgroundColor == "") {
|
|
this.style.backgroundColor = "blue";
|
|
this.parentElement.style.backgroundColor = "blue";
|
|
changes++;
|
|
}
|
|
}
|
|
}
|
|
})();
|