lee
/
subline


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310
							<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>The Subline</title>
        <link rel="icon" type="img/png" href="/shared/images/logo.png">
        <link rel="stylesheet" href="/inventoryPage/inventory.css">
        <link rel="stylesheet" href="/shared/shared.css">
    </head>
    <body>
        <% include ../shared/header %>

        <% include ../shared/banner %>

        <h1 id="title"><%=merchant.name%></h1>

        <strand-selector></strand-selector>


        <div id="inventoryStrand" class="strand">
            <div class="options">
                <button class="button" onclick="addIngredientObj.display()">Add Ingredient</button>

                <button class="button" onclick="enterPurchaseObj.display()">Enter Purchases</button>

                <% if(merchant.pos === "none"){ %>
                    <button class="button" onclick="enterTransactionsObj.display()">Enter Transactions</button>
                <% } %>
            </div>

            <input id="filter" onkeyup="inventoryObj.filter()" type="text" placeholder="FILTER INGREDIENTS">

            <table>
                <thead>
                    <tr>
                        <th onclick="inventoryObj.sortIngredients('name')">Item</th>
                        <th onclick="inventoryObj.sortIngredients('category')">Category</th>
                        <th onclick="inventoryObj.sortIngredients('quantity')">Quantity</th>
                        <th onclick="inventoryObj.sortIngredients('unit')">Unit</th>
                        <th>Actions</th>
                    </tr>
                    <tbody></tbody>
                </thead>
            </table>
        </div>


        <div id="recipesStrand" class="strand">
            <div>
                <% if(merchant.pos !== "none"){ %>
                    <button class="button" id="recipeUpdate" onclick="recipesObj.updateRecipes()">Update Recipes</button>
                <% } %>
            </div>

            <div id="recipesContainer"></div>
        </div>

        <div id="dataStrand" class="strand">
            <h2 id="month"></h2>
            <div class="tables">
                <!-- Ingredients used -->
                <div id="ingredientsData" class="dataTable">
                    <h3>Ingredients</h3>
                    <table>
                        <thead>
                            <tr>
                                <th>Ingredient</th>
                                <th>Used</th>
                                <th>Remaining</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>

                <!-- Recipes used -->
                <div id="recipesData" class="dataTable">
                    <h3>Recipes</h3>

                    <table>
                        <thead>
                            <tr>
                                <th>Recipe</th>
                                <th># sold</th>
                                <th>Revenue</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>

                <!-- Purchases -->
                <div id="purchasesData" class="dataTable">
                    <h3>Purchases</h3>

                    <table>
                        <thead>
                            <tr>
                                <th>Ingredient</th>
                                <th>Amount</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>

                <!-- Totals -->
            </div>
        </div>

        <div id="accountStrand" class="strand">
            <form id="accountDisplay" onsubmit="accountObj.editAccount()">
                <label>Name:&nbsp;&nbsp;
                    <p><%=merchant.name%></p>
                </label>

                <label>Email:&nbsp;&nbsp;
                    <p><%=merchant.email%></p>
                </label>

                <button class="button" onclick="accountObj.editAccount()">Edit</button>
            </form>

            <form id="accountEdit" onsubmit="accountObj.updateAccount()">
                <label>Name:&nbsp;&nbsp;
                    <input id="accountName" type="text" value="<%=merchant.name%>">
                </label>

                <label>Email:&nbsp;&nbsp;
                    <input id="accountEmail" type="email" value="<%=merchant.email%>">
                </label>

                <div class="buttonBox">
                    <button class="button" onclick="accountObj.updateAccount()">Save</button>

                    <button class="button" onclick="accountObj.editAccountCancel()">Cancel</button>
                </div>
            </form>

            <form id="passwordEdit" onsubmit="accountObj.updatePassword()">
                <label>Old password:
                    <input id="oldPass" type="password" required>
                </label>

                <label>New password:
                    <input id="newPass" type="password" required>
                </label>

                <label>Confirm new password:
                    <input id="confirmNewPass" type="password" required>
                </label>


                <div class="buttonBox">
                    <input class="button" type="submit" value="Submit">

                    <button class="button" onclick="accountObj.editPasswordCancel()">Cancel</button>
                </div>
            </form>

            <button class="button" onclick="accountObj.editPassword()">Change password</button>
        </div>


        <div id="addIngredientAction" class="action">
            <div class="container">
                <form onsubmit="addIngredientObj.submitAdd()">
                    <h2>Select Ingredient</h2>

                    <label>Ingredient
                        <select id="addName"></select>
                    </label>
                    
                    <label>Quantity
                        <input id="addQuantity" type="number" step="0.01" required>
                    </label>
                    
                    <input class="button" type="submit" value="Add Ingredient">
                </form>

                <form id="createIngredientInput" onsubmit="addIngredientObj.submitNew()">
                    <h2>Create New Ingredient</h2>

                    <label>Name
                        <input id="newName" type="text" required>
                    </label>

                    <label>Category
                        <input id="newCategory" type="text" required>
                    </label>

                    <label>Unit
                        <input id="newUnit" type="text" required>
                    </label>

                    <label>Quantity
                        <input id="newQuantity" type="number" step="0.01" required>
                    </label>

                    <button class="button">Create Ingredient</button>
                </form>
            </div>
        </div>


        <div id="enterTransactionsAction" class="action">
            <h1>Enter all sales</h1>
            <h3>Last updated: <span id="updated"></span></h3>
            
            <table>
                <thead>
                    <tr>
                        <th>Recipe</th>
                        <th>Number sold</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>

            <button class="button" onclick="enterTransactionsObj.submit()">Submit</button>
        </div>


        <div id="enterPurchaseAction" class="action">
            <h1>Enter Purchases</h1>
            
            <table>
                <thead>
                    <tr>
                        <th>Ingredient</th>
                        <th>Amount</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>

            <button class="button" onclick="enterPurchaseObj.submit()">Submit</button>
        </div>


        <div id="singleRecipeAction" class="action">
            <h2 id="recipeName"></h2>

            <div class="buttonsDiv">
                <button class="button" id="addButton">Add Ingredient</button>
            </div>

            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Quantity</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>

        <%- include ../shared/footer %>

        <script>
                <% if(locals.error){ %>
                    let error = <%- JSON.stringify(error) %>;
                <% }else{ %>
                    let error = undefined;
                <% } %>
        </script>
        <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/recipes.js"></script>
        <script src="/inventoryPage/data.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/singleRecipe.js"></script>
        <script src="/shared/controller.js"></script>

        <script>
            axios.get("/transactions")
                .then((response)=>{
                    if(typeof(response.data) === "string"){
                        banner.createError(response.data);
                    }else{
                        dataObj.populate(response.data);
                    }
                })
                .catch((err)=>{
                    banner.createError("Error: unable to render sales data");
                });

            axios.get("/purchases")
                .then((response)=>{
                    if(typeof(response.data) === "string"){
                        banner.createError(response.data);
                    }else{
                        dataObj.populatePurchases(response.data);
                    }
                })
                .catch((err)=>{
                    banner.createError("Error: unable to render purchases data");
                })
        </script>
    </body>
</html>