tempStats.html HTML Source View


<!!DOCTYPE html>>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<link rel="stylesheet" href="styles/jquery.mobile-1.0b2.min.css" />
	<link rel="stylesheet" href="styles/eth.css" />
	<script src="styles/jquery-1.6.4.min.js" type="text/javascript"></script> 
	<script src="styles/jquery.mobile-1.0b2.min.js?2" type="text/javascript"></script> 
	<script src="styles/RGraph.common.core.js" type="text/javascript"></script> 
	<script src="styles/RGraph.common.dynamic.js" type="text/javascript"></script> 
	<script src="styles/RGraph.common.tooltips.js" type="text/javascript"></script> 
	<script src="styles/RGraph.common.key.js" type="text/javascript"></script> 
    <script src="styles/RGraph.line.js" type="text/javascript"></script> 

			<script type="text/javascript" src="styles/jquery.mobile.simpledialog.min.js?1"></script> 
	<link rel="stylesheet" type="text/css" href="styles/jquery.mobile.simpledialog.min.css" />

</head>
<body>
	<div data-role="page" id="tempStatTopPage" data-title="Temperature Statistics - Wireless Tag List">

		<div data-role="header" data-theme="b" data-position="inline">
			<a href="index.html" data-icon="delete" data-iconpos="notext" data-ajax="false">Cancel</a>
			<h1 id="stat_title">Temperature Statistics</h1>
			<a class="ui-btn-right" id="top_right_btn" data-icon="arrow-u" data-ajax=0 data-theme="b">Share</a>
		</div>
		<div id="tempStatGraphs" style="margin-left:2%; margin-right: 2%;">
		</div>
		<center class="loggedInOnly">
			<button data-icon="arrow-d" data-inline=1 data-theme="b" id="downloadTemperatureLogBtn">Download CSV</button>
			<button data-icon="delete" data-inline=1 data-theme="e" id="deleteTemperatureLogBtn">Delete Temperature Log</button>
		</center>
		<center class="sharedOnly">
			...captured by <a href="http://wirelesstag.net">Wireless Sensor Tags</a>
		</center>
	<script src="styles/client.js?2" type="text/javascript"></script> 
	<script type="text/javascript">
		var params = (window.location.search.length > 0 ? window.location.search.substring(1) : localStorage["mytaglist.stats.slaveid"]).split('&');
		var slaveId = params[0];
		var tagName = localStorage["mytaglist.stats.name"];
		var isUUID = slaveId.length > 4;
		if (!tagName && params.length > 1 && isUUID) tagName = params[1];

		if (tagName)$("#stat_title").text(tagName + " - Temperature Statistics");

		var shareInfo;
		if (isUUID) {
			$(".loggedInOnly").hide();
			$(".sharedOnly").show();

			var btn = $("#top_right_btn");
			btn.data("icon", "arrow-d");
			btn[0].innerHTML = "Download";
			btn.click(function () {
				window.location = WSROOT + "ethDownloadTempCSV.aspx?uuid=" + params[0] + "&name=" + tagName;
			});
		} else {
			$(".sharedOnly").hide();
			$("#downloadTemperatureLogBtn").click(function () {
				window.location = WSROOT + "ethDownloadTempCSV.aspx?id=" + params[0];
			});
			$("#top_right_btn").click(function () {
				var btn2 = $("#top_right_btn").find(".ui-btn-inner");
				var oldhtml2 = show_finding(btn2, "Loading...");
				$.ajax({
					url: WSROOT + "ethLogs.asmx/GetSharePermissions",
					data: JSON.stringify({ "ids": [slaveId], "type": "temp"}),
					complete: function () { restore_finding(btn2, oldhtml2); },
					success: function (retval, textStatus) {
						shareInfo = retval.d;

						var html = "<div style='padding: 15px; width: "+(window.innerWidth-140)+"px'><b>Share this data</b>"+
						"<div data-role='fieldcontain'><label for='graphURL'>Link to open graph in Web:</label><input type='text' id='graphURL'></div>"+
						"<div data-role='fieldcontain'><label for='downloadURL'>CSV download link:</label><input type='text' id='downloadURL'></div>"+
						"<div data-role='fieldcontain'><label for='iosURL'>Link to open graph in iOS app:</label><input type='text' id='iosURL'></div>"+
						"<div data-role='fieldcontain'><label for='embedHTML'>HTML to embed latest readings:</label><input type='text' id='embedHTML'><button onclick='previewEmbedHTML("+slaveId+")' data-theme='d'>Preview HTML</button></div><div id='embdedHTMLPreview'></div>"+
						"<fieldset data-role='controlgroup'><input type='checkbox' id='shareTemp'><label for='shareTemp'>Anyone with link can access temperature data for this tag</label>"+
						"<input type='checkbox' id='shareMotion'><label for='shareMotion'>Anyone with link can access motion log data for this tag</label></fieldset>"+
						"<a rel='close' data-role='button' data-theme='b' data-icon='check' href='#'>Apply Permissions</a></div>";

						var holder = $("#tempStatGraphs");
						if (holder.data('simpledialog')) {
							holder.data('simpledialog').options.fullHTML = html;
							holder.simpledialog('refresh').simpledialog('open');
						} else {
							holder.simpledialog({
								'mode': 'blank',
								'left': 80 ,'top':'0px',
								'prompt': false,
								'forceInput': false,
								'useModal': true,
								pickPageTheme: 'c',
								'fullHTML': html,
								onClosed: function () {
									if (shareInfo.shareMotion[0] != $("#shareMotion").is(":checked") || shareInfo.shareTemperature[0] != $("#shareTemp").is(":checked")) {
										$.ajax({
											url: WSROOT + "ethLogs.asmx/EditSharePermissions",
											data: JSON.stringify({ "ids": [slaveId], "shareTemperature": [$("#shareTemp").is(":checked")], "shareMotion":[$("#shareMotion").is(":checked")] }),
											error: function (xhr, textStatus, exception) {
												popup_error(xhr, null);
											}
										});
									}
								}
							});
						}

						$("#shareMotion").attr("checked", shareInfo.shareMotion[0]).checkboxradio("refresh");
						$("#shareTemp").attr("checked", shareInfo.shareTemperature[0]).checkboxradio("refresh");
						$("#graphURL").val(shareInfo.graphUrl).click(function () { return selectedURL(this, false); });
						$("#downloadURL").val(shareInfo.downloadUrl).click(function () { return selectedURL(this, false); });
						$("#iosURL").val(shareInfo.iosAppUrl).click(function () { return selectedURL(this, false); });
						$("#embedHTML").val(shareInfo.embedHTML).click(function () { return selectedURL(this, false); });
	},
	error: function (xhr, textStatus, exception) {
		popup_error(xhr, null);
	}
	});
	});
	}

	Array.prototype.average = function () {
		var n = 0;
		for (var i = 0, sum = 0; i < this.length; i++) {
			if (this[i]) {
				sum += this[i]; n++;
			}
		}
		return Math.round(sum * 10 / n) / 10;
	}

	var temp_unit = 0;
	var isPrinting = false;
	function createOneDayGraph(stat, ymax2, ymin2) {
		var cvsid = "day_" + stat.date.replace(/\//g, '_');
		var targetWidth;
		if (window.innerWidth > 1000) targetWidth = window.innerWidth / 2-15;
		else targetWidth = window.innerWidth;
		$("<canvas height=150></canvas>").data('date', stat.date).attr("id", cvsid)
		.attr("width", targetWidth * (isPrinting ? 1.18 : 0.95))
		.css("text-align", "center").appendTo($("#tempStatGraphs"));

		var drawCap = false;
		for (var i = 0; i < stat.caps.length; i++) {
			if (!isNaN(stat.caps[i])) {
				drawCap = true; break;
			}
		}
		if(drawCap){
			var line4 = new RGraph.Line(cvsid, stat.caps);
			line4.Set('chart.tooltips', $.map(stat.caps, function (v, i) { return Math.round(v)+ " %" }));
			line4.Set('chart.background.grid', false);
			line4.Set('chart.tooltips.event', 'onclick');
			line4.Set('chart.gutter.left', 40);
			line4.Set('chart.gutter.right', 40);
			line4.Set('chart.ylabels.inside', true);
			line4.Set('chart.yaxispos', 'right');
			line4.Set('chart.units.post', '%');
			line4.Set('chart.ymax', 100);
			line4.Set('chart.ymin', 0);
			line4.Set('chart.noaxes', true);
			line4.Set('chart.colors', ['darkgreen']);
			line4.Draw();
		}

		var line3 = new RGraph.Line(cvsid, stat.temps);
		line3.Set('chart.tooltips', $.map(stat.temps, function (deg, i) {
			if (temp_unit) degf = deg;
			else degf = deg * 9.0 / 5.0 + 32.0;

			return Math.round(degf * 10) / 10 + "°F/" + Math.round((degf - 32) * 5.0 / 9.0 * 10) / 10 + "°C";
		}));

		line3.Set('chart.gutter.left', 40);
		line3.Set('chart.gutter.right', 40);
		line3.Set('chart.yaxispos', 'right');
		line3.Set('chart.tooltips.event', 'onclick');

		line3.Set('chart.background.grid', true);
		line3.Set('chart.background.grid.autofit.numvlines', 23);

		line3.Set('chart.units.post', temp_unit ? '°F' : '°C');

		if (ymin2 < 0) {
			line3.Set('chart.xaxispos', 'center');
			line3.Set('chart.ymax', ymax2+ymin2>0? ymax2 : -ymin2);
		} else {
			line3.Set('chart.ymax', ymax2);
			line3.Set('chart.ymin', ymin2);
			line3.Set('chart.xaxispos', 'bottom');
		}
		line3.Set('chart.colors', ['red', 'darkgreen']);
		if (drawCap)
			line3.Set('chart.key', ["Temperature (" + (temp_unit ? "°F)" : "°C)"), 'Moisture (%)']);
		else
			line3.Set('chart.key', ["Temperature (" + (temp_unit ? "°F)" : "°C)")]);
		line3.Set('chart.key.position.x', 45);
		line3.Set('chart.key.position.y', 25);
		line3.Set('chart.key.background', 'rgba(255,255,255,0.5)');
		line3.Set('chart.labels', ['12AM', '', '', '3', '', '', '6AM', '', '', '9', '', '', '12PM', '', '', '3', '', '', '6PM', '', '', '9', '', '']);
		if (drawCap)
			line3.Set('chart.title', stat.date + " (Average: " + stat.temps.average() + (temp_unit ? "°F, " : "°C, ") + stat.caps.average() + "%)");
		else
			line3.Set('chart.title', stat.date + " (Average: " + stat.temps.average() + (temp_unit ? "°F)" : "°C)"));

		line3.Draw();
	}

	var $loader = $("<div class='ui-loader ui-body-a ui-corner-all'><span class='ui-icon ui-icon-loading spin'></span><h1>Loading Statistics...</h1></div>");
	$body = $("body");
	$loader.appendTo($body).css({ top: 100 });
	$body.addClass("ui-loading");

	var statData;
	var ymin2 = new Array(), ymax2 = new Array();
	function resizeCanvas() {
		if ($.mobile.activePage[0].id == 'tempStatTopPage') {

			$("canvas").remove();
			for (var i = 0; i < statData.length; i++) {
				createOneDayGraph(statData[i], ymax2[i], ymin2[i]);
			}
		}
	}
	function loadStats() {
		$.ajax({
			url: WSROOT + (isUUID ? "ethLogShared.asmx/GetTemperatureStatsByUUID" : "ethLogs.asmx/GetTemperatureStats2"),
			/*beforeSend: function (xhr) {
			if (params.length > 1)
			xhr.setRequestHeader("Cookie", params[1]);
			},*/
			data: JSON.stringify({ "id": slaveId }),
			success: function (retval, textStatus) {
				temp_unit = retval.d.temp_unit;
				statData = retval.d.temps;
				for (var i = 0; i < statData.length; i++) {
					if (temp_unit == 1) {
						ymin2[i] = 220; ymax2[i] = -28;
					}
					else {
						ymin2[i] = 115; ymax2[i] = -40;
					}
					statData[i].temps = $.map(statData[i].temps, function (degC, i) { if (degC == 0.0) return NaN; return temp_unit == 1 ? degC * 9.0 / 5.0 + 32.0 : degC; });
					statData[i].caps = $.map(statData[i].caps, function (val, i) { if (val == -99) return NaN; return val; });

					for (var j = 0; j < statData[i].temps.length; j++) {
						var degf = statData[i].temps[j];
						if (isNaN(degf)) continue;
						ymax2[i] = Math.max(degf, ymax2[i]);
						ymin2[i] = Math.min(degf, ymin2[i]);
					}
					ymax2[i] = Math.min(temp_unit?220:125, ymax2[i]);
					ymax2[i] = Math.ceil(ymax2[i] / 5 + 0.5) * 5;
					ymin2[i] = Math.floor(ymin2[i] / 5 - 0.5) * 5;
				}

				for (var i = 0; i < statData.length; i++) {
					createOneDayGraph(statData[i], ymax2[i], ymin2[i]);
				}
				window.addEventListener('resize', function () {
					resizeCanvas();
				}, false);
				window.matchMedia('print').addListener(function (mql) {
					if (mql.matches) {
						isPrinting = true;
						resizeCanvas();
					} else {
						isPrinting = false;
					}
				});
				//$body.removeClass("ui-loading");
				$loader.remove();
			},
			error: function (xhr, textStatus, exception) {
				if (xhr.responseText.toLowerCase().indexOf("unauthorized") != -1 || exception.toLowerCase().indexOf("unauthorized") != -1 || xhr.responseText.toLowerCase().indexOf("authentication failed") != -1)
					location.replace("signin.html?redirect=tempStats.html");
				else {

					//$body.removeClass("ui-loading");
					$loader.remove();

					popup_error(xhr, $body);
				}
			}
		});
	}
	if (params.length > 1) {
		$.ajax({
			url: WSROOT + "ethAccount.asmx/ReflectAspxAuthCookie",
			data: JSON.stringify({ "cookie": params[1] }),
			success: function (retval, textStatus) {
				loadStats();
			}
		});
	}
	else
	{
		loadStats();
	}

	$('#deleteTemperatureLogBtn').click(function (e) {
		$(e.target).simpledialog({ mode: 'bool', prompt: "This operation will permanently delete all temperature log data of this tag. Do you want to continue?",
			useModal: true, forceInput: true, cleanOnClose: true,
			'buttons': {
				'Yes': { click: function () {
					$.ajax({ url: WSROOT + "ethLogs.asmx/DeleteTemperatureData",
						data: "{id: " + slaveId + "}",
						success: function (retval) {
							$("#tempStatGraphs").empty();
							$("#tempStatGraphs").html("<center>"+retval.d + " records permanently removed.</center>");
						}
					});
				}, icon: "forward"
				},
				'Cancel': { click: function () {
				}, icon: "back"
				}
			}
		});
	});


	</script> 
	</div>

</body>
</html>