Add modal functionality for opening and closing.

controllers/transactionData.js

@@ -111,7 +111,6 @@ module.exports = {
                 return res.json(transactions);
             })
             .catch((err)=>{
-                console.log(err);
                 return res.json("ERROR: UNABLE TO RETRIEVE DATA");
             });
     },

views/dashboardPage/bundle.js

@@ -1484,6 +1484,29 @@ controller = {
         }
     },
 
+    openModal: function(str){
+        let modal = document.getElementById("modal");
+        document.getElementById("modalClose").addEventListener("click", this.closeModal);
+
+        switch(str){
+            case "recipeSpreadsheet":
+                modal.style.display = "flex";
+                document.getElementById("modalSpreadsheetUpload").style.display = "flex";
+                break;
+        }
+    },
+
+    closeModal: function(){
+        let modal = document.getElementById("modal");
+        let modalContent = document.getElementById("modalContent");
+
+        for(let i = 0; i < modalContent.children.length; i++){
+            modalContent.children[i].style.display = "none";
+        }
+
+        modal.style.display = "none";
+    },
+
     changeMenu: function(){
         let menu = document.querySelector(".menu");
         let buttons = document.querySelectorAll(".menuButton");
@@ -2226,6 +2249,7 @@ let newRecipe = {
 
         document.getElementById("ingredientCount").onchange = ()=>{this.changeIngredientCount(categories)};
         document.getElementById("submitNewRecipe").onclick = ()=>{this.submit(Recipe)};
+        document.getElementById("recipeFileUpload").onclick = ()=>{controller.openModal("recipeSpreadsheet")};
     },
 
     //Updates the number of ingredient inputs displayed for new recipes

views/dashboardPage/dashboard.css

@@ -559,7 +559,7 @@ Transactions Strand
 Modal
 */
 .modal{
-    display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
     position: fixed;
@@ -568,18 +568,29 @@ Modal
     background: rgba(0, 27, 45, 0.75);
 }
 
-    .modalSpreadsheetUpload{
+    .modalBox{
         display: flex;
         flex-direction: column;
-        align-items: center;
-        justify-content: space-between;
-        padding: 25px;
+        align-items: flex-end;
     }
 
-        .modalSpreadsheetUpload > *{
-            margin-top: 15px;
+        .modalBox svg{
+            color: rgb(255, 99, 107);
+            cursor: pointer;
+        }
+
+        .modalSpreadsheetUpload{
+            flex-direction: column;
+            align-items: center;
+            justify-content: space-between;
+            margin-top: 0;
+            padding: 25px;
         }
 
+            .modalSpreadsheetUpload > *{
+                margin-top: 15px;
+            }
+
 @media screen and (max-width: 1000px){
     body{
         flex-direction: column;

views/dashboardPage/js/dashboard.js

@@ -190,6 +190,29 @@ controller = {
         }
     },
 
+    openModal: function(str){
+        let modal = document.getElementById("modal");
+        document.getElementById("modalClose").addEventListener("click", this.closeModal);
+
+        switch(str){
+            case "recipeSpreadsheet":
+                modal.style.display = "flex";
+                document.getElementById("modalSpreadsheetUpload").style.display = "flex";
+                break;
+        }
+    },
+
+    closeModal: function(){
+        let modal = document.getElementById("modal");
+        let modalContent = document.getElementById("modalContent");
+
+        for(let i = 0; i < modalContent.children.length; i++){
+            modalContent.children[i].style.display = "none";
+        }
+
+        modal.style.display = "none";
+    },
+
     changeMenu: function(){
         let menu = document.querySelector(".menu");
         let buttons = document.querySelectorAll(".menuButton");

views/dashboardPage/js/sidebars/newRecipe.js

@@ -15,6 +15,7 @@ let newRecipe = {
 
         document.getElementById("ingredientCount").onchange = ()=>{this.changeIngredientCount(categories)};
         document.getElementById("submitNewRecipe").onclick = ()=>{this.submit(Recipe)};
+        document.getElementById("recipeFileUpload").onclick = ()=>{controller.openModal("recipeSpreadsheet")};
     },
 
     //Updates the number of ingredient inputs displayed for new recipes

views/dashboardPage/modal.ejs

@@ -1,8 +1,17 @@
-<div id="modal" class="modal">
-    <form id="modalSpreadsheetUpload" class="modalSpreadsheetUpload" method="post">
-        <h3>Choose a file to upload your <span id="modalSpreadsheetTitle">ingredients</span></h3>
-        <input id="spreadsheetInput" class="fileUpload" name="file" type="file">
-        <input type="hidden" name="type">
-        <input class="button" type="submit" value="SUBMIT">
-    </form>
+<div id="modal" class="modal" style="display:none;">
+    <div class="modalBox">
+        <svg id="modalClose" width="35" height="35" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <line x1="18" y1="6" x2="6" y2="18"></line>
+            <line x1="6" y1="6" x2="18" y2="18"></line>
+        </svg>
+
+        <div id="modalContent">
+            <form id="modalSpreadsheetUpload" class="modalSpreadsheetUpload" method="post">
+                <h3>Choose a file to upload your <span id="modalSpreadsheetTitle">ingredients</span></h3>
+                <input id="spreadsheetInput" class="fileUpload" name="file" type="file">
+                <input type="hidden" name="type">
+                <input class="button" type="submit" value="SUBMIT">
+            </form>
+        </div>
+    </div>
 </div>