reverting into node system
This commit is contained in:
@@ -105,8 +105,8 @@ const char index_html[] PROGMEM = R"rawliteral(
|
||||
<span class="close" onclick="closeModal()">×</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()">×</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();
|
||||
|
||||
Reference in New Issue
Block a user