|
@@ -0,0 +1,105 @@
|
|
|
+@Title{Weight}@
|
|
|
+@CSS{
|
|
|
+ .input{
|
|
|
+ padding:5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .input > *{
|
|
|
+ display: block;
|
|
|
+ width:100%;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+}@
|
|
|
+@JavaScript{
|
|
|
+ var chartData;
|
|
|
+ var chart;
|
|
|
+
|
|
|
+ var chartOptions = {
|
|
|
+ chart: {
|
|
|
+ title: 'Historical Weight Data',
|
|
|
+ },
|
|
|
+ height:400,
|
|
|
+ legend:{
|
|
|
+ position: 'top',
|
|
|
+ alignment: 'start'
|
|
|
+ },
|
|
|
+ series: {
|
|
|
+ 0:{axis:'Weight'},
|
|
|
+ 2:{axis:'Fat'}
|
|
|
+ },
|
|
|
+ axes:{
|
|
|
+ y:{
|
|
|
+ Weight:{label:'Weight (KG)'},
|
|
|
+ Fat:{label:'Fat %'}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ function DrawChart() {
|
|
|
+ chart.draw(chartData, chartOptions);
|
|
|
+ }
|
|
|
+
|
|
|
+ function InitChart(){
|
|
|
+ chartData = new google.visualization.DataTable();
|
|
|
+ chartData.addColumn('date', 'Date');
|
|
|
+ chartData.addColumn('number', 'Weight (KG)');
|
|
|
+ chartData.addColumn('number', 'Fat %');
|
|
|
+ chartData.addColumn('number', 'BMI');
|
|
|
+
|
|
|
+ chartData.addRows([
|
|
|
+ <?php
|
|
|
+ foreach ($readings as $r){
|
|
|
+ $dateArray=$r->GetParsedDate();
|
|
|
+ echo '[new Date(',$dateArray['year'],',',$dateArray['month']-1,',',$dateArray['day'],'),',$r->Weight,',',$r->Fat,',',$r->Bmi,'],',PHP_EOL;
|
|
|
+ }
|
|
|
+ ?>
|
|
|
+ ]);
|
|
|
+
|
|
|
+ chart = new google.charts.Line(document.getElementById('linechart'));
|
|
|
+
|
|
|
+ DrawChart();
|
|
|
+ }
|
|
|
+
|
|
|
+ function AddData(weight, bmi, fat){
|
|
|
+ chartData.addRow([new Date(),weight,fat,bmi]);
|
|
|
+ DrawChart();
|
|
|
+ }
|
|
|
+
|
|
|
+ function AddWeightReading(data){
|
|
|
+ var reading=JSON.parse(data);
|
|
|
+ AddData(reading.Weight, reading.BMI, reading.Fat);
|
|
|
+ }
|
|
|
+
|
|
|
+ $(function(){
|
|
|
+ $.getScript("https://www.google.com/jsapi",function(){
|
|
|
+ google.load('visualization', '1.1', {packages: ['line'], callback:function(){
|
|
|
+ google.setOnLoadCallback(InitChart);
|
|
|
+ }});
|
|
|
+ });
|
|
|
+ });
|
|
|
+}@
|
|
|
+@Body{
|
|
|
+<form ajaxForm action="/weight/add" method="post" onsuccess="AddWeightReading">
|
|
|
+ <div class="row col-md-4">
|
|
|
+ <div class="col input">
|
|
|
+ <label for="weight">Weight (KG)</label>
|
|
|
+ <input type="text" id="weight" name="weight" />
|
|
|
+ </div>
|
|
|
+ <div class="col input">
|
|
|
+ <label for="bmi">BMI</label>
|
|
|
+ <input type="text" id="bmi" name="bmi" />
|
|
|
+ </div>
|
|
|
+ <div class="col input">
|
|
|
+ <label for="fat">Fat %</label>
|
|
|
+ <input type="text" id="fat" name="fat" />
|
|
|
+ </div>
|
|
|
+ <div class="col input">
|
|
|
+ <label for="save">Action</label>
|
|
|
+ <input id="save" style="padding:5px" type="submit" value="Save" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</form>
|
|
|
+<div class="row col-lg-1">
|
|
|
+ <div class="col" id="linechart"></div>
|
|
|
+</div>
|
|
|
+}@
|