Improve command div creation, add limited selection, preview of command and real command content

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():
+@authenticated_only
-    emit("command list", {"list": commands, "idcom": len(commands)})
+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"]:

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");
+function addcmd(id, plate, content, sauce, drink, dessert, state) {
-    newDiv.classList.add('com');
+    $(list).append(`<div class='com' id='cmd${id}'> <h1>Commande ${id}</h1> <div class='spec'> <p>${plate}</p><p>${content}</p><p>${sauce}</p><p>${drink}</p><p>${dessert}</p><button class='annuler' onclick='annuler(${id})'>Annuler</button> </div><button class='donner' onclick='donner(${id})'>Donnée</button><button class='erreur' onclick='erreur(${id})'>Erreur</button> </div>`);
-    newDiv.id = `cmd${id}`;
+    let e = document.querySelector(`.liste #cmd${id}`);
-    $(list).append(newDiv);
+    e.addEventListener( "click" ,env => {
-    let numCom = document.createElement("h1");
+        env.stopPropagation();
-    let subDiv = document.createElement("div");
+        e.classList.toggle("show-spec");
-    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});
     });
     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) {
+function donner(id) {
-    var child = list.lastElementChild;
+    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"});
+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 = ""
+    });
 });

app/templates/pc.html

@@ -46,6 +46,10 @@
 					<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">
@@ -55,6 +59,8 @@
 					<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">
@@ -77,14 +83,16 @@
 			</div>
 			<div id="resume">
 				<h1>Commande 1</h1>
-				<p>Sandwich dinde - jambon</p>
+				<p></p>
-				<p>Coca-cola</p>
+				<p></p>
-				<p>Beignet Chocolat</p>
+				<p></p>
+				<p></p>
+				<p></p>
 				<div class="no-margin">
 					<input type="checkbox" checked name="paiement" id="payer">
 					<label for="payer">Payée</label>
 				</div>
-				<button onclick="valider()" class="validation" type="submit">Valider</button>
+				<button class="validation" type="submit">Valider</button>
 				<h2>3,40€</h2>
 				
 			</div>