More extensive implementation of history browsing + integration with GUI
Change-Id: I78f810a0a87714322a20514bd3d1da2cc1839780
diff --git a/gui/html/chronoshare.js b/gui/html/chronoshare.js
index fcd0bd4..d94bb5f 100644
--- a/gui/html/chronoshare.js
+++ b/gui/html/chronoshare.js
@@ -1,49 +1,76 @@
-// var PAGE = "fileList";
-// var PARAMS = [ ];
-// var URIPARAMS = "";
+var CHRONOSHARE;
-// $(document).ready (function () {
-// function nav_anchor (aurl) {
-// aurl = aurl.split('#');
-// if (aurl[1])
-// {
-// aurl_split = aurl[1].split ('?');
-// page = aurl_split[0];
+var PAGE = "folderHistory";
+var PARAMS = [ ];
+var URIPARAMS = "";
-// vars = [ ];
-// if (aurl_split[1]) {
-// var hashes = aurl_split[1].slice (aurl_split[1].indexOf ('?') + 1).split ('&');
-// for(var i = 0; i < hashes.length; i++)
-// {
-// hash = hashes[i].split('=');
-// vars.push(hash[0]);
-// vars[hash[0]] = hash[1];
-// }
-// }
+function nav_anchor (aurl) {
+ aurl = aurl.split('#');
+ if (aurl[1])
+ {
+ aurl_split = aurl[1].split ('&');
+ page = aurl_split[0];
-// // alert (aurl_split[1]);
+ vars = [ ];
+ for (var i = 1; i < aurl_split.length; i++)
+ {
+ hash = aurl_split[i].split('=');
+ vars.push(hash[0]);
+ // there is strange double-encoding problem...
+ vars[hash[0]] = decodeURIComponent (decodeURIComponent (hash[1]));
+ }
-// if (page != PAGE)
-// {
-// alert (page);
-// PAGE = page;
-// PARAMS = vars;
-// URIPARAMS = aurl_split[1];
-// alert (URIPARAMS);
-// }
-// else if (aurl_split[1] != URIPARAMS)
-// {
-// alert (aurl_split[1]);
-// }
-// }
-// }
+ if (page != PAGE)
+ {
+ PAGE = page;
+ PARAMS = vars;
+ URIPARAMS = aurl[1];
-// nav_anchor (window.location.href);
+ if (CHRONOSHARE) {
+ CHRONOSHARE.run ();
+ }
+ }
+ else if (aurl != URIPARAMS)
+ {
+ PARAMS = vars;
+ URIPARAMS = aurl[1];
-// $("a").click (function(){
-// nav_anchor (this.href)
-// });
-// });
+ if (CHRONOSHARE) {
+ CHRONOSHARE.run ();
+ }
+ }
+ }
+}
+
+$(document).ready (function () {
+ nav_anchor (window.location.href);
+
+ if (!PARAMS.user || !PARAMS.folder)
+ {
+ $("#error").html ("user and folder must be be specified in the URL");
+ $("#error").removeClass ("hidden");
+ return;
+ }
+ else {
+ // update in-page URLs
+ $(".needs-get-url").each (function (index,element) {
+ this.href += "&user="+encodeURIComponent (encodeURIComponent (PARAMS.user))
+ + "&folder="+encodeURIComponent (encodeURIComponent (PARAMS.folder));
+ });
+ $(".needs-get-url").removeClass ("needs-get-url");
+ }
+
+ CHRONOSHARE = new ChronoShare (PARAMS.user, PARAMS.folder);
+ CHRONOSHARE.run ();
+
+ $("a").click (function () {
+ nav_anchor (this.href)
+ });
+
+ $(window).on('hashchange', function() {
+ nav_anchor (window.location.href);
+ });
+});
/**
* @brief Convert binary data represented as non-escaped hex string to Uint8Array
@@ -81,8 +108,20 @@
data = JSON.parse (convertedData);
// error handling?
+ table = $("#content").append (
+ $("<table />", { "class": "item-list" })
+ .append ($("<thead />")
+ .append ($("<tr />")
+ .append ($("<th />", { "class": "filename border-left", "scope": "col" }).text ("Filename"))
+ .append ($("<th />", { "class": "version", "scope": "col" }).text ("Version"))
+ .append ($("<th />", { "class": "modified", "scope": "col" }).text ("Modified"))
+ .append ($("<th />", { "class": "modified-by border-right", "scope": "col" }).text ("Modified By"))))
+ .append ($("<tbody />", { "id": "file-list-files" }))
+ .append ($("<tfoot />")
+ .append ($("<tr />")
+ .append ($("<td />", { "colspan": "4", "class": "border-right border-left" })))));
- var html = $("tbody#files");
+ var html = $("#file-list-files");
for (var i = 0; i < data.files.length; i++) {
file = data.files[i];
@@ -93,14 +132,22 @@
$(this).toggleClass('highlighted');
});
- fileHistoryUrl = new Name ()
- .add (this.chronoshare.actions)
- .add (file.filename)
- .add ("nonce")
- .addSegment (0);
+ // fileHistoryUrl = new Name ()
+ // .add (this.chronoshare.actions)
+ // .add (file.filename)
+ // .add ("nonce")
+ // .addSegment (0);
// row.attr ("history", fileHistoryUrl.to_uri ());
row.bind('click', function () {
- // alert (fileHistoryUrl.to_uri ());
+ url = "#fileHistory";
+ url += "&item=" + encodeURIComponent(encodeURIComponent(file.filename));
+ pos = URIPARAMS.indexOf ("&");
+ if (pos >= 0) {
+ url += URIPARAMS.substring (pos)
+ }
+
+ document.location = url;
+ nav_anchor (document.location.href);
});
row.append ($("<td />", {"class": "border-left"}).text (file.filename));
@@ -125,13 +172,83 @@
});
+$.Class ("HistoryClosure", {}, {
+ init: function (chronoshare) {
+ this.chronoshare = chronoshare;
+ },
+
+ upcall: function(kind, upcallInfo) {
+ $("#loader").fadeOut (500); // ("hidden");
+ if (kind == Closure.UPCALL_CONTENT) {
+ convertedData = DataUtils.toString (upcallInfo.contentObject.content);
+ $("#json").text (convertedData);
+ $("#json").removeClass ("hidden");
+ data = JSON.parse (convertedData);
+
+ // error handling?
+ table = $("#content").append (
+ $("<table />", { "class": "item-list" })
+ .append ($("<thead />")
+ .append ($("<tr />")
+ .append ($("<th />", { "class": "filename border-left", "scope": "col" }).text ("Filename"))
+ .append ($("<th />", { "class": "version", "scope": "col" }).text ("Version"))
+ .append ($("<th />", { "class": "modified", "scope": "col" }).text ("Modified"))
+ .append ($("<th />", { "class": "modified-by border-right", "scope": "col" }).text ("Modified By"))))
+ .append ($("<tbody />", { "id": "history-list-actions" }))
+ .append ($("<tfoot />")
+ .append ($("<tr />")
+ .append ($("<td />", { "colspan": "4", "class": "border-right border-left" })))));
+
+ var html = $("#history-list-actions");
+ for (var i = 0; i < data.actions.length; i++) {
+ action = data.actions[i];
+
+ row = $("<tr />");
+ if (i%2) { row.addClass ("odd"); }
+
+ row.bind('mouseenter mouseleave', function() {
+ $(this).toggleClass('highlighted');
+ });
+
+ fileHistoryUrl = new Name ()
+ .add (this.chronoshare.actions)
+ .add (action.filename)
+ .add ("nonce")
+ .addSegment (0);
+ // row.attr ("history", fileHistoryUrl.to_uri ());
+ row.bind('click', function () {
+ // alert (fileHistoryUrl.to_uri ());
+ });
+
+ row.append ($("<td />", {"class": "border-left"}).text (action.filename));
+ row.append ($("<td />").text (action.version));
+ row.append ($("<td />").text (new Date (action.timestamp)));
+ row.append ($("<td />")
+ .append ($("<userName />").text (action.id.userName))
+ .append ($("<seqNo> /").text (action.id.seqNo)));
+
+ html = html.append (row);
+ }
+ }
+ else if (kind == Closure.UPCALL_INTEREST_TIMED_OUT) {
+ $("#error").html ("Interest timed out");
+ $("#error").removeClass ("hidden");
+ }
+ else {
+ $("#error").html ("Unknown error happened");
+ $("#error").removeClass ("hidden");
+ }
+ }
+});
+
+
$.Class ("ChronoShare", { },
{
init: function (username, foldername) {
this.username = new Name (username);
this.files = new Name ("/localhost").add (this.username).add ("chronoshare").add (foldername).add ("info").add ("files").add ("folder");
- this.actions = new Name ("/localhost").add (this.username).add ("chronoshare").add (foldername).add ("info").add ("actions").add ("file");
+ this.actions = new Name ("/localhost").add (this.username).add ("chronoshare").add (foldername).add ("info").add ("actions").add ("folder");
this.restore = new Name ("/localhost").add (this.username).add ("chronoshare").add (foldername).add ("cmd").add ("restore").add ("file");
@@ -141,11 +258,31 @@
run: function () {
- request = new Name ().add (this.files)./*add (folder_in_question).*/add ("nonce").addSegment (0);
- console.log (request.to_uri ());
- $("#files").empty ();
+ $("#content").empty ();
$("#loader").fadeIn (500);
- this.ndn.expressInterest (request, new FilesClosure (this));
+ $("#error").addClass ("hidden");
+
+ if (PAGE == "fileList") {
+ request = new Name ().add (this.files)./*add (folder_in_question).*/add ("nonce").addSegment (0);
+ console.log (request.to_uri ());
+ this.ndn.expressInterest (request, new FilesClosure (this));
+ }
+ else if (PAGE == "folderHistory") {
+ request = new Name ().add (this.actions)./*add (folder_in_question).*/add ("nonce").addSegment (0);
+ console.log (request.to_uri ());
+ this.ndn.expressInterest (request, new HistoryClosure (this));
+ }
+ else if (PAGE == "fileHistory") {
+ if (!PARAMS.item) {
+ $("#loader").fadeOut (500); // ("hidden");
+ $("#error").html ("incorrect input for fileHistory command");
+ $("#error").removeClass ("hidden");
+ return;
+ }
+ request = new Name ().add (this.actions).add (PARAMS.item).add ("nonce").addSegment (0);
+ console.log (request.to_uri ());
+ this.ndn.expressInterest (request, new HistoryClosure (this));
+ }
}
});
diff --git a/gui/html/index.html b/gui/html/index.html
index 66f039f..0b21c61 100644
--- a/gui/html/index.html
+++ b/gui/html/index.html
@@ -22,8 +22,8 @@
<nav>
<ul>
- <li><a href="#fileList">File list</a></li>
- <li><a href="#fileHistory?x=1">History</a></li>
+ <li><a class="needs-get-url" href="#fileList">File list</a></li>
+ <li><a class="needs-get-url" href="#folderHistory">Folder history</a></li>
</ul>
</nav>
</header>
@@ -31,35 +31,18 @@
<article>
<!-- <img id="loader" src="load.gif" /> -->
<div id="content" class="hidden">
-
- <table class="file-list">
- <thead>
- <tr>
- <th class="filename border-left" scope="col">Filename</th>
- <th class="version" scope="col">Version</th>
- <th class="modified" scope="col">Modified</th>
- <th class="modified-by border-right" scope="col">Modified By</th>
- </tr>
- </thead>
-
- <tbody id="files">
- </tbody>
-
- <tfoot><tr><td colspan="4" class="border-right border-left"></td></tr></tfoot>
- </table>
-
- <div class="hidden" id="loader">
- <img src="load.gif" />
- </div>
-
-
- <red class="hidden" id="error">
- </red>
-
- <pre class="hidden" id="json">
- </pre>
</div>
+ <div class="hidden" id="loader">
+ <img src="load.gif" />
+ </div>
+
+ <red class="hidden" id="error">
+ </red>
+
+ <pre class="hidden" id="json">
+ </pre>
+
<div id="no-support">
@@ -80,9 +63,6 @@
if (detect ()) {
$("#no-support").remove ();
$("#content").removeClass ("hidden");
-
- folder=new ChronoShare ("/ndn/ucla.edu/alex/macbook", "testing7");
- folder.run ();
}
});
</script>
diff --git a/gui/html/style.css b/gui/html/style.css
index a4a4a03..4b7322d 100644
--- a/gui/html/style.css
+++ b/gui/html/style.css
@@ -116,7 +116,7 @@
}
/* */
-.file-list
+.item-list
{
border-radius: 6px;
@@ -130,7 +130,7 @@
/* border-collapse: collapse; */
}
-.file-list th
+.item-list th
{
/* -moz-border-radius: 10px; */
/* border-radius: 10px; */
@@ -144,13 +144,13 @@
text-align: left;
}
-.file-list th.border-left {
+.item-list th.border-left {
/* -moz-border-radius-topleft:10px; */
/* -webkit-border-top-left-radius:10px; */
/* border-top-left-radius:10px; */
}
-.file-list td
+.item-list td
{
padding: 8px;
border-bottom: 1px solid #fff;
@@ -172,7 +172,7 @@
border-bottom: 2px solid #99CCB2;
background: #EAF4EF;
}
-.file-list tfoot td {
+.item-list tfoot td {
padding: 0;
}