Replace js popups by own popups
This commit is contained in:
parent
270c671b8e
commit
dd69942dd2
10 changed files with 200 additions and 104 deletions
|
|
@ -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";
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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 => {
|
||||
|
|
|
|||
|
|
@ -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,7 +14,8 @@ if (window.location.href.endsWith("#popup"))
|
|||
|
||||
|
||||
function popup(ob, el) {
|
||||
document.querySelector("body").insertAdjacentHTML("afterbegin", `<div id="popup">
|
||||
document.querySelector("body").insertAdjacentHTML("afterbegin", `<div id="popup-container">
|
||||
<div id="popup">
|
||||
<h1>Edition of ${ob.name}</h1>
|
||||
<div id="edit">
|
||||
<div>
|
||||
|
|
@ -25,7 +27,7 @@ function popup(ob, el) {
|
|||
<input id="price" type="number" min="0" step="any" value="${ob.price}">
|
||||
</div>
|
||||
</div>
|
||||
<div id="validation">
|
||||
<div id="popup-validation">
|
||||
<div class="container-contact2-form-btn">
|
||||
<div class="wrap-contact2-form-btn">
|
||||
<div class="contact2-form-bgbtn"></div>
|
||||
|
|
@ -39,8 +41,9 @@ function popup(ob, el) {
|
|||
</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
95
public/javascripts/popups.js
Normal 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);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
@ -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();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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")
|
||||
|
|
|
|||
|
|
@ -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")
|
||||
|
|
|
|||
|
|
@ -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")
|
||||
|
|
|
|||
|
|
@ -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")
|
||||
Reference in a new issue