Add socket add dish, ingredient, sauce, drink and dessert, create option on menu and some code refactor

public/javascripts/menu.js

@@ -1,19 +1,11 @@
 import {alert, confirm} from "./popups.js";
+
 const socket = io();
-const dish = document.querySelector("#dish ul");
-const ingredient = document.querySelector("#ingredient ul");
-const sauce = document.querySelector("#sauce ul");
-const drink = document.querySelector("#drink ul");
-const dessert = document.querySelector("#dessert ul");
 
 let db = {dish: {}, ingredient: {}, sauce: {}, drink: {}, dessert: {}};
 
 
-if (window.location.href.endsWith("#popup"))
+function editPopup(ob, el) {
-    window.location.href = window.location.href.replace("#popup", "#");
-
-
-function popup(ob, el) {
     document.querySelector("body").insertAdjacentHTML("afterbegin", `<div id="popup-container">
     <div id="popup">
         <h1>Edition of ${ob.name}</h1>
@@ -64,208 +56,114 @@ function popup(ob, el) {
         });
         e.remove();
     });
-
-    if (window.location.href.endsWith("#"))
-        window.location.href = window.location.href + "popup";
-    else if (!window.location.href.endsWith("#popup"))
-        window.location.href = window.location.href + "#popup";
-    else
-        window.location.href = window.location.href.replace("#popup", "#");
 }
 
-function addDish(d) {
+async function createPopup(type) {
-    db.dish[d.id] = d;
+    document.querySelector("body").insertAdjacentHTML("afterbegin", `<div id="popup-container">
-    dish.insertAdjacentHTML("beforeend", `<li><a id="remove-dish${d.id}">\u274C</a> <a id="dish${d.id}">${d.name}</a></li>`);
+    <div id="popup">
-    document.getElementById(`dish${d.id}`).addEventListener("click", ev => {
+        <h1>Create ${type}</h1>
-        popup(db.dish[d.id], ev.target);
+        <div id="edit">
-    });
+            <div>
-    document.getElementById("remove-dish"+d.id).addEventListener("click", async () => {
+                <label for="name">Name: </label>
-        if (await confirm("Remove "+d.name+" ?"))
+                <input class="input2" id="name" type="text">
-            socket.emit("remove dish", d.id);
+            </div>
-    });
+            <div>
-}
+                <label for="available">Available: </label>
+                <input id="available" type="checkbox" checked>
+            </div>
+            <div>
+                <label for="price">Price: </label>
+                <input id="price" type="number" min="0" step="any">
+            </div>
+        </div>
+        <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-container");
+    if (type === "dish") {
+        e.querySelector("#edit div:last-of-type").insertAdjacentHTML("afterend", `<div><label for="maxIngredients">Max ingredients: </label><input id="maxIngredients" type="number" min="0""></div>`);
+        e.querySelector("#edit div:last-of-type").insertAdjacentHTML("afterend", `<div><label for="maxSauces">Max sauces: </label><input id="maxSauces" type="number" min="0"></div>`);
+    }
 
-function addIngredient(i) {
+    e.querySelector("#cancel").addEventListener("click", () => {
-    db.ingredient[i.id] = i;
+        e.remove();
-    ingredient.insertAdjacentHTML("beforeend", `<li><a id="remove-ingredient${i.id}">\u274C</a> <a id="ingredient${i.id}">${i.name}</a></li>`);
-    document.getElementById(`ingredient${i.id}`).addEventListener("click", ev => {
-        popup(db.ingredient[i.id], ev.target);
     });
-    document.getElementById("remove-ingredient"+i.id).addEventListener("click", async () => {
+    e.querySelector("#apply").addEventListener("click", () => {
-        if (await confirm("Remove "+i.name+" ?"))
+        socket.emit("add " + type, {
-            socket.emit("remove ingredient", i.id);
+            name: e.querySelector("#name").value,
-    });
+            available: e.querySelector("#available").checked,
-}
+            price: parseFloat(e.querySelector("#price").value),
-
+            maxIngredients: type !== "dish" ? undefined : parseInt(e.querySelector("#maxIngredients").value),
-function addSauce(s) {
+            maxSauces: type !== "dish" ? undefined : parseInt(e.querySelector("#maxSauces").value),
-    db.sauce[s.id] = s;
+        });
-    sauce.insertAdjacentHTML("beforeend", `<li><a id="remove-sauce${s.id}">\u274C</a> <a id="sauce${s.id}">${s.name}</a></li>`);
+        e.remove();
-    document.getElementById(`sauce${s.id}`).addEventListener("click", ev => {
-        popup(db.sauce[s.id], ev.target);
-    });
-    document.getElementById("remove-sauce"+s.id).addEventListener("click", async () => {
-        if (await confirm("Remove "+s.name+" ?"))
-            socket.emit("remove sauce", s.id);
-    });
-}
-
-function addDrink(d) {
-    db.drink[d.id] = d;
-    drink.insertAdjacentHTML("beforeend", `<li><a id="remove-drink${d.id}">\u274C</a> <a id="drink${d.id}">${d.name}</a></li>`);
-    document.getElementById(`drink${d.id}`).addEventListener("click", ev => {
-        popup(db.drink[d.id], ev.target);
-    });
-    document.getElementById("remove-drink"+d.id).addEventListener("click", async () => {
-        if (await confirm("Remove "+d.name+" ?"))
-            socket.emit("remove drink", d.id);
-    });
-}
-
-function addDessert(d) {
-    db.dessert[d.id] = d;
-    dessert.insertAdjacentHTML("beforeend", `<li><a id="remove-dessert${d.id}">\u274C</a> <a id="dessert${d.id}">${d.name}</a></li>`);
-    let e = document.getElementById(`dessert${d.id}`);
-    e.addEventListener("click", () => {
-        popup(db.dessert[d.id], e);
-    });
-    document.getElementById("remove-dessert"+d.id).addEventListener("click", async () => {
-        if (await confirm("Remove "+d.name+" ?"))
-            socket.emit("remove dessert", d.id);
     });
 }
 
 socket.on("connected", () => {
-    socket.emit("list dish");
+    for (let i of ["dish", "ingredient", "sauce", "drink", "dessert"])
-    socket.emit("list ingredient");
+        socket.emit("list " + i);
-    socket.emit("list sauce");
-    socket.emit("list drink");
-    socket.emit("list dessert");
 });
 
-socket.on("list dish", data => {
+for (let i of ["dish", "ingredient", "sauce", "drink", "dessert"]) {
-    let child = dish.lastElementChild;
+    let el = document.querySelector(`#${i} ul`);
-    while (child) {
+    function add(e) {
-        dish.removeChild(child);
+        db[i][e.id] = e;
-        child = dish.lastElementChild;
+        el.insertAdjacentHTML("beforeend", `<li><a id="remove-${i}${e.id}">\u274C</a> <a id="${i}${e.id}">${e.name}</a></li>`);
+        document.getElementById(`${i}${e.id}`).addEventListener("click", ev => {
+            editPopup(db[i][e.id], ev.target);
+        });
+        document.getElementById(`remove-${i}${e.id}`).addEventListener("click", async () => {
+            if (await confirm("Remove "+e.name+" ?"))
+                socket.emit("remove " + i, e.id);
+        });
     }
-    for (let d of data)
+    socket.on("list " + i, data => {
-        addDish(d);
+        let child = el.lastElementChild;
-});
+        while (child) {
-
+            el.removeChild(child);
-socket.on("list ingredient", data => {
+            child = el.lastElementChild;
-    let child = ingredient.lastElementChild;
+        }
-    while (child) {
+        for (let d of data)
-        ingredient.removeChild(child);
+            add(d);
-        child = ingredient.lastElementChild;
+    });
-    }
+    socket.on("add " + i, data => {
-    for (let i of data)
+        if (data.available)
-        addIngredient(i);
+            add(data);
-});
+    });
-
+    document.getElementById("add-" + i).addEventListener("click", async () => {
-socket.on("list sauce", data => {
+        await createPopup(i);
-    let child = sauce.lastElementChild;
+    });
-    while (child) {
+    socket.on("fail add "+i, async data => {
-        sauce.removeChild(child);
+        await alert("Fail to add " + i + " " + data.name)
-        child = sauce.lastElementChild;
+    });
-    }
+    socket.on("set " + i, data => {
-    for (let s of data)
+        if (data.available && db[i][data.id] === undefined) {
-        addSauce(s);
+            add(data);
-});
+        } else {
-
+            db[i][data.id] = data;
-socket.on("list drink", data => {
+        }
-    let child = drink.lastElementChild;
+    });
-    while (child) {
+    socket.on("remove " + i, data => {
-        drink.removeChild(child);
+        if (db[i][data]) {
-        child = drink.lastElementChild;
+            el.querySelector("#" + i + data).parentElement.remove();
-    }
+            delete db[i][data]
-    for (let d of data)
+        }
-        addDrink(d);
+    });
-});
+}
-
-socket.on("list dessert", data => {
-    let child = dessert.lastElementChild;
-    while (child) {
-        dessert.removeChild(child);
-        child = dessert.lastElementChild;
-    }
-    for (let d of data)
-        addDessert(d);
-});
-
-socket.on("set dish", data => {
-    if (data.available && db.dish[data.id] === undefined) {
-        addDish(data);
-    } else {
-        db.dish[data.id] = data;
-    }
-});
-
-socket.on("set ingredient", data => {
-    if (data.available && db.ingredient[data.id] === undefined) {
-        addIngredient(data);
-    } else {
-        db.ingredient[data.id] = data;
-    }
-});
-
-socket.on("set sauce", data => {
-    if (data.available && db.sauce[data.id] === undefined) {
-        addSauce(data);
-    } else {
-        db.sauce[data.id] = data;
-    }
-});
-
-socket.on("set drink", data => {
-    if (data.available && db.drink[data.id] === undefined) {
-        addDrink(data);
-    } else {
-        db.drink[data.id] = data;
-    }
-});
-
-socket.on("set dessert", data => {
-    if (data.available && db.dessert[data.id] === undefined) {
-        addDessert(data);
-    } else {
-        db.dessert[data.id] = data;
-    }
-});
-
-socket.on("remove dish", data => {
-    if (db.dish[data]) {
-        dish.querySelector("#dish" + data).parentElement.remove();
-        delete db.dish[data]
-    }
-});
-
-socket.on("remove ingredient", data => {
-    if (db.ingredient[data]) {
-        ingredient.querySelector("#ingredient" + data).parentElement.remove();
-        delete db.ingredient[data]
-    }
-});
-
-socket.on("remove sauce", data => {
-    if (db.sauce[data]) {
-        sauce.querySelector("#sauce" + data).parentElement.remove();
-        delete db.sauce[data]
-    }
-});
-
-socket.on("remove drink", data => {
-    if (db.drink[data]) {
-        drink.querySelector("#drink" + data).parentElement.remove();
-        delete db.drink[data]
-    }
-});
-
-socket.on("remove dessert", data => {
-    if (db.dessert[data]) {
-        dessert.querySelector("#dessert" + data).parentElement.remove();
-        delete db.dessert[data]
-    }
-});
 
 socket.on("internal error", async () => {
     await alert("An error occurred !");

sockets/add/addDessert.js

@@ -0,0 +1,28 @@
+const models = require("../../models");
+const utils = require("../utils");
+
+module.exports = socket => {
+    return async (data) => {
+        try {
+            try {
+                let d = await models.Dessert.create({
+                    name: data.name,
+                    available: data.available,
+                    price: data.price
+                });
+
+                let send = utils.dessertExport(d);
+                socket.emit("add dessert", send);
+                socket.broadcast.emit("add dessert", send);
+            } catch (e) {
+                if (e instanceof models.Sequelize.ValidationError)
+                    socket.emit("fail add dessert", data);
+                else
+                    throw e;
+            }
+        } catch (e) {
+            socket.emit("internal error");
+            console.error(e);
+        }
+    }
+}

sockets/add/addDish.js

@@ -0,0 +1,30 @@
+const models = require("../../models");
+const utils = require("../utils");
+
+module.exports = socket => {
+    return async (data) => {
+        try {
+            try {
+                let d = await models.Dish.create({
+                    name: data.name,
+                    available: data.available,
+                    price: data.price,
+                    maxIngredients: data.maxIngredients,
+                    maxSauces: data.maxSauces
+                });
+
+                let send = utils.dishExport(d);
+                socket.emit("add dish", send);
+                socket.broadcast.emit("add dish", send);
+            } catch (e) {
+                if (e instanceof models.Sequelize.ValidationError)
+                    socket.emit("fail add dish", data);
+                else
+                    throw e;
+            }
+        } catch (e) {
+            socket.emit("internal error");
+            console.error(e);
+        }
+    }
+}

sockets/add/addDrink.js

@@ -0,0 +1,28 @@
+const models = require("../../models");
+const utils = require("../utils");
+
+module.exports = socket => {
+    return async (data) => {
+        try {
+            try {
+                let d = await models.Drink.create({
+                    name: data.name,
+                    available: data.available,
+                    price: data.price
+                });
+
+                let send = utils.drinkExport(d);
+                socket.emit("add drink", send);
+                socket.broadcast.emit("add drink", send);
+            } catch (e) {
+                if (e instanceof models.Sequelize.ValidationError)
+                    socket.emit("fail add drink", data);
+                else
+                    throw e;
+            }
+        } catch (e) {
+            socket.emit("internal error");
+            console.error(e);
+        }
+    }
+}

sockets/add/addIngredient.js

@@ -0,0 +1,28 @@
+const models = require("../../models");
+const utils = require("../utils");
+
+module.exports = socket => {
+    return async (data) => {
+        try {
+            try {
+                let i = await models.Ingredient.create({
+                    name: data.name,
+                    available: data.available,
+                    price: data.price
+                });
+
+                let send = utils.ingredientExport(i);
+                socket.emit("add ingredient", send);
+                socket.broadcast.emit("add ingredient", send);
+            } catch (e) {
+                if (e instanceof models.Sequelize.ValidationError)
+                    socket.emit("fail add ingredient", data);
+                else
+                    throw e;
+            }
+        } catch (e) {
+            socket.emit("internal error");
+            console.error(e);
+        }
+    }
+}

sockets/add/addSauce.js

@@ -0,0 +1,28 @@
+const models = require("../../models");
+const utils = require("../utils");
+
+module.exports = socket => {
+    return async (data) => {
+        try {
+            try {
+                let s = await models.Sauce.create({
+                    name: data.name,
+                    available: data.available,
+                    price: data.price
+                });
+
+                let send = utils.sauceExport(s);
+                socket.emit("add sauce", send);
+                socket.broadcast.emit("add sauce", send);
+            } catch (e) {
+                if (e instanceof models.Sequelize.ValidationError)
+                    socket.emit("fail add sauce", data);
+                else
+                    throw e;
+            }
+        } catch (e) {
+            socket.emit("internal error");
+            console.error(e);
+        }
+    }
+}

sockets/add/addUser.js

@@ -10,15 +10,15 @@ module.exports = socket => {
                     lastName: data.lastName,
                     passwordHash: data.password ? data.password : null
                 });
+
+                socket.emit("add user", data.username);
+                socket.broadcast.emit("add user", data.username);
             } catch (e) {
                 if (e instanceof models.Sequelize.ValidationError)
                     socket.emit("fail add user");
                 else
                     throw e;
             }
-
-            socket.emit("add user", data.username);
-            socket.broadcast.emit("add user", data.username);
         } catch (e) {
             socket.emit("internal error");
             console.error(e);

sockets/index.js

@@ -8,6 +8,11 @@ const listUser = require("./list/listUser");
 const listService = require("./list/listService");
 const addCommand = require("./add/addCommand");
 const addUSer = require("./add/addUser");
+const addDish = require("./add/addDish");
+const addIngredient = require("./add/addIngredient");
+const addSauce = require("./add/addSauce");
+const addDrink = require("./add/addDrink");
+const addDessert = require("./add/addDessert");
 const setDish = require("./set/setDish");
 const setIngredient = require("./set/setIngredient");
 const setSauce = require("./set/setSauce");
@@ -37,6 +42,11 @@ module.exports = socket => {
     socket.on("list service", listService(socket));
     socket.on("add command", addCommand(socket));
     socket.on("add user", addUSer(socket));
+    socket.on("add dish", addDish(socket));
+    socket.on("add ingredient", addIngredient(socket));
+    socket.on("add sauce", addSauce(socket));
+    socket.on("add drink", addDrink(socket));
+    socket.on("add dessert", addDessert(socket));
     socket.on("set dish", setDish(socket));
     socket.on("set ingredient", setIngredient(socket));
     socket.on("set sauce", setSauce(socket));

views/menu.pug

@@ -6,18 +6,23 @@ block content
             div#dish
                 h1 Dishes
                 ul
+                a#add-dish ➕
             div#ingredient
                 h1 Ingredients
                 ul
+                a#add-ingredient ➕
             div#sauce
                 h1 Sauces
                 ul
+                a#add-sauce ➕
             div#drink
                 h1 Drinks
                 ul
+                a#add-drink ➕
             div#dessert
                 h1 Desserts
                 ul
+                a#add-dessert ➕
 
     script(src="/socket.io/socket.io.js")
     script(src="/javascripts/menu.js" type="module")