Add user selection, add if not exist and avoid jQuery

app/sockets.py

@@ -15,6 +15,7 @@ def authenticated_only(f):
             disconnect()
         else:
             return f(*args, **kwargs)
+
     return wrapped
 
 
@@ -31,7 +32,8 @@ def command_json(c):
         state = "waiting"
     else:
         state = "unknown"
-    return {"id": c.number, "plate": c.plate_id, "ingredient": ingredient, "sauce": sauces, "drink": c.drink_id, "dessert": c.dessert_id, "state": state}
+    return {"id": c.number, "plate": c.plate_id, "ingredient": ingredient, "sauce": sauces, "drink": c.drink_id,
+            "dessert": c.dessert_id, "state": state}
 
 
 @socketio.on("connect")
@@ -56,15 +58,18 @@ def lscmd():
 def addcmd(json):
     c = Command()
     try:
-        c.number = Command.query.filter_by(date=datetime.datetime.now().date()).order_by(Command.number.desc()).first().number+1
+        c.number = Command.query.filter_by(date=datetime.datetime.now().date()).order_by(
+            Command.number.desc()).first().number + 1
     except AttributeError:
         c.number = 1
     c.pc_id = current_user.id
+    if all(i in json and json[i] for i in ["firstname", "lastname", "client"]):
+        db.session.add(User(username=json["client"], firstname=json["firstname"], lastname=json["lastname"]))
     if "client" in json:
         try:
-            c.client_id = User.query.get(json["client"]).id
+            c.client_id = User.query.filter_by(username=json["client"]).first().id
         except AttributeError:
-            c.client_id = 0
+            c.client_id = User.query.filter_by(username="dummy").first().id
     if "plate" in json:
         try:
             c.plate_id = Plate.query.get(json["plate"]).id
@@ -182,3 +187,14 @@ def lsdessert():
     for p in Dessert.query.all():
         desserts.append({"id": p.id, "name": p.name})
     emit("list dessert", {"list": desserts})
+
+
+@socketio.on("list users")
+@authenticated_only
+def lsusers(json):
+    users = User.query.all()
+    users_list = []
+    for u in users:
+        if not json or "user" not in json or json["user"] in u.username:
+            users_list.append(u.username)
+    emit("list users", {"list": users_list})

app/static/js/pc.js

@@ -10,7 +10,7 @@ let radios = {"plate": null, "drink": null, "dessert": null};
 
 
 function addcmd(id, plate, ingredient, sauce, drink, dessert, state) {
-    $(list).append(`<div class="com" id="cmd${id}"> <button class="donner">Donnée</button> <h1>${id}</h1> <div class="spec"> <p>${plate}</p><p>${ingredient}</p><p>${sauce}</p><p>${drink}</p><p>${dessert}</p><button class="annuler">Annuler</button><button class="erreur">Erreur</button> </div> </div>`);
+    list.insertAdjacentHTML("beforeend", `<div class="com" id="cmd${id}"> <button class="donner">Donnée</button> <h1>${id}</h1> <div class="spec"> <p>${plate}</p><p>${ingredient}</p><p>${sauce}</p><p>${drink}</p><p>${dessert}</p><button class="annuler">Annuler</button><button class="erreur">Erreur</button> </div> </div>`);
     let e = document.querySelector(`.liste #cmd${id}`);
     e.addEventListener( "click" ,ev => {
         ev.stopPropagation();
@@ -43,7 +43,7 @@ function addcmd(id, plate, ingredient, sauce, drink, dessert, state) {
 }
 
 function addplate(id, name) {
-    $(plate).append(`<li><input type="radio" name="plate" id="${id}"><label for="${id}">${name}</label></li>`);
+    plate.insertAdjacentHTML("beforeend", `<li><input type="radio" name="plate" id="${id}"><label for="${id}">${name}</label></li>`);
     let e = document.querySelector(`input[id=${id} ]`);
     e.addEventListener("click", () => {
         radiocheck(e,  "plate",0);
@@ -56,7 +56,7 @@ function addplate(id, name) {
 }
 
 function addingredient(id, name) {
-    $(ingredient).append(`<li><input type="checkbox" disabled=true name="ingredient" id="${id}"><label for="${id}">${name}</label></li>`);
+    ingredient.insertAdjacentHTML("beforeend", `<li><input type="checkbox" disabled=true name="ingredient" id="${id}"><label for="${id}">${name}</label></li>`);
     let e = document.querySelector(`input[id=${id} ]`);
     e.addEventListener("click", () => {
         checkcheck(e, "ingredient", 1, 3)
@@ -64,7 +64,7 @@ function addingredient(id, name) {
 }
 
 function addsauce(id, name) {
-    $(sauce).append(`<li><input type="checkbox" disabled=true name="sauce" id="${id}"><label for="${id}">${name}</label></li>`);
+    sauce.insertAdjacentHTML("beforeend", `<li><input type="checkbox" disabled=true name="sauce" id="${id}"><label for="${id}">${name}</label></li>`);
     let e = document.querySelector(`input[id=${id} ]`);
     e.addEventListener("click", () => {
         checkcheck(e, "sauce", 2, 2)
@@ -72,7 +72,7 @@ function addsauce(id, name) {
 }
 
 function adddrink(id, name) {
-    $(drink).append(`<li><input type="radio" name="drink" id="${id}"><label for="${id}">${name}</label></li>`);
+    drink.insertAdjacentHTML("beforeend", `<li><input type="radio" name="drink" id="${id}"><label for="${id}">${name}</label></li>`);
     let e = document.querySelector(`input[id=${id} ]`);
     e.addEventListener("click", () => {
         radiocheck(e, "drink", 3)
@@ -80,7 +80,7 @@ function adddrink(id, name) {
 }
 
 function adddessert(id, name) {
-    $(dessert).append(`<li><input type="radio" name="dessert" id="${id}"><label for="${id}">${name}</label></li>`);
+    dessert.insertAdjacentHTML("beforeend", `<li><input type="radio" name="dessert" id="${id}"><label for="${id}">${name}</label></li>`);
     let e = document.querySelector(`input[id=${id} ]`);
     e.addEventListener("click", () => {
         radiocheck(e, "dessert", 4)
@@ -241,11 +241,16 @@ socket.on("glitched command", data => {
 
 document.querySelector(".validation").addEventListener("click", ev => {
     ev.stopPropagation();
+    let user = document.getElementById("user");
     if (!current.plate && !current.ingredient.length && !current.sauce.length && !current.drink && !current.dessert) {
         alert("Empty command !");
         return;
+    } else if (user.style.color === "red") {
+        current["firstname"] = prompt("Prénom");
+        current["lastname"] = prompt("Nom");
     }
-    current["client"] = 1;
+
+    current["client"] = user.value;
     socket.emit("add command", current);
     current = {"plate": null, "ingredient": [], "sauce": [], "drink": null, "dessert": null};
     document.querySelectorAll("input[name=plate],input[name=drink],input[name=dessert]").forEach( e => {
@@ -258,4 +263,33 @@ document.querySelector(".validation").addEventListener("click", ev => {
     document.querySelectorAll("#resume p").forEach( e => {
         e.innerHTML = ""
     });
+    user.value = "";
+    user.style.color = "";
+    document.getElementById("user_list").innerHTML = "";
+});
+
+document.getElementById("user").addEventListener("keyup", ev => {hinter(ev)});
+
+function hinter(ev) {
+    let input = ev.target;
+    let min_characters = 0;
+    if (input.value.length < min_characters)
+        return;
+    socket.emit("list users", {"user": input.value});
+}
+
+socket.on("list users", data => {
+    console.log(data);
+    let user_list = document.getElementById("user_list");
+    user_list.innerHTML = "";
+    for (let u of data["list"]) {
+        user_list.insertAdjacentHTML("beforeend", `<option value="${u}">`);
+    }
+
+    let user = document.getElementById("user");
+    if (data["list"].indexOf(user.value) === -1)
+        user.style.color = "red";
+    else {
+        user.style.color = "";
+    }
 });

app/templates/pc.html

@@ -62,7 +62,9 @@
 				<p></p>
 				<p></p>
 				<p></p>
-				<input id="user" type="text" placeholder="Username">
+				<input list="user_list" id="user" type="text" placeholder="Username">
+				<datalist id="user_list">
+				</datalist>
 				<button class="validation" type="submit">Valider</button>
 				<h2>3,40€</h2>
 				
@@ -74,7 +76,6 @@
 	</div>
 
 <!--===============================================================================================-->
-<script src="{{ url_for('static', filename='vendor/jquery/jquery-3.2.1.min.js') }}"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js" integrity="sha256-yr4fRk/GU1ehYJPAs8P4JlTgu0Hdsp4ZKrx8bDEDC3I=" crossorigin="anonymous"></script>
 <script src="{{ url_for('static', filename='js/pc.js') }}"></script>
 {% endblock %}