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?228" />
	<link rel="stylesheet" href="styles/eth.css" />
	<link rel="icon" type="image/png" href="favicon196.png" sizes="196x196">
	<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">
			<h1 id="tagmanager_choice" style="text-align:center; top: -0.2em;position: relative; ">
				<select data-inline=1 name="tagmanager_menu" id="tagmanager_menu"></select>
			</h1>

			<a href="index.html" data-ajax="false" data-icon="home" data-iconpos="notext">Back</a>
			<!--	<h1>
			Event History
		</h1>-->
			<a id="updateBtn" class="eventGetNew ui-btn-right" data-icon="refresh">Update</a>
		</div>
		<div data-role="content" data-theme="c">
			<input type="text" name="filter_text" id="filter_text" placeholder="Filter using tag name or event type..." style="width:100%; margin-bottom:-8px; margin-top:6px;"/>
			<ul id="eventList" data-role="listview" data-filter="false" data-inset="true" data-dividertheme="d"></ul>
		</div>
	</div>
	<script src="styles/client.js?21" type="text/javascript"></script> 
	<script>
		var olderThan, latestDateTime = 0, lastDateString, firstDateString = null;
		$("#filter_text").bind("change", function () {
			doApplyFilter();
		});
		var filterTimer = 0;
		var filterText = "";
		$("#filter_text").bind("keydown", function () {
			window.clearTimeout(filterTimer);
		});
		$("#filter_text").bind("keyup", function () {
			window.clearTimeout(filterTimer);
			filterTimer = window.setTimeout(doApplyFilter, 500);
		});

		function doApplyFilter() {
			var text = $("#filter_text").val().trim();
			if (text != filterText) {
				filterText = text;
				$("#eventList").html('');
				olderThan = dateToFileTime(new Date());
				loadEvents(true);
			}
		}
		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(false);
				}
			}
		});
		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: 120 }, 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(false);
				return;
			}

			$.ajax({
				url: WSROOT + (allTagManager ? "ethLogs.asmx/GetNewGeneralEventsWithFilter2" : "ethLogs.asmx/GetNewGeneralEventsWithFilter"),
				data: JSON.stringify({ newerThan: latestDateTime, filter: filterText }),
				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(truncate) {
			showLoading();
			enableScrollLoad = false;
			var btn = $("#updateBtn");
			var oldhtml = show_finding(btn,"Loading...");
			$.ajax({
				url: WSROOT + (allTagManager? "ethLogs.asmx/GetGeneralEventsWithFilter2": "ethLogs.asmx/GetGeneralEventsWithFilter"),
				data: JSON.stringify({ topN: 196, olderThan: olderThan, filter: filterText }),
				complete: function () {
					removeLoading();
				},
				success: function (retval, textStatus) {
					restore_finding(btn, oldhtml);
					$("#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 == 196) {
						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;
					}
					if (truncate) {
						$("#eventList").html("");
						getNextUpdate();
					}
					$("#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);
				}
			});
		}
		processComet = function (text) {
			if (text != "[]") {
				$("a.eventGetNew").click();
			}
		}

		refreshNewMac = function () {
			olderThan = dateToFileTime(new Date());
			loadEvents(true);			
		}
		$("#eventPage").bind('pageinit', function () {

			$("#tagmanager_menu").change(function () {
				var btn = $(this);
				selectTagManager($(this).val(), btn);
			});
		});

		$("#eventPage").bind('pageshow', function () {
			if (window.NC && window.NC.setStatusBarColor) window.NC.setStatusBarColor("#DE3C2F");
			olderThan = dateToFileTime(new Date());
			loadEvents(true);
			$.ajax({
				url: WSROOT + "ethAccount.asmx/GetTagManagers3",
				success: function (retval, textStatus) {

					needRefreshTagManagers = false;
					refreshTagManagerDropDown(retval.d.managers);
				}
			});


		});

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