Remove slot with dynamic update

public/javascripts/index.js

@@ -39,7 +39,7 @@ socket.on("setSlot", data => {
 
 function setSlot(name, data, x, y) {
     let e = document.getElementById(`r${x}c${y}`);
-    if (e) {
+    if (e && data) {
         if (data.image)
             e.insertAdjacentHTML("beforeend", `<img src="${data.image}" alt="${data.text}">`);
         else if (data.text)
@@ -49,5 +49,9 @@ function setSlot(name, data, x, y) {
             ev.stopPropagation();
             socket.emit("trigger", [name, x, y]);
         })
+    } else if (e) {
+        let d = document.createElement("div");
+        d.id = e.id;
+        e.replaceWith(d);
     }
 }

public/javascripts/settings/decks.js

@@ -7,6 +7,7 @@ const customs = document.getElementById("customs");
 const form = modal.querySelector("form");
 let modalInstance, types, slot;
 
+
 socket.on("connected", () => {
     console.log("Connected !");
     socket.emit("getDeck");
@@ -74,12 +75,12 @@ socket.on("setSlot", data => {
     else {
         modalInstance.close();
         let e = document.getElementById(`r${data.position[0]}c${data.position[1]}`);
-        if (e) {
+        if (e && data.data) {
             if (data.data.image)
                 e.insertAdjacentHTML("beforeend", `<img src="${data.data.image}" alt="${data.data.text}">`);
             else if (data.data.text)
                 e.insertAdjacentHTML("beforeend", `<p>${data.data.text}</p>`);
-        } else
+        } else if (e)
             e.innerHTML = "";
     }
 });
@@ -104,6 +105,11 @@ document.getElementById("save").addEventListener("click", ev => {
     socket.emit("setSlot", {name: slot.name, data: slot.data, position: slot.position});
 });
 
+document.getElementById("remove").addEventListener("click", ev => {
+    ev.stopPropagation();
+    socket.emit("setSlot", {name: slot.name, data: null, position: slot.position});
+});
+
 type.addEventListener("change", ev => {
     ev.stopPropagation();
     customFields();

sockets/setSlot.js

@@ -3,7 +3,9 @@ const { getSlot, types } = require("../types");
 
 module.exports = socket => {
     return data => {
+        if (data.name && data.position) {
             let s = getSlot(data.name, ...data.position);
+            if (data.data) {
                 try {
                     if (!s)
                         s = new types[data.data.type](data.data.text, data.data.image, data.data.options);
@@ -13,11 +15,21 @@ module.exports = socket => {
                         s.options = data.data.options
                     }
                     s.save(data.name, data.position);
-            socket.emit("setSlot", data);
-            socket.broadcast.emit("setSlot", data);
                 } catch (err) {
                     console.error(err);
                     socket.emit("setSlot", {error: err.code});
+                    return;
                 }
+            } else if (s)
+                s.remove(data.name, data.position);
+            else {
+                socket.emit("setSlot", {error: "emptySlot"});
+                return;
+            }
+            socket.emit("setSlot", data);
+            socket.broadcast.emit("setSlot", data);
+        } else
+            socket.emit("setSlot", {error: "invalidData"});
+
     }
 };

types/Base.js

@@ -21,6 +21,19 @@ class Base {
         if (!(position[0] in db.decks[name].rows))
             db.decks[name].rows[position[0]] = {};
         db.decks[name].rows[position[0]][position[1]] = this.toJSON();
+        Base.#write()
+    }
+
+    remove(name, position) {
+        if (position[0] in db.decks[name].rows && position[1] in db.decks[name].rows[position[0]]) {
+            delete db.decks[name].rows[position[0]][position[1]];
+            Base.#write();
+            return true;
+        }
+        return false;
+    }
+
+    static #write() {
         fs.writeFileSync("./db.json", JSON.stringify(db));
     }
 

views/settings/decks.pug

@@ -22,7 +22,8 @@ block settings
                             label(for="type") Type
                     #customs
         .modal-footer
-            a.modal-close.waves-effect.waves-red.btn-flat(href="#!") Cancel
+            a#remove.modal-close.waves-effect.waves-red.btn-flat Remove
+            a.modal-close.waves-effect.waves-grey.btn-flat(href="#!") Cancel
             a#save.modal-close.waves-effect.waves-green.btn-flat Save
 
     script(src="/javascripts/settings/decks.js")