|
|
@@ -12,85 +12,10 @@
|
|
|
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
|
|
|
</head>
|
|
|
<body>
|
|
|
- <div id="menu" class="menu">
|
|
|
- <div id="max" class="menuHead">
|
|
|
- <a href="/">
|
|
|
- <img class="menuLogo" src="/shared/images/logo.png" alt="The Subline">
|
|
|
- <p>THE SUBLINE</p>
|
|
|
- </a>
|
|
|
-
|
|
|
- <button class="menuShifter" onclick="controller.changeMenu()">≡</button>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div id="min" class="menuHead menuHeadMin">
|
|
|
- <a href="/">
|
|
|
- <img class="menuLogoMin" src="/shared/images/logo.png" alt="The Subline">
|
|
|
- </a>
|
|
|
-
|
|
|
- <button id="menuShifter2" onclick="controller.changeMenu()">≡</button>
|
|
|
- </div>
|
|
|
-
|
|
|
- <button class="menuButton active" id="homeBtn">
|
|
|
- <svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
|
- <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
|
|
|
- <polyline points="9 22 9 12 15 12 15 22"></polyline>
|
|
|
- </svg>
|
|
|
- <p>DASHBOARD</p>
|
|
|
- </button>
|
|
|
-
|
|
|
- <button class="menuButton" id="ingredientsBtn">
|
|
|
- <svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
|
- <polyline points="21 8 21 21 3 21 3 8"></polyline>
|
|
|
- <rect x="1" y="3" width="22" height="5"></rect>
|
|
|
- <line x1="10" y1="12" x2="14" y2="12"></line>
|
|
|
- </svg>
|
|
|
- <p>INGREDIENTS</p>
|
|
|
- </button>
|
|
|
-
|
|
|
- <button class="menuButton" id="recipeBookBtn">
|
|
|
- <svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
|
- <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
|
|
|
- <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
|
|
|
- </svg>
|
|
|
- <p>RECIPE BOOK</p>
|
|
|
- </button>
|
|
|
-
|
|
|
- <button class="menuButton" id="analyticsBtn">
|
|
|
- <svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
|
- <polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline>
|
|
|
- <polyline points="17 6 23 6 23 12"></polyline>
|
|
|
- </svg>
|
|
|
- <p>ANALYTICS</p>
|
|
|
- </button>
|
|
|
-
|
|
|
- <button class="menuButton" id="ordersBtn">
|
|
|
- <svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
|
- <circle cx="9" cy="21" r="1"></circle>
|
|
|
- <circle cx="20" cy="21" r="1"></circle>
|
|
|
- <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
|
|
|
- </svg>
|
|
|
- <p>ORDERS</p>
|
|
|
- </button>
|
|
|
-
|
|
|
- <button class="menuButton" id="transactionsBtn">
|
|
|
- <svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
|
- <rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect>
|
|
|
- <line x1="1" y1="10" x2="23" y2="10"></line>
|
|
|
- </svg>
|
|
|
- <p>TRANSACTIONS</p>
|
|
|
- </button>
|
|
|
-
|
|
|
- <a class="menuButton" href="/logout">
|
|
|
- <svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
|
- <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
|
|
|
- <polyline points="16 17 21 12 16 7"></polyline>
|
|
|
- <line x1="21" y1="12" x2="9" y2="12"></line>
|
|
|
- </svg>
|
|
|
- <p>LOGOUT</p>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
+ <% include ./ejs/menu.ejs %>
|
|
|
|
|
|
<div id="mobileMenuSelector" class="mobileMenuSelector" onclick="controller.openMenu()">≡</div>
|
|
|
+
|
|
|
<button id="sidebarCloser" style="display: none;" onclick="controller.closeSidebar()">
|
|
|
<svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
|
@@ -99,338 +24,30 @@
|
|
|
</button>
|
|
|
|
|
|
<div class="contentBlock">
|
|
|
- <div id="bannerContainer">
|
|
|
- <template id="banner">
|
|
|
- <div class="banner">
|
|
|
- <div>
|
|
|
- <svg style="display:none;" width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
|
- <circle cx="12" cy="12" r="10"></circle>
|
|
|
- <line x1="15" y1="9" x2="9" y2="15"></line>
|
|
|
- <line x1="9" y1="9" x2="15" y2="15"></line>
|
|
|
- </svg>
|
|
|
-
|
|
|
- <svg style="display:none;" width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
|
- <circle cx="12" cy="12" r="10"></circle>
|
|
|
- <line x1="12" y1="8" x2="12" y2="12"></line>
|
|
|
- <line x1="12" y1="16" x2="12.01" y2="16"></line>
|
|
|
- </svg>
|
|
|
-
|
|
|
- <svg style="display:none;" width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
|
- <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
|
|
- <polyline points="22 4 12 14.01 9 11.01"></polyline>
|
|
|
- </svg>
|
|
|
- </div>
|
|
|
- <p></p>
|
|
|
- <button>
|
|
|
- <svg width="18" height="18" viewBox="0 0 24 24" fill="rgb(200, 0, 0)" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
|
- <circle cx="12" cy="12" r="10"></circle>
|
|
|
- <line x1="15" y1="9" x2="9" y2="15"></line>
|
|
|
- <line x1="9" y1="9" x2="15" y2="15"></line>
|
|
|
- </svg>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
+ <%include ./ejs/banner.ejs %>
|
|
|
|
|
|
- <div id="homeStrand" class="strand">
|
|
|
- <div class="strandHead">
|
|
|
- <h1 class="strandTitle">DASHBOARD</h1>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="flexRow">
|
|
|
- <div id="revenueCard" class="card">
|
|
|
- <p>Total Revenue (month)</p>
|
|
|
-
|
|
|
- <p id="revenue"></p>
|
|
|
-
|
|
|
- <div id="revenueChange">
|
|
|
- <img alt="revenue">
|
|
|
-
|
|
|
- <p></p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div id="graphCard" class="card"></div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="flexRow">
|
|
|
- <div id="inventoryCheckCard" class="card">
|
|
|
- <p>Inventory Check</p>
|
|
|
-
|
|
|
- <ul></ul>
|
|
|
-
|
|
|
- <button id="inventoryCheck" class="button">Update</button>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div id=popularIngredientsCard class="card"></div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <template id="ingredientCheck">
|
|
|
- <li class="ingredientCheck flexRow">
|
|
|
- <p></p>
|
|
|
-
|
|
|
- <div class="numberInput">
|
|
|
- <button>-</button>
|
|
|
- <input type="number" min="0" step="0.01">
|
|
|
- <button>+</button>
|
|
|
- </div>
|
|
|
-
|
|
|
- <p></p>
|
|
|
- </li>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div id="ingredientsStrand" class="strand">
|
|
|
- <div class="strandHead">
|
|
|
- <h1 class="strandTitle">INGREDIENT INVENTORY</h1>
|
|
|
-
|
|
|
- <button class="button mobileHide" onclick="controller.openSidebar('newIngredient')">NEW</button>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="searchBar">
|
|
|
- <svg class="searchButton" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
|
- <circle cx="11" cy="11" r="8"></circle>
|
|
|
- <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
|
|
- </svg>
|
|
|
- <input id="ingredientSearch" class="searchInput" type="text" placeholder="SEARCH">
|
|
|
- </div>
|
|
|
-
|
|
|
- <div id="categoryList"></div>
|
|
|
-
|
|
|
- <template id="categoryDiv">
|
|
|
- <div class="categoryDiv">
|
|
|
- <div>
|
|
|
- <p></p>
|
|
|
-
|
|
|
- <button>
|
|
|
- <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
|
- <polyline points="6 9 12 15 18 9"></polyline>
|
|
|
- </svg>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="ingredientsDiv"></div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
-
|
|
|
- <template id="ingredient">
|
|
|
- <div class="ingredient choosable tall">
|
|
|
- <p></p>
|
|
|
-
|
|
|
- <hr class="ingredientSpacer mobileHide">
|
|
|
-
|
|
|
- <p></p>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div id="recipeBookStrand" class="strand">
|
|
|
- <div class="strandHead">
|
|
|
- <h1 class="strandTitle">RECIPE BOOK</h1>
|
|
|
-
|
|
|
- <% if(merchant.pos === "none"){ %>
|
|
|
- <button class="button mobileHide" onclick="controller.openSidebar('addRecipe')">NEW</button>
|
|
|
- <% }else{ %>
|
|
|
- <button id="posUpdateRecipe" class="button mobileHide">UPDATE</button>
|
|
|
- <% } %>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="searchBar">
|
|
|
- <svg class="searchButton" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
|
- <circle cx="11" cy="11" r="8"></circle>
|
|
|
- <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
|
|
- </svg>
|
|
|
- <input id="recipeSearch" class="searchInput" type="text" placeholder="SEARCH">
|
|
|
- </div>
|
|
|
-
|
|
|
- <div id="recipeList"></div>
|
|
|
-
|
|
|
- <template id="recipe">
|
|
|
- <div class="choosable tall">
|
|
|
- <p></p>
|
|
|
- <p></p>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div id="analyticsStrand" class="strand">
|
|
|
- <div class="strandHead">
|
|
|
- <h1 class="strandTitle">ANALYTICS</h1>
|
|
|
-
|
|
|
- <label class="switch">
|
|
|
- <input id="analSlider" type="checkbox">
|
|
|
- <span class="slider"><p>INGREDIENTS</p><p>RECIPES</p></span>
|
|
|
- </label>
|
|
|
-
|
|
|
- <div class="dateRange">
|
|
|
- <h3 class="analDateRange">Date Range:</h3>
|
|
|
- <div class="dateRangeInput">
|
|
|
- <input id="analStartDate" type="date">
|
|
|
- <p> - </p>
|
|
|
- <input id="analEndDate" type="date">
|
|
|
- </div>
|
|
|
-
|
|
|
- <button id="analDateBtn" class="button-small">SUBMIT</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div id="analIngredientContent" class="analContent">
|
|
|
- <div id="analIngredientList" class="itemsList"></div>
|
|
|
-
|
|
|
- <div class="analData">
|
|
|
- <div id="itemUseGraph" class="card analCard"></div>
|
|
|
-
|
|
|
- <div class="dataRow">
|
|
|
- <div class="card analCard">
|
|
|
- <p>MINIMUM DAILY USE</p>
|
|
|
-
|
|
|
- <h1 id="analMinUse"></h1>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="card analCard">
|
|
|
- <p>AVERAGE DAILY USE</p>
|
|
|
-
|
|
|
- <h1 id="analAvgUse"></h1>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="card analCard">
|
|
|
- <p>MAXIMUM DAILY USE</p>
|
|
|
-
|
|
|
- <h1 id="analMaxUse"></h1>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div id="analDailyAverages" class="dataRow">
|
|
|
- <div class="card analCard">
|
|
|
- <p>Sunday Average</p>
|
|
|
-
|
|
|
- <h1 id="analDayOne"></h1>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="card analCard">
|
|
|
- <p>Monday Average</p>
|
|
|
-
|
|
|
- <h1 id="analDayTwo"></h1>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="card analCard">
|
|
|
- <p>Tuesday Average</p>
|
|
|
-
|
|
|
- <h1 id="analDayThree"></h1>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="card analCard">
|
|
|
- <p>Wednesday Average</p>
|
|
|
-
|
|
|
- <h1 id="analDayFour"></h1>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="card analCard">
|
|
|
- <p>Thursday Average</p>
|
|
|
-
|
|
|
- <h1 id="analDayFive"></h1>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="card analCard">
|
|
|
- <p>Friday Average</p>
|
|
|
-
|
|
|
- <h1 id="analDaySix"></h1>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="card analCard">
|
|
|
- <p>Saturday Average</p>
|
|
|
-
|
|
|
- <h1 id="analDaySeven"></h1>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div id="analRecipeContent" class="analContent">
|
|
|
- <ul id="analRecipeList" class="itemsList"></ul>
|
|
|
-
|
|
|
- <div class="analData">
|
|
|
- <div id="recipeSalesGraph" class="card analCard"></div>
|
|
|
-
|
|
|
- <div class="dataRow">
|
|
|
- <div class="card analCard">
|
|
|
- <p>Average Daily Sales</p>
|
|
|
-
|
|
|
- <h1 id="recipeAvgUse"></h1>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="card analCard">
|
|
|
- <p>Average Daily Revenue</p>
|
|
|
-
|
|
|
- <h1 id="recipeAvgRevenue"></h1>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div id="ordersStrand" class="strand">
|
|
|
- <div class="strandHead">
|
|
|
- <h1 class="strandTitle">ORDERS</h1>
|
|
|
-
|
|
|
- <div class="buttonBox">
|
|
|
- <button id="orderFilterBtn" class="button">FILTER</button>
|
|
|
-
|
|
|
- <button id="newOrderBtn" class="button">NEW</button>
|
|
|
-
|
|
|
- <button id="orderCalcBtn" class="button">CALCULATOR</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div id="orderList"></div>
|
|
|
-
|
|
|
- <template id="order">
|
|
|
- <div class="choosable tall">
|
|
|
- <p></p>
|
|
|
- <p></p>
|
|
|
- <p></p>
|
|
|
- <p></p>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div id="transactionsStrand" class="strand transactions">
|
|
|
- <div class="strandHead">
|
|
|
- <h1 class="strandTitle">TRANSACTIONS</h1>
|
|
|
-
|
|
|
- <div class="buttonBox">
|
|
|
- <button id="filterTransactionsButton" class="button">FILTER</button>
|
|
|
-
|
|
|
- <button id="newTransactionButton" class="button mobileHide">NEW</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div id="transactionsList" class="transactionsList"></div>
|
|
|
-
|
|
|
- <template id="transaction">
|
|
|
- <div class="choosable tall">
|
|
|
- <p></p>
|
|
|
- <p></p>
|
|
|
- <p></p>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
+ <% include ./ejs/strands/home.ejs %>
|
|
|
+ <% include ./ejs/strands/ingredients.ejs %>
|
|
|
+ <% include ./ejs/strands/recipeBook.ejs %>
|
|
|
+ <% include ./ejs/strands/analytics.ejs %>
|
|
|
+ <% include ./ejs/strands/orders.ejs %>
|
|
|
+ <% include ./ejs/strands/transactions.ejs %>
|
|
|
</div>
|
|
|
|
|
|
<div id="sidebarDiv" class="sidebarHide">
|
|
|
- <% include ./sidebars/newIngredient %>
|
|
|
- <% include ./sidebars/ingredientDetails %>
|
|
|
- <% include ./sidebars/editIngredient %>
|
|
|
- <% include ./sidebars/recipeDetails %>
|
|
|
- <% include ./sidebars/newRecipe %>
|
|
|
- <% include ./sidebars/orderDetails %>
|
|
|
- <% include ./sidebars/newOrder %>
|
|
|
- <% include ./sidebars/orderCalculator %>
|
|
|
- <% include ./sidebars/transactionDetails %>
|
|
|
- <% include ./sidebars/newTransaction %>
|
|
|
- <% include ./sidebars/editRecipe %>
|
|
|
- <% include ./sidebars/orderFilter %>
|
|
|
- <% include ./sidebars/transactionFilter %>
|
|
|
+ <% include ./ejs/sidebars/newIngredient %>
|
|
|
+ <% include ./ejs/sidebars/ingredientDetails %>
|
|
|
+ <% include ./ejs/sidebars/editIngredient %>
|
|
|
+ <% include ./ejs/sidebars/recipeDetails %>
|
|
|
+ <% include ./ejs/sidebars/newRecipe %>
|
|
|
+ <% include ./ejs/sidebars/orderDetails %>
|
|
|
+ <% include ./ejs/sidebars/newOrder %>
|
|
|
+ <% include ./ejs/sidebars/orderCalculator %>
|
|
|
+ <% include ./ejs/sidebars/transactionDetails %>
|
|
|
+ <% include ./ejs/sidebars/newTransaction %>
|
|
|
+ <% include ./ejs/sidebars/editRecipe %>
|
|
|
+ <% include ./ejs/sidebars/orderFilter %>
|
|
|
+ <% include ./ejs/sidebars/transactionFilter %>
|
|
|
</div>
|
|
|
|
|
|
<% include ../shared/loader %>
|