scafolding out weight entry

This commit is contained in:
Geoff Doty 2020-10-04 15:48:34 -04:00
parent 9e86fadd39
commit 3a9a8782a8
2 changed files with 37 additions and 3 deletions

View File

@ -34,6 +34,7 @@
</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>
@ -50,7 +51,7 @@
<li>
<div class="divider"></div>
</li>
<li><a href="#!"><i class="material-icons">input</i>Log Weight</a></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>
@ -179,6 +180,32 @@
<button class="btn red" @click="remove" idx="{this.selected.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>

View File

@ -145,6 +145,9 @@ Litedom({
// set focus
document.getElementById('calories').focus();
},
addWeight() {
console.log('add weight');
},
created() {
// start service worker
if ('serviceWorker' in navigator) {
@ -162,10 +165,14 @@ Litedom({
let pickers = document.querySelector('.datepicker');
M.Datepicker.init(pickers, {});
// [M]aterial modal
// [M]aterial modal - calorie detail
let modal = document.querySelector('#detailsModal');
M.Modal.init(modal, {});
// [M]aterial modal - add weight
let weight = document.querySelector('#weightModal');
M.Modal.init(weight, {});
var sidebar = document.querySelectorAll('.sidenav');
M.Sidenav.init(sidebar, {});
},