Error in JSON.stringify. Crashes ESP

css/spotlight.css

@@ -201,4 +201,13 @@
              'wght' 400,
              'GRAD' 0,
              'opsz' 48
+}
+
+#clusters {
+    grid-column: 1/-1;
+    grid-row: 7/8;
+
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+    grid-gap: 0.2vw;
 }

js/spotlight.js

@@ -1,16 +1,25 @@
 const makeClusterButton = document.getElementById("makeCluster")
+let numClusters
 
-let clusters = Array()
+let clusters = {}
+let occupiedLamps = Array()
 let chosenShelves = Array()
 
+let chosenCluster = -1
+
 function getEByID(id) {
     return document.getElementById(id)
 }
 
 function shelfClick(id) {
     const clickedShelf = getEByID("b" + id.toString())
+    console.log(chosenCluster >= 0)
+    if (chosenCluster >= 0) {
+        unselectAll()
+    }
+    chosenCluster = -1
 
-    if (!clusters.flat(1).includes(id)) { //If not id in clusters
+    if (!occupiedLamps.includes(id)) { //If not id in clusters
         if (chosenShelves.includes(id)) { //If id in chosenShelves
             chosenShelves = chosenShelves.filter(e => {
                 return e !== id;
@@ -37,6 +46,7 @@ function shelfClick(id) {
 
 
 function unselectAll() {
+    chosenCluster = -1
     chosenShelves.forEach(id => {
         getEByID("b" + id.toString()).innerText = ""
         getEByID("b" + id.toString()).classList.remove("selected")
@@ -49,34 +59,88 @@ function unselectAll() {
 function createCluster() {
     const shelves = JSON.stringify(chosenShelves)
     const numLights = chosenShelves.length
-    const sendDict = {["numLights"]: numLights,
-    ["lights"]: shelves}
+    const sendDict = {
+        ["numLights"]: numLights,
+        ["lights"]: shelves
+    }
     console.log(JSON.stringify(sendDict))
     sendWebRequest("http://192.168.1.170/api/create_cluster", JSON.stringify(sendDict), "POST")
 }
 
 
-window.onkeydown = function(event) {
+window.onkeydown = function (event) {
     if (event.key === "Escape") {
         unselectAll()
     }
 }
 
+function deleteCluster() {
+    if (chosenCluster >= 0) {
+        const sendDict = {
+            ["cluster"]: chosenCluster,
+        }
+        sendWebRequest("http://192.168.1.170/api/delete_cluster", JSON.stringify(sendDict), "POST")
+    }
+}
+
+
 function sendWebRequest(url, data, method) {
-    const Http = new XMLHttpRequest()
+    /*const Http = new XMLHttpRequest()
     Http.open(method, url)
     Http.setRequestHeader("data", data)
     Http.send()
 
     Http.onreadystatechange = (e) => {
         console.log(Http.responseText)
-    }
+    }*/
+
+    fetch(url, {
+        method: method,
+        headers: new Headers({'data': data}),
+        //mode: 'no-cors'
+        })
+        .then(res => {
+            console.log(res)
+            //updateConfig()
+        })
 }
 
 function updateConfig() {
+    unselectAll()
     fetch("http://192.168.1.170/api/get_config")
         .then(response => response.json())
-        .then(data => console.log(data))
+        .then(data => {
+            console.log(data)
+            numClusters = data["numClusters"]
+            clusters = data["clusters"]
+
+            occupiedLamps = Array()
+            let id = -1
+            for (const cluster of data.clusters) {
+                id++
+                for (let lamp of cluster.lights) {
+                    occupiedLamps.push(lamp)
+                }
+
+                const clusterButton = document.createElement("button")
+                clusterButton.innerText = (id+1).toString()
+                clusterButton.onclick = function () {
+                    unselectAll()
+                    clusterButton.classList.add("selected")
+                    chosenCluster = id
+                    let lampId = 0
+                    for (let lamp of cluster.lights) {
+                        console.log(lamp)
+                        getEByID("b" + lamp.toString()).classList.add("selected")
+                        getEByID("b" + lamp.toString()).innerText = (lampId+1).toString()
+                        lampId += 1
+                    }
+                    chosenShelves = cluster.lights
+                }
+                getEByID("clusters").appendChild(clusterButton)
+            }
+
+        })
 }
 
 updateConfig()

spotlights.html

@@ -51,8 +51,8 @@
             <h2>Settings</h2>
             <p>{clusterName}</p>
             <div id="spotlightAnimations">
-                <button class="a0">Off</button>
-                <button class="a1">Rainbow</button>
+                <button class="a0" onclick="changeAnimation(0)">Off</button>
+                <button class="a1" onclick="changeAnimation(1)">Rainbow</button>
             </div>
             <p class="var1Input">{var1Name}</p>
             <input type="number" class="var1Input">
@@ -60,9 +60,10 @@
             <input type="number" class="var2Input">
             <p class="speedInput">Hastighet (MS)</p>
             <input type="number" class="speedInput">
-            <button id="deleteCluster"><span class="material-symbols-outlined">delete</span></button>
+            <button id="deleteCluster" onclick="deleteCluster()"><span class="material-symbols-outlined">delete</span></button>
+            <button id="sync">Synk</button>
             <div id="clusters">
-                <button>Synk</button>
+
             </div>
         </div>