218 lines
9.8 KiB
HTML
218 lines
9.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<link rel="icon" type="image/icon" href="favicon.ico">
|
|
<link rel="apple-touch-icon" href="images/icon.png">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta name="description" content="app to track your calories fast" />
|
|
<meta name="theme-color" content="#000000" />
|
|
|
|
<link rel="manifest" href="/manifest.json" />
|
|
|
|
<link rel="stylesheet" type="text/css" href="/vendor/css/materialize.css" />
|
|
<link rel="stylesheet" type="text/css" href="/css/styles.css" />
|
|
<link rel="stylesheet" type="text/css" href="/css/layout.css" />
|
|
<script src="/vendor/js/materialize.js"></script>
|
|
<title>Fast Calorie</title>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
|
|
<div class="layout-app">
|
|
<header class="layout-header">
|
|
<nav>
|
|
<div class="nav-wrapper brown">
|
|
<a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
|
|
<a href="/" class="brand-logo">Fast Calorie</a>
|
|
<ul id="nav" class="right">
|
|
<li class="datepicker" style="margin-right: 1rem;">
|
|
<i class="material-icons">date_range</i>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
<main class="layout-content">
|
|
<!-- Side Menu -->
|
|
<ul id="slide-out" class="sidenav">
|
|
<li class="brown">
|
|
<a href="#!"><i class="material-icons">home</i>Fast Calorie</a>
|
|
</li>
|
|
<li class="brown">
|
|
<div class="user-view">
|
|
<div style="min-height: 6rem;">
|
|
<!-- <img src="images/office.jpg"> -->
|
|
</div>
|
|
<a href=""><span class="white-text name">Version 0.0.0</span></a>
|
|
<a href=""><span class="white-text email">©2020 Geoff Doty</span></a>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="divider"></div>
|
|
</li>
|
|
<li><a href="#!" data-target="weightModal" class="modal-trigger"><i class="material-icons">input</i>Log Weight</a></li>
|
|
<li>
|
|
<div class="divider"></div>
|
|
</li>
|
|
<li><a class="subheader">Reports</a></li>
|
|
<li><a class="waves-effect" href="#!"><i class="material-icons">trending_down</i>Calories</a></li>
|
|
<li><a class="waves-effect" href="#!"><i class="material-icons">trending_down</i>Weight</a></li>
|
|
<li>
|
|
<div class="divider"></div>
|
|
</li>
|
|
<li><a class="waves-effect" href="#!"><i class="material-icons">info_outline</i>About</a></li>
|
|
<li ><a class="waves-effect" href="#!"><i class="material-icons">settings</i>Settings</a></li>
|
|
</ul>
|
|
|
|
<section class="section">
|
|
<div class="row">
|
|
<div class="col s2 selectable" @click="back">
|
|
<i class="material-icons">chevron_left</i>
|
|
</div>
|
|
<div class="col s8 center" @click="today"><h5 class="marginless">{this.current.date}</h5> </div>
|
|
<div class="col s2 selectable" @click="forward">
|
|
<i class="material-icons right">chevron_right</i>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col s4 center">
|
|
<strong>Cals Left</strong>
|
|
<p>{this.left}</p>
|
|
</div>
|
|
<div class="col s4 center">
|
|
<strong>Goal</strong>
|
|
<p>{this.settings.goal}</p>
|
|
</div>
|
|
<div class="col s4 center">
|
|
<strong>Used</strong>
|
|
<p>{this.used}</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<form id="entry" action="">
|
|
<div class="row">
|
|
<div class="col s8" style="padding-left: 2rem">
|
|
<label for="">Calories</label>
|
|
<input type="number" id="calories" placeholder="Item Calories" @keyup="search">
|
|
</div>
|
|
<div class="col s4 center" style="line-height: 72px;">
|
|
<button class="btn green" @click="save" style="margin-bottom:-12px">Add Calories</button>
|
|
</div>
|
|
</div>
|
|
<div :if="this.choices.length" class="collection ">
|
|
<div :for="item, i in this.choices" class="row collection-item" idx="{i}">
|
|
<div class="col s2 grey-text text-lighten-1" idx="{i}">{item.type}</div>
|
|
<div class="col s8" idx="{i}">{item.name} - <em>{item.description}</em></div>
|
|
<div class="col s2" idx="{i}">
|
|
<button class="btn brown right" idx="{i}" @click="order">
|
|
Add
|
|
<i class="material-icons left">add_circle_outline</i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<section :if="this.current.entries.length">
|
|
<ul class="collection with-header">
|
|
<li class="collection-header">
|
|
<h5>Today's Entries<span class="right" style="margin-right: 1rem;">{this.current.entries.length}</span></h5>
|
|
</li>
|
|
<li :for="entry, i in this.current.entries" idx="{i}" class="collection-item row modal-trigger" @click="details"
|
|
data-target="detailsModal">
|
|
<div class="col s2 grey-text text-lighten-1" idx="{i}">{entry.type}</div>
|
|
<div class="col s8" idx="{i}">{entry.name || 'Add Entry Description'}</div>
|
|
<div class="col s2">
|
|
<span class="right" idx="{i}">{entry.value}</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<div class="row">
|
|
<div class="col s8"></div>
|
|
<div class="col s2 center">
|
|
<h6><strong>Total</strong></h6>
|
|
</div>
|
|
<h6 class="col s2"><span class="right" style="margin-right: 1rem;">{this.used}</span> </h6>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
<footer class="layout-footer orange">
|
|
<div class="container">
|
|
|
|
</div>
|
|
<div class="footer-copyright">
|
|
<div class="container">
|
|
© 2020 Negative9.NET
|
|
<a class="grey-text text-lighten-4 right" href="#!" @click="populate">Populate</a>
|
|
</div>
|
|
</div>
|
|
<div class="container">
|
|
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<!-- Modal Structure -->
|
|
<div id="detailsModal" class="modal">
|
|
<div class="modal-content">
|
|
<h4>Entry Details</h4>
|
|
<p>
|
|
<table>
|
|
<tr>
|
|
<th>Name</th>
|
|
<td>{this.current.entry.name}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Calories</th>
|
|
<td>{this.current.entry.value}</td>
|
|
</tr>
|
|
</table>
|
|
</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<a href="#!" class="modal-close waves-effect waves-green btn-flat">Close</a>
|
|
<button class="btn red" @click="remove" idx="{this.current.entry.idx}">Remove Entry</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="weightModal" class="modal">
|
|
<div class="modal-content">
|
|
<h4>Log Weight</h4>
|
|
<p>
|
|
<table>
|
|
<tr>
|
|
<th colspan="2">
|
|
{this.date}
|
|
</th>
|
|
</tr>
|
|
<tr>
|
|
<th>Weight</th>
|
|
<td>
|
|
<!-- TODO: should show last weight -->
|
|
<input type="number" placeholder="100">
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<a href="#!" class="modal-close waves-effect waves-green btn-flat">Close</a>
|
|
<button class="btn red" @click="addWeight">Log Weight</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="/js/index.js"></script>
|
|
</body>
|
|
</html>
|