463 lines
13 KiB
JavaScript
463 lines
13 KiB
JavaScript
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");
|
|
|
|
let current = {dish: null, ingredient: [], sauce: [], drink: null, dessert: null};
|
|
let radios = {dish: null, drink: null, dessert: null};
|
|
let db = {dish: {}, ingredient: {}, sauce: {}, drink: {}, dessert: {}};
|
|
|
|
|
|
function addCmd(command) {
|
|
list.insertAdjacentHTML("beforeend", `<div class="com" id="cmd${command.number}">
|
|
<button class="give">Give</button>
|
|
<h1>${command.number}</h1>
|
|
<div class="spec">
|
|
<h2>${command.sandwich}</h2>
|
|
<h3>${command.client}</h3>
|
|
<p>${command.dish}</p>
|
|
<p>${command.ingredients}</p>
|
|
<p>${command.sauces}</p>
|
|
<p>${command.drink}</p>
|
|
<p>${command.dessert}</p>
|
|
<button class="cancel">Cancel</button>
|
|
<button class="error">Error</button>
|
|
</div>
|
|
</div>`);
|
|
let e = document.querySelector(`.list #cmd${command.number}`);
|
|
e.addEventListener( "click" ,ev => {
|
|
ev.stopPropagation();
|
|
e.classList.toggle("show-spec");
|
|
});
|
|
e.querySelector(".give").addEventListener("click", ev => {
|
|
ev.stopPropagation();
|
|
socket.emit("give command", command.number);
|
|
});
|
|
e.querySelector(".cancel").addEventListener("click", ev => {
|
|
ev.stopPropagation();
|
|
socket.emit("clear command", command.number);
|
|
});
|
|
e.querySelector(".error").addEventListener("click", ev => {
|
|
ev.stopPropagation();
|
|
socket.emit("error command", command.number);
|
|
});
|
|
if (command.error)
|
|
error(e)
|
|
else if (command.give)
|
|
give(e)
|
|
else if (command.done)
|
|
done(e)
|
|
else if (command.WIP)
|
|
WIP(e, command.sandwich)
|
|
document.querySelector("#resume>h1").innerHTML = `Command ${command.number+1}`;
|
|
}
|
|
|
|
function addDish(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>`);
|
|
let e = document.querySelector(`input[id=dish${d.id}]`);
|
|
e.addEventListener("click", () => {
|
|
radioCheck(e);
|
|
document.querySelectorAll("input[name=ingredient],input[name=sauce]").forEach( el => {
|
|
if (el.checked)
|
|
el.click();
|
|
});
|
|
document.querySelectorAll("input[name=ingredient],input[name=sauce]").forEach( el => {
|
|
el.disabled = !(e.checked && !(db.dish[e.id.replace(e.name, "")]["max" + el.name.charAt(0).toUpperCase() + el.name.slice(1)+"s"] === 0));
|
|
});
|
|
})
|
|
}
|
|
|
|
function addIngredient(i) {
|
|
db.ingredient[i.id] = i;
|
|
ingredient.insertAdjacentHTML("beforeend", `<li><input type="checkbox" disabled=true name="ingredient" id="ingredient${i.id}"><label for="ingredient${i.id}">${i.name}</label></li>`);
|
|
let e = document.querySelector(`input[id=ingredient${i.id}]`);
|
|
e.addEventListener("click", () => {
|
|
checkCheck(e)
|
|
})
|
|
}
|
|
|
|
function addSauce(s) {
|
|
db.sauce[s.id] = s;
|
|
sauce.insertAdjacentHTML("beforeend", `<li><input type="checkbox" disabled=true name="sauce" id="sauce${s.id}"><label for="sauce${s.id}">${s.name}</label></li>`);
|
|
let e = document.querySelector(`input[id=sauce${s.id}]`);
|
|
e.addEventListener("click", () => {
|
|
checkCheck(e)
|
|
})
|
|
}
|
|
|
|
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) {
|
|
if (e.checked) {
|
|
let curr, name;
|
|
if (e.id.replace(e.name, "") === radios[e.name]) {
|
|
e.checked = false;
|
|
radios[e.name] = null;
|
|
curr = null;
|
|
name = null;
|
|
} else {
|
|
radios[e.name] = e.id.replace(e.name, "");
|
|
curr = e.id.replace(e.name, "");
|
|
name = document.querySelector(`label[for=${e.id}]`).innerHTML;
|
|
}
|
|
current[e.name] = curr;
|
|
price();
|
|
document.getElementById("p-"+e.name).innerHTML = name;
|
|
}
|
|
}
|
|
|
|
function checkCheck(e) {
|
|
if (e.checked)
|
|
current[e.name].push(e.id.replace(e.name, ""));
|
|
else
|
|
current[e.name].splice(current[e.name].indexOf(e.id.replace(e.name, "")), 1);
|
|
document.querySelectorAll(`input[name=${e.name}]`).forEach( e => {
|
|
if (!e.checked)
|
|
e.disabled = current[e.name].length === db.dish[current.dish]["max"+e.name.charAt(0).toUpperCase() + e.name.slice(1)+"s"];
|
|
});
|
|
price();
|
|
let names = [];
|
|
current[e.name].forEach(el=>names.push(document.querySelector(`label[for=${e.name}${el}]`).innerHTML));
|
|
document.getElementById("p-"+e.name).innerHTML = names.join(" - ");
|
|
}
|
|
|
|
function clear(e) {
|
|
e.classList.remove("done");
|
|
e.classList.remove("give");
|
|
e.classList.remove("warning");
|
|
e.classList.remove("WIP");
|
|
e.classList.remove("show-spec");
|
|
list.prepend(e);
|
|
}
|
|
|
|
function WIP(e, name) {
|
|
e.classList.remove("show-spec");
|
|
e.classList.add("WIP");
|
|
e.querySelector("h2").innerHTML = name;
|
|
}
|
|
|
|
function done(e) {
|
|
e.classList.remove("show-spec");
|
|
e.classList.add("done");
|
|
}
|
|
|
|
function give(e) {
|
|
e.classList.remove("show-spec");
|
|
e.classList.add("give");
|
|
list.appendChild(e);
|
|
}
|
|
|
|
function error(e) {
|
|
e.classList.remove("show-spec");
|
|
e.classList.add("warning");
|
|
list.appendChild(e);
|
|
}
|
|
|
|
function price() {
|
|
socket.emit("price", current);
|
|
}
|
|
|
|
function addUser() {
|
|
let firstName, lastName;
|
|
do {
|
|
firstName = prompt("First name");
|
|
} while (firstName === "");
|
|
if (firstName) {
|
|
do {
|
|
lastName = prompt("Last name");
|
|
} while (lastName === "");
|
|
if (lastName)
|
|
socket.emit("add user", {username: current.client, firstName: firstName, lastName: lastName});
|
|
}
|
|
if (!firstName|| !lastName) {
|
|
alert("User creation aborted");
|
|
}
|
|
}
|
|
|
|
function addCommand() {
|
|
current.pc = null;
|
|
socket.emit("add command", current);
|
|
clearSelections();
|
|
}
|
|
|
|
function clearSelections() {
|
|
current = {dish: null, ingredient: [], sauce: [], drink: null, dessert: null, price: {}};
|
|
document.querySelectorAll("input[name=dish],input[name=drink],input[name=dessert]").forEach( e => {
|
|
e.checked = false;
|
|
});
|
|
document.querySelectorAll("input[name=ingredient],input[name=sauce]").forEach( e => {
|
|
e.checked = false;
|
|
e.disabled = true;
|
|
});
|
|
document.querySelectorAll("#resume p").forEach( e => {
|
|
e.innerHTML = ""
|
|
});
|
|
let user = document.getElementById("user");
|
|
user.value = "";
|
|
user.style.color = "";
|
|
document.getElementById("user_list").innerHTML = "";
|
|
document.querySelector("#resume h2").innerHTML = "0€";
|
|
}
|
|
|
|
socket.on("connected", () => {
|
|
socket.emit("list dish");
|
|
socket.emit("list ingredient");
|
|
socket.emit("list sauce");
|
|
socket.emit("list drink");
|
|
socket.emit("list dessert");
|
|
socket.emit("list command");
|
|
});
|
|
|
|
socket.on("list command", data => {
|
|
let child = list.lastElementChild;
|
|
while (child) {
|
|
list.removeChild(child);
|
|
child = list.lastElementChild;
|
|
}
|
|
for (let c of data)
|
|
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 => {
|
|
let user_list = document.getElementById("user_list");
|
|
user_list.innerHTML = "";
|
|
for (let u of data)
|
|
user_list.insertAdjacentHTML("beforeend", `<option value="${u}">`);
|
|
|
|
let user = document.getElementById("user");
|
|
if (data.indexOf(user.value) === -1)
|
|
user.style.color = "red";
|
|
else
|
|
user.style.color = "";
|
|
});
|
|
|
|
socket.on("new command", data => {
|
|
addCmd(data);
|
|
});
|
|
|
|
socket.on("clear command", data => {
|
|
clear(document.querySelector(`.list #cmd${data}`))
|
|
});
|
|
|
|
socket.on("WIP command", data => {
|
|
WIP(document.querySelector(`.list #cmd${data.number}`), data.sandwich)
|
|
});
|
|
|
|
socket.on("done command", data => {
|
|
done(document.querySelector(`.list #cmd${data}`))
|
|
});
|
|
|
|
socket.on("give command", data => {
|
|
give(document.querySelector(`.list #cmd${data}`))
|
|
});
|
|
|
|
socket.on("error command", data => {
|
|
error(document.querySelector(`.list #cmd${data}`))
|
|
});
|
|
|
|
socket.on("add user", data => {
|
|
if (data === current.client)
|
|
addCommand();
|
|
});
|
|
|
|
socket.on("set dish", data => {
|
|
if (data.available && db.dish[data.id] === undefined)
|
|
addDish(data);
|
|
else if (!data.available && db.dish[data.id] !== undefined)
|
|
removeDish(data.id);
|
|
else
|
|
db.dish[data.id] = data;
|
|
});
|
|
|
|
socket.on("set ingredient", data => {
|
|
if (data.available && db.ingredient[data.id] === undefined)
|
|
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 => {
|
|
document.querySelector("#resume h2").innerHTML = data+"€";
|
|
})
|
|
|
|
socket.on("fail add user", () => {
|
|
alert("User creation fail !");
|
|
addUser();
|
|
});
|
|
|
|
socket.on("internal error", () => {
|
|
alert("An error occurred !");
|
|
})
|
|
|
|
document.querySelector(".validation").addEventListener("click", ev => {
|
|
ev.stopPropagation();
|
|
if (!current.dish && !current.ingredient.length && !current.sauce.length && !current.drink && !current.dessert)
|
|
alert("Empty command !");
|
|
else if (user.style.color === "red")
|
|
addUser();
|
|
else
|
|
addCommand();
|
|
});
|
|
|
|
document.getElementById("user").addEventListener("keyup", ev => {
|
|
let input = ev.target;
|
|
let min_characters = 0;
|
|
if (input.value.length < min_characters)
|
|
return;
|
|
socket.emit("list user", input.value);
|
|
current.client = input.value;
|
|
});
|