Dynamic lists from DB
This commit is contained in:
parent
ce847d9be6
commit
ae769f1240
3 changed files with 218 additions and 130 deletions
|
|
@ -100,7 +100,6 @@ def lscmd():
|
|||
commands.append(command_json(c))
|
||||
|
||||
emit("list command", {"list": commands})
|
||||
# TODO: add auto disable checkbox when no plate selected or specific plate
|
||||
|
||||
|
||||
@socketio.on("add command")
|
||||
|
|
@ -199,3 +198,48 @@ def errcmd(json):
|
|||
c.error = True
|
||||
db.session.commit()
|
||||
emit("glitched command", {"id": json["id"]}, broadcast=True)
|
||||
|
||||
|
||||
@socketio.on("list plate")
|
||||
@authenticated_only
|
||||
def lsplate():
|
||||
plates = []
|
||||
for p in Plate.query.all():
|
||||
plates.append({"id": p.id, "name": p.name})
|
||||
emit("list plate", {"list": plates})
|
||||
|
||||
|
||||
@socketio.on("list ingredient")
|
||||
@authenticated_only
|
||||
def lsingredient():
|
||||
ingredients = []
|
||||
for p in Ingredient.query.all():
|
||||
ingredients.append({"id": p.id, "name": p.name})
|
||||
emit("list ingredient", {"list": ingredients})
|
||||
|
||||
|
||||
@socketio.on("list sauce")
|
||||
@authenticated_only
|
||||
def lssauce():
|
||||
sauces = []
|
||||
for p in Sauce.query.all():
|
||||
sauces.append({"id": p.id, "name": p.name})
|
||||
emit("list sauce", {"list": sauces})
|
||||
|
||||
|
||||
@socketio.on("list drink")
|
||||
@authenticated_only
|
||||
def lsdrink():
|
||||
drinks = []
|
||||
for p in Drink.query.all():
|
||||
drinks.append({"id": p.id, "name": p.name})
|
||||
emit("list drink", {"list": drinks})
|
||||
|
||||
|
||||
@socketio.on("list dessert")
|
||||
@authenticated_only
|
||||
def lsdessert():
|
||||
desserts = []
|
||||
for p in Dessert.query.all():
|
||||
desserts.append({"id": p.id, "name": p.name})
|
||||
emit("list dessert", {"list": desserts})
|
||||
|
|
|
|||
|
|
@ -1,4 +1,9 @@
|
|||
let socket = io();
|
||||
let plate = document.querySelector('#plat ul');
|
||||
let ingredient = document.querySelector('#ingredient ul');
|
||||
let sauce = document.querySelector('#sauce ul');
|
||||
let drink = document.querySelector('#boisson ul');
|
||||
let dessert = document.querySelector('#dessert ul');
|
||||
let list = document.querySelector('.liste');
|
||||
let current = {"plate": null, "content": [], "sauce": [], "drink": null, "dessert": null};
|
||||
let radios = {"plate": null};
|
||||
|
|
@ -25,6 +30,114 @@ function addcmd(id, plate, content, sauce, drink, dessert, state) {
|
|||
document.querySelector('#resume>h1').innerHTML = `Commande ${id+1}`;
|
||||
}
|
||||
|
||||
function addplate(id, name) {
|
||||
$(plate).append(`<li><input type="radio" name="plat" id="${id}"><label for="${id}">${name}</label></li>`);
|
||||
let e = document.querySelector(`input[id=${id} ]`);
|
||||
e.addEventListener("click", () => {
|
||||
if (e.checked) {
|
||||
let curr, name;
|
||||
if (e.id === radios["plate"]) {
|
||||
e.checked = false;
|
||||
radios["plate"] = null;
|
||||
curr = null;
|
||||
name = null;
|
||||
} else {
|
||||
radios["plate"] = e.id;
|
||||
curr = e.id;
|
||||
name = document.querySelector(`label[for=${e.id}]`).innerHTML;
|
||||
}
|
||||
current["plate"] = curr;
|
||||
document.querySelectorAll("#resume p")[0].innerHTML = name;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function addingredient(id, name) {
|
||||
$(ingredient).append(`<li><input type="checkbox" name="ingredient" id="${id}"><label for="${id}">${name}</label></li>`);
|
||||
let e = document.querySelector(`input[id=${id} ]`);
|
||||
e.addEventListener("click", () => {
|
||||
if (e.checked)
|
||||
current["content"].push(e.id);
|
||||
else
|
||||
current["content"].splice(current["content"].indexOf(e.id), 1);
|
||||
let content = [];
|
||||
document.querySelectorAll("input[name=ingredient]").forEach( e => {
|
||||
if (e.checked)
|
||||
content.push(document.querySelector(`label[for=${e.id}]`).innerHTML)
|
||||
});
|
||||
document.querySelectorAll("#resume p")[1].innerHTML = content.join(" - ");
|
||||
document.querySelectorAll("input[name=ingredient]").forEach( e => {
|
||||
if (!e.checked)
|
||||
e.disabled = content.length === 3
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
function addsauce(id, name) {
|
||||
$(sauce).append(`<li><input type="checkbox" name="sauce" id="${id}"><label for="${id}">${name}</label></li>`);
|
||||
let e = document.querySelector(`input[id=${id} ]`);
|
||||
e.addEventListener("click", () => {
|
||||
if (e.checked)
|
||||
current["sauce"].push(e.id);
|
||||
else
|
||||
current["sauce"].splice(current["sauce"].indexOf(e.id), 1);
|
||||
let content = [];
|
||||
document.querySelectorAll("input[name=sauce]").forEach( e => {
|
||||
if (e.checked)
|
||||
content.push(document.querySelector(`label[for=${e.id}]`).innerHTML)
|
||||
});
|
||||
document.querySelectorAll("#resume p")[2].innerHTML = content.join(" - ");
|
||||
document.querySelectorAll("input[name=sauce]").forEach( e => {
|
||||
if (!e.checked)
|
||||
e.disabled = content.length === 2
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
function adddrink(id, name) {
|
||||
$(drink).append(`<li><input type="radio" name="boisson" id="${id}"><label for="${id}">${name}</label></li>`);
|
||||
let e = document.querySelector(`input[id=${id} ]`);
|
||||
e.addEventListener("click", () => {
|
||||
if (e.checked) {
|
||||
let curr, name;
|
||||
if (e.id === radios["plate"]) {
|
||||
e.checked = false;
|
||||
radios["plate"] = null;
|
||||
curr = null;
|
||||
name = null;
|
||||
} else {
|
||||
radios["plate"] = e.id;
|
||||
curr = e.id;
|
||||
name = document.querySelector(`label[for=${e.id}]`).innerHTML;
|
||||
}
|
||||
current["drink"] = curr;
|
||||
document.querySelectorAll("#resume p")[3].innerHTML = name;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function adddessert(id, name) {
|
||||
$(dessert).append(`<li><input type="radio" name="dessert" id="${id}"><label for="${id}">${name}</label></li>`);
|
||||
let e = document.querySelector(`input[id=${id} ]`);
|
||||
e.addEventListener("click", () => {
|
||||
if (e.checked) {
|
||||
let curr, name;
|
||||
if (e.id === radios["plate"]) {
|
||||
e.checked = false;
|
||||
radios["plate"] = null;
|
||||
curr = null;
|
||||
name = null;
|
||||
} else {
|
||||
radios["plate"] = e.id;
|
||||
curr = e.id;
|
||||
name = document.querySelector(`label[for=${e.id}]`).innerHTML;
|
||||
}
|
||||
current["dessert"] = curr;
|
||||
document.querySelectorAll("#resume p")[4].innerHTML = name;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function clear(e) {
|
||||
e.classList.remove('finis');
|
||||
e.classList.remove('donnee');
|
||||
|
|
@ -60,12 +173,13 @@ function erreur(id) {
|
|||
socket.emit("error command", {"id": id});
|
||||
}
|
||||
|
||||
function addplate() {
|
||||
|
||||
}
|
||||
|
||||
socket.on("connect", function (data) {
|
||||
if (data === "ok") {
|
||||
socket.emit("list plate");
|
||||
socket.emit("list ingredient");
|
||||
socket.emit("list sauce");
|
||||
socket.emit("list drink");
|
||||
socket.emit("list dessert");
|
||||
socket.emit("list command");
|
||||
}
|
||||
});
|
||||
|
|
@ -81,6 +195,61 @@ socket.on("list command", function (data) {
|
|||
}
|
||||
});
|
||||
|
||||
socket.on("list plate", function (data) {
|
||||
let child = plate.lastElementChild;
|
||||
while (child) {
|
||||
plate.removeChild(child);
|
||||
child = plate.lastElementChild;
|
||||
}
|
||||
for (let p of data.list) {
|
||||
addplate(p.id, p.name);
|
||||
}
|
||||
});
|
||||
|
||||
socket.on("list ingredient", function (data) {
|
||||
let child = ingredient.lastElementChild;
|
||||
while (child) {
|
||||
ingredient.removeChild(child);
|
||||
child = ingredient.lastElementChild;
|
||||
}
|
||||
for (let i of data.list) {
|
||||
addingredient(i.id, i.name);
|
||||
}
|
||||
});
|
||||
|
||||
socket.on("list sauce", function (data) {
|
||||
let child = sauce.lastElementChild;
|
||||
while (child) {
|
||||
sauce.removeChild(child);
|
||||
child = sauce.lastElementChild;
|
||||
}
|
||||
for (let s of data.list) {
|
||||
addsauce(s.id, s.name);
|
||||
}
|
||||
});
|
||||
|
||||
socket.on("list drink", function (data) {
|
||||
let child = drink.lastElementChild;
|
||||
while (child) {
|
||||
drink.removeChild(child);
|
||||
child = drink.lastElementChild;
|
||||
}
|
||||
for (let d of data.list) {
|
||||
adddrink(d.id, d.name);
|
||||
}
|
||||
});
|
||||
|
||||
socket.on("list dessert", function (data) {
|
||||
let child = dessert.lastElementChild;
|
||||
while (child) {
|
||||
dessert.removeChild(child);
|
||||
child = dessert.lastElementChild;
|
||||
}
|
||||
for (let d of data.list) {
|
||||
adddessert(d.id, d.name);
|
||||
}
|
||||
});
|
||||
|
||||
socket.on("new command", function (data) {
|
||||
addcmd(data.id, data.plate, data.content, data.sauce, data.drink, data.dessert, data.state);
|
||||
});
|
||||
|
|
@ -101,105 +270,6 @@ socket.on("glitched command", function (data) {
|
|||
error(document.querySelector(`.liste #cmd${data.id}`));
|
||||
});
|
||||
|
||||
|
||||
document.querySelectorAll("input[name=plat]").forEach( function (e) {
|
||||
e.addEventListener("click", () => {
|
||||
if (e.checked) {
|
||||
let curr, name;
|
||||
if (e.id === radios["plate"]) {
|
||||
e.checked = false;
|
||||
radios["plate"] = null;
|
||||
curr = null;
|
||||
name = null;
|
||||
} else {
|
||||
radios["plate"] = e.id;
|
||||
curr = e.id;
|
||||
name = document.querySelector(`label[for=${e.id}]`).innerHTML;
|
||||
}
|
||||
current["plate"] = curr;
|
||||
document.querySelectorAll("#resume p")[0].innerHTML = name;
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
document.querySelectorAll("input[name=ingredient]").forEach( function (e) {
|
||||
e.addEventListener("click", () => {
|
||||
if (e.checked)
|
||||
current["content"].push(e.id);
|
||||
else
|
||||
current["content"].splice(current["content"].indexOf(e.id), 1);
|
||||
let content = [];
|
||||
document.querySelectorAll("input[name=ingredient]").forEach( e => {
|
||||
if (e.checked)
|
||||
content.push(document.querySelector(`label[for=${e.id}]`).innerHTML)
|
||||
});
|
||||
document.querySelectorAll("#resume p")[1].innerHTML = content.join(" - ");
|
||||
document.querySelectorAll("input[name=ingredient]").forEach( e => {
|
||||
if (!e.checked)
|
||||
e.disabled = content.length === 3
|
||||
});
|
||||
})
|
||||
});
|
||||
|
||||
document.querySelectorAll("input[name=sauce]").forEach( function (e) {
|
||||
e.addEventListener("click", () => {
|
||||
if (e.checked)
|
||||
current["sauce"].push(e.id);
|
||||
else
|
||||
current["sauce"].splice(current["sauce"].indexOf(e.id), 1);
|
||||
let content = [];
|
||||
document.querySelectorAll("input[name=sauce]").forEach( e => {
|
||||
if (e.checked)
|
||||
content.push(document.querySelector(`label[for=${e.id}]`).innerHTML)
|
||||
});
|
||||
document.querySelectorAll("#resume p")[2].innerHTML = content.join(" - ");
|
||||
document.querySelectorAll("input[name=sauce]").forEach( e => {
|
||||
if (!e.checked)
|
||||
e.disabled = content.length === 2
|
||||
});
|
||||
})
|
||||
});
|
||||
|
||||
document.querySelectorAll("input[name=boisson]").forEach( function (e) {
|
||||
e.addEventListener("click", () => {
|
||||
if (e.checked) {
|
||||
let curr, name;
|
||||
if (e.id === radios["plate"]) {
|
||||
e.checked = false;
|
||||
radios["plate"] = null;
|
||||
curr = null;
|
||||
name = null;
|
||||
} else {
|
||||
radios["plate"] = e.id;
|
||||
curr = e.id;
|
||||
name = document.querySelector(`label[for=${e.id}]`).innerHTML;
|
||||
}
|
||||
current["drink"] = curr;
|
||||
document.querySelectorAll("#resume p")[3].innerHTML = name;
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
document.querySelectorAll("input[name=dessert]").forEach( function (e) {
|
||||
e.addEventListener("click", () => {
|
||||
if (e.checked) {
|
||||
let curr, name;
|
||||
if (e.id === radios["plate"]) {
|
||||
e.checked = false;
|
||||
radios["plate"] = null;
|
||||
curr = null;
|
||||
name = null;
|
||||
} else {
|
||||
radios["plate"] = e.id;
|
||||
curr = e.id;
|
||||
name = document.querySelector(`label[for=${e.id}]`).innerHTML;
|
||||
}
|
||||
current["dessert"] = curr;
|
||||
document.querySelectorAll("#resume p")[4].innerHTML = name;
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
document.querySelector('.validation').addEventListener('click', ev => {
|
||||
ev.stopPropagation();
|
||||
current["pc"] = 1;
|
||||
|
|
|
|||
|
|
@ -33,52 +33,26 @@
|
|||
<div id="plat">
|
||||
<h1>PLATS</h1>
|
||||
<ul>
|
||||
<li><input type="radio" name="plat" id="sandwich">
|
||||
<label for="sandwich">Sandwich</label></li>
|
||||
<li><input type="radio" name="plat" id="sandwichS">
|
||||
<label for="sandwichS">Sandwich Surprise</label></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="ingredient">
|
||||
<h1>INGREDIENTS</h1>
|
||||
<ul>
|
||||
<li><input type="checkbox" name="ingredient" id="dinde">
|
||||
<label for="dinde">Dinde</label></li>
|
||||
<li><input type="checkbox" name="ingredient" id="jambon">
|
||||
<label for="jambon">Jambon</label></li>
|
||||
<li><input type="checkbox" name="ingredient" id="salade">
|
||||
<label for="salade">Salade</label></li>
|
||||
<li><input type="checkbox" name="ingredient" id="raclette">
|
||||
<label for="raclette">Raclette</label></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="sauce">
|
||||
<h1>SAUCES</h1>
|
||||
<ul>
|
||||
<li><input type="checkbox" name="sauce" id="beurre">
|
||||
<label for="beurre">Beurre</label></li>
|
||||
<li><input type="checkbox" name="sauce" id="beurreS">
|
||||
<label for="beurreS">Beurre Salé</label></li>
|
||||
<li><input type="checkbox" name="sauce" id="bcc">
|
||||
<label for="bcc">BBC</label></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="boisson">
|
||||
<h1>BOISSONS</h1>
|
||||
<ul>
|
||||
<li><input type="radio" name="boisson" id="coca">
|
||||
<label for="coca">Coca-Cola</label></li>
|
||||
<li><input type="radio" name="boisson" id="icetea">
|
||||
<label for="icetea">Ice-Tea</label></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="dessert">
|
||||
<h1>DESSERTS</h1>
|
||||
<ul>
|
||||
<li><input type="radio" name="dessert" id="beignetC">
|
||||
<label for="beignetC">Beignet Chocolat</label></li>
|
||||
<li><input type="radio" name="dessert" id="beignetF">
|
||||
<label for="beignetF">Beignet Framboise</label></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="resume">
|
||||
|
|
|
|||
Reference in a new issue