events.html HTML Source View


<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title>Event History</title>
	<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?3" type="text/javascript"></script> 
<style>
	.aside-time {
		margin: 1em 0;
		font-size: 1.3em;
	}
	.ui-li-divider {
		text-align: center;
		font-size:1.1em;
		color: white;
	}
</style> 
</head>
<body>
	<div data-role="page" id="eventPage">
		<div data-role="header" data-theme="p" data-position="inline">
			<a href="index.html" data-ajax="false" data-icon="home" data-iconpos="notext">Back</a>
			<h1>
				Event History
			</h1>
			<a class="eventGetNew ui-btn-right"  data-icon="refresh">Update</a>
		</div>
		<div data-role="content" data-theme="c">
			<ul id="eventList" data-role="listview" data-filter="true" data-filter-placeholder="Filter using tag name or event type..." data-inset="true" data-dividertheme="d"></ul>
		</div>
	</div>
	<script src="styles/client.js?2" type="text/javascript"></script> 
	<script>
		function fileTimeToDate(fileTime) {
			return new Date(fileTime / 10000 - 11644473600000);
		}
		function dateToFileTime(date) {
			return (date.getTime() + 11644473600000) * 10000;
		}
		var olderThan, latestDateTime=0, lastDateString, firstDateString=null;
		function DetailedTimeSpanString(sec) {
			var str = '';
			var days = Math.floor(sec / 60 / 60 / 24);
			if (days >= 1) { str = days + " days "; sec -= days * 60 * 60 * 24 }
			var hours = Math.floor(sec / 60 / 60);
			if (hours >= 1) { str = str + hours + " hours "; sec -= hours * 60 * 60 }
			var min = Math.floor(sec / 60);
			if (min >= 1) { str = str + min + " minutes "; sec -= min * 60 }
			str = str + Math.round(sec) + " seconds";
			return str;
		}
		var enableScrollLoad=false;
		$(window).scroll(function () {
			if (enableScrollLoad) {
				if ($(window).scrollTop() + $(window).height() > $(document).height() - 50) {
					loadEvents();
				}
			}
		});
		function htmlFromEvent(event, timestamp) {
			return ('<li data-theme="{0}"><img src="{4}" height=63/><h2>{1}</h2><p>{2}</p><p class="ui-li-aside aside-time">{3}</p></li>')
							.format(event.color, event.tagName, event.eventText + " " + (event.durationSec == 0 ? "" : "(duration: " + DetailedTimeSpanString(event.durationSec) + ")"),
							timestamp.toLocaleTimeString(), WSROOT + "eth/tags/" + event.picture);
		}
		$("a.eventGetNew").click(function (event) {
			if (latestDateTime == 0) {
				olderThan = dateToFileTime(new Date());
				loadEvents();
				return;
			}

			$.ajax({
				url: WSROOT + "ethLogs.asmx/GetNewGeneralEvents",
				data: JSON.stringify({ newerThan: latestDateTime }),
				success: function (retval, textStatus) {
					if (retval.d.length == 0) return;
					var htmlBefore="", htmlAfter = "";
					var prevDateString = null;

					for (var i = 0; i < retval.d.length; i++) {
						var event = retval.d[i];
						var timestamp = fileTimeToDate(event.filetime);
						var dateString = timestamp.toLocaleDateString();
						
						if (dateString == firstDateString) {
							htmlAfter += htmlFromEvent(event, timestamp);
						} else {
							if (prevDateString != dateString) {
								htmlBefore += ('<li class="date-header" data-role="list-divider">{0}</li>').format(dateString);
								prevDateString = dateString;
							}
							htmlBefore += htmlFromEvent(event, timestamp);
						}
					}
					latestDateTime = retval.d[0].filetime;
					firstDateString = fileTimeToDate(latestDateTime).toLocaleDateString();

					$(htmlAfter).insertAfter($(".date-header").eq(0))
					$("#eventList").prepend(htmlBefore).listview("refresh");
				},
				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=events.html");
					else
						popup_error(xhr, null);
				}
			});
		});

		function loadEvents() {
			enableScrollLoad = false;
			$.ajax({
				url: WSROOT + "ethLogs.asmx/GetGeneralEvents",
				data: JSON.stringify({ topN: 32, olderThan: olderThan }),
				success: function (retval, textStatus) {
					$("#list-loader").remove();
					var html = "";
					for (var i = 0; i < retval.d.length; i++) {
						var event = retval.d[i];
						olderThan = event.filetime
						if (latestDateTime == 0) latestDateTime = event.filetime;

						var timestamp = fileTimeToDate(event.filetime);
						var dateString = timestamp.toLocaleDateString();
						if (firstDateString == null) firstDateString = dateString;
						if (lastDateString != dateString) {
							html += ('<li class="date-header" data-role="list-divider">{0}</li>').format(dateString);
							lastDateString = dateString;
						}
						html += htmlFromEvent(event, timestamp);
					}
					if (i == 32) {
						html+= '<li id="list-loader"><span class="ui-icon ui-icon-gear spin ui-li-icon"></span><h2><center>Loading more...</center></h2></li>';
						enableScrollLoad=true;
					}else{
						enableScrollLoad = false;
					}
					$("#eventList").append(html).listview("refresh");
				},
				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=events.html");
					else
						popup_error(xhr, null);
				}
			});
		}
		$("#eventPage").bind('pageshow', function () {
			olderThan = dateToFileTime(new Date());
			loadEvents();
		});
	</script> 
</body>
</html>