diff options
Diffstat (limited to 'web')
| -rw-r--r-- | web/cobrands/fixmybarangay/images/fmb-spinner-16x16.gif | bin | 0 -> 1850 bytes | |||
| -rw-r--r-- | web/cobrands/fixmybarangay/images/mobile-22x40.png | bin | 0 -> 454 bytes | |||
| -rw-r--r-- | web/cobrands/fixmybarangay/message_manager.scss | 89 | ||||
| -rw-r--r-- | web/cobrands/fixmybarangay/message_manager_client.js | 88 |
4 files changed, 138 insertions, 39 deletions
diff --git a/web/cobrands/fixmybarangay/images/fmb-spinner-16x16.gif b/web/cobrands/fixmybarangay/images/fmb-spinner-16x16.gif Binary files differnew file mode 100644 index 000000000..da5ea679a --- /dev/null +++ b/web/cobrands/fixmybarangay/images/fmb-spinner-16x16.gif diff --git a/web/cobrands/fixmybarangay/images/mobile-22x40.png b/web/cobrands/fixmybarangay/images/mobile-22x40.png Binary files differnew file mode 100644 index 000000000..6a85ab097 --- /dev/null +++ b/web/cobrands/fixmybarangay/images/mobile-22x40.png diff --git a/web/cobrands/fixmybarangay/message_manager.scss b/web/cobrands/fixmybarangay/message_manager.scss index 9d9555640..d2b7739c2 100644 --- a/web/cobrands/fixmybarangay/message_manager.scss +++ b/web/cobrands/fixmybarangay/message_manager.scss @@ -13,10 +13,47 @@ $color_bg_reply_5: #BFBFBF; $color_bg_reply_6: #B8B8B8; $color_bg_mm_list: #F6F6F6; +$color_bg_btn_hide: #ff0000; +$color_bg_btn_reply: #008000; +$color_bg_btn_info: #0000ff; + + $weak_text_color: #666; -#message_manager { + +p.mm-submitted-by-sms { + color: $weak_text_color; + font-style: italic; + font-size: 0.8125em; + img { + border: none; + margin-right: 0.5em; + width: 22px; + height: 40px; + vertical-align:middle; + display: inline; + } +} + +#message_manager { + margin-top: 0; + li#mm-admin-buttons { + margin: -0.5em 0 0 0; + text-align: right; + font-size:80%; + padding:4px 8px 4px 0; + a { + padding: 0.25em 0.5em; + border:1px solid $mm_border_color; + margin: 0 0.5em; + display: inline-block; + } + background-color: #fff; + &:hover { + background-color: #fff; + } + } #message-control { #mm-username-container { display: none; // hidden during dev @@ -30,11 +67,22 @@ $weak_text_color: #666; } } #mm-status-message-container { + position: relative; min-height: 1.4em; margin: 0 0 8px 0.5em; - padding: 8px 4px; + padding: 8px 4px 8px 24px; color: $mm_status_message_color; font-style: italic; + p { + margin:0; + padding:0; + } + #mm-spinner { + position: absolute; + left: 4px; + top: 10px; + display: none; + } } #mm-login-container { display: none; // only shown on/after a 403 @@ -49,6 +97,9 @@ $weak_text_color: #666; #mm-message-list { ul { + &.mm-archive { + display: none; // archive only shown on interaction + } list-style-type: none; padding: 0; margin: 0; @@ -97,6 +148,7 @@ $weak_text_color: #666; &.msg-is-active { background-color: $contrast1; color:#fff; p:hover { background-color: $contrast1; color:#fff; } // fix for mouseover on p + p.mm-reply:hover {background-color: #eef; color:#000;} // fix for mouseover on p } span.msg-tag { width: 3em; @@ -122,15 +174,15 @@ $weak_text_color: #666; } .mm-hide { right:0px; - background-color: red; + background-color: $color_bg_btn_hide; } .mm-info { right:1.5em; - background-color: blue; + background-color: $color_bg_btn_info; } .mm-rep { right:2.6em; - background-color: green; + background-color: $color_bg_btn_reply; } } } @@ -139,9 +191,15 @@ $weak_text_color: #666; margin: 1em; } } -#show_messages, #add_support, #reply-submit { // COPY TO UPDATE button +#show_messages, #copy_to_update, #reply-submit { margin: 1em; } +#copy_to_update { + display: none; // show on demand, not before +} +#show_messages { + width: 11em; // hack to stop adjacent button hopping when button message changes +} #reply-form-container, #hide-form-container { @@ -161,14 +219,13 @@ $weak_text_color: #666; display: none; } } -div#mm-admin-buttons { - display:block; - text-align: right; - float:right; - font-size:80%; - padding:4px 8px 4px 0; - a { - display: block; - } - +#mm-help { + .demo_hide_btn, .demo_reply_btn, .demo_info_btn { + color: #fff; + font-weight: bold; + padding: 0.2em 0.4em; + } + .demo_hide_btn { background-color: $color_bg_btn_hide; } + .demo_reply_btn { background-color: $color_bg_btn_reply; } + .demo_info_btn { background-color: $color_bg_btn_info; } } diff --git a/web/cobrands/fixmybarangay/message_manager_client.js b/web/cobrands/fixmybarangay/message_manager_client.js index ba7383933..e9a5c8d6b 100644 --- a/web/cobrands/fixmybarangay/message_manager_client.js +++ b/web/cobrands/fixmybarangay/message_manager_client.js @@ -75,12 +75,19 @@ var message_manager = (function() { var msg_no_config_err = "Config error: no Message Manager URL has been specified"; + // set _want_nice_msgs to avoid using the term "lock" var msg_trying_for_lock = ["Trying for lock...", "Checking message..." ]; var msg_checking_lock = ["Checking lock...", "Checking message..." ]; var msg_claiming_lock = ["Claiming lock...", "Checking message..." ]; var msg_lock_granted_ok = ["Lock granted OK", "Checking message... OK"]; var msg_lock_denied = ["", "Someone is working with that message right now!"]; + // tooltips currently hardcoded, but maybe hide if don't _want_nice_msgs? + var tooltip_hide = "Hide message"; + var tooltip_info = "Get info"; + var tooltip_reply = "Send SMS reply"; + var tooltip_radio = "Select message before clicking on map to create report"; + function get_msg(msg) { return msg[_want_nice_msgs? 1 : 0]; } @@ -197,12 +204,18 @@ var message_manager = (function() { if ($htauth_username.size() && ! $htauth_username.val()) { $htauth_username.val(suggest_username); } - $login_element.stop().slideDown(); + $login_element.stop(true,true).slideDown(); }; - var say_status = function (msg) { + var say_status = function (msg, show_spinner) { if ($status_element) { - $status_element.stop().show().text(msg); + if (show_spinner) { + // slow fade in so that spinner only appears if there's a long delay + $status_element.find('#mm-spinner').stop(true,true).fadeIn(1200); + } else { + $status_element.find('#mm-spinner').stop(true,true).hide(); + } + $status_element.stop(true,true).show().find('p').text(msg); } }; @@ -222,9 +235,9 @@ var message_manager = (function() { var lockkeeper = message_root.Lockkeeper.username; var escaped_text = $('<div/>').text(msg.message).html(); var $p = $('<p/>'); - var $hide_button = $('<a class="mm-msg-action mm-hide" id="mm-hide-' + msg.id + '" href="#hide-form-container">X</a>'); - var $info_button = $('<span class="mm-msg-action mm-info" id="mm-info-' + msg.id + '">i</span>'); - var $reply_button = $('<a class="mm-msg-action mm-rep" id="mm-rep-' + msg.id + '" href="#reply-form-container">reply</a>'); + var $hide_button = $('<a class="mm-msg-action mm-hide" id="mm-hide-' + msg.id + '" href="#hide-form-container" title="' + tooltip_hide + '">X</a>'); + var $info_button = $('<span class="mm-msg-action mm-info" id="mm-info-' + msg.id + '" title="' + tooltip_info + '">i</span>'); + var $reply_button = $('<a class="mm-msg-action mm-rep" id="mm-rep-' + msg.id + '" href="#reply-form-container" title="' + tooltip_reply + '">reply</a>'); if (_use_fancybox) { $reply_button.fancybox(); $hide_button.fancybox(); @@ -235,11 +248,13 @@ var message_manager = (function() { var radio = depth > 0? null : $('<input type="radio"/>').attr({ 'id': 'mm_text_' + msg.id, 'name': 'mm_text', - 'value': escaped_text + 'value': escaped_text, + 'title': tooltip_radio }).wrap('<p/>').parent().html(); - var label = $('<label/>', { + var label = $('<label />').attr({ 'class': 'msg-text', - 'for': 'mm_text_' + msg.id + 'for': 'mm_text_' + msg.id, + 'title': tooltip_radio }).text(escaped_text).wrap('<p/>').parent().html(); $p.append(tag).append(radio).append(label); } else { @@ -270,7 +285,7 @@ var message_manager = (function() { _username = data.username; var $output = $message_list_element; if (anim_duration > 0) { - $output.stop().fadeOut(anim_duration, function(){ + $output.stop(true,true).fadeOut(anim_duration, function(){ render_available_messages(data, anim_duration); }); } else { @@ -280,20 +295,32 @@ var message_manager = (function() { // render allows animation (if required) to hide messages before repainting and then revealing them var render_available_messages = function(data, anim_duration) { + var $output = $message_list_element; + $output.empty(); + var archive = data.messages_for_this_report; + var $archive = ""; + var i, litem; + if (archive instanceof Array) { + var $arch_ul = $('<ul class="mm-root mm-archive"/>'); + for(i=0; i< archive.length; i++) { + litem = get_message_li(archive[i], 0); + $arch_ul.append(litem); + } + $output.append($arch_ul); + } var messages = data.messages; _username = data.username; - var $output = $message_list_element; if (messages instanceof Array) { + var $ul = $('<ul class="mm-root mm-current"/>'); if (messages.length === 0) { - $output.html('<p class="mm-empty">No messages available.</p>'); + $output.append('<p class="mm-empty">No messages available.</p>'); } else { - var $ul = $('<ul class="mm-root"/>'); - for(var i=0; i< messages.length; i++) { - var litem = get_message_li(messages[i], 0); + for(i=0; i< messages.length; i++) { + litem = get_message_li(messages[i], 0); $ul.append(litem); } - $output.empty().append($ul); } + $output.append($ul); } else { $output.html('<p>No messages (server did not send a list).</p>'); } @@ -310,11 +337,11 @@ var message_manager = (function() { var $li = $(this).closest('li'); var id = $li.attr('id').replace(_msg_prefix, ''); if ($li.hasClass('msg-is-locked')) { - say_status(get_msg(msg_trying_for_lock)); + say_status(get_msg(msg_trying_for_lock), true); } else if ($li.hasClass('msg-is-owned')) { - say_status(get_msg(msg_checking_lock)); + say_status(get_msg(msg_checking_lock), true); } else { - say_status(get_msg(msg_claiming_lock)); + say_status(get_msg(msg_claiming_lock), true); } request_lock(id, options); }); @@ -332,11 +359,13 @@ 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) + // fms_id: if provided, display an archive of messages for this username var get_available_messages = function(options) { var base_auth = get_current_auth_credentials(); var suggest_username = ""; var anim_duration = 0; var callback = null; + var fms_id = null; if (options) { if (typeof(options.callback) === 'function') { callback = options.callback; @@ -350,25 +379,37 @@ var message_manager = (function() { anim_duration = 0; } } + if (typeof options.fms_id === 'string' || typeof options.fms_id === 'number') { + fms_id = parseInt(options.fms_id, 10); + if (isNaN(fms_id)) { + fms_id = 0; + } + } } if (base_auth === "") { show_login_form(suggest_username); return; } - $login_element.stop().hide(); + $login_element.stop(true,true).hide(); if (_url_root.length === 0) { say_status(msg_no_config_err); } else { + var ajax_url = _url_root +"messages/available.json"; + if (fms_id) { + ajax_url += "?fms_id=" + fms_id; + } + say_status("Fetching messages...", true); $.ajax({ dataType: "json", - type: "post", - url: _url_root +"messages/available.json", + type: "get", + url: ajax_url, beforeSend: function (xhr){ xhr.setRequestHeader('Authorization', get_current_auth_credentials()); xhr.withCredentials = true; }, success: function(data, textStatus) { show_available_messages(data, anim_duration); + say_status("Fetching messages... done, OK", false); // loaded OK if (typeof(callback) === "function") { callback.call($(this), data); // execute callback } @@ -705,6 +746,7 @@ var message_manager = (function() { hide: hide, show_info: show_info, sign_out: sign_out, - populate_boilerplate_strings: populate_boilerplate_strings + populate_boilerplate_strings: populate_boilerplate_strings, + say_status: say_status }; })(); |
