lee
/
subline


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
							<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="/inventoryPage/inventory.css">
        <link rel="stylesheet" href="/shared/shared.css">
    </head>
    <body>
        <% include ../shared/header %>

        <% include ../shared/banner %>

        <div class="container">
            <h1><%= merchant.name %> inventory</h1>

            <a href="/recipes">View Recipes</a>

            <button onclick="inventoryPage.displayAdd()">Add Ingredient</button>

            <input id="filter" onkeyup="inventoryPage.filter()" type="text" placeholder="Start typing to filter">

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

        <div class="add-ingredient">
            <div class="modal-content" onclick="event.stopPropagation()">
                <div id="existingIngredient">
                    <button id="createNew">Create New</button>
                    <table>
                        <thead>
                            <tr>
                                <th>Ingredient</th>
                                <th>Category</th>
                                <th>Unit</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>

                <div id="quantityInput">
                    <h3 id="quantityInputTitle"></h3>
                    <input type="number" step="0.01" required>
                    <button id="addIngredient">Add Ingredient</button>
                </div>

                <div id="newIngredient">
                    <label>Ingredient Name:
                        <input id="newName" type="text">
                    </label>

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

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

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

                    <button id="createIngredient">Create Ingredient</button>
                </div>
            </div>
        </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>
    </body>
</html>