hide open311 inputs for bodies unless needed

basically if send method is not email (or there's an endpoint value), don't show the form
Maybe we need to have an "show all fields" button/link but for normal use I think this is OK

3 files changed, 29 insertions, 1 deletions

diff --git a/templates/web/default/admin/body-form.html b/templates/web/default/admin/body-form.html
index 385e91d6d..ec29faf5c 100644
--- a/templates/web/default/admin/body-form.html
+++ b/templates/web/default/admin/body-form.html
@@ -48,6 +48,7 @@
         </select>
     </p>
 
+    <div class="admin-open311-only">
     <p>
         <label for="endpoint">[% loc('Endpoint') %]</label>
         <input type="text" name="endpoint" id="endpoint" value="[% body.endpoint %]" size="50">
@@ -87,7 +88,8 @@
         <label for="send_extended_statuses">Send extended open311 statuses with service request updates</label>:
         <input type="checkbox" id="send_extended_statuses" name="send_extended_statuses"[% ' checked' IF conf.send_extended_statuses %]>
     </p>
-
+    </div>
+    
     <p>
     <input type="hidden" name="posted" value="body">
     <input type="hidden" name="token" value="[% token %]">
diff --git a/templates/web/default/admin/header.html b/templates/web/default/admin/header.html
index 6282bf383..cda9b5050 100644
--- a/templates/web/default/admin/header.html
+++ b/templates/web/default/admin/header.html
@@ -5,6 +5,11 @@ dd { margin-left: 8em; }
 .adminhidden { color: #666666; }
 .error { color: red; }
 select { width: auto; }
+.admin-open311-only {
+  border:1px solid #666;
+  padding:0 1em;
+  margin: 1em 0;
+}
 </style>
 
     <p><strong>[% loc('FixMyStreet admin:') %]</strong>
diff --git a/web/js/fixmystreet-admin.js b/web/js/fixmystreet-admin.js
index f13a66d9c..d55bbab21 100644
--- a/web/js/fixmystreet-admin.js
+++ b/web/js/fixmystreet-admin.js
@@ -1,4 +1,25 @@
 $(function(){
     // available for admin pages
+
+    // hide the open311_only section and reveal it only when send_method is relevant
+    var $open311_only = $('.admin-open311-only');
+    if ($open311_only) {
+        function hide_or_show_open311() {
+            var send_method = $('#send_method').val();
+            var show_open311 = false;
+            if ($('#endpoint').val()) {
+                show_open311 = true; // always show the form if there is an endpoint value
+            } else if (send_method && send_method.toLowerCase() != 'email') {
+                show_open311 = true;
+            }
+             if (show_open311) {
+                 $open311_only.slideDown();
+             } else {
+                $open311_only.slideUp();
+            }
+        }
+        $('#send_method').on('change', hide_or_show_open311);
+        hide_or_show_open311();
+    }
 });