From dd69942dd2da7332d27bc9a394fa47d487e2175d Mon Sep 17 00:00:00 2001
From: flifloo <flifloo@gmail.com>
Date: Mon, 1 Jun 2020 01:19:19 +0200
Subject: [PATCH] Replace js popups by own popups

---
 public/javascripts/commands.js | 31 ++++++-----
 public/javascripts/kitchen.js  | 10 ++--
 public/javascripts/menu.js     | 73 +++++++++++++-------------
 public/javascripts/popups.js   | 95 ++++++++++++++++++++++++++++++++++
 public/javascripts/service.js  | 32 ++++++------
 public/stylesheets/style.css   | 42 +++++++--------
 views/commands.pug             | 15 +-----
 views/kitchen.pug              |  2 +-
 views/menu.pug                 |  2 +-
 views/service.pug              |  2 +-
 10 files changed, 200 insertions(+), 104 deletions(-)
 create mode 100644 public/javascripts/popups.js

diff --git a/public/javascripts/commands.js b/public/javascripts/commands.js
index f0e4d99..e2495b1 100644
--- a/public/javascripts/commands.js
+++ b/public/javascripts/commands.js
@@ -1,3 +1,5 @@
+import {alert, prompt, confirm} from "./popups.js";
+
 const socket = io();
 const dish = document.querySelector("#dish ul");
 const ingredient = document.querySelector("#ingredient ul");
@@ -202,20 +204,20 @@ function price() {
     socket.emit("price", current);
 }
 
-function addUser() {
+async function addUser() {
     let firstName, lastName;
     do {
-        firstName = prompt("First name");
+        firstName = await prompt("First name");
     } while (firstName === "");
     if (firstName) {
         do {
-            lastName = prompt("Last name");
+            lastName = await prompt("Last name");
         } while (lastName === "");
         if (lastName)
             socket.emit("add user", {username: current.client, firstName: firstName, lastName: lastName});
     }
     if (!firstName|| !lastName) {
-        alert("User creation aborted");
+        await alert("User creation aborted");
     }
 }
 
@@ -434,21 +436,21 @@ socket.on("price", data => {
     document.querySelector("#resume h2").innerHTML = data+"€";
 })
 
-socket.on("fail add user", () => {
-    alert("User creation fail !");
-    addUser();
+socket.on("fail add user", async () => {
+    await alert("User creation fail !");
+    await addUser();
 });
 
-socket.on("internal error", () => {
-    alert("An error occurred !");
+socket.on("internal error", async () => {
+    await alert("An error occurred !");
 })
 
-document.querySelector(".validation").addEventListener("click", ev => {
+document.querySelector(".validation").addEventListener("click", async ev => {
     ev.stopPropagation();
     if (!current.dish && !current.ingredient.length && !current.sauce.length && !current.drink && !current.dessert)
-        alert("Empty command !");
+        await alert("Empty command !");
     else if (user.style.color === "red")
-        addUser();
+        await addUser();
     else
         addCommand();
 });
@@ -461,3 +463,8 @@ document.getElementById("user").addEventListener("keyup", ev => {
     socket.emit("list user", input.value);
     current.client = input.value;
 });
+
+document.getElementById("logout").addEventListener("click", async () => {
+    if (await confirm("Do you really want to log out ?"))
+        window.location.href = "logout";
+});
diff --git a/public/javascripts/kitchen.js b/public/javascripts/kitchen.js
index 31ec5eb..4c55da4 100644
--- a/public/javascripts/kitchen.js
+++ b/public/javascripts/kitchen.js
@@ -1,3 +1,5 @@
+import {alert} from "./popups.js";
+
 const socket = io();
 const WIP = document.getElementById("WIP");
 const done = document.getElementById("done");
@@ -81,9 +83,9 @@ socket.on("list command", data => {
     waiter();
 });
 
-socket.on("list service", data => {
+socket.on("list service", async data => {
     if (!data || Object.keys(data).length === 0) {
-        alert("No service set !");
+        await alert("No service set !");
     } else
         socket.emit("list command");
 });
@@ -122,8 +124,8 @@ socket.on("error command", data => {
     waiter();
 });
 
-socket.on("internal error", () => {
-    alert("An error occurred !");
+socket.on("internal error", async () => {
+    await alert("An error occurred !");
 })
 
 document.addEventListener("keyup", ev => {
diff --git a/public/javascripts/menu.js b/public/javascripts/menu.js
index f8eb26f..839929f 100644
--- a/public/javascripts/menu.js
+++ b/public/javascripts/menu.js
@@ -1,3 +1,4 @@
+import {alert, confirm} from "./popups.js";
 const socket = io();
 const dish = document.querySelector("#dish ul");
 const ingredient = document.querySelector("#ingredient ul");
@@ -13,34 +14,36 @@ if (window.location.href.endsWith("#popup"))
 
 
 function popup(ob, el) {
-    document.querySelector("body").insertAdjacentHTML("afterbegin", `<div id="popup">
-    <h1>Edition of ${ob.name}</h1>
-    <div id="edit">
-        <div>
-            <label for="available">Available: </label>
-            <input id="available" type="checkbox">
-        </div>
-        <div>
-            <label for="price">Price: </label>
-            <input id="price" type="number" min="0" step="any" value="${ob.price}">
-        </div>
-    </div>
-    <div id="validation">
-        <div class="container-contact2-form-btn">
-            <div class="wrap-contact2-form-btn">
-                <div class="contact2-form-bgbtn"></div>
-                <a href="#" style=""><button id="cancel" class="contact2-form-btn">Cancel</button></a>
+    document.querySelector("body").insertAdjacentHTML("afterbegin", `<div id="popup-container">
+    <div id="popup">
+        <h1>Edition of ${ob.name}</h1>
+        <div id="edit">
+            <div>
+                <label for="available">Available: </label>
+                <input id="available" type="checkbox">
+            </div>
+            <div>
+                <label for="price">Price: </label>
+                <input id="price" type="number" min="0" step="any" value="${ob.price}">
             </div>
         </div>
-        <div class="container-contact2-form-btn">
-            <div class="wrap-contact2-form-btn">
-                <div class="contact2-form-bgbtn"></div>
-                <a href="#"><button id="apply" class="contact2-form-btn">Apply</button></a>
+        <div id="popup-validation">
+            <div class="container-contact2-form-btn">
+                <div class="wrap-contact2-form-btn">
+                    <div class="contact2-form-bgbtn"></div>
+                    <a href="#" style=""><button id="cancel" class="contact2-form-btn">Cancel</button></a>
+                </div>
+            </div>
+            <div class="container-contact2-form-btn">
+                <div class="wrap-contact2-form-btn">
+                    <div class="contact2-form-bgbtn"></div>
+                    <a href="#"><button id="apply" class="contact2-form-btn">Apply</button></a>
+                </div>
             </div>
         </div>
     </div>
 </div>`);
-    let e = document.getElementById("popup");
+    let e = document.getElementById("popup-container");
     if (ob.available)
         e.querySelector("#available").click()
     if (ob.maxIngredients !== undefined)
@@ -76,8 +79,8 @@ function addDish(d) {
     document.getElementById(`dish${d.id}`).addEventListener("click", ev => {
         popup(db.dish[d.id], ev.target);
     });
-    document.getElementById("remove-dish"+d.id).addEventListener("click", () => {
-        if (confirm("Remove "+d.name+" ?"))
+    document.getElementById("remove-dish"+d.id).addEventListener("click", async () => {
+        if (await confirm("Remove "+d.name+" ?"))
             socket.emit("remove dish", d.id);
     });
 }
@@ -88,8 +91,8 @@ function addIngredient(i) {
     document.getElementById(`ingredient${i.id}`).addEventListener("click", ev => {
         popup(db.ingredient[i.id], ev.target);
     });
-    document.getElementById("remove-ingredient"+i.id).addEventListener("click", () => {
-        if (confirm("Remove "+i.name+" ?"))
+    document.getElementById("remove-ingredient"+i.id).addEventListener("click", async () => {
+        if (await confirm("Remove "+i.name+" ?"))
             socket.emit("remove ingredient", i.id);
     });
 }
@@ -100,8 +103,8 @@ function addSauce(s) {
     document.getElementById(`sauce${s.id}`).addEventListener("click", ev => {
         popup(db.sauce[s.id], ev.target);
     });
-    document.getElementById("remove-sauce"+s.id).addEventListener("click", () => {
-        if (confirm("Remove "+s.name+" ?"))
+    document.getElementById("remove-sauce"+s.id).addEventListener("click", async () => {
+        if (await confirm("Remove "+s.name+" ?"))
             socket.emit("remove sauce", s.id);
     });
 }
@@ -112,8 +115,8 @@ function addDrink(d) {
     document.getElementById(`drink${d.id}`).addEventListener("click", ev => {
         popup(db.drink[d.id], ev.target);
     });
-    document.getElementById("remove-drink"+d.id).addEventListener("click", () => {
-        if (confirm("Remove "+d.name+" ?"))
+    document.getElementById("remove-drink"+d.id).addEventListener("click", async () => {
+        if (await confirm("Remove "+d.name+" ?"))
             socket.emit("remove drink", d.id);
     });
 }
@@ -125,8 +128,8 @@ function addDessert(d) {
     e.addEventListener("click", () => {
         popup(db.dessert[d.id], e);
     });
-    document.getElementById("remove-dessert"+d.id).addEventListener("click", () => {
-        if (confirm("Remove "+d.name+" ?"))
+    document.getElementById("remove-dessert"+d.id).addEventListener("click", async () => {
+        if (await confirm("Remove "+d.name+" ?"))
             socket.emit("remove dessert", d.id);
     });
 }
@@ -264,6 +267,6 @@ socket.on("remove dessert", data => {
     }
 });
 
-socket.on("internal error", () => {
-    alert("An error occurred !");
-})
+socket.on("internal error", async () => {
+    await alert("An error occurred !");
+});
diff --git a/public/javascripts/popups.js b/public/javascripts/popups.js
new file mode 100644
index 0000000..e60a6ac
--- /dev/null
+++ b/public/javascripts/popups.js
@@ -0,0 +1,95 @@
+export function alert(message) {
+    return new Promise(next => {
+        if (document.getElementById("popup-container"))
+            throw new Error("Popup already exist !")
+        document.querySelector("body").insertAdjacentHTML("afterend", `<div id="popup-container">
+    <div id="popup">
+        <h1>${message}</h1>
+        <div id="popup-validation">
+            <div class="container-contact2-form-btn">
+                <div class="wrap-contact2-form-btn">
+                    <div class="contact2-form-bgbtn"></div>
+                    <a><button id="popup-ok" class="contact2-form-btn">Ok</button></a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>`);
+        document.getElementById("popup-ok").addEventListener("click", () => {
+            document.getElementById("popup-container").remove();
+            next();
+        });
+    });
+}
+
+export function confirm(message) {
+    return new Promise(next => {
+        if (document.getElementById("popup-container"))
+            throw new Error("Popup already exist !")
+        document.querySelector("body").insertAdjacentHTML("afterend", `<div id="popup-container">
+    <div id="popup">
+        <h1>${message}</h1>
+        <div id="popup-validation">
+            <div class="container-contact2-form-btn">
+                <div class="wrap-contact2-form-btn">
+                    <div class="contact2-form-bgbtn"></div>
+                    <a><button id="popup-cancel" class="contact2-form-btn">Cancel</button></a>
+                </div>
+            </div>
+            <div class="container-contact2-form-btn">
+                <div class="wrap-contact2-form-btn">
+                    <div class="contact2-form-bgbtn"></div>
+                    <a><button id="popup-ok" class="contact2-form-btn">Ok</button></a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>`);
+        document.getElementById("popup-ok").addEventListener("click", () => {
+            document.getElementById("popup-container").remove();
+            next(true);
+        });
+        document.getElementById("popup-cancel").addEventListener("click", () => {
+            document.getElementById("popup-container").remove();
+            next(false);
+        });
+    });
+}
+
+export function prompt(message, inputArgs) {
+    return new Promise(next => {
+        if (document.getElementById("popup-container"))
+            throw new Error("Popup already exist !")
+        document.querySelector("body").insertAdjacentHTML("afterend", `<div id="popup-container">
+    <div id="popup">
+        <h1>${message}</h1>
+        <div class="wrap-input2">
+            <input class="input2" ${inputArgs ? inputArgs: 'type="text"'}>
+        </div>
+        <div id="popup-validation">
+            <div class="container-contact2-form-btn">
+                <div class="wrap-contact2-form-btn">
+                    <div class="contact2-form-bgbtn"></div>
+                    <a><button id="popup-cancel" class="contact2-form-btn">Cancel</button></a>
+                </div>
+            </div>
+            <div class="container-contact2-form-btn">
+                <div class="wrap-contact2-form-btn">
+                    <div class="contact2-form-bgbtn"></div>
+                    <a><button id="popup-ok" class="contact2-form-btn">Ok</button></a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>`);
+        document.getElementById("popup-ok").addEventListener("click", () => {
+            let val = document.querySelector("#popup input").value
+            document.getElementById("popup-container").remove();
+            next(val);
+        });
+        document.getElementById("popup-cancel").addEventListener("click", () => {
+            document.getElementById("popup-container").remove();
+            next(null);
+        });
+    });
+}
diff --git a/public/javascripts/service.js b/public/javascripts/service.js
index 4b49d2a..b6ff5b0 100644
--- a/public/javascripts/service.js
+++ b/public/javascripts/service.js
@@ -1,26 +1,28 @@
+import {alert, prompt} from "./popups.js";
+
 let socket = io();
 let users = {};
 let usersAdd = [];
 
-function addUser(username) {
+async function addUser(username) {
     let firstName, lastName;
     do {
-        firstName = prompt("First name for " + username);
+        firstName = await prompt("First name for " + username);
     } while (firstName === "");
     if (firstName) {
         do {
-            lastName = prompt("Last name for " + username);
+            lastName = await prompt("Last name for " + username);
         } while (lastName === "");
         if (lastName)
             socket.emit("add user", {username: username, firstName: firstName, lastName: lastName});
     }
     if (!firstName|| !lastName)
-        alert("User creation aborted for " + username);
+        await alert("User creation aborted for " + username);
 }
 
-function next() {
+async function next() {
     if (usersAdd.length)
-        addUser(usersAdd.pop());
+        await addUser(usersAdd.pop());
     else
         socket.emit("set service", users);
 }
@@ -59,8 +61,8 @@ socket.on("list user", data => {
     });
 });
 
-socket.on("add user", () => {
-    next();
+socket.on("add user", async () => {
+    await next();
 });
 
 socket.on("set service", () => {
@@ -68,25 +70,25 @@ socket.on("set service", () => {
     window.close();
 });
 
-socket.on("fail add user", data => {
-    alert("User creation fail !");
+socket.on("fail add user", async data => {
+    await alert("User creation fail !");
     if (data && data.username)
-        addUser(data);
+        await addUser(data);
 });
 
-socket.on("internal error", () => {
-    alert("An error occurred !");
+socket.on("internal error", async () => {
+    await alert("An error occurred !");
 });
 
 document.querySelectorAll("input[type='text']").forEach(e => {
     e.addEventListener("keyup", ev => {hinter(ev)})
 });
 
-document.querySelector("button").addEventListener("click", () => {
+document.querySelector("button").addEventListener("click", async () => {
     document.querySelectorAll("input[type='text']").forEach(e=> {
         if (e.style.color)
             usersAdd.push(e.value);
         users[e.id] = e.value;
     });
-    next();
+    await next();
 });
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index 4dc38f1..9fe2b4c 100644
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@@ -634,30 +634,28 @@ audio{
   margin: auto;
 }
 
-#popup{
+#popup-container {
   position: fixed;
-  top: 40%;
-  left: 18%;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  background-color: rgba(8,9,17,0.47);
+}
+
+#popup {
+  margin: 30vh auto auto auto;
+  width: fit-content;
+  height: fit-content;
   padding: 1vw;
   border-radius: 2vw;
   background-color: rgb(32, 32, 32);
   box-shadow: 10px 8px 5px rgb(0, 0, 0);
   color: white;
-  z-index: 1;
-  display:none;
 }
 
-#popup:target{
-  display: block;
-  animation: 0.7s slide-up;
-}
-
-@keyframes slide-up{
-  0%{top:-50%}
-  100%{top: 40%;}
-}
-
-#popup:target +.bg-contact2{
+#popup +.bg-contact2{
   opacity: 0.2;
 }
 
@@ -665,6 +663,13 @@ audio{
   text-align: center;
 }
 
+#popup-validation {
+  display: flex;
+  flex-direction: row;
+  align-content: center;
+  justify-content: center;
+}
+
 #WIP{
   display: flex;
   flex-wrap : wrap;
@@ -847,8 +852,3 @@ div#teams{
   margin-bottom: 0.5em;
   text-align: center;
 }
-
-#validation {
-  display: flex;
-  flex-direction: row;
-}
diff --git a/views/commands.pug b/views/commands.pug
index cb8d34b..505b5a1 100644
--- a/views/commands.pug
+++ b/views/commands.pug
@@ -12,19 +12,6 @@ block content
             a(href="#popup")
                 li#logout Disconnect
 
-    div#popup
-        h1 Do you really want to log out ?
-        div.container-contact2-form-btn
-            div.wrap-contact2-form-btn
-                div.contact2-form-bgbtn
-                a(href="#")
-                    button.contact2-form-btn Cancel
-        div.container-contact2-form-btn
-            div.wrap-contact2-form-btn
-                div.contact2-form-bgbtn
-                a(href="/logout")
-                    button.contact2-form-btn Logout
-
     div#main-container.bg-contact2(style="background-image: url(/images/bg-01.jpg);height: 93vh")
         form.container(action="")
             div#dish
@@ -56,4 +43,4 @@ block content
         div.list
 
     script(src="/socket.io/socket.io.js")
-    script(src="/javascripts/commands.js")
+    script(src="/javascripts/commands.js" type="module")
diff --git a/views/kitchen.pug b/views/kitchen.pug
index 7b298fc..e28f2a1 100644
--- a/views/kitchen.pug
+++ b/views/kitchen.pug
@@ -8,4 +8,4 @@ block content
             div#done
 
     script(src="/socket.io/socket.io.js")
-    script(src="/javascripts/kitchen.js")
+    script(src="/javascripts/kitchen.js" type="module")
diff --git a/views/menu.pug b/views/menu.pug
index f467665..d89254b 100644
--- a/views/menu.pug
+++ b/views/menu.pug
@@ -20,4 +20,4 @@ block content
                 ul
 
     script(src="/socket.io/socket.io.js")
-    script(src="/javascripts/menu.js")
+    script(src="/javascripts/menu.js" type="module")
diff --git a/views/service.pug b/views/service.pug
index e294c5f..edbc607 100644
--- a/views/service.pug
+++ b/views/service.pug
@@ -29,4 +29,4 @@ block content
                 datalist#user_list
 
     script(src="/socket.io/socket.io.js")
-    script(src="/javascripts/service.js")
\ No newline at end of file
+    script(src="/javascripts/service.js" type="module")
\ No newline at end of file