View/Temperature/index.view

@@ -1,5 +1,4 @@
 @Init{
-	$this->RegisterJSFile("https://www.google.com/jsapi");
 	$this->RegisterJSFile("services/temperatureService.js");
 	$this->RegisterJSFile("controllers/temperature.js");
 	$this->RegisterCSSFile("temperature.css");
@@ -20,7 +19,7 @@
 	<div>
 		Outside: {{temperatureData.outsideTemperature | number: 1}}
 	</div>
-	<google-chart data="readings" curveType="function" v-axis-title="Temperature" legend-position="top"></google-chart>
+	<google-chart data="readings" curveType="function" v-axis-title="Temperature" legend-position="top" tool-tip-inside="{Timestamp:H:i}: {Inside:1}" tool-tip-outside="{Timestamp:H:i}: {Outside:1}"></google-chart>
 	<scope-init value="readings"><?=json_encode($readings)?></scope-init>
 	<scope-init value="temperatureData"><?=json_encode($current)?></scope-init>
 </div>

scripts/directives/googleChart.js

@@ -29,6 +29,18 @@ app.directive('googleChart', function() {
 				backgroundColor: attributes.background || 'transparent'
 			};
 
+			function formatToolTip(input, args) {
+				return input.replace(/{(.+?)(:.*?)?}/g, function(match, index, format) {
+					if (format)
+						format = format.slice(1);
+					if (args[index]===undefined)
+						return match;
+					if (isNumber(args[index]))
+						return args[index].toString(format, true);
+					return args[index].toString(format);
+				});
+			}
+
 			function setupChart() {
 				if (!chartLoaded)
 					return;
@@ -49,12 +61,17 @@ app.directive('googleChart', function() {
 				chartData = new google.visualization.DataTable();
 				angular.forEach(fields, function(value) {
 					chartData.addColumn(value.type, value.title);
+					if (attributes['toolTip' + value.title.upperCaseFirst()])
+						chartData.addColumn({type: 'string', role: 'tooltip'});
 				});
 
 				angular.forEach(scope.data, function(value) {
 					var row = [];
-					angular.forEach(value, function(value2) {
+					angular.forEach(value, function(value2, index) {
 						row.push(value2);
+						var attrIndex = 'toolTip' + index.upperCaseFirst();
+						if (attributes[attrIndex])
+							row.push(formatToolTip(attributes[attrIndex], value));
 					});
 					chartData.addRow(row);
 				});
@@ -62,8 +79,8 @@ app.directive('googleChart', function() {
 				chart = new google.visualization.LineChart(element[0]);
 				drawChart();
 			}
-			
-			function drawChart(){
+
+			function drawChart() {
 				chart.draw(chartData, chartOptions);
 			}
 
@@ -81,8 +98,8 @@ app.directive('googleChart', function() {
 			scope.$watch("data", function(v) {
 				setupChart();
 			});
-			
-			angular.element(window).bind('resize', function () {
+
+			angular.element(window).bind('resize', function() {
 				drawChart();
 			});
 		}

scripts/javascript.js

@@ -1,34 +1,74 @@
-function Navigate(url){
-	window.location=url;
+function Navigate(url) {
+	window.location = url;
 }
 
 function CreateCookie(name, value, days) {
-    var expires;
-    if (days) {
-        var date = new Date();
-        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
-        expires = "; expires=" + date.toGMTString();
-    }
-    else {
-        expires = "";
-    }
-    document.cookie = name + "=" + value + expires + "; path=/";
+	var expires;
+	if (days) {
+		var date = new Date();
+		date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+		expires = "; expires=" + date.toGMTString();
+	}
+	else {
+		expires = "";
+	}
+	document.cookie = name + "=" + value + expires + "; path=/";
 }
 
 function round(value, decimals) {
-    return Number(Math.round(value+'e'+decimals)+'e-'+decimals);
+	return Number(Math.round(value + 'e' + decimals) + 'e-' + decimals);
+}
+
+function isNumber(value){
+	return isFinite(String(value));
+}
+
+String.prototype.upperCaseFirst = function() {
+	var lower = this.toLowerCase();
+	return lower.charAt(0).toUpperCase() + lower.slice(1);
+};
+
+function twoDigitZeroPad(input){
+	input=input.toString();
+	return [!input[1] && '0' || "", input].join('');
 }
 
-$(function(){
-	var panels=$("nav > dl > .sub-pages");
-	var goIndicators=$("nav > dl > dt .go");
-	var expandIndicators=$("nav > dl > dt .expand");
+Date.prototype.oldToString = Date.prototype.toString;
+Date.prototype.toString = function(format) {
+	if (!format)
+		return this.oldToString();
+	var me=this;
+	return format.replace(/./g, function(match) {
+		switch(match){
+			case 'd': return twoDigitZeroPad(me.getDate());
+			case 'm': return twoDigitZeroPad(me.getMonth()+1);
+			case 'y': return me.getFullYear();
+			case "H": return twoDigitZeroPad(me.getHours());
+			case "i": return twoDigitZeroPad(me.getMinutes());
+			case "s": return twoDigitZeroPad(me.getSeconds());
+			default: return match;
+		}
+	});
+};
+
+Number.prototype.oldToString=Number.prototype.toString;
+Number.prototype.toString=function(input, shouldRound){
+	if (!shouldRound)
+		return this.oldToString(input);
+	
+	return round(this, input);
+};
+
+$(function() {
+	var panels = $("nav > dl > .sub-pages");
+	var goIndicators = $("nav > dl > dt .go");
+	var expandIndicators = $("nav > dl > dt .expand");
 	panels.hide();
 	expandIndicators.show();
-	
-	$("nav > dl > dt").click(function(e){
-		var next=$(this).next();
-		if (!next.hasClass("sub-pages") || next.is(":visible")){
+
+	$("nav > dl > dt").click(function(e) {
+		var next = $(this).next();
+		if (!next.hasClass("sub-pages") || next.is(":visible")) {
 			Navigate($(this).children("a").attr("href"));
 			return;
 		}
@@ -39,57 +79,57 @@ $(function(){
 		$(this).children(".go").show();
 		$(this).children(".expand").hide();
 	});
-	
-	$("nav > dl > dt").each(function(){
+
+	$("nav > dl > dt").each(function() {
 		if ($(this).next().hasClass("sub-pages"))
 			$(this).attr("title", "Click once to expand, click again to go");
 	});
 
-	$("nav dd").click(function(e){
+	$("nav dd").click(function(e) {
 		Navigate($(this).children("a").attr("href"));
 	});
-	
-	$("nav a").click(function(e){
+
+	$("nav a").click(function(e) {
 		$(this).parent().click();
 		return false;
 	});
-	
-	$("#content").css("margin-bottom",window.innerHeight-$("#buttons").offset().top);
-	
-	$("form[ajaxForm]").submit(function(e){
+
+	$("#content").css("margin-bottom", window.innerHeight - $("#buttons").offset().top);
+
+	$("form[ajaxForm]").submit(function(e) {
 		e.preventDefault();
-		form=$(this);
+		form = $(this);
 		$.ajax({
-			url:form.attr("action"),
-			method:form.attr("method"),
-			data:form.serialize(),
-			success:function(data){
-				var successFunction=form.attr("onsuccess");
-				if (successFunction!==undefined && window[successFunction]!==undefined)
+			url: form.attr("action"),
+			method: form.attr("method"),
+			data: form.serialize(),
+			success: function(data) {
+				var successFunction = form.attr("onsuccess");
+				if (successFunction !== undefined && window[successFunction] !== undefined)
 					window[successFunction](data);
 			},
-			error:function(){
-				var errorFunction=form.attr("onerror");
-				if (errorFunction!==undefined && window[errorFunction]!==undefined)
+			error: function() {
+				var errorFunction = form.attr("onerror");
+				if (errorFunction !== undefined && window[errorFunction] !== undefined)
 					window[errorFunction]();
 			},
 		});
-		var postFunction=form.attr("onpost");
-		if (postFunction!==undefined && window[postFunction]!==undefined)
+		var postFunction = form.attr("onpost");
+		if (postFunction !== undefined && window[postFunction] !== undefined)
 			window[postFunction]();
 	});
-	
-	$("td").each(function(){
-		var elem=$(this);
-		if (/^[+-]?\d+(\.\d+)?$/.test(elem.text())){
+
+	$("td").each(function() {
+		var elem = $(this);
+		if (/^[+-]?\d+(\.\d+)?$/.test(elem.text())) {
 			elem.addClass("number");
 		}
 	});
 });
 
-$(document).delegate('.allowTabInput', 'keydown', function (e) {
+$(document).delegate('.allowTabInput', 'keydown', function(e) {
 	var keyCode = e.keyCode || e.which;
-console.log(e);
+	console.log(e);
 	if (keyCode == 9) {
 		e.preventDefault();
 		var start = $(this).get(0).selectionStart;