Updates drilldown features
diff --git a/asterix-examples/src/main/resources/black-cherry/cherry.tpl b/asterix-examples/src/main/resources/black-cherry/cherry.tpl
index ab028c7..80ac5cf 100755
--- a/asterix-examples/src/main/resources/black-cherry/cherry.tpl
+++ b/asterix-examples/src/main/resources/black-cherry/cherry.tpl
@@ -203,7 +203,50 @@
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Explore Tweets</h4>
</div>
- <div class="modal-body" id="drilldown_modal_body"></div>
+ <div class="modal-body" id="drilldown_modal_body">
+
+ <!-- Tweet -->
+ <div id="modal-body-tweet" class="well well-sm">TWEET GOES HERE</div>
+
+ <!-- Existing comments about this tweet -->
+ <!-- Create new comment -->
+ <div class="panel panel-default">
+ <div class="panel-heading">In this Tweetbook</div>
+ <div class="panel-body" id="modal-body-notes-holder">
+
+ <div class="input-group" id="modal-existing-note">
+ <input type="text" class="form-control" id="modal-body-tweet-note">
+ <span class="input-group-btn">
+ <button class="btn btn-default" id="modal-body-trash-icon">
+ <span class="glyphicon glyphicon-trash"></span>
+ </button>
+ </span>
+ <span class="badge" id="modal-current-tweetbook"></span>
+ </div>
+
+ </div>
+ </div>
+
+ <!-- Create new comment -->
+ <div class="panel panel-default">
+ <div class="panel-heading">Save to tweetbook</div>
+ <div class="panel-body" id="modal-save-body">
+
+ <div class="input-group">
+ <span class="input-group-addon">Note</span>
+ <input type="text" class="form-control" id="modal-body-add-note" placeholder="Add a note about this tweet">
+ </div>
+
+ <div class="input-group">
+ <span class="input-group-addon">Add to</span>
+ <input type="text" class="form-control" id="modal-body-add-to" placeholder="Add it to a Tweetbook">
+ </div><br/>
+
+ <!-- Comment on tweet to save -->
+ <button type="button" class="btn btn-default" id="save-comment-tweetbook-modal">Save</button>
+ </div>
+ </div>
+ </div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
@@ -214,13 +257,14 @@
</div><!-- Row -->
<!-- About Row -->
- <div class="row" id="aboutr">
+ <div class="row" id="aboutr" style="display:none;">
<div class="container">
<div id="welcome-message">
<p>Welcome to the top-level page of the mysteriously named Black Cherry Demo of AsterixDB. The purpose of this demo is to illustrate how a "cool application" can be built using the JavaScript SDK of AsterixDB and to exercise all of the AsterixDB HTTP APIs. If you are building an app of your own, reading the code for this app is a great way to get acquainted with what you'll need to know.</p>
<p>In this demo, which is based on spatial analysis of Tweets (it is 2013, afterall), you will see how to formulate aggregate queries and drill-down queries using the query door of the AsterixDB API. You will see how to do this either synchronously or asynchronously (for larger queries whose results may take a while to cook). You will also see how to create and drop datasets (to manage Tweetbooks, notebooks with user commentary on Tweets) and how to perform inserts and deletes (to add/remove Tweetbook entries). Enjoy!</p>
</div>
+
</div>
</div><!-- /About -->
diff --git a/asterix-examples/src/main/resources/black-cherry/static/js/cherry.js b/asterix-examples/src/main/resources/black-cherry/static/js/cherry.js
index ef616e3..6a86075 100755
--- a/asterix-examples/src/main/resources/black-cherry/static/js/cherry.js
+++ b/asterix-examples/src/main/resources/black-cherry/static/js/cherry.js
@@ -663,69 +663,74 @@
var tweetId = tO["tweetEntryId"];
var tweetText = tO["tweetText"];
- var tweetContainerId = '#drilldown_modal_body';
- var tweetDiv = '<div id="drilltweetobj' + tweetId + '"></div>';
+ // First, set tweet in drilldown modal to be this tweet's text
+ $('#modal-body-tweet').html('Tweet #' + tweetId + ": " + tweetText);
- $(tweetContainerId).empty();
- $(tweetContainerId).append(tweetDiv);
- $('#drilltweetobj' + tweetId).append('<p>Tweet #' + tweetId + ": " + tweetText + '</p>');
-
- // Add comment field
- $('#drilltweetobj' + tweetId).append('<input class="textbox" type="text" id="metacomment' + tweetId + '">');
+ // Next, empty any leftover tweetbook comments
+ $("#modal-body-add-to").val('');
+ $("#modal-body-add-note").val('');
+ // Next, if there is an existing tweetcomment reported, show it.
if (tO.hasOwnProperty("tweetComment")) {
- $("#metacomment" + tweetId).val(tO["tweetComment"]);
- var deleteThisComment = addDeleteButton(
- "deleteLiveComment_" + tweetId,
- "drilltweetobj" + tweetId,
- function () {
-
- // Send comment deletion to asterix
- var deleteTweetCommentOnId = '"' + tweetId + '"';
- var toDelete = new DeleteStatement(
- "$mt",
- APIqueryTracker["active_tweetbook"],
- new AExpression("$mt.tweetid = " + deleteTweetCommentOnId.toString())
- );
- A.update(
- toDelete.val()
- );
-
- // Hide comment from map
- $('#drilldown_modal').modal('hide');
-
- // Replot tweetbook
- onPlotTweetbook(APIqueryTracker["active_tweetbook"]);
- }
- );
- }
-
- addTweetbookCommentDropdown('#drilltweetobj' + tweetId);
-
- $('#drilltweetobj' + tweetId).append('<br/><button type="button" class="btn" id="add-metacomment">Save Comment</button>');
-
- $('#add-metacomment').button().click(function () {
- var save_metacomment_target_tweetbook = $("#target-tweetbook").val();
- var save_metacomment_target_comment = '"' + $("#metacomment" + tweetId).val() + '"';
- var save_metacomment_target_tweet = '"' + tweetId + '"';
-
- if (save_metacomment_target_tweetbook.length == 0) {
- alert("Please choose a tweetbook.");
-
- } else {
+ $("#modal-existing-note").show();
- if (!(existsTweetbook(save_metacomment_target_tweetbook))) {
- onCreateNewTweetBook(save_metacomment_target_tweetbook);
- }
-
+ // Change comment value
+ $("#modal-body-tweet-note").val(tO["tweetComment"]);
+
+ // Change Tweetbook Badge
+ $("#modal-current-tweetbook").val(APIqueryTracker["active_tweetbook"]);
+
+ // Add deletion functionality
+ $("#modal-body-trash-icon").on('click', function () {
+ // Send comment deletion to asterix
+ var deleteTweetCommentOnId = '"' + tweetId + '"';
var toDelete = new DeleteStatement(
"$mt",
- save_metacomment_target_tweetbook,
- new AExpression("$mt.tweetid = " + save_metacomment_target_tweet.toString())
+ APIqueryTracker["active_tweetbook"],
+ new AExpression("$mt.tweetid = " + deleteTweetCommentOnId.toString())
);
+ A.update(
+ toDelete.val()
+ );
+
+ // Hide comment from map
+ $('#drilldown_modal').modal('hide');
+
+ // Replot tweetbook
+ onPlotTweetbook(APIqueryTracker["active_tweetbook"]);
+ });
+
+ } else {
+ $("#modal-existing-note").hide();
+ }
+
+ // Now, when adding a comment to a tweetbook...
+ $("#save-comment-tweetbook-modal").on('click', function(e) {
+ // Stuff to save about new comment
+ var save_metacomment_target_tweetbook = $("#modal-body-add-to").val();
+ var save_metacomment_target_comment = '"' + $("#modal-body-add-note").val() + '"';
+ var save_metacomment_target_tweet = '"' + tweetId + '"';
+
+ // Make sure content is entered, and then save this comment.
+ if (save_metacomment_target_tweetbook.length == 0) {
+ alert("Please enter a tweetbook.");
+ } else if ($("#modal-body-add-note").val() == "") {
+ alert("Please enter a comment.");
+ } else {
+
+ // Check if tweetbook exists. If not, create it.
+ if (!(existsTweetbook(save_metacomment_target_tweetbook))) {
+ onCreateNewTweetBook(save_metacomment_target_tweetbook);
+ } else {
- A.update(toDelete.val());
+ var toDelete = new DeleteStatement(
+ "$mt",
+ save_metacomment_target_tweetbook,
+ new AExpression("$mt.tweetid = " + save_metacomment_target_tweet.toString())
+ );
+ A.update(toDelete.val());
+ }
var toInsert = new InsertStatement(
save_metacomment_target_tweetbook,
@@ -734,9 +739,7 @@
"comment-text" : save_metacomment_target_comment
}
);
-
- // Insert query to add metacomment to said tweetbook dataset
- A.update(toInsert.val(), function () { alert("Test"); });
+ A.update(toInsert.val(), function () {});
// TODO Some stress testing of error conditions might be good here...
if (APIqueryTracker.hasOwnProperty("active_tweetbook")) {
@@ -744,13 +747,11 @@
};
var successMessage = "Saved comment on <b>Tweet #" + tweetId +
"</b> in dataset <b>" + save_metacomment_target_tweetbook + "</b>.";
- addSuccessBlock(successMessage, 'drilltweetobj' + tweetId);
- }
+ addSuccessBlock(successMessage, "modal-save-body");
+ $("#modal-body-add-to").val('');
+ $("#modal-body-add-note").val('');
+ }
});
-
- // Set width of tweetbook buttons
- $(".chosen-tweetbooks .btn").css("width", "200px");
- $(".chosen-tweetbooks .btn").css("height", "2em");
}
@@ -961,8 +962,6 @@
function onClickTweetbookMapMarker(tweet_arr) {
- $('#drilldown_modal_body').html('');
-
// Clear existing display
$.each(tweet_arr, function (t, valueT) {
var tweet_obj = tweet_arr[t];