From b5f2f5bf0986aecdd01ce54f78b5b099a6bbf5f3 Mon Sep 17 00:00:00 2001 From: flifloo Date: Mon, 27 Jan 2020 20:53:18 +0100 Subject: [PATCH] Improve command div creation, add limited selection, preview of command and real command content --- app/routes.py | 35 +++++++- app/static/js/pc.js | 205 ++++++++++++++++++++++++++++++------------ app/templates/pc.html | 16 +++- 3 files changed, 189 insertions(+), 67 deletions(-) diff --git a/app/routes.py b/app/routes.py index 64bd26d..5c6b12f 100644 --- a/app/routes.py +++ b/app/routes.py @@ -1,6 +1,8 @@ +import functools + from flask import render_template, redirect, url_for, flash, request from flask_login import current_user, login_user, logout_user, login_required -from flask_socketio import emit +from flask_socketio import emit, disconnect from werkzeug.urls import url_parse from app import app, socketio @@ -8,6 +10,16 @@ from app.forms import LoginForm from app.models import User +def authenticated_only(f): + @functools.wraps(f) + def wrapped(*args, **kwargs): + if not current_user.is_authenticated: + disconnect() + else: + return f(*args, **kwargs) + return wrapped + + @app.route("/login", methods=["GET", "POST"]) def login(): if current_user.is_authenticated: @@ -61,6 +73,7 @@ commands = [ "id": 1, "plate": "sanddwitch", "content": "Jambon - Tomate - Brie", + "sauce": "curry", "drink": "Boisson surprise", "dessert": "Panini nutella", "state": "waiting" @@ -69,6 +82,7 @@ commands = [ "id": 2, "plate": "sanddwitch", "content": "Jambon - Tomate - Brie", + "sauce": "bbc", "drink": "Boisson surprise", "dessert": "Panini nutella", "state": "gave" @@ -77,6 +91,7 @@ commands = [ "id": 3, "plate": "sanddwitch", "content": "Jambon - Tomate - Brie", + "sauce": "mayo", "drink": "Boisson surprise", "dessert": "Panini nutella", "state": "error" @@ -85,17 +100,27 @@ commands = [ @socketio.on("connect") -def test_connect(): - emit("command list", {"list": commands, "idcom": len(commands)}) +@authenticated_only +def connect(): + print("New connection") + emit("connect", "ok") + + +@socketio.on("list command") +@authenticated_only +def lscmd(): + emit("list command", {"list": commands, "idcom": len(commands)}) @socketio.on("add command") +@authenticated_only def addcmd(json): - commands.append({"id": len(commands)+1, "plate": json["plate"], "content": json["content"], "drink": json["drink"], "dessert": json["dessert"], "state": "waiting"}) + commands.append({"id": len(commands)+1, "plate": json["plate"], "content": json["content"], "sauce": json["sauce"], "drink": json["drink"], "dessert": json["dessert"], "state": "waiting"}) emit("new command", commands[-1], broadcast=True) @socketio.on("clear command") +@authenticated_only def rmcmd(json): for i, c in enumerate(commands): if c["id"] == json["id"]: @@ -105,6 +130,7 @@ def rmcmd(json): @socketio.on("give command") +@authenticated_only def givecmd(json): for i, c in enumerate(commands): if c["id"] == json["id"]: @@ -114,6 +140,7 @@ def givecmd(json): @socketio.on("error command") +@authenticated_only def errcmd(json): for i, c in enumerate(commands): if c["id"] == json["id"]: diff --git a/app/static/js/pc.js b/app/static/js/pc.js index 8ab068e..40885f7 100644 --- a/app/static/js/pc.js +++ b/app/static/js/pc.js @@ -1,65 +1,25 @@ let socket = io(); let list = document.querySelector('.liste'); +let current = {"plate": null, "content": [], "sauce": [], "drink": null, "dessert": null}; +let radios = {"plate": null}; -function addcmd(id, plate, content, drink, dessert, state) { - let newDiv = document.createElement("div"); - newDiv.classList.add('com'); - newDiv.id = `cmd${id}`; - $(list).append(newDiv); - let numCom = document.createElement("h1"); - let subDiv = document.createElement("div"); - let p1 = document.createElement("p"); - let p2 = document.createElement("p"); - let p3 = document.createElement("p"); - let p4 = document.createElement("p"); - let btn1 = document.createElement("button"); - let btn2 = document.createElement("button"); - let btn3 = document.createElement("button"); - subDiv.classList.add('spec'); - btn1.classList.add('annuler'); - btn2.classList.add('donner'); - btn3.classList.add('erreur'); - numCom.innerHTML = `Commande ${id}`; - p1.innerHTML = plate; - p2.innerHTML = content; - p3.innerHTML = drink; - p4.innerHTML = dessert; - btn1.innerHTML = "Annuler"; - btn2.innerHTML = "Donnée"; - btn3.innerHTML = "Erreur"; - newDiv.append(numCom); - newDiv.append(subDiv); - subDiv.append(p1); - subDiv.append(p2); - subDiv.append(p3); - subDiv.append(p4); - subDiv.append(btn1); - newDiv.append(btn2); - newDiv.append(btn3); - document.querySelector('#resume>h1').innerHTML = `Commande ${id+1}`; - newDiv.addEventListener('click', ev => { - newDiv.classList.toggle('show-spec'); - }); - newDiv.querySelector('.donner').addEventListener('click', ev => { - ev.stopPropagation(); - socket.emit("give command", {"id": id}); - }); - newDiv.querySelector('.annuler').addEventListener('click', ev => { - ev.stopPropagation(); - socket.emit("clear command", {"id": id}); - }); - newDiv.querySelector('.erreur').addEventListener('click', ev => { - ev.stopPropagation(); - socket.emit("error command", {"id": id}); + +function addcmd(id, plate, content, sauce, drink, dessert, state) { + $(list).append(`

Commande ${id}

${plate}

${content}

${sauce}

${drink}

${dessert}

`); + let e = document.querySelector(`.liste #cmd${id}`); + e.addEventListener( "click" ,env => { + env.stopPropagation(); + e.classList.toggle("show-spec"); }); switch (state) { case "gave": - give(newDiv); + give(e); break; case "error": - error(newDiv); + error(e); break; } + document.querySelector('#resume>h1').innerHTML = `Commande ${id+1}`; } function clear(e) { @@ -81,19 +41,39 @@ function error(e) { list.appendChild(e); } -socket.on("command list", function (data) { - var child = list.lastElementChild; +function donner(id) { + socket.emit("give command", {"id": id}); +} +function annuler(id) { + socket.emit("clear command", {"id": id}); +} +function erreur(id) { + socket.emit("error command", {"id": id}); +} + +function addplate() { + +} + +socket.on("connect", function (data) { + if (data === "ok") { + socket.emit("list command"); + } +}); + +socket.on("list command", function (data) { + let child = list.lastElementChild; while (child) { list.removeChild(child); child = list.lastElementChild; } for (let c of data.list) { - addcmd(c.id, c.plate, c.content, c.drink, c.dessert, c.state); + addcmd(c.id, c.plate, c.content, c.sauce, c.drink, c.dessert, c.state); } }); socket.on("new command", function (data) { - addcmd(data.id, data.plate, data.content, data.drink, data.dessert, data.state); + addcmd(data.id, data.plate, data.content, data.sauce, data.drink, data.dessert, data.state); }); socket.on("cleared command", function (data) { @@ -108,6 +88,113 @@ socket.on("glitched command", function (data) { error(document.querySelector(`.liste #cmd${data.id}`)); }); -document.querySelector('#resume button').addEventListener('click', ev => { - socket.emit("add command", {"plate": document.querySelector('#resume :nth-child(2)'), "content": "Jambon - Tomate - Brie", "drink": "Boisson surprise", "dessert": "Panini nutella"}); -}); \ No newline at end of file + +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(); + socket.emit("add command", current); + current = {"plate": null, "content": [], "sauce": [], "drink": null, "dessert": null}; + document.querySelectorAll("input").forEach( e => { + e.checked = false + }); + document.querySelectorAll("#resume p").forEach( e => { + e.innerHTML = "" + }); +}); diff --git a/app/templates/pc.html b/app/templates/pc.html index 2d757f0..108d410 100644 --- a/app/templates/pc.html +++ b/app/templates/pc.html @@ -46,6 +46,10 @@
    • +
  • +
    • +
  • +
    • @@ -55,6 +59,8 @@
    • +
  • +
    • @@ -77,14 +83,16 @@

    Commande 1

    -

    Sandwich dinde - jambon

    -

    Coca-cola

    -

    Beignet Chocolat

    +

    +

    +

    +

    +

    - +

    3,40€