Add and remove deck from settings with dynamic update

public/javascripts/index.js

@@ -58,6 +58,23 @@ deckSelect.addEventListener("change", ev => {
     socket.emit("getDeck", deckSelect.value);
 });
 
+socket.on("addDeck", data => {
+    if (data) {
+        deckSelect.insertAdjacentHTML("beforeend", `<option value="${data}">${data}</option>`);
+        M.FormSelect.init(deckSelect);
+    }
+});
+
+socket.on("deleteDeck", data => {
+    if (data) {
+        const curr = deckSelect.value;
+        deckSelect.querySelector(`option[value=${data}]`).remove();
+        M.FormSelect.init(deckSelect);
+        if (data === curr)
+            socket.emit("getDeck");
+    }
+});
+
 function setSlot(name, data, x, y) {
     let e = document.getElementById(`r${x}c${y}`);
 

public/javascripts/settings/decks.js

@@ -1,14 +1,17 @@
 const socket = io();
 const deckSelect = document.getElementById("deck-select");
 const deck = document.getElementById("deck");
-const modal = document.getElementById("modal");
+const modalEdit = document.getElementById("modalEdit");
+const modalAdd = document.getElementById("modalAdd");
+const modalDelete = document.getElementById("modalDelete");
 const type = document.getElementById("type");
 const title = document.getElementById("title");
 const image = document.getElementById("image");
 const upload = document.getElementById("upload");
 const customs = document.getElementById("customs");
-const form = modal.querySelector("form");
-let modalInstance, types, slot;
+const form = modalEdit.querySelector("form");
+const addForm = modalAdd.querySelector("form");
+let modalInstance, modalAddInstance, modalDeleteInstance, types, slot;
 
 
 socket.on("connected", () => {
@@ -20,6 +23,10 @@ socket.on("connected", () => {
 
 socket.on("getDeck", d => {
     let data = d.data, name = d.name;
+    modalDelete.querySelector("h4").innerText = modalDelete.querySelector("h4").innerText.split(":")[0] + ": " + name;
+    deckSelect.querySelectorAll(`option[selected]`).forEach(o => o.selected = false);
+    deckSelect.querySelectorAll(`option[value=${name}]`).forEach(o => o.selected = true);
+    M.FormSelect.init(deckSelect);
     deck.innerHTML = "";
 
     for (let x = 0; x < data.x; x++) {
@@ -52,14 +59,14 @@ socket.on("getDeck", d => {
 socket.on("getDecks", data => {
     deckSelect.innerHTML = "";
     for (const deck of data)
-        deckSelect.insertAdjacentHTML("beforeend", `<option name="${deck}">${deck}</option>`);
+        deckSelect.insertAdjacentHTML("beforeend", `<option value="${deck}">${deck}</option>`);
     M.FormSelect.init(deckSelect);
 });
 
 socket.on("getSlot", data => {
     slot = data;
     customs.innerHTML = "";
-    modal.querySelectorAll("#type>option[selected]").forEach(e => e.selected = false);
+    modalEdit.querySelectorAll("#type>option[selected]").forEach(e => e.selected = false);
 
     if (data.data) {
         title.value = data.data.text;
@@ -105,6 +112,31 @@ socket.on("uploadImage", data => {
         image.value = data
 });
 
+socket.on("addDeck", data => {
+    if (data.error)
+        alert(data.error);
+    else {
+        deckSelect.insertAdjacentHTML("beforeend", `<option value="${data}">${data}</option>`);
+        M.FormSelect.init(deckSelect);
+        modalAddInstance.close();
+        clearAdd();
+        socket.emit("getDeck", data);
+    }
+});
+
+socket.on("deleteDeck", data => {
+    if (data.error)
+        alert(data.error);
+    else {
+        const curr = deckSelect.value;
+        deckSelect.querySelector(`option[value=${data}]`).remove();
+        M.FormSelect.init(deckSelect);
+        modalDeleteInstance.close();
+        if (data === curr)
+            socket.emit("getDeck");
+    }
+});
+
 upload.addEventListener("dragover", ev => {
     ev.preventDefault();
 }, true);
@@ -144,6 +176,25 @@ document.getElementById("save").addEventListener("click", ev => {
     socket.emit("setSlot", {name: slot.name, data: slot.data, position: slot.position});
 });
 
+document.getElementById("delete").addEventListener("click", ev => {
+    ev.stopPropagation();
+    socket.emit("deleteDeck", deckSelect.value);
+});
+
+document.getElementById("add").addEventListener("click", ev => {
+    ev.stopPropagation();
+
+    let data = {};
+    for (const e of new FormData(addForm))
+        data[e[0]] = e[1];
+
+    socket.emit("addDeck", data);
+});
+
+document.getElementById("clearAdd").addEventListener("click", () => {
+    clearAdd();
+});
+
 document.getElementById("remove").addEventListener("click", ev => {
     ev.stopPropagation();
     socket.emit("setSlot", {name: slot.name, data: null, position: slot.position});
@@ -156,7 +207,10 @@ type.addEventListener("change", ev => {
 
 document.addEventListener("DOMContentLoaded", () => {
     M.AutoInit();
-    modalInstance = M.Modal.getInstance(modal);
+    modalInstance = M.Modal.getInstance(modalEdit);
+    modalAddInstance = M.Modal.getInstance(modalAdd);
+    modalDeleteInstance = M.Modal.getInstance(modalDelete);
+    M.FloatingActionButton.init(document.querySelector(".fixed-action-btn"), {hoverEnabled: false})
 });
 
 function customFields(values) {
@@ -210,3 +264,10 @@ function uploadImage(files) {
         socket.emit("uploadImage", files[0]);
     M.updateTextFields();
 }
+
+function clearAdd() {
+    document.getElementById("name").value = "";
+    document.getElementById("x").value = "10";
+    document.getElementById("y").value = "5";
+    M.updateTextFields();
+}

sockets/addDeck.js

@@ -0,0 +1,21 @@
+const db = require("../db.json");
+const fs = require("fs");
+
+
+module.exports = socket => {
+    return data => {
+        if (data.name in db.decks)
+            socket.emit("addDeck", {error: "nameAlreadyTaken"});
+        else {
+            db.decks[data.name] = {
+                x:data.x,
+                y:data.y,
+                rows: {}
+            };
+            fs.writeFileSync("./db.json", JSON.stringify(db));
+
+            socket.emit("addDeck", data.name);
+            socket.broadcast.emit("addDeck", data.name)
+        }
+    }
+};

sockets/deleteDeck.js

@@ -0,0 +1,17 @@
+const db = require("../db.json");
+const fs = require("fs");
+
+
+module.exports = socket => {
+    return data => {
+        if (!(data in db.decks))
+            socket.emit("deleteDeck", {error: "deckNotFound"});
+        else {
+            delete db.decks[data];
+            fs.writeFileSync("./db.json", JSON.stringify(db));
+
+            socket.emit("deleteDeck", data);
+            socket.broadcast.emit("deleteDeck", data)
+        }
+    }
+};

sockets/index.js

@@ -4,6 +4,8 @@ module.exports = socket => {
     socket.on("getSlot", require("./getSlot")(socket));
     socket.on("getType", require("./getType")(socket));
     socket.on("setSlot", require("./setSlot")(socket));
+    socket.on("addDeck", require("./addDeck")(socket));
+    socket.on("deleteDeck", require("./deleteDeck")(socket));
     socket.on("trigger", require("./trigger")(socket));
     socket.on("uploadImage", require("./uploadImage")(socket));
     console.log("New connection !");

views/settings/decks.pug

@@ -7,7 +7,18 @@ block settings
 
     .container#deck
 
-    #modal.modal
+    .fixed-action-btn.no-autoinit
+        a.btn-floating.btn-large.green
+            i.large.material-icons menu
+        ul
+            li
+                button(data-target="modalDelete").btn-floating.red.modal-trigger
+                    i.material-icons delete
+            li
+                button(data-target="modalAdd").btn-floating.blue.modal-trigger
+                    i.material-icons add
+
+    #modalEdit.modal
         .modal-content
             .row
                 form.col.s12
@@ -32,4 +43,31 @@ block settings
             a.modal-close.waves-effect.waves-grey.btn-flat(href="#!") Cancel
             a#save.modal-close.waves-effect.waves-green.btn-flat Save
 
+    #modalDelete.modal
+        .modal-content
+            h4 Are you sure you want to delete:
+        .modal-footer
+            button(data-target="modalDelete").modal-close.waves-effect.waves-grey.btn-flat Cancel
+            a#delete.modal-close.waves-effect.waves-red.btn-flat Yes
+
+    #modalAdd.modal
+        .modal-content
+            h4 Create new deck
+            .row
+                form.col.s12
+                    .row
+                        .input-field.col.s12
+                            input#name(type="text" name="name" minlength=1 required).validate
+                            label(for="name") Deck name
+                    .row
+                        .input-field.col.s6
+                            input#x(type="number" min="1" name="x" value="10" required).validate
+                            label(for="x") X
+                        .input-field.col.s6
+                            input#y(type="number" min="1" name="y" value="5" required).validate
+                            label(for="y") Y
+        .modal-footer
+            button(data-target="modalAdd")#clearAdd.modal-close.waves-effect.waves-grey.btn-flat Cancel
+            a#add.waves-effect.waves-green.btn-flat Save
+
     script(src="/javascripts/settings/decks.js")