added manual refresh, with animation support to make it less confusing

3 files changed, 53 insertions, 7 deletions

diff --git a/templates/web/fixmybarangay/report/_message_manager.html b/templates/web/fixmybarangay/report/_message_manager.html
index e5b99bf3a..f483d00fe 100644
--- a/templates/web/fixmybarangay/report/_message_manager.html
+++ b/templates/web/fixmybarangay/report/_message_manager.html
@@ -6,7 +6,10 @@
 
 <ul id="message_manager" class="issue-list-a tab" style="display: none">
 	<li id="message-control">
-		<a id="mm-link-to-admin" href="[% c.config.MESSAGE_MANAGER_URL %]">[admin]</a>
+		<div id="mm-admin-buttons">
+			<a id="mm-link-to-admin" href="[% c.config.MESSAGE_MANAGER_URL %]">[admin]</a>
+			<a id="mm-link-to-refresh" href="#">[refresh]</a>
+		</div>
 		<div id="mm-username-container">username:&nbsp;<span id="mm-received-username"></span></div>
 		<div id="mm-status-message-container">
 			<div id="mm-status-message"></div>
@@ -91,6 +94,7 @@ $(document).ready(function() {
 	var mm_populate_list = function(data) {
 		$('#mm-status-message-container').text("Accessed Message Manager as " + data['username']);
 		$('input[name=mm_text]').prop('checked', false); // uncheck all
+		$('#mm-link-to-refresh').delay(2000).fadeIn();
 	}
 
 	var mm_selected_message = function(data) {
@@ -130,7 +134,11 @@ $(document).ready(function() {
 
 	$('#available-submit').click(function(e){
 		e.preventDefault();
-		message_manager.get_available_messages({callback:mm_populate_list, suggest_username:fms_username});
+		message_manager.get_available_messages({
+			callback: mm_populate_list, 
+			suggest_username: fms_username,
+			anim_duration: 500
+		});
 	});
 	$('#available-submit').click();
 	
@@ -191,6 +199,13 @@ $(document).ready(function() {
 		$('#show_messages').val( $('#show_messages').val() == 'Show Messages' ? 'Hide Messages' : 'Show Messages' ); 
 	});
 	
+	$('#mm-link-to-refresh').on('click', function(e) {
+		e.preventDefault();
+		$('#mm-link-to-refresh').fadeOut();
+		$('#available-submit').click();
+		console.log("refreshing...");
+	});
+
 	message_manager.populate_boilerplate_strings('hide-reason');
     message_manager.populate_boilerplate_strings('reply');
 });
diff --git a/web/cobrands/fixmybarangay/message_manager.scss b/web/cobrands/fixmybarangay/message_manager.scss
index 66db65bfd..01b7161d1 100644
--- a/web/cobrands/fixmybarangay/message_manager.scss
+++ b/web/cobrands/fixmybarangay/message_manager.scss
@@ -158,9 +158,14 @@ $weak_text_color:      #666;
     display: none;
   }
 }
-a#mm-link-to-admin {
+div#mm-admin-buttons {
   display:block;
+  text-align: right;
   float:right;
   font-size:80%;
   padding:4px 8px 4px 0;
+	a {
+		display: block;
+	}
+
 }
diff --git a/web/cobrands/fixmybarangay/message_manager_client.js b/web/cobrands/fixmybarangay/message_manager_client.js
index cae2fcda6..954aa86cf 100644
--- a/web/cobrands/fixmybarangay/message_manager_client.js
+++ b/web/cobrands/fixmybarangay/message_manager_client.js
@@ -220,7 +220,21 @@ var message_manager = (function() {
         return $litem;
     };
     
-    var show_available_messages = function(data) {
+    var show_available_messages = function(data, anim_duration) {
+        var messages = data.messages;
+        _username = data.username;
+        var $output = $message_list_element;
+        if (anim_duration > 0) {
+            $output.stop().fadeOut(anim_duration, function(){
+                render_available_messages(data, anim_duration)
+            });
+        } else {
+            render_available_messages(data, anim_duration);
+        }
+    };
+    
+    // render allows animation (if required) to hide messages before repainting and then revealing them
+    var render_available_messages = function(data, anim_duration) {
         var messages = data.messages;
         _username = data.username;
         var $output = $message_list_element;
@@ -238,6 +252,9 @@ var message_manager = (function() {
         } else {
             $output.html('<p>No messages (server did not send a list).</p>');
         }
+        if (anim_duration > 0) {
+            $output.slideDown(anim_duration);
+        }
     };
 
     // accept an element (e.g., message_list) and add the click event to the *radio button* within it
@@ -269,9 +286,11 @@ var message_manager = (function() {
 
     // gets messages or else requests login
     // options: suggest_username, if provided, is preloaded into the login form if provided
+    //          anim_duration: duration of fade/reveal (0, by defaut, does no animation)
     var get_available_messages = function(options) {
         var base_auth = get_current_auth_credentials();
         var suggest_username = "";
+        var anim_duration = 0;
         var callback = null;
         if (options) {
             if (typeof(options.callback) === 'function') {
@@ -280,6 +299,12 @@ var message_manager = (function() {
             if (typeof options.suggest_username === 'string') {
                 suggest_username = options.suggest_username;
             }
+            if (typeof options.anim_duration === 'string' || typeof options.anim_duration === 'number') {
+                anim_duration = parseInt(options.anim_duration, 10);
+                if (anim_duration == NaN) {
+                    anim_duration = 0;
+                }
+            }
         }
         if (base_auth === "") {
             show_login_form(suggest_username);
@@ -295,7 +320,7 @@ var message_manager = (function() {
                 xhr.withCredentials = true;
             },
             success:  function(data, textStatus) {
-                          show_available_messages(data);
+                          show_available_messages(data, anim_duration);
                           if (typeof(callback) === "function") {
                               callback.call($(this), data); // execute callback
                           }
@@ -544,6 +569,7 @@ var message_manager = (function() {
     var populate_boilerplate_strings = function(boilerplate_type, options) {
         if (Modernizr.sessionstorage && sessionStorage.getItem('boilerplate_' + boilerplate_type)) {
             populate_boilerplate(boilerplate_type, sessionStorage.getItem('boilerplate_' + boilerplate_type));
+            console.log("boilerplate strings populated from local (sessionstorage) copy");
             return;
         }
         var callback = null;
@@ -552,10 +578,10 @@ var message_manager = (function() {
                 callback = options.callback;
             }
         }
-        alert("calling " + _url_root +"boilerplate_strings/index/" + boilerplate_type + ".json");
+        console.log("calling " + _url_root +"boilerplate_strings/index/" + boilerplate_type + ".json");
         $.ajax({
             dataType:"json", 
-            type:"post",
+            type:"get",
             data: {lang: 'en', boilerplate_type: boilerplate_type},
             url: _url_root +"boilerplate_strings/index/" + boilerplate_type + ".json",
             success:function(data, textStatus) {