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")