Robware/View/Weight/index.view

@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 %'}
			}
		},
		backgroundColor:'transparent'
	};

	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'));
		chart = new google.visualization.LineChart(document.getElementById('linechart'));
		
		DrawChart();
	}
	
	function AddData(weight, bmi, fat){
		chartData.addRow([new Date(),weight,fat,bmi]);
		DrawChart();
	}
	
	function DisableControls(){
		$("input").attr("disabled","disabled");
	}
	
	function EnableControls(){
		$("input").removeAttr("disabled");
	}
	
	function AddWeightReading(data){
		EnableControls();
		if (data!=""){
			var reading=JSON.parse(data);
			AddData(reading.Weight, reading.BMI, reading.Fat);
			$("form input[type=number]").val("");
		}
	}
	
	$(function(){
		$.getScript("https://www.google.com/jsapi",function(){
			//google.load('visualization', '1.1', {packages: ['line'], callback:function(){
			google.load('visualization', '1', {packages: ['corechart'], callback:function(){
				google.setOnLoadCallback(InitChart);
			}});
		});
	});
}@
@Body{
<form ajaxForm action="/weight/add" method="post" onsuccess="AddWeightReading" onpost="DisableControls" autocomplete="off">
	<div class="row col-md-4">
		<div class="col input">
			<label for="weight">Weight (KG)</label>
			<input type="number" id="weight" name="weight" step="any" />
		</div>
		<div class="col input">
			<label for="fat">Fat %</label>
			<input type="number" id="fat" name="fat" step="any" />
		</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>
<div class="row col-lg-1">
	<div class="col">
		<h3>Last 10 readings</h3>
		<table class="alternatingRows">
			<tr>
				<th>Date</th>
				<th>Weight</th>
				<th>BMI</th>
				<th>Fat %</th>
			</tr>
			<?php
				$last10=array_slice($readings, count($readings)-10);
				$last10=array_reverse($last10);
				foreach ($last10 as $reading){
					echo '<tr><td>',date("d/m/y", strtotime($reading->Timestamp)),'</td><td>',$reading->Weight,'</td><td>',round($reading->Bmi,1),'</td><td>',$reading->Fat,'</td></tr>';
				}
			?>
		</table>
	</div>
</div>
}@