Add socket add support for commands and some code refactor
This commit is contained in:
parent
6e1d8dd293
commit
24618dc111
1 changed files with 56 additions and 201 deletions
|
|
@ -1,11 +1,6 @@
|
||||||
import {alert, prompt, confirm} from "./popups.js";
|
import {alert, prompt, confirm} from "./popups.js";
|
||||||
|
|
||||||
const socket = io();
|
const socket = io();
|
||||||
const dish = document.querySelector("#dish ul");
|
|
||||||
const ingredient = document.querySelector("#ingredient ul");
|
|
||||||
const sauce = document.querySelector("#sauce ul");
|
|
||||||
const drink = document.querySelector("#drink ul");
|
|
||||||
const dessert = document.querySelector("#dessert ul");
|
|
||||||
const list = document.querySelector(".list");
|
const list = document.querySelector(".list");
|
||||||
|
|
||||||
let current = {dish: null, ingredient: [], sauce: [], drink: null, dessert: null};
|
let current = {dish: null, ingredient: [], sauce: [], drink: null, dessert: null};
|
||||||
|
|
@ -57,9 +52,10 @@ function addCmd(command) {
|
||||||
document.querySelector("#resume>h1").innerHTML = `Command ${command.number+1}`;
|
document.querySelector("#resume>h1").innerHTML = `Command ${command.number+1}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
function addDish(d) {
|
let add = {};
|
||||||
|
add.dish = function (d) {
|
||||||
db.dish[d.id] = d;
|
db.dish[d.id] = d;
|
||||||
dish.insertAdjacentHTML("beforeend", `<li><input type="radio" name="dish" id="dish${d.id}"><label for="dish${d.id}">${d.name}</label></li>`);
|
document.querySelector("#dish ul").insertAdjacentHTML("beforeend", `<li><input type="radio" name="dish" id="dish${d.id}"><label for="dish${d.id}">${d.name}</label></li>`);
|
||||||
let e = document.querySelector(`input[id=dish${d.id}]`);
|
let e = document.querySelector(`input[id=dish${d.id}]`);
|
||||||
e.addEventListener("click", () => {
|
e.addEventListener("click", () => {
|
||||||
radioCheck(e);
|
radioCheck(e);
|
||||||
|
|
@ -73,67 +69,24 @@ function addDish(d) {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
function addIngredient(i) {
|
for (let i of ["ingredient", "sauce"])
|
||||||
db.ingredient[i.id] = i;
|
add[i] = function (e) {
|
||||||
ingredient.insertAdjacentHTML("beforeend", `<li><input type="checkbox" disabled=true name="ingredient" id="ingredient${i.id}"><label for="ingredient${i.id}">${i.name}</label></li>`);
|
db[i][e.id] = e;
|
||||||
let e = document.querySelector(`input[id=ingredient${i.id}]`);
|
document.querySelector(`#${i} ul`).insertAdjacentHTML("beforeend", `<li><input type="checkbox" disabled=true name="${i}" id="${i}${e.id}"><label for="ingredient${e.id}">${e.name}</label></li>`);
|
||||||
e.addEventListener("click", () => {
|
document.querySelector(`input[id=${i}${e.id}]`).addEventListener("click", ev => {
|
||||||
checkCheck(e)
|
checkCheck(ev.target);
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
function addSauce(s) {
|
for (let i of ["drink", "dessert"])
|
||||||
db.sauce[s.id] = s;
|
add[i] = function (e) {
|
||||||
sauce.insertAdjacentHTML("beforeend", `<li><input type="checkbox" disabled=true name="sauce" id="sauce${s.id}"><label for="sauce${s.id}">${s.name}</label></li>`);
|
db.drink[e.id] = e;
|
||||||
let e = document.querySelector(`input[id=sauce${s.id}]`);
|
document.querySelector(`#${i} ul`).insertAdjacentHTML("beforeend", `<li><input type="radio" name="drink" id="${i}${e.id}"><label for="drink${e.id}">${e.name}</label></li>`);
|
||||||
e.addEventListener("click", () => {
|
document.querySelector(`input[id=${i}${e.id}]`).addEventListener("click", ev => {
|
||||||
checkCheck(e)
|
radioCheck(ev.target)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
function addDrink(d) {
|
|
||||||
db.drink[d.id] = d;
|
|
||||||
drink.insertAdjacentHTML("beforeend", `<li><input type="radio" name="drink" id="drink${d.id}"><label for="drink${d.id}">${d.name}</label></li>`);
|
|
||||||
let e = document.querySelector(`input[id=drink${d.id}]`);
|
|
||||||
e.addEventListener("click", () => {
|
|
||||||
radioCheck(e)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function addDessert(d) {
|
|
||||||
db.dessert[d.id] = d;
|
|
||||||
dessert.insertAdjacentHTML("beforeend", `<li><input type="radio" name="dessert" id="dessert${d.id}"><label for="dessert${d.id}">${d.name}</label></li>`);
|
|
||||||
let e = document.querySelector(`input[id=dessert${d.id}]`);
|
|
||||||
e.addEventListener("click", () => {
|
|
||||||
radioCheck(e)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function removeDish(d) {
|
|
||||||
dish.querySelector("#dish"+d).parentElement.remove();
|
|
||||||
delete db.dish[d];
|
|
||||||
}
|
|
||||||
|
|
||||||
function removeIngredient(d) {
|
|
||||||
ingredient.querySelector("#ingredient"+d).parentElement.remove();
|
|
||||||
delete db.ingredient[d];
|
|
||||||
}
|
|
||||||
|
|
||||||
function removeSauce(d) {
|
|
||||||
sauce.querySelector("#sauce"+d).parentElement.remove();
|
|
||||||
delete db.sauce[d];
|
|
||||||
}
|
|
||||||
|
|
||||||
function removeDrink(d) {
|
|
||||||
drink.querySelector("#drink"+d).parentElement.remove();
|
|
||||||
delete db.drink[d];
|
|
||||||
}
|
|
||||||
|
|
||||||
function removeDessert(d) {
|
|
||||||
dessert.querySelector("#dessert"+d).parentElement.remove();
|
|
||||||
delete db.dessert[d];
|
|
||||||
}
|
|
||||||
|
|
||||||
function radioCheck (e) {
|
function radioCheck (e) {
|
||||||
if (e.checked) {
|
if (e.checked) {
|
||||||
let curr, name;
|
let curr, name;
|
||||||
|
|
@ -169,11 +122,8 @@ function checkCheck(e) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function clear(e) {
|
function clear(e) {
|
||||||
e.classList.remove("done");
|
for (let i of ["done", "give", "warning", "WIP", "show-spec"])
|
||||||
e.classList.remove("give");
|
e.classList.remove(i);
|
||||||
e.classList.remove("warning");
|
|
||||||
e.classList.remove("WIP");
|
|
||||||
e.classList.remove("show-spec");
|
|
||||||
list.prepend(e);
|
list.prepend(e);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -247,12 +197,8 @@ function clearSelections() {
|
||||||
}
|
}
|
||||||
|
|
||||||
socket.on("connected", () => {
|
socket.on("connected", () => {
|
||||||
socket.emit("list dish");
|
for (let i of ["dish", "ingredient", "sauce", "drink", "dessert", "command"])
|
||||||
socket.emit("list ingredient");
|
socket.emit("list " + i);
|
||||||
socket.emit("list sauce");
|
|
||||||
socket.emit("list drink");
|
|
||||||
socket.emit("list dessert");
|
|
||||||
socket.emit("list command");
|
|
||||||
});
|
});
|
||||||
|
|
||||||
socket.on("list command", data => {
|
socket.on("list command", data => {
|
||||||
|
|
@ -265,61 +211,6 @@ socket.on("list command", data => {
|
||||||
addCmd(c);
|
addCmd(c);
|
||||||
});
|
});
|
||||||
|
|
||||||
socket.on("list dish", data => {
|
|
||||||
let child = dish.lastElementChild;
|
|
||||||
while (child) {
|
|
||||||
dish.removeChild(child);
|
|
||||||
child = dish.lastElementChild;
|
|
||||||
}
|
|
||||||
for (let d of data)
|
|
||||||
if (d.available)
|
|
||||||
addDish(d);
|
|
||||||
});
|
|
||||||
|
|
||||||
socket.on("list ingredient", data => {
|
|
||||||
let child = ingredient.lastElementChild;
|
|
||||||
while (child) {
|
|
||||||
ingredient.removeChild(child);
|
|
||||||
child = ingredient.lastElementChild;
|
|
||||||
}
|
|
||||||
for (let i of data)
|
|
||||||
if (i.available)
|
|
||||||
addIngredient(i);
|
|
||||||
});
|
|
||||||
|
|
||||||
socket.on("list sauce", data => {
|
|
||||||
let child = sauce.lastElementChild;
|
|
||||||
while (child) {
|
|
||||||
sauce.removeChild(child);
|
|
||||||
child = sauce.lastElementChild;
|
|
||||||
}
|
|
||||||
for (let s of data)
|
|
||||||
if (s.available)
|
|
||||||
addSauce(s);
|
|
||||||
});
|
|
||||||
|
|
||||||
socket.on("list drink", data => {
|
|
||||||
let child = drink.lastElementChild;
|
|
||||||
while (child) {
|
|
||||||
drink.removeChild(child);
|
|
||||||
child = drink.lastElementChild;
|
|
||||||
}
|
|
||||||
for (let d of data)
|
|
||||||
if (d.available)
|
|
||||||
addDrink(d);
|
|
||||||
});
|
|
||||||
|
|
||||||
socket.on("list dessert", data => {
|
|
||||||
let child = dessert.lastElementChild;
|
|
||||||
while (child) {
|
|
||||||
dessert.removeChild(child);
|
|
||||||
child = dessert.lastElementChild;
|
|
||||||
}
|
|
||||||
for (let d of data)
|
|
||||||
if (d.available)
|
|
||||||
addDessert(d);
|
|
||||||
});
|
|
||||||
|
|
||||||
socket.on("list user", data => {
|
socket.on("list user", data => {
|
||||||
let user_list = document.getElementById("user_list");
|
let user_list = document.getElementById("user_list");
|
||||||
user_list.innerHTML = "";
|
user_list.innerHTML = "";
|
||||||
|
|
@ -362,75 +253,39 @@ socket.on("add user", data => {
|
||||||
addCommand();
|
addCommand();
|
||||||
});
|
});
|
||||||
|
|
||||||
socket.on("set dish", data => {
|
for (let i of ["dish", "ingredient", "sauce", "drink", "dessert"]) {
|
||||||
if (data.available && db.dish[data.id] === undefined)
|
let el = document.querySelector(`#${i} ul`);
|
||||||
addDish(data);
|
function remove(e) {
|
||||||
else if (!data.available && db.dish[data.id] !== undefined)
|
el.querySelector(`#${i}${e}`).parentElement.remove();
|
||||||
removeDish(data.id);
|
delete db[i][e];
|
||||||
|
}
|
||||||
|
socket.on("list " + i, data => {
|
||||||
|
let child = el.lastElementChild;
|
||||||
|
while (child) {
|
||||||
|
el.removeChild(child);
|
||||||
|
child = el.lastElementChild;
|
||||||
|
}
|
||||||
|
for (let d of data)
|
||||||
|
if (d.available)
|
||||||
|
add[i](d);
|
||||||
|
});
|
||||||
|
socket.on("add " + i, data => {
|
||||||
|
if (data.available)
|
||||||
|
add[i](data);
|
||||||
|
});
|
||||||
|
socket.on("set " + i, data => {
|
||||||
|
if (data.available && db[i][data.id] === undefined)
|
||||||
|
add[i](data);
|
||||||
|
else if (!data.available && db[i][data.id] !== undefined)
|
||||||
|
remove(data.id);
|
||||||
else
|
else
|
||||||
db.dish[data.id] = data;
|
db[i][data.id] = data;
|
||||||
});
|
});
|
||||||
|
socket.on("remove " + i, data => {
|
||||||
socket.on("set ingredient", data => {
|
if (db[i][data])
|
||||||
if (data.available && db.ingredient[data.id] === undefined)
|
remove(data);
|
||||||
addIngredient(data);
|
|
||||||
else if (!data.available && db.ingredient[data.id] !== undefined)
|
|
||||||
removeIngredient(data.id);
|
|
||||||
else
|
|
||||||
db.ingredient[data.id] = data;
|
|
||||||
});
|
|
||||||
|
|
||||||
socket.on("set sauce", data => {
|
|
||||||
if (data.available && db.sauce[data.id] === undefined)
|
|
||||||
addSauce(data);
|
|
||||||
else if (!data.available && db.sauce[data.id] !== undefined)
|
|
||||||
removeSauce(data.id);
|
|
||||||
else
|
|
||||||
db.sauce[data.id] = data;
|
|
||||||
});
|
|
||||||
|
|
||||||
socket.on("set drink", data => {
|
|
||||||
if (data.available && db.drink[data.id] === undefined)
|
|
||||||
addDrink(data);
|
|
||||||
else if (!data.available && db.drink[data.id] !== undefined)
|
|
||||||
removeDrink(data.id);
|
|
||||||
else
|
|
||||||
db.drink[data.id] = data;
|
|
||||||
});
|
|
||||||
|
|
||||||
socket.on("set dessert", data => {
|
|
||||||
if (data.available && db.dessert[data.id] === undefined)
|
|
||||||
addDessert(data);
|
|
||||||
else if (!data.available && db.dessert[data.id] !== undefined)
|
|
||||||
removeDessert(data.id)
|
|
||||||
else
|
|
||||||
db.dessert[data.id] = data;
|
|
||||||
});
|
|
||||||
|
|
||||||
socket.on("remove dish", data => {
|
|
||||||
if (db.dish[data])
|
|
||||||
removeDish(data);
|
|
||||||
});
|
|
||||||
|
|
||||||
socket.on("remove ingredient", data => {
|
|
||||||
if (db.ingredient[data])
|
|
||||||
removeIngredient(data);
|
|
||||||
});
|
|
||||||
|
|
||||||
socket.on("remove sauce", data => {
|
|
||||||
if (db.sauce[data])
|
|
||||||
removeSauce(data);
|
|
||||||
});
|
|
||||||
|
|
||||||
socket.on("remove drink", data => {
|
|
||||||
if (db.drink[data])
|
|
||||||
removeDrink(data);
|
|
||||||
});
|
|
||||||
|
|
||||||
socket.on("remove dessert", data => {
|
|
||||||
if (db.dessert[data])
|
|
||||||
removeDessert(data);
|
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
|
||||||
socket.on("price", data => {
|
socket.on("price", data => {
|
||||||
document.querySelector("#resume h2").innerHTML = data+"€";
|
document.querySelector("#resume h2").innerHTML = data+"€";
|
||||||
|
|
|
||||||
Reference in a new issue