diff options
-rw-r--r-- | templates/web/fixmybarangay/around/tabbed_lists.html | 68 | ||||
-rw-r--r-- | templates/web/fixmybarangay/header.html | 4 | ||||
-rw-r--r-- | templates/web/fixmybarangay/report/_message_manager.html | 104 | ||||
-rw-r--r-- | web/cobrands/fixmybarangay/message_manager.scss | 59 |
4 files changed, 153 insertions, 82 deletions
diff --git a/templates/web/fixmybarangay/around/tabbed_lists.html b/templates/web/fixmybarangay/around/tabbed_lists.html index 77ca84ee4..14461628c 100644 --- a/templates/web/fixmybarangay/around/tabbed_lists.html +++ b/templates/web/fixmybarangay/around/tabbed_lists.html @@ -14,71 +14,5 @@ IF allow_creation %] </ul> [% IF allow_creation %] -<ul id="message_manager" class="issue-list-a tab"> - <li id="message-control"> - <div id="mm-username-container">username: <span id="mm-received-username"></span></div> - <div id="mm-status-message-container"> - <div id="mm-status-message"></div> - </div> - <div id="mm-login-container"> - <div class="input text"> - <label for="mm-htauth-username">MM username</label> - <input name="mm-htauth-username" id="mm-htauth-username" type="text"/> - </div> - <div class="input password"> - <label for="mm-htauth-password">Password</label> - <input name="mm-htauth-password" id="mm-htauth-password" type="password"/> - </div> - <div class="submit"> - <input id="available-submit" type="submit" value="Get available messages"/> - </div> - </div> - </li> - <li> - <div id="mm-message-list" style="min-height:1em;"></div> - </li> -</ul> - -<script type="text/javascript"> - -$(document).ready(function() { - - var mm_url = "[% c.config.MESSAGE_MANAGER_URL %]"; // from config - - var mm_populate_list = function(data) { - $('#mm-status-message-container').text("Accessed message server as " + data['username']); - $('input[name=mm_text]').prop('checked', false); // uncheck all - } - - var mm_selected_message = function(data) { - var msg_text = ""; - var service_id = ""; - if (data['success']) { - // msg_text = $('#form_detail').val( $('input[name=mm_text]:checked').val() ); # == message data - msg_text = data['data']['Message']['message']; - service_id = data['data']['Message']['id']; - } else { - $('input[name=mm_text]').prop('checked', false); // uncheck all - } - $('#form_detail').val(msg_text); - $('#external_source_id').val(service_id); - } - - message_manager.config({url_root: mm_url}); - message_manager.setup_click_listener({callback:mm_selected_message}); - - // problem form hidden input "external_source_id": pass the MM id into FMS, if used - $('<input type="hidden"/>').attr({ - 'id': 'external_source_id', - 'name': 'external_source_id', - }).appendTo($('#problem_form')); - - $('#available-submit').click(function(e){ - e.preventDefault(); - message_manager.get_available_messages({callback:mm_populate_list}); - }); - $('#available-submit').click(); -}); - -</script> + [% TRY %][% INCLUDE 'report/_message_manager.html' %][% CATCH file %][% END %] [% END %] diff --git a/templates/web/fixmybarangay/header.html b/templates/web/fixmybarangay/header.html index a3c079565..f3ef5078a 100644 --- a/templates/web/fixmybarangay/header.html +++ b/templates/web/fixmybarangay/header.html @@ -25,6 +25,10 @@ [% allow_creation = !c.cobrand.only_authed_can_create || (c.user && c.user.from_council); %] [% IF allow_creation %] + + <link rel="stylesheet" href="[% version('/js/fancybox/jquery.fancybox-1.3.4.css') %]"> + <script src="[% version('/js/fancybox/jquery.fancybox-1.3.4.pack.js') %]" charset="utf-8"></script> + <script src="[% version('/cobrands/fixmybarangay/message_manager_client.js') %]" charset="utf-8"></script> <script> $(document).ready(function() { diff --git a/templates/web/fixmybarangay/report/_message_manager.html b/templates/web/fixmybarangay/report/_message_manager.html index 2697e156c..ce3173e8f 100644 --- a/templates/web/fixmybarangay/report/_message_manager.html +++ b/templates/web/fixmybarangay/report/_message_manager.html @@ -1,6 +1,7 @@ [% IF c.user && c.user.from_council %] - +<!-- <input type="button" class="green-btn" value="Show Messages" id="show_messages"> +--> <ul id="message_manager" class="issue-list-a tab" style="display: none"> <li id="message-control"> <div id="mm-username-container">username: <span id="mm-received-username"></span></div> @@ -8,16 +9,16 @@ <div id="mm-status-message"></div> </div> <div id="mm-login-container"> - <div class="input text"> - <label for="mm-htauth-username">MM username</label> + <div> + <label for="mm-htauth-username">Username:</label> <input name="mm-htauth-username" id="mm-htauth-username" type="text"/> </div> - <div class="input password"> - <label for="mm-htauth-password">Password</label> + <div> + <label for="mm-htauth-password">Password:</label> <input name="mm-htauth-password" id="mm-htauth-password" type="password"/> </div> <div class="submit"> - <input id="available-submit" type="submit" value="Get available messages"/> + <input id="available-submit" type="submit" value="Get available messages" class="green-btn"/> </div> </div> </li> @@ -25,15 +26,35 @@ <div id="mm-message-list" style="min-height:1em;"></div> </li> </ul> +<div style="display:none"> + <div id="reply-form-container"> + <form action="/" id="reply-form" onsubmit="event.returnValue = false; return false;" method="post" accept-charset="utf-8"> + <input type="hidden" name="message_id" id="reply_to_msg_id"/> + <div> + <label for="reply_text">Reply text:</label> + <textarea name="reply_text" id="reply_text"></textarea> + </div> + <div class="submit"> + <input id="reply-submit" type="submit" value="Send Reply" class="green-btn"/> + </div> + </form> + </div> +</div> <script type="text/javascript"> $(document).ready(function() { var mm_url = "[% c.config.MESSAGE_MANAGER_URL %]"; // from config - + var problem_id = "[% problem.id %]"; + var dummy_busy = false; + + function sanitise_id(css_id) { + return css_id.replace(/\D/g, ""); + } + var mm_populate_list = function(data) { - $('#mm-status-message-container').text("Accessed message server as " + data['username']); + $('#mm-status-message-container').text("Accessed Message Manager as " + data['username']); $('input[name=mm_text]').prop('checked', false); // uncheck all } @@ -50,6 +71,15 @@ $(document).ready(function() { $('#form_detail').val(msg_text); $('#external_source_id').val(service_id); } + + var dummy_reply_cleanup = function(data) { + $('#reply_text').val(''); + dummy_busy = false; + } + + var dummy_hide_cleanup = function(data) { + dummy_busy = false; + } message_manager.config({url_root: mm_url}); message_manager.setup_click_listener({callback:mm_selected_message}); @@ -66,11 +96,57 @@ $(document).ready(function() { }); $('#available-submit').click(); - $('<input type="button" value="Copy to update"/>').attr({ - 'id': 'add_support', - 'name': 'add_support', - 'class': 'green-btn' - }).appendTo($('#message_manager')); + $('#hide-button').click(function() { + if ($('#message_id').val()) { + message_manager.hide( + $('#message_id').val(), + {callback:dummy_hide_cleanup}); + } + }); + + $('#mm-message-list').on('mouseover', 'li.mm-msg', function(e){ + e.stopPropagation(); // because replies are nested + $('.mm-msg-action', $('#mm-message-list')).stop().fadeOut(200); + $(this).find('> .mm-msg-action').stop().show(); + console.log("clicked on: " + $(this).attr('id')); + }); + + $('#mm-message-list').on('click', '.mm-hide', function(e){ + var want_hide = + confirm('Are you sure you want to delete the following message?\n\n"' + + $('p', $(this).parent()).first().text() + '"\n'); + if (want_hide) { + message_manager.hide( + sanitise_id($(this).parent().attr('id')), + {callback:dummy_hide_cleanup}); + } + }); + + $('#mm-message-list').on('click', '.mm-rep', function(e){ + console.log("call message_manager.reply(" + $(this).parent().attr('id') + ", reply_text)"); + }); + + $('#reply-submit').click(function(e) { + e.preventDefault(); + if (! dummy_busy) { + dummy_busy = true; + console.log("sending reply to: " + $('#reply_to_msg_id').val()); + message_manager.reply( + $('#reply_to_msg_id').val(), + $('#reply_text').val(), + {callback:dummy_reply_cleanup}); + } + }); + + $("a#reply").fancybox({onClosed: function(){dummy_busy=false;}}); + + + + // $('<input type="button" value="Copy to update"/>').attr({ + // 'id': 'add_support', + // 'name': 'add_support', + // 'class': 'green-btn' + // }).appendTo($('#message_manager')); $('#add_support').click(function(e){ e.preventDefault(); @@ -80,7 +156,7 @@ $(document).ready(function() { $('#external_source_id').val(id); $('#form_update').val( $(this).val() ); $('#form_update_form').on('submit', function(e) { - message_manager.assign_fms_id( $('#external_source_id').val(), [% problem.id %], { 'is_async': false } ); + message_manager.assign_fms_id( $('#external_source_id').val(), problem_id, { 'is_async': false } ); }); }); }); diff --git a/web/cobrands/fixmybarangay/message_manager.scss b/web/cobrands/fixmybarangay/message_manager.scss index 46567efce..baf461ef7 100644 --- a/web/cobrands/fixmybarangay/message_manager.scss +++ b/web/cobrands/fixmybarangay/message_manager.scss @@ -1,6 +1,16 @@ $mm_status_message_color: #a66; $mm_border_color: #eee; +$color_reply_bg: #cccccc; +$color_bg_reply_0: #E8E8E8; +$color_bg_reply_1: #DEDEDE; +$color_bg_reply_2: #D6D6D6; +$color_bg_reply_3: #D1D1D1; +$color_bg_reply_4: #C9C9C9; +$color_bg_reply_5: #BFBFBF; +$color_bg_reply_6: #B8B8B8; + + #message_manager { #message-control { @@ -38,7 +48,8 @@ $mm_border_color: #eee; list-style-type: none; padding: 0; margin: 0; - li { + li, ul.mm-reply-thread li { + position: relative; clear: both; margin: 4px 0 0 0; padding: 0; @@ -46,6 +57,25 @@ $mm_border_color: #eee; background-color: #F6F6F6; p { background-color: inherit; + margin: 0.25em 0 0 0; + padding: 0.5em 1em; + &:hover { background-color: #efe;} + } + ul.mm-reply-thread { + li { + margin:0; + } + .mm-reply { + background-color: #ccc; + &:hover {background-color: #eef;} + } + .mm-reply-0 { margin-left: 0em; background-color: $color_bg_reply_0;} + .mm-reply-1 { margin-left: 1em; background-color: $color_bg_reply_1;} + .mm-reply-2 { margin-left: 2em; background-color: $color_bg_reply_2;} + .mm-reply-3 { margin-left: 3em; background-color: $color_bg_reply_3;} + .mm-reply-4 { margin-left: 4em; background-color: $color_bg_reply_4;} + .mm-reply-5 { margin-left: 5em; background-color: $color_bg_reply_5;} + .mm-reply-6 { margin-left: 6em; background-color: $color_bg_reply_6;} } &.msg-is-locked { background-color: #fdd;} &.msg-is-owned { background-color: #dfd;} @@ -64,6 +94,23 @@ $mm_border_color: #eee; font-weight: normal; margin: 0.1em 0 0.1em 4.5em; } + .mm-msg-action { + display: none; + padding: 0.2em 0.4em; + color: white; + text-align: center; + position: absolute; + top: 0; + &:hover { background-color: black;} + } + .mm-hide { + right:0px; + background-color: red; + } + .mm-rep { + right:1.4em; + background-color: green; + } } } } @@ -71,3 +118,13 @@ $mm_border_color: #eee; margin: 1em; } } +#reply-form-container { + #reply-form{ + margin-top: 2em; + border: 1px solid $mm_border_color; + background-color: #ffdddd; + } + .submit { + margin: 1em 0; + } +} |