Create frontend for manual transaction entry

models/transaction.js

@@ -10,10 +10,7 @@ const TransactionSchema = new mongoose.Schema({
         type: Date,
         required: [true, "Must provide date and time transacted"]
     },
-    device: {
-        type: String,
-        required: [true, "Transactions must record the device used"]
-    },
+    device: String,
     recipes: [{
         type: mongoose.Schema.Types.ObjectId,
         ref: "Recipe"

views/inventoryPage/controller.js

@@ -2,11 +2,13 @@ let controller = {
     inventoryStrand: document.querySelector("#inventoryStrand"),
     recipeStrand: document.querySelector("#recipeStrand"),
     addIngredientStrand: document.querySelector("#addIngredientStrand"),
+    enterTransactionsStrand: document.querySelector("#enterTransactionsStrand"),
 
     clearScreen: function(){
         this.inventoryStrand.style.display = "none";
         this.recipeStrand.style.display = "none";
         this.addIngredientStrand.style.display = "none";
+        this.enterTransactionsStrand.style.display = "none";
     }
 }
 

views/inventoryPage/enterTransactions.js

@@ -0,0 +1,68 @@
+let enterTransactionsObj = {
+    isPopulated: false,
+
+    display: function(){
+        controller.clearScreen();
+        controller.enterTransactionsStrand.style.display = "flex";
+
+        if(!this.isPopulated){
+            this.populateRecipes();
+            this.isPopulated = true;
+        }
+    },
+
+    populateRecipes: function(){
+        let tbody = document.querySelector("#enterTransactionsStrand tbody");
+
+        for(let recipe of merchant.recipes){
+            let row = document.createElement("tr");
+            row._id = recipe._id;
+            tbody.appendChild(row);
+
+            let name = document.createElement("td");
+            name.innerText = recipe.name;
+            row.appendChild(name);
+
+            let quantity = document.createElement("td");
+            row.appendChild(quantity);
+
+            let input = document.createElement("input");
+            input.type = "number";
+            input.step = "1";
+            input.value = "0";
+            input.id = "transactionQuantity";
+            quantity.appendChild(input);
+        }
+    },
+
+    submit: function(){
+        let tbody = document.querySelector("#enterTransactionsStrand tbody");
+
+        let recipesSold = [];
+
+        for(let row of tbody.children){
+            let quantity = document.querySelector("#transactionQuantity").value;
+            
+            if(quantity >= 0){
+                let recipe = {
+                    id: row._id,
+                    quantity: quantity
+                }
+
+                recipesSold.push(recipe);
+            }else{
+                banner.createError("Cannot have negative quantities");
+                break;
+            }
+        }
+
+        axios.post("/transactions/create", recipesSold)
+            .then(()=>{
+                banner.createNotification("Your sales have been logged");
+                inventoryObj.display();
+            })
+            .catch((err)=>{
+                banner.createError("Something went wrong and your sales could not be logged");
+            });
+    }
+}

views/inventoryPage/inventory.css

@@ -58,4 +58,10 @@ td{
 
         #addIngredientStrand form > *{
             margin: 5px;
-        }
+        }
+
+#enterTransactionsStrand{
+    display: none;
+    flex-direction: column;
+    align-items: center;
+}

views/inventoryPage/inventory.ejs

@@ -16,6 +16,10 @@
 
             <button onclick="addIngredientObj.display()">Add Ingredient</button>
 
+            <% if(merchant.pos === "none"){ %>
+                <button onclick="enterTransactionsObj.display()">Enter Transactions</button>
+            <% } %>
+
             <input id="filter" onkeyup="inventoryObj.filter()" type="text" placeholder="Start typing to filter">
 
             <table>
@@ -74,12 +78,29 @@
             </form>
         </div>
 
+        <div id="enterTransactionsStrand">
+            <h1>Enter items sold since (Date)</h1>
+
+            <table>
+                <thead>
+                    <tr>
+                        <th>Recipe</th>
+                        <th>Number sold</th>
+                    </tr>
+                </thead>
+                <tbody></tbody>
+            </table>
+
+            <button onclick="enterTransactionsObj.submit()">Submit</button>
+        </div>
+
         <script>let merchant = <%- JSON.stringify(merchant) %>;</script>
         <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
         <script src="../shared/validation.js"></script>
         <script src="/inventoryPage/inventory.js"></script>
         <script src="/inventoryPage/recipe.js"></script>
         <script src="/inventoryPage/addIngredient.js"></script>
+        <script src="/inventoryPage/enterTransactions.js"></script>
         <script src="/inventoryPage/controller.js"></script>
     </body>
 </html>