mm layout/locks after /avaible messages are pulled from MM

2 files changed, 40 insertions, 30 deletions

diff --git a/web/cobrands/fixmybarangay/message_manager.scss b/web/cobrands/fixmybarangay/message_manager.scss
index 38de1df64..0fbe6f67a 100644
--- a/web/cobrands/fixmybarangay/message_manager.scss
+++ b/web/cobrands/fixmybarangay/message_manager.scss
@@ -39,24 +39,31 @@ $mm_border_color:			#eee;
 			padding: 0;
 			margin: 0;
 			li {
+				clear: both;
 				margin: 4px 0 0 0;
 				padding: 0;
-				background-color: white;
 				cursor: pointer;
+				background-color: #F6F6F6;
+				p {
+					background-color: inherit;
+				}
 				&.msg-is-locked { background-color: #fdd;}
 				&.msg-is-owned { background-color: #dfd;}
 				&.msg-is-busy { background-color: #ffd;}
 				&:hover { background-color: #efe;}
-				div.msg-text {
-					margin-left: 3.5em;
-					padding: 12px;
-					border-left: 1px solid $mm_border_color;
-				}
-				div.msg-tag {
-					padding: 12px;
+				span.msg-tag {
 					width: 3em;
 					float:left;
 				}
+				input[type=radio] {
+					display: block;
+					float: left;
+				}
+				label, span.msg-text {
+					display: block;
+					font-weight: normal;
+					margin: 0.1em 0 0.1em 4.5em;
+				}
 			}
 		}
 	}
diff --git a/web/cobrands/fixmybarangay/message_manager_client.js b/web/cobrands/fixmybarangay/message_manager_client.js
index 1ce722983..8546e92e4 100644
--- a/web/cobrands/fixmybarangay/message_manager_client.js
+++ b/web/cobrands/fixmybarangay/message_manager_client.js
@@ -104,25 +104,29 @@ var message_manager = new function() {
                 $output.html('<p>No messages available.</p>');
             } else {
                 var $ul = $('<ul/>');
-                $output.empty().append($ul);
-                for (var i = 0; i < messages.length; i++) {
-                    var message = messages[i]['Message'];
-                    var css_class = '';
+                for(var i=0; i< messages.length; i++) {
+                    var msg = messages[i]['Message']; // or use label value
                     var lockkeeper = messages[i]['Lockkeeper']['username'];
+                    var escaped_text = $('<div/>').text(msg.message).html();
+                    var tag = (!msg.tag || msg.tag == 'null')? '&nbsp;' : msg.tag;
+                    tag = $('<span class="msg-tag"/>').html(tag);
+                    var radio = $('<input type="radio"/>').attr({
+                        'id': 'mm_text_' + msg.id,
+                        'name': 'mm_text',
+                        'value': escaped_text
+                    }).wrap('<p/>').parent().html();
+                    var label = $('<label/>', {
+                        'class': 'msg-text',
+                        'for': 'mm_text_' + msg.id
+                    }).text(escaped_text).wrap('<p/>').parent().html();
+                    var p = $('<p/>').append(tag).append(radio).append(label);
+                    var litem = $('<li id="' + msg_prefix + msg.id + '">').append(p);
                     if (lockkeeper) {
-                        css_class = lockkeeper==username? 'msg-is-owned':'msg-is-locked'; 
-                    }
-                    var escaped_text = $('<div/>').text(message['message']).html(); 
-                    var tag = message['tag'];
-                    if (tag == 'null' || tag == "") {
-                        tag = '&nbsp;'
+                        litem.addClass(lockkeeper==username? 'msg-is-owned':'msg-is-locked'); 
                     }
-                    $ul.append(
-                        $('<li id="' + msg_prefix + message['id'] + '"></li>').
-                            addClass(css_class).
-                            append($('<div class="msg-tag"/>').html(message['tag'])).
-                            append($('<div class="msg-text"/>').html(escaped_text + '&nbsp;')));
-                }
+                    $ul.append(litem);
+                };
+                $output.empty().append($ul);
             }
         } else {
             $output.html('<p>No messages (server did not send a list).</p>');
@@ -139,7 +143,7 @@ var message_manager = new function() {
             if ($li.hasClass('msg-is-locked')) {
                 say_status("Trying for lock...");
             } else if ($li.hasClass('msg-is-owned')) {
-                say_status("Checking lock...)");
+                say_status("Checking lock...");
             } else {
                 say_status("Trying for lock...");
             }
@@ -188,7 +192,6 @@ var message_manager = new function() {
     this.request_lock = function(msg_id, options) {
         var $li = $('#' + msg_prefix + msg_id);
         var lock_unique = want_unique_locks;
-        console.log("lock_unique = " + lock_unique + ", want_unique_locks=" + want_unique_locks);
         var callback = null;
         if (options) {
             if (typeof(options['callback']) == 'function') {
@@ -218,14 +221,14 @@ var message_manager = new function() {
                         $('.msg-is-owned', $message_list_element).removeClass('msg-is-owned')
                     }
                     $li.removeClass('msg-is-busy msg-is-locked').addClass('msg-is-owned');
-                    say_status("Lock granted"); // to data['data']['Lockkeeper']['username']?
-                    if (typeof(callback) == "function") {
-                        callback.call($(this), data['data']); // returned data['data'] is 'Message', 'Source', 'Lockkeeper' for success
-                    }
+                    say_status("Lock granted OK"); // to data['data']['Lockkeeper']['username']?
                 } else {
                     $li.removeClass('msg-is-busy').addClass('msg-is-locked');
                     say_status("failed: " + data['error']);
                 }
+                if (typeof(callback) == "function") { // note callbacks must check data['success']
+                    callback.call($(this), data); // returned data['data'] is 'Message', 'Source', 'Lockkeeper' for success
+                }
             }, 
             error: function(jqXHR, textStatus, errorThrown) {
                 $li.removeClass('msg-is-busy');