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>