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" 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;
	}
	div.comment-area{
		margin-right: -5%;
	}
	textarea.ui-input-text{
		vertical-align: bottom;
		width: calc( 100% - 30px );
		height: 44px;
		margin-left: -61px;
		margin-top: 5px;
		margin-bottom: 4px;
		resize: none; font-size: 10pt;
	}
</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" type="text/javascript"></script> 
	<script>
		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() - 250) {
					loadEvents();
				}
			}
		});
		function resizeCommentField(ta) {
			var ca = ta.parent();
			ca.parent().css({ height: ca.height() + 60 });
			if (ta.val().length > 0) ca.find("button").button("enable");
			else ca.find("button").button("disable");
		}
		var existingComments={};
		function saveComment(btn, id) {
			event.stopPropagation();
			var oldhtml = show_finding(btn, "Saving...");
			$.ajax({
				url: WSROOT + "ethLogs.asmx/UpdateEventComment",
				data: JSON.stringify({ id: id, "text": btn.parent().parent().find("textarea").val(), isUpdate: existingComments[id] == true }),
				success: function (retval, textStatus) {
					restore_finding(btn, oldhtml);
					existingComments[id] = true;
				},
				error: function (xhr, textStatus, exception) {
					restore_finding(btn, oldhtml);
					popup_error(xhr, btn);
				}
			});

		}
		function htmlForCommentArea(id, comment) {
			var empty = (comment == null || comment == "");
			return "<div class=comment-area id=comment-area-" + id + "><textarea placeholder='Click to add comment for this event' onkeyup='resizeCommentField($(this))'>"+comment
				+ "</textarea><button data-inline=1 data-theme=p data-icon=check onclick='saveComment($(this), " + id + ")' "+(empty?"disabled":"")+">Save</button></div>"
			if(!empty)existingComments[id] = true;
		}
		function openComment(item, id) {
			if (event.target.tagName.toUpperCase() == "TEXTAREA") return;
			var ca = $("#comment-area-" + id);
			if (item.height() < 100) {
				if (ca.length == 0) {
					item.animate({ height: 110 }, 400, "swing" , function(){	$(htmlForCommentArea(id,"")).appendTo(item).trigger("create"); } );
				} else {
					ca.show();
					item.animate({ height: ca.height()+60 }, 400);
				}
			} else {
				item.animate({ height: 60 }, 400, "swing", function () { ca.hide();});
			}
		}
		function htmlFromEvent(event, timestamp) {
			return ('<li title="{7}" onclick="openComment($(this), {5});" data-theme="{0}"><img src="{4}" height=63><h2>{1}</h2><p>{2}</p><p class="ui-li-aside aside-time">{3}</p>{6}</li>')
							.format(event.color, event.tagName, event.eventText + " " + (event.durationSec == 0 ? "" : "(duration: " + DetailedTimeSpanString(event.durationSec) + ")"),
							timestamp.toLocaleTimeString(), WSROOT + "eth/tags/" + event.picture, event.id, event.comment != null ? htmlForCommentArea(event.id, event.comment.text) : "", 
							event.comment == null ? "Click to add comments to this event" : "Click to hide comments");
			if(event.comment!=null)existingComments[event.id] = true;
		}
		$("a.eventGetNew").click(function (event) {
			if (latestDateTime == 0) {
				olderThan = dateToFileTime(new Date());
				loadEvents();
				return;
			}

			$.ajax({
				url: WSROOT + (allTagManager ? "ethLogs.asmx/GetNewGeneralEvents2" : "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).trigger("create").insertAfter($(".date-header").eq(0))
					$("#eventList").prepend($(htmlBefore).trigger("create")).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?ReturnUrl=" + encodeURIComponent(window.location.pathname + window.location.search));
					else
						popup_error(xhr, null);
				}
			});
		});

		function loadEvents() {
			enableScrollLoad = false;
			$.ajax({
				url: WSROOT + (allTagManager? "ethLogs.asmx/GetGeneralEvents2": "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).trigger("create")).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?ReturnUrl=" + encodeURIComponent(window.location.pathname + window.location.search));
					else
						popup_error(xhr, null);
				}
			});
		}
		$("#eventPage").bind('pageshow', function () {
			olderThan = dateToFileTime(new Date());
			loadEvents();
		});
	</script> 
</body>
</html>