diff --git a/public/javascripts/index.js b/public/javascripts/index.js index cfa2126..9ad64d6 100644 --- a/public/javascripts/index.js +++ b/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", ``); + 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}`); diff --git a/public/javascripts/settings/decks.js b/public/javascripts/settings/decks.js index 0cd4f04..2ac9722 100644 --- a/public/javascripts/settings/decks.js +++ b/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", ``); + deckSelect.insertAdjacentHTML("beforeend", ``); 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", ``); + 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(); +} diff --git a/sockets/addDeck.js b/sockets/addDeck.js new file mode 100644 index 0000000..8ab129f --- /dev/null +++ b/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) + } + } +}; diff --git a/sockets/deleteDeck.js b/sockets/deleteDeck.js new file mode 100644 index 0000000..6c04583 --- /dev/null +++ b/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) + } + } +}; diff --git a/sockets/index.js b/sockets/index.js index 17f39f3..02811c7 100644 --- a/sockets/index.js +++ b/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 !"); diff --git a/views/settings/decks.pug b/views/settings/decks.pug index c5c5ddd..8980afb 100644 --- a/views/settings/decks.pug +++ b/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")