UI - Fix - Edit Watch 'Show advanced options' should fire at page load to show you whats possible

changedetectionio/static/js/vis.js

@@ -2,21 +2,28 @@ $(document).ready(function () {
 
     // Lazy Hide/Show elements mechanism
     $('[data-visible-for]').hide();
-    $(':radio').on('keyup keypress blur change click', function (e) {
-        $('[data-visible-for]').hide();
-        $('.advanced-options').hide();
-        var n = $(this).attr('name') + "=" + $(this).val();
+    function show_related_elem(e) {
+        var n = $(e).attr('name') + "=" + $(e).val();
         if (n === 'fetch_backend=system') {
             n = "fetch_backend=" + default_system_fetch_backend;
         }
         $(`[data-visible-for~="${n}"]`).show();
-
+    }
+    $(':radio').on('keyup keypress blur change click', function (e) {
+        $(`[data-visible-for]`).hide();
+        $('.advanced-options').hide();
+        show_related_elem(this);
     });
-    $(':radio:checked').change();
+
+    $(':radio:checked').each(function (e) {
+       show_related_elem(this);
+    })
 
 
     // Show advanced
     $('.show-advanced').click(function (e) {
-        $(this).closest('.tab-pane-inner').find('.advanced-options').toggle();
+        $(this).closest('.tab-pane-inner').find('.advanced-options').each(function (e) {
+            $(this).toggle();
+        })
     });
 });

changedetectionio/static/js/watch-settings.js

@@ -1,18 +1,4 @@
 $(document).ready(function () {
-
-    // Lazy Hide/Show elements mechanism
-    $('[data-visible-for]').hide();
-    $(':radio').on('keyup keypress blur change click', function (e){
-        $('[data-visible-for]').hide();
-        var n = $(this).attr('name') + "=" + $(this).val();
-        if (n === 'fetch_backend=system') {
-            n = "fetch_backend=" + default_system_fetch_backend;
-        }
-        $(`[data-visible-for~="${n}"]`).show();
-
-    });
-    $(':radio:checked').change();
-
     $('#notification-setting-reset-to-default').click(function (e) {
         $('#notification_title').val('');
         $('#notification_body').val('');

changedetectionio/templates/edit.html

@@ -127,7 +127,7 @@
                 {% endif %}
 
                 <!-- webdriver always -->
-                <fieldset data-visible-for="fetch_backend=html_webdriver">
+                <fieldset data-visible-for="fetch_backend=html_webdriver"  style="display: none;">
                     <div class="pure-control-group">
                         {{ render_field(form.webdriver_delay) }}
                         <div class="pure-form-message-inline">
@@ -153,15 +153,15 @@
                     </div>
                 </fieldset>
                 <!-- html requests always -->
-                <fieldset data-visible-for="fetch_backend=html_requests" style="display: none;">
+                <fieldset data-visible-for="fetch_backend=html_requests">
                     <div class="pure-control-group">
                         <a class="pure-button button-secondary button-xsmall show-advanced">Show advanced options</a>
                     </div>
                     <div class="advanced-options"  style="display: none;">
-                        <div class="pure-control-group advanced-options" id="request-method" style="display: none;">
+                        <div class="pure-control-group" id="request-method">
                             {{ render_field(form.method) }}
                         </div>
-                        <div class="advanced-options" id="request-body">
+                        <div id="request-body">
                                             {{ render_field(form.body, rows=5, placeholder="Example
 {
    \"name\":\"John\",
@@ -187,8 +187,8 @@ User-Agent: wonderbra 1.0") }}
                             (Not supported by Selenium browser)
                         </div>
                     </div>
-            <fieldset data-visible-for="fetch_backend=html_requests fetch_backend=html_webdriver" style="display: none;">
-                    <div  class="pure-control-group inline-radio advanced-options"  style="display: none;">
+            <fieldset data-visible-for="fetch_backend=html_requests fetch_backend=html_webdriver" >
+                    <div class="pure-control-group inline-radio advanced-options"  style="display: none;">
                     {{ render_checkbox_field(form.ignore_status_codes) }}
                     </div>
             </fieldset>