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> </nav>
</header> </header>
<main class="layout-content"> <main class="layout-content">
<!-- Side Menu -->
<ul id="slide-out" class="sidenav"> <ul id="slide-out" class="sidenav">
<li class="brown"> <li class="brown">
<a href="#!"><i class="material-icons">home</i>Fast Calorie</a> <a href="#!"><i class="material-icons">home</i>Fast Calorie</a>
@ -50,7 +51,7 @@
<li> <li>
<div class="divider"></div> <div class="divider"></div>
</li> </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> <li>
<div class="divider"></div> <div class="divider"></div>
</li> </li>
@ -179,6 +180,32 @@
<button class="btn red" @click="remove" idx="{this.selected.idx}">Remove Entry</button> <button class="btn red" @click="remove" idx="{this.selected.idx}">Remove Entry</button>
</div> </div>
</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> </div>
<script type="module" src="/js/index.js"></script> <script type="module" src="/js/index.js"></script>

View File

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