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

10
public/javascripts/kitchen.js
View file

@ -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 => {

73
public/javascripts/menu.js
View file

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

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

42
public/stylesheets/style.css
View file

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

15
views/commands.pug
View file

@ -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")

2
views/kitchen.pug
View file

@ -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")

2
views/menu.pug
View file

@ -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")

2
views/service.pug
View file

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