Commit for experimental changes

views/merchantSetupPage/merchantSetup.css

@@ -10,16 +10,30 @@
         margin: 10px;
     }
 
-    th{
-        border: 2px solid #ff626b;
-        background: #001b2d;
-        color: darkgray;
-        padding: 3px;
-        min-width: 150px;
+    .horizontal-container{
+        display: flex;
     }
 
-    td{
-        border: 1px solid black;
-        text-align: center;
-        padding: 1px 10px;
-    }
+        .horizontal-container div{
+            text-align: center;
+            max-width: 50%;
+        }
+
+        th{
+            border: 2px solid #ff626b;
+            background: #001b2d;
+            color: darkgray;
+            padding: 3px;
+            min-width: 150px;
+        }
+
+        td{
+            border: 1px solid black;
+            text-align: center;
+            padding: 1px 10px;
+        }
+
+        .input-new{
+            display: flex;
+            flex-wrap: nowrap;
+        }

views/merchantSetupPage/merchantSetup.ejs

@@ -8,8 +8,11 @@
         <% include ../shared/header %>
 
         <div class="container">
+            
             <h1>Add your first set of ingredients to your pantry</h1>
 
+            <h3>Choose from our list of ingredients</h3>
+            
             <table id="ingredient-display">
                 <tr>
                     <th>Add</th>
@@ -19,9 +22,18 @@
                     <th>Unit</th>
                 </tr>
             </table>
+
+            <div id="new-ingredient"></div>
+
+            <!-- <button onclick="addField()">+</button> -->
+
+            <button onclick="subData()">Finish</button>
         </div>
 
-        <script>let ingredients = <%- JSON.stringify(ingredients) %>;</script>
+        <script>
+            let ingredients = <%- JSON.stringify(ingredients) %>;
+            let state = 0;
+        </script>
         <script src="/merchantSetupPage/merchantSetup.js"></script>
     </body>
 </html>

views/merchantSetupPage/merchantSetup.js

@@ -2,9 +2,16 @@ console.log(ingredients);
 
 //Populate all ingredients into the table
 let table = document.querySelector("#ingredient-display");
+let createDiv = document.querySelector("#new-ingredient");
+createDiv.style.display = "none";
+
+let existingIngredients = [];
+let newIngredients = [];
+let data = {};
 
 for(let ingredient of ingredients){
     let row = document.createElement("tr");
+    row.id = ingredient._id;
 
     let add = document.createElement("td");
     let checkbox = document.createElement("input");
@@ -33,5 +40,50 @@ for(let ingredient of ingredients){
     unit.innerText = ingredient.unitType;
     row.appendChild(unit);
 
+    let idField = document.createElement("input");
+    console.log(ingredient);
+    idField.type = "hidden";
+    idField.value = ingredient._id;
+
     table.appendChild(row);
+    existingIngredients.push(row);
+}
+
+//Gather all data from both forms and submit
+let subData = ()=>{
+    data.existing = [];
+    for(let ingredient of existingIngredients){
+        if(ingredient.childNodes[0].firstChild.checked){
+            data.existing.push(ingredient.id);
+        }
+    }
+
+    table.style.display = "none";
+    createDiv.style.display = "block";
+}
+
+//Add a field for inputing a new ingredient
+let addField = ()=>{
+    let ingredient = document.createElement("div");
+    ingredient.classList += "input-new";
+
+    let name = document.createElement("input");
+    name.type = "text";
+    ingredient.appendChild(name);
+
+    let category = document.createElement("input");
+    category.type = "text";
+    ingredient.appendChild(category);
+
+    let quantity = document.createElement("input");
+    quantity.type = "number";
+    quantity.step = "0.01";
+    ingredient.appendChild(quantity);
+
+    let unit = document.createElement("input");
+    unit.type = "text";
+    ingredient.appendChild(unit);
+
+    div.appendChild(ingredient);
+    newIngredients.push(ingredient);
 }