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))
|
commands.append(command_json(c))
|
||||||
|
|
||||||
emit("list command", {"list": commands})
|
emit("list command", {"list": commands})
|
||||||
# TODO: add auto disable checkbox when no plate selected or specific plate
|
|
||||||
|
|
||||||
|
|
||||||
@socketio.on("add command")
|
@socketio.on("add command")
|
||||||
|
|
@ -199,3 +198,48 @@ def errcmd(json):
|
||||||
c.error = True
|
c.error = True
|
||||||
db.session.commit()
|
db.session.commit()
|
||||||
emit("glitched command", {"id": json["id"]}, broadcast=True)
|
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 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 list = document.querySelector('.liste');
|
||||||
let current = {"plate": null, "content": [], "sauce": [], "drink": null, "dessert": null};
|
let current = {"plate": null, "content": [], "sauce": [], "drink": null, "dessert": null};
|
||||||
let radios = {"plate": 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}`;
|
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) {
|
function clear(e) {
|
||||||
e.classList.remove('finis');
|
e.classList.remove('finis');
|
||||||
e.classList.remove('donnee');
|
e.classList.remove('donnee');
|
||||||
|
|
@ -60,12 +173,13 @@ function erreur(id) {
|
||||||
socket.emit("error command", {"id": id});
|
socket.emit("error command", {"id": id});
|
||||||
}
|
}
|
||||||
|
|
||||||
function addplate() {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
socket.on("connect", function (data) {
|
socket.on("connect", function (data) {
|
||||||
if (data === "ok") {
|
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");
|
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) {
|
socket.on("new command", function (data) {
|
||||||
addcmd(data.id, data.plate, data.content, data.sauce, data.drink, data.dessert, data.state);
|
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}`));
|
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 => {
|
document.querySelector('.validation').addEventListener('click', ev => {
|
||||||
ev.stopPropagation();
|
ev.stopPropagation();
|
||||||
current["pc"] = 1;
|
current["pc"] = 1;
|
||||||
|
|
|
||||||
|
|
@ -33,52 +33,26 @@
|
||||||
<div id="plat">
|
<div id="plat">
|
||||||
<h1>PLATS</h1>
|
<h1>PLATS</h1>
|
||||||
<ul>
|
<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>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div id="ingredient">
|
<div id="ingredient">
|
||||||
<h1>INGREDIENTS</h1>
|
<h1>INGREDIENTS</h1>
|
||||||
<ul>
|
<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>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div id="sauce">
|
<div id="sauce">
|
||||||
<h1>SAUCES</h1>
|
<h1>SAUCES</h1>
|
||||||
<ul>
|
<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>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div id="boisson">
|
<div id="boisson">
|
||||||
<h1>BOISSONS</h1>
|
<h1>BOISSONS</h1>
|
||||||
<ul>
|
<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>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div id="dessert">
|
<div id="dessert">
|
||||||
<h1>DESSERTS</h1>
|
<h1>DESSERTS</h1>
|
||||||
<ul>
|
<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>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div id="resume">
|
<div id="resume">
|
||||||
|
|
|
||||||
Reference in a new issue