Remove slot with dynamic update

This commit is contained in:
Ethanell 2021-03-09 08:23:20 +01:00
parent 132b851de7
commit 26a9b5c3b7
5 changed files with 52 additions and 16 deletions

View file

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

View file

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

View file

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

View file

@ -21,6 +21,19 @@ class Base {
if (!(position[0] in db.decks[name].rows)) if (!(position[0] in db.decks[name].rows))
db.decks[name].rows[position[0]] = {}; db.decks[name].rows[position[0]] = {};
db.decks[name].rows[position[0]][position[1]] = this.toJSON(); 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)); fs.writeFileSync("./db.json", JSON.stringify(db));
} }

View file

@ -22,7 +22,8 @@ block settings
label(for="type") Type label(for="type") Type
#customs #customs
.modal-footer .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 a#save.modal-close.waves-effect.waves-green.btn-flat Save
script(src="/javascripts/settings/decks.js") script(src="/javascripts/settings/decks.js")