Update frontend to display where the error was in a circular reference.

views/dashboardPage/dashboard.css

@@ -842,6 +842,19 @@ Modal
                     width: 100%;
                 }
 
+    #modalCircularReference{
+        flex-direction: column;
+        background: white;
+        align-items: center;
+        padding: 25px;
+        max-height: 90%;
+        overflow-y: auto;
+    }
+
+    #modalCircularReference div > *{
+        margin: 10px;
+    }
+
 @media screen and (orientation: portrait){
     @media screen and (max-width: 1400px){
         body{

views/dashboardPage/ejs/modal.ejs

@@ -84,6 +84,14 @@
                     </div>
                 </template>
             </div>
+
+            <div id="modalCircularReference" style="display:none";>
+                <h2></h2>
+
+                <div></div>
+
+                <button id="circularReferenceButton" class="button">OK</button>
+            </div>
         </div>
     </div>
 </div>

views/dashboardPage/js/dashboard.js

@@ -270,6 +270,9 @@ controller = {
             case "editSubIngredients":
                 modalScript.editSubIngredients(data);
                 break;
+            case "circularReference":
+                modalScript.circularReference(data);
+                break;
         }
     },
 

views/dashboardPage/js/modal.js

@@ -236,6 +236,27 @@ let modal = {
             controller.closeModal();
             controller.createBanner("YOUR SUB-INGREDIENTS WILL NOT BE SAVED UNTIL YOU SUBMIT CHANGES", "alert");
         }
+    },
+
+    circularReference: function(response){
+        let array = response.split("$");
+
+        let modal = document.getElementById("modalCircularReference");
+        modal.style.display = "flex";
+
+        modal.children[0].innerText = array[0];
+
+        while(modal.children[1].children.length > 0){
+            modal.children[1].removeChild(modal.children[1].firstChild);
+        }
+
+        for(let i = 1; i < array.length; i++){
+            let text = document.createElement("p");
+            text.innerText = array[i];
+            modal.children[1].appendChild(text);
+        }
+
+        document.getElementById("circularReferenceButton").onclick = ()=>{controller.closeModal()};
     }
 };
 

views/dashboardPage/js/sidebars/editIngredient.js

@@ -109,7 +109,8 @@ let editIngredient = {
         .then(response => response.json())
         .then((response)=>{
             if(typeof(response) === "string"){
-                controller.createBanner(response, "error");
+                controller.createBanner("ERROR: CIRCULAR REFERENCE", "error");
+                controller.openModal("circularReference", response);
             }else{
                 merchant.removeIngredient(merchant.getIngredient(response.ingredient._id));
                 merchant.addIngredients([response]);