Update controller to handle everything on its own.

models/merchant.js

@@ -28,6 +28,13 @@ const MerchantSchema = new mongoose.Schema({
         type: Date,
         default: Date.now
     },
+    accountStatus: {
+        status: {
+            type: String,
+            required: true
+        },
+        expiration: Date,
+    },
     inventory: [{
         ingredient: {
             type: mongoose.Schema.Types.ObjectId,

views/inventoryPage/account.js

@@ -0,0 +1,6 @@
+window.accountObj = {
+    display: function(){
+        clearScreen();
+        document.querySelector("#accountStrand").style.display = "flex";
+    }
+}

views/inventoryPage/addIngredient.js

@@ -1,9 +1,9 @@
-let addIngredientObj = {
+window.addIngredientObj = {
     isPopulated: false,
 
     display: function(){
-        controller.clearScreen();
-        controller.addIngredientStrand.style.display = "flex";
+        clearScreen();
+        document.querySelector("#addIngredientAction").style.display = "flex";
 
         if(!this.isPopulated){
             this.populateIngredients();
@@ -17,9 +17,9 @@ let addIngredientObj = {
                 if(typeof(response.data) === "string"){
                     banner.createError(response.data);
                 }else{
+                    console.log("something");
                     let select = document.querySelector("#addIngredientStrand select");
 
-                    
                     for(let ingredient of response.data){
                         let exists = false;
                         for(let merchIngredient of merchant.inventory){

views/inventoryPage/controller.js

@@ -1,23 +0,0 @@
-let controller = {
-    inventoryStrand: document.querySelector("#inventoryStrand"),
-    addIngredientStrand: document.querySelector("#addIngredientStrand"),
-    enterTransactionsStrand: document.querySelector("#enterTransactionsStrand"),
-    enterPurchaseStrand: document.querySelector("#enterPurchaseStrand"),
-
-    onStart: function(){
-        if(error){
-            banner.createError(error);
-        }
-
-        inventoryObj.display();
-    },
-
-    clearScreen: function(){
-        this.inventoryStrand.style.display = "none";
-        this.addIngredientStrand.style.display = "none";
-        this.enterTransactionsStrand.style.display = "none";
-        this.enterPurchaseStrand.style.display = "none";
-    }
-}
-
-controller.onStart();

views/inventoryPage/enterPurchase.js

@@ -1,9 +1,9 @@
-let enterPurchaseObj = {
+window.enterPurchaseObj = {
     isPopulated: false,
 
     display: function(){
-        controller.clearScreen();
-        controller.enterPurchaseStrand.style.display = "flex";
+        clearScreen();
+        document.querySelector("#enterPurchaseAction").style.display = "flex";
 
         if(!this.isPopulated){
             this.populateTable();

views/inventoryPage/enterTransactions.js

@@ -1,9 +1,9 @@
-let enterTransactionsObj = {
+window.enterTransactionsObj = {
     isPopulated: false,
 
     display: function(){
-        controller.clearScreen();
-        controller.enterTransactionsStrand.style.display = "flex";
+        clearScreen();
+        document.querySelector("#enterTransactionsAction").style.display = "flex";
 
         if(!this.isPopulated){
             this.populateRecipes();

views/inventoryPage/inventory.css

@@ -1,6 +1,5 @@
 /* Inventory Strand */
 #inventoryStrand{
-    display: flex;
     flex-direction: column;
     align-items: center;
 }
@@ -36,14 +35,19 @@
             max-height: 32px;
         }
 
-/* Add Ingredient Strand */
-#addIngredientStrand{
-    display: none;
+/* Account Strand */
+#accountStrand{
     flex-direction: column;
     align-items: center;
 }
 
-    #addIngredientStrand > *{
+/* Add Ingredient Action */
+#addIngredientAction{
+    flex-direction: column;
+    align-items: center;
+}
+
+    #addIngredientAction > *{
         margin: 25px;
     }
 
@@ -52,24 +56,22 @@
         justify-content: space-around;
     }
 
-/* Enter Transactions Strand */
-#enterTransactionsStrand{
-    display: none;
+/* Enter Transactions Action */
+#enterTransactionsAction{
     flex-direction: column;
     align-items: center;
 }
-    #enterTransactionsStrand > *{
+    #enterTransactionsAction > *{
         margin: 10px;
     }
 
-/* Enter Purchases Strand */
-#enterPurchaseStrand{
-    display: none;
+/* Enter Purchases Action */
+#enterPurchasesAction{
     flex-direction: column;
     align-items: center;
 }
 
-    #enterPurchaseStrand > *{
+    #enterPurchasesAction > *{
         margin: 10px;
     }
 
@@ -103,7 +105,7 @@
         flex-direction: column;
     }
 
-    #addIngredientStrand > *{
+    #addIngredientAction > *{
         margin: 10px;
     }
 }

views/inventoryPage/inventory.ejs

@@ -12,7 +12,9 @@
 
         <% include ../shared/banner %>
 
-        <div id="inventoryStrand">
+        <strand-selector></strand-selector>
+
+        <div id="inventoryStrand" class="strand">
             <h1><span><%= merchant.name %></span> inventory</h1>
 
             <div class="options">
@@ -43,7 +45,11 @@
             </table>
         </div>
 
-        <div id="addIngredientStrand" class="add-ingredient">
+        <div id="accountStrand" class="strand">
+            <h1>Account Strand</h1>
+        </div>
+
+        <div id="addIngredientAction" class="action">
             <button class="button" onclick="inventoryObj.display()">Back to Inventory</button>
 
             <div class="container">
@@ -85,7 +91,7 @@
             </div>
         </div>
 
-        <div id="enterTransactionsStrand">
+        <div id="enterTransactionsAction" class="action">
             <h1>Enter items sold since (Date)</h1>
             
             <button class="button" onclick="inventoryObj.display()">Back to inventory</button>
@@ -103,7 +109,7 @@
             <button class="button" onclick="enterTransactionsObj.submit()">Submit</button>
         </div>
 
-        <div id="enterPurchaseStrand">
+        <div id="enterPurchaseAction" class="action">
             <h1>Enter Purchases</h1>
             
             <button class="button" onclick="inventoryObj.display()">Back to inventory</button>
@@ -134,10 +140,10 @@
         <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/account.js"></script>
         <script src="/inventoryPage/addIngredient.js"></script>
         <script src="/inventoryPage/enterTransactions.js"></script>
         <script src="/inventoryPage/enterPurchase.js"></script>
-        <script src="/inventoryPage/controller.js"></script>
+        <script src="/shared/controller.js"></script>
     </body>
 </html>

views/inventoryPage/inventory.js

@@ -1,11 +1,11 @@
-let inventoryObj = {
+window.inventoryObj = {
     items: [],
     currentSort: "",
     isPopulated: false,
 
     display: function(){
-        controller.clearScreen();
-        controller.inventoryStrand.style.display = "flex";
+        clearScreen();
+        document.querySelector("#inventoryStrand").style.display = "flex";
 
         if(!this.isPopulated){
             this.filter();

views/inventoryPage/recipe.js

@@ -1,6 +0,0 @@
-let recipeObj = {
-    display: function(){
-        controller.clearScreen();
-        controller.recipeStrand.style.display = "flex";
-    }
-}

views/shared/controller.js

@@ -0,0 +1,67 @@
+class StrandSelector extends HTMLElement{
+    constructor(){
+        super();
+    }
+
+    connectedCallback(){
+        setTimeout(()=>{
+            let firstStrand = document.querySelector(".strand");
+            this.setAttribute("strand", firstStrand.id.slice(0, firstStrand.id.indexOf("Strand")));
+            window[`${firstStrand.id.slice(0, firstStrand.id.indexOf("Strand"))}Obj`].display();
+
+            let strands = document.querySelectorAll(".strand");
+            for(let strand of strands){
+                let selector = document.createElement("button");
+                selector.strandName = strand.id;
+                selector.innerText = strand.id.slice(0, strand.id.indexOf("Strand")).toUpperCase();
+                this.appendChild(selector);
+            }
+
+            strands[0].style.display = "flex";
+        })
+    }
+
+    static get observedAttributes(){
+        return ["strand"];
+    }
+
+    attributeChangedCallback(){
+        setTimeout(()=>{
+            let buttons = this.querySelectorAll("button");
+
+            for(let button of buttons){
+                if(button.innerText.toLowerCase() === this.getAttribute("strand").toLowerCase()){
+                    button.style.borderBottom = "3px solid black";
+                    button.style.cursor = "pointer";
+                }else{
+                    button.style.borderBottom = "none";
+                    button.style.cursor = "pointer";
+                    button.onclick = ()=>{
+                        this.setAttribute("strand", button.strandName.slice(0, button.strandName.indexOf("Strand")));
+
+                        window[`${button.strandName.slice(0, button.strandName.indexOf("Strand"))}Obj`].display();
+                    }
+                }
+            }
+        })
+    }
+}
+
+customElements.define("strand-selector", StrandSelector);
+
+let actions = document.querySelectorAll(".action");
+for(let action of actions){
+    action.display = ()=>{window[`${action.id.slice(0, action.id.indexOf("Action"))}Obj`].display();};
+}
+
+let strands = document.querySelectorAll(".strand");
+for(let strand of strands){
+    strand.display = ()=>{window[`${strand.id.slice(0, strand.id.indexOf("Strand"))}Obj`].display();};
+}
+
+window.clearScreen = ()=>{
+    let subpages = document.querySelectorAll(".strand, .action");
+    for(let subpage of subpages){
+        subpage.style.display = "none";
+    }
+}

views/shared/shared.css

@@ -9,7 +9,7 @@ body{
     color: rgb(0, 27, 45);
 }
 
-/* General components that should apply to all pages */
+/* General style that should apply to all pages */
 table{
     border-spacing: 0;
 }
@@ -112,6 +112,34 @@ form{
     border-color: red;
 }
 
+.strand, .action{
+    display: none;
+}
+
+/* Components */
+strand-selector{
+    display: flex;
+    justify-content: center;
+}
+
+    strand-selector button{
+        margin: 10px;
+        background: none;
+        font-size: 25px;
+        font-weight: bold;
+        border: none;
+        transition: box-shadow 1s;
+        padding: 5px;
+    }
+
+        strand-selector button:hover{
+            box-shadow: 15px 15px 15px gray;
+        }
+
+.strand{
+    transition: width 1s linear;
+}
+
 /* Header partial */
 .header{
     display: flex;