inventory.ejs 2.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <link rel="stylesheet" href="/inventory/inventory.css">
  5. <link rel="stylesheet" href="/shared/shared.css">
  6. </head>
  7. <body>
  8. <% include ../shared/header %>
  9. <% include ../shared/banner %>
  10. <div class="container">
  11. <h1><%= merchant.name %> inventory</h1>
  12. <button onclick="displayAdd()">Add Ingredient</button>
  13. <input id="filter" onkeyup="filter()" type="text" placeholder="Start typing to filter">
  14. <table>
  15. <thead>
  16. <tr>
  17. <th onclick="sortIngredients('name')">Item</th>
  18. <th onclick="sortIngredients('category')">Category</th>
  19. <th onclick="sortIngredients('quantity')">Quantity</th>
  20. <th onclick="sortIngredients('unit')">Unit</th>
  21. <th></th>
  22. </tr>
  23. <tbody></tbody>
  24. </thead>
  25. </table>
  26. </div>
  27. <div class="add-ingredient">
  28. <div class="modal-content" onclick="event.stopPropagation()">
  29. <div id="existingIngredient">
  30. <button id="createNew">Create New</button>
  31. <table>
  32. <thead>
  33. <tr>
  34. <th>Ingredient</th>
  35. <th>Category</th>
  36. <th>Unit</th>
  37. <th></th>
  38. </tr>
  39. </thead>
  40. <tbody></tbody>
  41. </table>
  42. </div>
  43. <div id="quantityInput">
  44. <h3 id="quantityInputTitle"></h3>
  45. <input type="number" step="0.01" required>
  46. <button id="addIngredient">Add Ingredient</button>
  47. </div>
  48. <div id="newIngredient">
  49. <label>Ingredient Name:
  50. <input id="newName" type="text">
  51. </label>
  52. <label>Category:
  53. <input id="newCategory" type="text">
  54. </label>
  55. <label>Quantity:
  56. <input id="newQuantity" type="number" step="0.01">
  57. </label>
  58. <label>Unit:
  59. <input id="newUnit" type="text">
  60. </label>
  61. <button id="createIngredient">Create Ingredient</button>
  62. </div>
  63. </div>
  64. </div>
  65. <script>let merchant = <%- JSON.stringify(merchant) %>;</script>
  66. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  67. <script src="../shared/validation.js"></script>
  68. <script src="/inventory/inventory.js"></script>
  69. </body>
  70. </html>