BDE_IUT_Info/kfet
Archived
1
0
Fork 0
Code Activity

Replace js popups by own popups

Browse source
This commit is contained in:
Ethanell 2020-06-01 01:19:19 +02:00
parent 270c671b8e
commit dd69942dd2
10 changed files with 200 additions and 104 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
public/javascripts/commands.js
View file

@ -1,3 +1,5 @@
import {alert, prompt, confirm} from "./popups.js";
const socket = io(); const socket = io();
const dish = document.querySelector("#dish ul"); const dish = document.querySelector("#dish ul");
const ingredient = document.querySelector("#ingredient ul"); const ingredient = document.querySelector("#ingredient ul");
@ -202,20 +204,20 @@ function price() {
socket.emit("price", current); socket.emit("price", current);
} }
function addUser() { async function addUser() {
let firstName, lastName; let firstName, lastName;
do { do {
firstName = prompt("First name"); firstName = await prompt("First name");
} while (firstName === ""); } while (firstName === "");
if (firstName) { if (firstName) {
do { do {
lastName = prompt("Last name"); lastName = await prompt("Last name");
} while (lastName === ""); } while (lastName === "");
if (lastName) if (lastName)
socket.emit("add user", {username: current.client, firstName: firstName, lastName: lastName}); socket.emit("add user", {username: current.client, firstName: firstName, lastName: lastName});
} }
if (!firstName|| !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+"€"; document.querySelector("#resume h2").innerHTML = data+"€";
}) })
socket.on("fail add user", () => { socket.on("fail add user", async () => {
alert("User creation fail !"); await alert("User creation fail !");
addUser(); await addUser();
}); });
socket.on("internal error", () => { socket.on("internal error", async () => {
alert("An error occurred !"); await alert("An error occurred !");
}) })
document.querySelector(".validation").addEventListener("click", ev => { document.querySelector(".validation").addEventListener("click", async ev => {
ev.stopPropagation(); ev.stopPropagation();
if (!current.dish && !current.ingredient.length && !current.sauce.length && !current.drink && !current.dessert) 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") else if (user.style.color === "red")
addUser(); await addUser();
else else
addCommand(); addCommand();
}); });
@ -461,3 +463,8 @@ document.getElementById("user").addEventListener("keyup", ev => {
socket.emit("list user", input.value); socket.emit("list user", input.value);
current.client = 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";
});

10
public/javascripts/kitchen.js
View file

@ -1,3 +1,5 @@
import {alert} from "./popups.js";
const socket = io(); const socket = io();
const WIP = document.getElementById("WIP"); const WIP = document.getElementById("WIP");
const done = document.getElementById("done"); const done = document.getElementById("done");
@ -81,9 +83,9 @@ socket.on("list command", data => {
waiter(); waiter();
}); });
socket.on("list service", data => { socket.on("list service", async data => {
if (!data || Object.keys(data).length === 0) { if (!data || Object.keys(data).length === 0) {
alert("No service set !"); await alert("No service set !");
} else } else
socket.emit("list command"); socket.emit("list command");
}); });
@ -122,8 +124,8 @@ socket.on("error command", data => {
waiter(); waiter();
}); });
socket.on("internal error", () => { socket.on("internal error", async () => {
alert("An error occurred !"); await alert("An error occurred !");
}) })
document.addEventListener("keyup", ev => { document.addEventListener("keyup", ev => {

73
public/javascripts/menu.js
View file

@ -1,3 +1,4 @@
import {alert, confirm} from "./popups.js";
const socket = io(); const socket = io();
const dish = document.querySelector("#dish ul"); const dish = document.querySelector("#dish ul");
const ingredient = document.querySelector("#ingredient ul"); const ingredient = document.querySelector("#ingredient ul");
@ -13,34 +14,36 @@ if (window.location.href.endsWith("#popup"))
function popup(ob, el) { function popup(ob, el) {
document.querySelector("body").insertAdjacentHTML("afterbegin", `<div id="popup"> document.querySelector("body").insertAdjacentHTML("afterbegin", `<div id="popup-container">
<h1>Edition of ${ob.name}</h1> <div id="popup">
<div id="edit"> <h1>Edition of ${ob.name}</h1>
<div> <div id="edit">
<label for="available">Available: </label> <div>
<input id="available" type="checkbox"> <label for="available">Available: </label>
</div> <input id="available" type="checkbox">
<div> </div>
<label for="price">Price: </label> <div>
<input id="price" type="number" min="0" step="any" value="${ob.price}"> <label for="price">Price: </label>
</div> <input id="price" type="number" min="0" step="any" value="${ob.price}">
</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>
</div> </div>
</div> </div>
<div class="container-contact2-form-btn"> <div id="popup-validation">
<div class="wrap-contact2-form-btn"> <div class="container-contact2-form-btn">
<div class="contact2-form-bgbtn"></div> <div class="wrap-contact2-form-btn">
<a href="#"><button id="apply" class="contact2-form-btn">Apply</button></a> <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>
</div> </div>
</div>`); </div>`);
let e = document.getElementById("popup"); let e = document.getElementById("popup-container");
if (ob.available) if (ob.available)
e.querySelector("#available").click() e.querySelector("#available").click()
if (ob.maxIngredients !== undefined) if (ob.maxIngredients !== undefined)
@ -76,8 +79,8 @@ function addDish(d) {
document.getElementById(`dish${d.id}`).addEventListener("click", ev => { document.getElementById(`dish${d.id}`).addEventListener("click", ev => {
popup(db.dish[d.id], ev.target); popup(db.dish[d.id], ev.target);
}); });
document.getElementById("remove-dish"+d.id).addEventListener("click", () => { document.getElementById("remove-dish"+d.id).addEventListener("click", async () => {
if (confirm("Remove "+d.name+" ?")) if (await confirm("Remove "+d.name+" ?"))
socket.emit("remove dish", d.id); socket.emit("remove dish", d.id);
}); });
} }
@ -88,8 +91,8 @@ function addIngredient(i) {
document.getElementById(`ingredient${i.id}`).addEventListener("click", ev => { document.getElementById(`ingredient${i.id}`).addEventListener("click", ev => {
popup(db.ingredient[i.id], ev.target); popup(db.ingredient[i.id], ev.target);
}); });
document.getElementById("remove-ingredient"+i.id).addEventListener("click", () => { document.getElementById("remove-ingredient"+i.id).addEventListener("click", async () => {
if (confirm("Remove "+i.name+" ?")) if (await confirm("Remove "+i.name+" ?"))
socket.emit("remove ingredient", i.id); socket.emit("remove ingredient", i.id);
}); });
} }
@ -100,8 +103,8 @@ function addSauce(s) {
document.getElementById(`sauce${s.id}`).addEventListener("click", ev => { document.getElementById(`sauce${s.id}`).addEventListener("click", ev => {
popup(db.sauce[s.id], ev.target); popup(db.sauce[s.id], ev.target);
}); });
document.getElementById("remove-sauce"+s.id).addEventListener("click", () => { document.getElementById("remove-sauce"+s.id).addEventListener("click", async () => {
if (confirm("Remove "+s.name+" ?")) if (await confirm("Remove "+s.name+" ?"))
socket.emit("remove sauce", s.id); socket.emit("remove sauce", s.id);
}); });
} }
@ -112,8 +115,8 @@ function addDrink(d) {
document.getElementById(`drink${d.id}`).addEventListener("click", ev => { document.getElementById(`drink${d.id}`).addEventListener("click", ev => {
popup(db.drink[d.id], ev.target); popup(db.drink[d.id], ev.target);
}); });
document.getElementById("remove-drink"+d.id).addEventListener("click", () => { document.getElementById("remove-drink"+d.id).addEventListener("click", async () => {
if (confirm("Remove "+d.name+" ?")) if (await confirm("Remove "+d.name+" ?"))
socket.emit("remove drink", d.id); socket.emit("remove drink", d.id);
}); });
} }
@ -125,8 +128,8 @@ function addDessert(d) {
e.addEventListener("click", () => { e.addEventListener("click", () => {
popup(db.dessert[d.id], e); popup(db.dessert[d.id], e);
}); });
document.getElementById("remove-dessert"+d.id).addEventListener("click", () => { document.getElementById("remove-dessert"+d.id).addEventListener("click", async () => {
if (confirm("Remove "+d.name+" ?")) if (await confirm("Remove "+d.name+" ?"))
socket.emit("remove dessert", d.id); socket.emit("remove dessert", d.id);
}); });
} }
@ -264,6 +267,6 @@ socket.on("remove dessert", data => {
} }
}); });
socket.on("internal error", () => { socket.on("internal error", async () => {
alert("An error occurred !"); await alert("An error occurred !");
}) });

95
public/javascripts/popups.js Normal file
View file

@ -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);
});
});
}

32
public/javascripts/service.js
View file

@ -1,26 +1,28 @@
import {alert, prompt} from "./popups.js";
let socket = io(); let socket = io();
let users = {}; let users = {};
let usersAdd = []; let usersAdd = [];
function addUser(username) { async function addUser(username) {
let firstName, lastName; let firstName, lastName;
do { do {
firstName = prompt("First name for " + username); firstName = await prompt("First name for " + username);
} while (firstName === ""); } while (firstName === "");
if (firstName) { if (firstName) {
do { do {
lastName = prompt("Last name for " + username); lastName = await prompt("Last name for " + username);
} while (lastName === ""); } while (lastName === "");
if (lastName) if (lastName)
socket.emit("add user", {username: username, firstName: firstName, lastName: lastName}); socket.emit("add user", {username: username, firstName: firstName, lastName: lastName});
} }
if (!firstName|| !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) if (usersAdd.length)
addUser(usersAdd.pop()); await addUser(usersAdd.pop());
else else
socket.emit("set service", users); socket.emit("set service", users);
} }
@ -59,8 +61,8 @@ socket.on("list user", data => {
}); });
}); });
socket.on("add user", () => { socket.on("add user", async () => {
next(); await next();
}); });
socket.on("set service", () => { socket.on("set service", () => {
@ -68,25 +70,25 @@ socket.on("set service", () => {
window.close(); window.close();
}); });
socket.on("fail add user", data => { socket.on("fail add user", async data => {
alert("User creation fail !"); await alert("User creation fail !");
if (data && data.username) if (data && data.username)
addUser(data); await addUser(data);
}); });
socket.on("internal error", () => { socket.on("internal error", async () => {
alert("An error occurred !"); await alert("An error occurred !");
}); });
document.querySelectorAll("input[type='text']").forEach(e => { document.querySelectorAll("input[type='text']").forEach(e => {
e.addEventListener("keyup", ev => {hinter(ev)}) e.addEventListener("keyup", ev => {hinter(ev)})
}); });
document.querySelector("button").addEventListener("click", () => { document.querySelector("button").addEventListener("click", async () => {
document.querySelectorAll("input[type='text']").forEach(e=> { document.querySelectorAll("input[type='text']").forEach(e=> {
if (e.style.color) if (e.style.color)
usersAdd.push(e.value); usersAdd.push(e.value);
users[e.id] = e.value; users[e.id] = e.value;
}); });
next(); await next();
}); });

42
public/stylesheets/style.css
View file

@ -634,30 +634,28 @@ audio{
margin: auto; margin: auto;
} }
#popup{ #popup-container {
position: fixed; position: fixed;
top: 40%; top: 0;
left: 18%; 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; padding: 1vw;
border-radius: 2vw; border-radius: 2vw;
background-color: rgb(32, 32, 32); background-color: rgb(32, 32, 32);
box-shadow: 10px 8px 5px rgb(0, 0, 0); box-shadow: 10px 8px 5px rgb(0, 0, 0);
color: white; color: white;
z-index: 1;
display:none;
} }
#popup:target{ #popup +.bg-contact2{
display: block;
animation: 0.7s slide-up;
}
@keyframes slide-up{
0%{top:-50%}
100%{top: 40%;}
}
#popup:target +.bg-contact2{
opacity: 0.2; opacity: 0.2;
} }
@ -665,6 +663,13 @@ audio{
text-align: center; text-align: center;
} }
#popup-validation {
display: flex;
flex-direction: row;
align-content: center;
justify-content: center;
}
#WIP{ #WIP{
display: flex; display: flex;
flex-wrap : wrap; flex-wrap : wrap;
@ -847,8 +852,3 @@ div#teams{
margin-bottom: 0.5em; margin-bottom: 0.5em;
text-align: center; text-align: center;
} }
#validation {
display: flex;
flex-direction: row;
}

15
views/commands.pug
View file

@ -12,19 +12,6 @@ block content
a(href="#popup") a(href="#popup")
li#logout Disconnect 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") div#main-container.bg-contact2(style="background-image: url(/images/bg-01.jpg);height: 93vh")
form.container(action="") form.container(action="")
div#dish div#dish
@ -56,4 +43,4 @@ block content
div.list div.list
script(src="/socket.io/socket.io.js") script(src="/socket.io/socket.io.js")
script(src="/javascripts/commands.js") script(src="/javascripts/commands.js" type="module")

2
views/kitchen.pug
View file

@ -8,4 +8,4 @@ block content
div#done div#done
script(src="/socket.io/socket.io.js") script(src="/socket.io/socket.io.js")
script(src="/javascripts/kitchen.js") script(src="/javascripts/kitchen.js" type="module")

2
views/menu.pug
View file

@ -20,4 +20,4 @@ block content
ul ul
script(src="/socket.io/socket.io.js") script(src="/socket.io/socket.io.js")
script(src="/javascripts/menu.js") script(src="/javascripts/menu.js" type="module")

2
views/service.pug
View file

@ -29,4 +29,4 @@ block content
datalist#user_list datalist#user_list
script(src="/socket.io/socket.io.js") script(src="/socket.io/socket.io.js")
script(src="/javascripts/service.js") script(src="/javascripts/service.js" type="module")