Initial commit
This commit is contained in:
@@ -0,0 +1,380 @@
|
||||
const commit = document.getElementById("commit");
|
||||
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 () {
|
||||
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 (let i = 0; i <= steps; i++) {
|
||||
let c_percentage = i * ((max_throttle * 100) / steps);
|
||||
let c_output = 0;
|
||||
|
||||
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 (let i = 0; i <= steps; i++) {
|
||||
let c_rpm = i * (max_rpm / steps);
|
||||
let c_mc = 0;
|
||||
let c_mbc = 0;
|
||||
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 () {
|
||||
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++;
|
||||
}
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
||||
|
||||
|
||||
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(commit, async () => {
|
||||
if (changes) {
|
||||
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++) {
|
||||
let e = throttle_table.rows[1].cells[i].firstChild;
|
||||
req_body["throttle"][i - 1] = (e.value ? e.value : e.placeholder);
|
||||
}
|
||||
|
||||
for (let i = 1; i < motor_table.rows[1].cells.length; i++) {
|
||||
let e = motor_table.rows[1].cells[i].firstChild;
|
||||
req_body["motor"][0][i - 1] = (e.value ? e.value : e.placeholder);
|
||||
}
|
||||
|
||||
for (let i = 1; i < motor_table.rows[2].cells.length; i++) {
|
||||
let e = motor_table.rows[2].cells[i].firstChild;
|
||||
req_body["motor"][1][i - 1] = (e.value ? e.value : e.placeholder);
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch("/app/add", {
|
||||
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(`Add unsuccessful. ${error.message}`);
|
||||
console.error(error.message);
|
||||
}
|
||||
} else {
|
||||
alert("Nothing to commit.");
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user