Refactor the orders strand

views/dashboardPage/bundle.js

@@ -3283,211 +3283,85 @@ let orderFilter = {
 module.exports = orderFilter;
 },{}],19:[function(require,module,exports){
 let orders = {
-    isPopulated: false,
-    isFetched: false,
-
-    display: async function(Order){
-        if(!this.isFetched){
-            let loader = document.getElementById("loaderContainer");
-            loader.style.display = "flex";
-
-            fetch("/order", {
-                method: "GET",
-                headers: {
-                    "Content-Type": "application/json;charset=utf-8"
-                },
-            })
-                .then((response) => response.json())
-                .then((response)=>{
-                    if(typeof(response) === "string"){
-                        banner.createError(response);
-                    }else{
-                        for(let i = 0; i < response.length; i++){
-                            let ingredients = [];
-                            for(let j = 0; j < response[i].ingredients.length; j++){
-                                const orderIngredient = response[i].ingredients[j];
-                                for(let k = 0; k < merchant.ingredients.length; k++){
-                                    if(merchant.ingredients[k].ingredient.id === orderIngredient.ingredient){
-                                        ingredients.push({
-                                            ingredient: merchant.ingredients[k].ingredient,
-                                            quantity: orderIngredient.quantity,
-                                            pricePerUnit: orderIngredient.pricePerUnit
-                                        });
-                                    }
-                                }
-                            }
-
-                            merchant.addOrder(new Order(
-                                response[i]._id,
-                                response[i].name,
-                                response[i].date,
-                                response[i].taxes,
-                                response[i].fees,
-                                ingredients,
-                                merchant
-                            ));
-                        }
-
-                        document.getElementById("orderSubmitForm").onsubmit = ()=>{this.submitFilter(Order)};
-                        this.isFetched = true;
-                        
-                        this.populate();
-                        this.isPopulated = true;
-                    }
-                })
-                .catch((err)=>{
-                    banner.createError("SOMETHING WENT WRONG. TRY REFRESHING THE PAGE");
-                })
-                .finally(()=>{
-                    loader.style.display = "none";
-                });
-        }
-
-        if(!this.isPopulated){
-            this.populate();
-            this.isPopulated = true;
-        }
-    },
-
-    populate: function(){
-        let listDiv = document.getElementById("orderList");
-        let template = document.getElementById("order").content.children[0];
-        let dateDropdown = document.getElementById("dateDropdownOrder");
-        let ingredientDropdown = document.getElementById("ingredientDropdown");
+    orders: [],
 
-        dateDropdown.style.display = "none";
-        ingredientDropdown.style.display = "none";
-
-        document.getElementById("dateFilterBtnOrder").onclick = ()=>{this.toggleDropdown(dateDropdown)};
-        document.getElementById("ingredientFilterBtn").onclick = ()=>{this.toggleDropdown(ingredientDropdown)};
-        document.getElementById("orderFilterBtn").onclick = ()=>{controller.openSidebar("orderFilter")};
-        document.getElementById("newOrderBtn").onclick = ()=>{controller.openSidebar("newOrder")};
-
-        for(let i = 0; i < merchant.ingredients.length; i++){
-            let checkbox = document.createElement("input");
-            checkbox.type = "checkbox";
-            checkbox.ingredient = merchant.ingredients[i].ingredient;
-            ingredientDropdown.appendChild(checkbox);
-
-            let label = document.createElement("label");
-            label.innerText = merchant.ingredients[i].ingredient.name;
-            label.for = checkbox;
-            ingredientDropdown.appendChild(label);
-
-            let brk = document.createElement("br");
-            ingredientDropdown.appendChild(brk);
-        }
-
-        while(listDiv.children.length > 0){
-            listDiv.removeChild(listDiv.firstChild);
-        }
-
-        for(let i = 0; i < merchant.orders.length; i++){
-            let row = template.cloneNode(true);
-
-            row.children[0].innerText = merchant.orders[i].name;
-            row.children[1].innerText = `${merchant.orders[i].ingredients.length} ingredients`;
-            row.children[2].innerText = new Date(merchant.orders[i].date).toLocaleDateString("en-US");
-            row.children[3].innerText = `$${merchant.orders[i].getTotalCost().toFixed(2)}`;
-            row.onclick = ()=>{controller.openSidebar("orderDetails", merchant.orders[i])};
-            listDiv.appendChild(row);
-        }
-    },
-
-    submitFilter: function(){
-        event.preventDefault();
-
-        let data = {
-            startDate: document.getElementById("orderFilDate1").valueAsDate,
-            endDate: document.getElementById("orderFilDate2").valueAsDate,
-            ingredients: []
-        }
+    display: function(Order){
+        if(this.orders.length === 0){
+            this.getOrders(Order);
+        }else{
+            document.getElementById("orderFilterBtn").onclick = ()=>{controller.openSidebar("orderFilter")};
+            document.getElementById("newOrderBtn").onclick = ()=>{controller.openSidebar("newOrder")};
 
-        if(data.startDate >= data.endDate){
-            banner.createError("START DATE CANNOT BE AFTER END DATE");
-            return;
-        }
+            let orderList = document.getElementById("orderList");
+            let template = document.getElementById("order").content.children[0];
 
-        let ingredientChoices = document.getElementById("ingredientDropdown");
-        for(let i = 0; i < ingredientChoices.children.length; i += 3){
-            if(ingredientChoices.children[i].checked){
-                data.ingredients.push(ingredientChoices.children[i].ingredient.id);
+            while(orderList.children.length > 0){
+                orderList.removeChild(orderList.firstChild);
             }
-        }
 
-        if(data.ingredients.length === 0){
-            for(let i = 0; i < merchant.ingredients.length; i++){
-                data.ingredients.push(merchant.ingredients[i].ingredient.id);
+            for(let i = 0; i < this.orders.length; i++){
+                let orderDiv = template.cloneNode(true);
+                orderDiv.order = this.orders[i];
+                orderDiv.children[0].innerText = this.orders[i].name;
+                orderDiv.children[1].innerText = `${this.orders[i].ingredients.length} ingredients`;
+                orderDiv.children[2].innerText = this.orders[i].date.toLocaleDateString("en-US");
+                orderDiv.children[3].innerText = `$${this.orders[i].getTotalCost().toFixed(2)}`;
+                orderDiv.onclick = ()=>{controller.openSidebar("orderDetails", this.orders[i])};
+                orderList.appendChild(orderDiv);
             }
         }
+    },
 
+    getOrders: function(Order){
         let loader = document.getElementById("loaderContainer");
         loader.style.display = "flex";
 
         fetch("/order", {
-            method: "POST",
+            method: "get",
             headers: {
                 "Content-Type": "application/json;charset=utf-8"
-            },
-            body: JSON.stringify(data)
+            }
         })
-            .then((response) => response.json())
-            .then((response)=>{
-                if(typeof(response) === "string"){
-                    banner.createError(response);
-                }else{
-                    let orderList = document.getElementById("orderList");
-                    let template = document.getElementById("order").content.children[0];
-
-                    while(orderList.children.length > 0){
-                        orderList.removeChild(orderList.firstChild);
-                    }
-
-                    for(let i = 0; i < response.length; i++){
-                        let orderDiv = template.cloneNode(true);
-                        let order = new Order(
-                            response[i]._id,
-                            response[i].name,
-                            response[i].date,
-                            response[i].taxes,
-                            response[i].fees,
-                            response[i].ingredients,
-                            merchant
-                        );
-
-                        let cost = 0;
-                        for(let j = 0; j < order.ingredients.length; j++){
-                            cost += order.ingredients[j].price * order.ingredients[j].quantity;
+        .then(response => response.json())
+        .then((response)=>{
+            if(typeof(response) === "string"){
+                banner.createError(response);
+            }else{
+                let ingredients = [];
+                for(let i = 0; i < response.length; i++){
+                    for(let j = 0; j < response[i].ingredients.length; j++){
+                        for(let k = 0; k < merchant.ingredients.length; k++){
+                            if(merchant.ingredients[k].ingredient.id === response[i].ingredients[j].ingredient){
+                                ingredients.push({
+                                    ingredient: merchant.ingredients[k].ingredient,
+                                    quantity: response[i].ingredients[j].quantity,
+                                    pricePerUnit: response[i].ingredients[j].pricePerUnit
+                                });
+                                break;
+                            }
                         }
-
-                        orderDiv.children[0].innerText = order.name;
-                        orderDiv.children[1].innerText = `${order.ingredients.length} items`;
-                        orderDiv.children[2].innerText = order.date.toLocaleDateString();
-                        orderDiv.children[3].innerText = `$${cost.toFixed(2)}`;
-                        orderDiv.onclick = ()=>{controller.openSidebar("orderDetails", order)};
-                        orderList.appendChild(orderDiv);
                     }
-                }
-            })
-            .catch((err)=>{
-                banner.createError("UNABLE TO DISPLAY THE ORDERS");
-            })
-            .finally(()=>{
-                loader.style.display = "none";
-            });
-    },
 
-    toggleDropdown: function(dropdown){
-        event.preventDefault();
-        let polyline = dropdown.parentElement.children[0].children[1].children[0].children[0];
+                    this.orders.push(new Order(
+                        response[i]._id,
+                        response[i].name,
+                        response[i].date,
+                        response[i].taxes,
+                        response[i].fees,
+                        ingredients,
+                        merchant
+                    ));
+                }
 
-        if(dropdown.style.display === "none"){
-            dropdown.style.display = "block";
-            polyline.setAttribute("points", "18 15 12 9 6 15");
-        }else{
-            dropdown.style.display = "none";
-            polyline.setAttribute("points", "6 9 12 15 18 9");
-        }
+                this.display();
+            }
+        })
+        .catch((err)=>{
+            banner.createError("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE");
+        })
+        .finally(()=>{
+            loader.style.display = "none";
+        });
     }
 }
 

views/dashboardPage/dashboard.ejs

@@ -378,50 +378,10 @@
                     
                 </div>
 
-                <form id="orderSubmitForm" class="filterForm">
-                    <h2>Search</h2>
-                    <div>
-                        <div class="dropdown">
-                            <div class="dropdownHead">
-                                <p>DATES</p>
-                                <button id="dateFilterBtnOrder">
-                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                        <polyline points="6 9 12 15 18 9"></polyline>
-                                    </svg>
-                                </button>
-                            </div>
-
-                            <div class="dropdownContents" id="dateDropdownOrder">
-                                <label>From:
-                                    <input id="orderFilDate1"type="date">
-                                </label>
-                                
-                                <label>To:
-                                    <input id="orderFilDate2" type="date">
-                                </label>
-                            </div>
-                        </div>
-                        <div class="dropdown">
-                            <div class="dropdownHead">
-                                <p>INGREDIENTS</p>
-                                <button id="ingredientFilterBtn">
-                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                        <polyline points="6 9 12 15 18 9"></polyline>
-                                    </svg>
-                                </button>
-                            </div>
-
-                            <div class="dropdownContents" id="ingredientDropdown"></div>
-                        </div>
-                    </div>
-
-                    <input class="button" type="submit" value="SUBMIT">
-                </form>
-
                 <div id="orderList"></div>
 
                 <template id="order">
-                    <div class="itemDisplay">
+                    <div class="choosable tall">
                         <p></p>
                         <p></p>
                         <p></p>

views/dashboardPage/js/orders.js

@@ -1,209 +1,83 @@
 let orders = {
-    isPopulated: false,
-    isFetched: false,
+    orders: [],
 
-    display: async function(Order){
-        if(!this.isFetched){
-            let loader = document.getElementById("loaderContainer");
-            loader.style.display = "flex";
-
-            fetch("/order", {
-                method: "GET",
-                headers: {
-                    "Content-Type": "application/json;charset=utf-8"
-                },
-            })
-                .then((response) => response.json())
-                .then((response)=>{
-                    if(typeof(response) === "string"){
-                        banner.createError(response);
-                    }else{
-                        for(let i = 0; i < response.length; i++){
-                            let ingredients = [];
-                            for(let j = 0; j < response[i].ingredients.length; j++){
-                                const orderIngredient = response[i].ingredients[j];
-                                for(let k = 0; k < merchant.ingredients.length; k++){
-                                    if(merchant.ingredients[k].ingredient.id === orderIngredient.ingredient){
-                                        ingredients.push({
-                                            ingredient: merchant.ingredients[k].ingredient,
-                                            quantity: orderIngredient.quantity,
-                                            pricePerUnit: orderIngredient.pricePerUnit
-                                        });
-                                    }
-                                }
-                            }
-
-                            merchant.addOrder(new Order(
-                                response[i]._id,
-                                response[i].name,
-                                response[i].date,
-                                response[i].taxes,
-                                response[i].fees,
-                                ingredients,
-                                merchant
-                            ));
-                        }
-
-                        document.getElementById("orderSubmitForm").onsubmit = ()=>{this.submitFilter(Order)};
-                        this.isFetched = true;
-                        
-                        this.populate();
-                        this.isPopulated = true;
-                    }
-                })
-                .catch((err)=>{
-                    banner.createError("SOMETHING WENT WRONG. TRY REFRESHING THE PAGE");
-                })
-                .finally(()=>{
-                    loader.style.display = "none";
-                });
-        }
-
-        if(!this.isPopulated){
-            this.populate();
-            this.isPopulated = true;
-        }
-    },
-
-    populate: function(){
-        let listDiv = document.getElementById("orderList");
-        let template = document.getElementById("order").content.children[0];
-        let dateDropdown = document.getElementById("dateDropdownOrder");
-        let ingredientDropdown = document.getElementById("ingredientDropdown");
-
-        dateDropdown.style.display = "none";
-        ingredientDropdown.style.display = "none";
-
-        document.getElementById("dateFilterBtnOrder").onclick = ()=>{this.toggleDropdown(dateDropdown)};
-        document.getElementById("ingredientFilterBtn").onclick = ()=>{this.toggleDropdown(ingredientDropdown)};
-        document.getElementById("orderFilterBtn").onclick = ()=>{controller.openSidebar("orderFilter")};
-        document.getElementById("newOrderBtn").onclick = ()=>{controller.openSidebar("newOrder")};
-
-        for(let i = 0; i < merchant.ingredients.length; i++){
-            let checkbox = document.createElement("input");
-            checkbox.type = "checkbox";
-            checkbox.ingredient = merchant.ingredients[i].ingredient;
-            ingredientDropdown.appendChild(checkbox);
-
-            let label = document.createElement("label");
-            label.innerText = merchant.ingredients[i].ingredient.name;
-            label.for = checkbox;
-            ingredientDropdown.appendChild(label);
-
-            let brk = document.createElement("br");
-            ingredientDropdown.appendChild(brk);
-        }
-
-        while(listDiv.children.length > 0){
-            listDiv.removeChild(listDiv.firstChild);
-        }
-
-        for(let i = 0; i < merchant.orders.length; i++){
-            let row = template.cloneNode(true);
-
-            row.children[0].innerText = merchant.orders[i].name;
-            row.children[1].innerText = `${merchant.orders[i].ingredients.length} ingredients`;
-            row.children[2].innerText = new Date(merchant.orders[i].date).toLocaleDateString("en-US");
-            row.children[3].innerText = `$${merchant.orders[i].getTotalCost().toFixed(2)}`;
-            row.onclick = ()=>{controller.openSidebar("orderDetails", merchant.orders[i])};
-            listDiv.appendChild(row);
-        }
-    },
-
-    submitFilter: function(){
-        event.preventDefault();
-
-        let data = {
-            startDate: document.getElementById("orderFilDate1").valueAsDate,
-            endDate: document.getElementById("orderFilDate2").valueAsDate,
-            ingredients: []
-        }
+    display: function(Order){
+        if(this.orders.length === 0){
+            this.getOrders(Order);
+        }else{
+            document.getElementById("orderFilterBtn").onclick = ()=>{controller.openSidebar("orderFilter")};
+            document.getElementById("newOrderBtn").onclick = ()=>{controller.openSidebar("newOrder")};
 
-        if(data.startDate >= data.endDate){
-            banner.createError("START DATE CANNOT BE AFTER END DATE");
-            return;
-        }
+            let orderList = document.getElementById("orderList");
+            let template = document.getElementById("order").content.children[0];
 
-        let ingredientChoices = document.getElementById("ingredientDropdown");
-        for(let i = 0; i < ingredientChoices.children.length; i += 3){
-            if(ingredientChoices.children[i].checked){
-                data.ingredients.push(ingredientChoices.children[i].ingredient.id);
+            while(orderList.children.length > 0){
+                orderList.removeChild(orderList.firstChild);
             }
-        }
 
-        if(data.ingredients.length === 0){
-            for(let i = 0; i < merchant.ingredients.length; i++){
-                data.ingredients.push(merchant.ingredients[i].ingredient.id);
+            for(let i = 0; i < this.orders.length; i++){
+                let orderDiv = template.cloneNode(true);
+                orderDiv.order = this.orders[i];
+                orderDiv.children[0].innerText = this.orders[i].name;
+                orderDiv.children[1].innerText = `${this.orders[i].ingredients.length} ingredients`;
+                orderDiv.children[2].innerText = this.orders[i].date.toLocaleDateString("en-US");
+                orderDiv.children[3].innerText = `$${this.orders[i].getTotalCost().toFixed(2)}`;
+                orderDiv.onclick = ()=>{controller.openSidebar("orderDetails", this.orders[i])};
+                orderList.appendChild(orderDiv);
             }
         }
+    },
 
+    getOrders: function(Order){
         let loader = document.getElementById("loaderContainer");
         loader.style.display = "flex";
 
         fetch("/order", {
-            method: "POST",
+            method: "get",
             headers: {
                 "Content-Type": "application/json;charset=utf-8"
-            },
-            body: JSON.stringify(data)
+            }
         })
-            .then((response) => response.json())
-            .then((response)=>{
-                if(typeof(response) === "string"){
-                    banner.createError(response);
-                }else{
-                    let orderList = document.getElementById("orderList");
-                    let template = document.getElementById("order").content.children[0];
-
-                    while(orderList.children.length > 0){
-                        orderList.removeChild(orderList.firstChild);
-                    }
-
-                    for(let i = 0; i < response.length; i++){
-                        let orderDiv = template.cloneNode(true);
-                        let order = new Order(
-                            response[i]._id,
-                            response[i].name,
-                            response[i].date,
-                            response[i].taxes,
-                            response[i].fees,
-                            response[i].ingredients,
-                            merchant
-                        );
-
-                        let cost = 0;
-                        for(let j = 0; j < order.ingredients.length; j++){
-                            cost += order.ingredients[j].price * order.ingredients[j].quantity;
+        .then(response => response.json())
+        .then((response)=>{
+            if(typeof(response) === "string"){
+                banner.createError(response);
+            }else{
+                let ingredients = [];
+                for(let i = 0; i < response.length; i++){
+                    for(let j = 0; j < response[i].ingredients.length; j++){
+                        for(let k = 0; k < merchant.ingredients.length; k++){
+                            if(merchant.ingredients[k].ingredient.id === response[i].ingredients[j].ingredient){
+                                ingredients.push({
+                                    ingredient: merchant.ingredients[k].ingredient,
+                                    quantity: response[i].ingredients[j].quantity,
+                                    pricePerUnit: response[i].ingredients[j].pricePerUnit
+                                });
+                                break;
+                            }
                         }
-
-                        orderDiv.children[0].innerText = order.name;
-                        orderDiv.children[1].innerText = `${order.ingredients.length} items`;
-                        orderDiv.children[2].innerText = order.date.toLocaleDateString();
-                        orderDiv.children[3].innerText = `$${cost.toFixed(2)}`;
-                        orderDiv.onclick = ()=>{controller.openSidebar("orderDetails", order)};
-                        orderList.appendChild(orderDiv);
                     }
-                }
-            })
-            .catch((err)=>{
-                banner.createError("UNABLE TO DISPLAY THE ORDERS");
-            })
-            .finally(()=>{
-                loader.style.display = "none";
-            });
-    },
 
-    toggleDropdown: function(dropdown){
-        event.preventDefault();
-        let polyline = dropdown.parentElement.children[0].children[1].children[0].children[0];
+                    this.orders.push(new Order(
+                        response[i]._id,
+                        response[i].name,
+                        response[i].date,
+                        response[i].taxes,
+                        response[i].fees,
+                        ingredients,
+                        merchant
+                    ));
+                }
 
-        if(dropdown.style.display === "none"){
-            dropdown.style.display = "block";
-            polyline.setAttribute("points", "18 15 12 9 6 15");
-        }else{
-            dropdown.style.display = "none";
-            polyline.setAttribute("points", "6 9 12 15 18 9");
-        }
+                this.display();
+            }
+        })
+        .catch((err)=>{
+            banner.createError("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE");
+        })
+        .finally(()=>{
+            loader.style.display = "none";
+        });
     }
 }
 

views/shared/shared.css

@@ -224,6 +224,9 @@ form{
 }
 
 .choosable{
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
     background: rgb(0, 27, 45);
     color: white;
     border-radius: 5px;
@@ -233,6 +236,10 @@ form{
     cursor: pointer;
 }
 
+    .choosable.tall{
+        padding: 15px;
+    }
+
     .choosable:hover{
         background: rgb(201, 201, 201);
         color: black;