reverting into node system

This commit is contained in:
2026-02-10 13:47:06 +01:00
parent c2f027f18f
commit 74d6b01f1b
6 changed files with 132 additions and 62 deletions
+20 -20
View File
@@ -105,8 +105,8 @@ const char index_html[] PROGMEM = R"rawliteral(
<span class="close" onclick="closeModal()">&times;</span>
<h3>Modify Text Node</h3>
<div class="text-input-group">
<input type="hidden" id="modifyIdInput">
<b>Node ID:</b> <span id="modifyIdDisplay"></span>
<input type="hidden" id="modifyGlobalIdInput">
<b>Node Global ID:</b> <span id="modifyGlobalIdDisplay"></span>
</div>
<div class="text-input-group">
<input type="text" id="modifyTextInput" placeholder="New text...">
@@ -131,8 +131,8 @@ const char index_html[] PROGMEM = R"rawliteral(
<span class="close" onclick="closeMultiColorModal()">&times;</span>
<h3>Modify Multi-Color Text Node</h3>
<div class="text-input-group">
<input type="hidden" id="modifyMultiColorIdInput">
<b>Node ID:</b> <span id="modifyMultiColorIdDisplay"></span>
<input type="hidden" id="modifyMultiColorGlobalIdInput">
<b>Node Global ID:</b> <span id="modifyMultiColorGlobalIdDisplay"></span>
</div>
<div class="text-input-group">
<input type="text" id="modifyMultiColorTextInput" placeholder="New text...">
@@ -311,12 +311,12 @@ const char index_html[] PROGMEM = R"rawliteral(
}
function modifyText() {
const id = document.getElementById('modifyIdInput').value;
const global_id = document.getElementById('modifyGlobalIdInput').value;
const color = document.getElementById('modifyColorPicker').value;
const text = document.getElementById('modifyTextInput').value;
const slowness = document.getElementById('modifySlownessInput').value;
if (!id) {
if (!global_id) {
alert('Please enter a node ID.');
return;
}
@@ -325,7 +325,7 @@ const char index_html[] PROGMEM = R"rawliteral(
xhr.open("POST", "/modify-text", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
let data = "id=" + id + "&color=" + encodeURIComponent(color) + "&text=" + encodeURIComponent(text) + "&slowness=" + slowness;
let data = "global_id=" + global_id + "&color=" + encodeURIComponent(color) + "&text=" + encodeURIComponent(text) + "&slowness=" + slowness;
xhr.onload = function() {
if (xhr.status === 200) {
fetchNodes();
@@ -349,12 +349,12 @@ const char index_html[] PROGMEM = R"rawliteral(
nodeDiv.className = 'node-item';
if (node.type === 'text') {
var color = '#' + ('000000' + node.color.toString(16)).slice(-6);
nodeDiv.innerHTML = '<b>ID:</b> ' + node.id + ', <b>Text:</b> ' + node.text + ', <b>Color:</b> <span style="color:' + color + '">' + color + '</span>' +
'<button style="margin-left: 10px;" onclick="populateModifyForm(' + node.id + ', \'' + color + '\', \'' + node.text + '\', ' + node.slowness + ')">Modify</button>';
nodeDiv.innerHTML = '<b>ID:</b> ' + node.global_id + ', <b>Text:</b> ' + node.text + ', <b>Color:</b> <span style="color:' + color + '">' + color + '</span>' +
'<button style="margin-left: 10px;" onclick="populateModifyForm(' + node.global_id + ', \'' + color + '\', \'' + node.text + '\', ' + node.slowness + ')">Modify</button>';
} else if (node.type === 'multi-color') {
var colorsStr = node.colors.map(c => '#' + ('000000' + ((c.r << 16) | (c.g << 8) | c.b).toString(16)).slice(-6)).join(',');
nodeDiv.innerHTML = '<b>ID:</b> ' + node.id + ', <b>Text:</b> ' + node.text + ', <b>Type:</b> Multi-Color' +
'<button style="margin-left: 10px;" onclick="populateMultiColorModifyForm(' + node.id + ', \'' + colorsStr + '\', \'' + node.text + '\')">Modify</button>';
nodeDiv.innerHTML = '<b>ID:</b> ' + node.global_id + ', <b>Text:</b> ' + node.text + ', <b>Type:</b> Multi-Color' +
'<button style="margin-left: 10px;" onclick="populateMultiColorModifyForm(' + node.global_id + ', \'' + colorsStr + '\', \'' + node.text + '\')">Modify</button>';
}
nodesList.appendChild(nodeDiv);
}
@@ -363,9 +363,9 @@ const char index_html[] PROGMEM = R"rawliteral(
xhr.send();
}
function populateModifyForm(id, color, text, slowness) {
document.getElementById('modifyIdInput').value = id;
document.getElementById('modifyIdDisplay').innerText = id;
function populateModifyForm(global_id, color, text, slowness) {
document.getElementById('modifyGlobalIdInput').value = global_id;
document.getElementById('modifyGlobalIdDisplay').innerText = global_id;
document.getElementById('modifyColorPicker').value = color;
document.getElementById('modifyTextInput').value = text;
document.getElementById('modifySlownessInput').value = slowness;
@@ -376,9 +376,9 @@ const char index_html[] PROGMEM = R"rawliteral(
document.getElementById('modify-modal').style.display = "none";
}
function populateMultiColorModifyForm(id, colors, text) {
document.getElementById('modifyMultiColorIdInput').value = id;
document.getElementById('modifyMultiColorIdDisplay').innerText = id;
function populateMultiColorModifyForm(global_id, colors, text) {
document.getElementById('modifyMultiColorGlobalIdInput').value = global_id;
document.getElementById('modifyMultiColorGlobalIdDisplay').innerText = global_id;
document.getElementById('modifyMultiColorColorInput').value = colors;
document.getElementById('modifyMultiColorTextInput').value = text;
document.getElementById('modify-multicolor-modal').style.display = "block";
@@ -389,11 +389,11 @@ const char index_html[] PROGMEM = R"rawliteral(
}
function modifyMultiColorText() {
const id = document.getElementById('modifyMultiColorIdInput').value;
const global_id = document.getElementById('modifyMultiColorGlobalIdInput').value;
const colors = document.getElementById('modifyMultiColorColorInput').value;
const text = document.getElementById('modifyMultiColorTextInput').value;
if (!id) {
if (!global_id) {
alert('Please enter a node ID.');
return;
}
@@ -402,7 +402,7 @@ const char index_html[] PROGMEM = R"rawliteral(
xhr.open("POST", "/modify-multicolor-text", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
let data = "id=" + id + "&colors=" + encodeURIComponent(colors) + "&text=" + encodeURIComponent(text);
let data = "global_id=" + global_id + "&colors=" + encodeURIComponent(colors) + "&text=" + encodeURIComponent(text);
xhr.onload = function() {
if (xhr.status === 200) {
fetchNodes();