UI - 'Request body' section disappears after switching from 'Playwright' to 'System settings default' and back on 'Request' tab - Fixed #1449

changedetectionio/static/js/global-settings.js

@@ -1,19 +1,4 @@
 $(document).ready(function () {
-    function toggle() {
-        if ($('input[name="application-fetch_backend"]:checked').val() != 'html_requests') {
-            $('#requests-override-options').hide();
-            $('#webdriver-override-options').show();
-        } else {
-            $('#requests-override-options').show();
-            $('#webdriver-override-options').hide();
-        }
-    }
-
-    $('input[name="application-fetch_backend"]').click(function (e) {
-        toggle();
-    });
-    toggle();
-
     $("#api-key").hover(
         function () {
             $("#api-key-copy").html('copy').fadeIn();

changedetectionio/static/js/vis.js

@@ -0,0 +1,15 @@
+$(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();
+});

changedetectionio/static/js/watch-settings.js

@@ -1,39 +1,17 @@
 $(document).ready(function () {
-    function toggle() {
-        if ($('input[name="fetch_backend"]:checked').val() == 'html_webdriver') {
-            if (playwright_enabled) {
-                // playwright supports headers, so hide everything else
-                // See #664
-                $('#requests-override-options #request-method').hide();
-                $('#requests-override-options #request-body').hide();
 
-                // @todo connect this one up
+    // Lazy Hide/Show elements mechanism
-                $('#ignore-status-codes-option').hide();
+    $('[data-visible-for]').hide();
-            } else {
+    $(':radio').on('keyup keypress blur change click', function (e){
-                // selenium/webdriver doesnt support anything afaik, hide it all
+        $('[data-visible-for]').hide();
-                $('#requests-override-options').hide();
+        var n = $(this).attr('name') + "=" + $(this).val();
-            }
+        if (n === 'fetch_backend=system') {
-
+            n = "fetch_backend=" + default_system_fetch_backend;
-            $('#webdriver-override-options').show();
-
-        } else if ($('input[name="fetch_backend"]:checked').val() == 'system') {
-            $('#requests-override-options #request-method').hide();
-            $('#requests-override-options #request-body').hide();
-            $('#ignore-status-codes-option').hide();
-            $('#requests-override-options').hide();
-            $('#webdriver-override-options').hide();
-        } else {
-
-            $('#requests-override-options').show();
-            $('#requests-override-options *:hidden').show();
-            $('#webdriver-override-options').hide();
         }
-    }
+        $(`[data-visible-for~="${n}"]`).show();
 
-    $('input[name="fetch_backend"]').click(function (e) {
-        toggle();
     });
-    toggle();
+    $(':radio:checked').change();
 
     $('#notification-setting-reset-to-default').click(function (e) {
         $('#notification_title').val('');

changedetectionio/templates/edit.html

@@ -3,6 +3,7 @@
 {% from '_helpers.jinja' import render_field, render_checkbox_field, render_button %}
 {% from '_common_fields.jinja' import render_common_settings_form %}
 <script src="{{url_for('static_content', group='js', filename='tabs.js')}}" defer></script>
+<script src="{{url_for('static_content', group='js', filename='vis.js')}}" defer></script>
 <script>
     const browser_steps_available_screenshots=JSON.parse('{{ watch.get_browsersteps_available_screenshots|tojson }}');
     const browser_steps_config=JSON.parse('{{ browser_steps_config|tojson }}');
@@ -19,7 +20,7 @@
     const proxy_recheck_status_url="{{url_for('check_proxies.get_recheck_status', uuid=uuid)}}";
     const screenshot_url="{{url_for('static_content', group='screenshot', filename=uuid)}}";
     const watch_visual_selector_data_url="{{url_for('static_content', group='visual_selector_data', filename=uuid)}}";
-
+    const default_system_fetch_backend="{{ settings_application['fetch_backend'] }}";
 </script>
 
 <script src="{{url_for('static_content', group='js', filename='watch-settings.js')}}" defer></script>
@@ -124,10 +125,8 @@
                         </span>
                     </div>
                 {% endif %}
-                    <div  class="pure-control-group inline-radio">
+
-                        {{ render_checkbox_field(form.ignore_status_codes) }}
+                <fieldset id="webdriver-override-options" data-visible-for="fetch_backend=html_webdriver">
-                    </div>
-                <fieldset id="webdriver-override-options">
                     <div class="pure-control-group">
                         {{ render_field(form.webdriver_delay) }}
                         <div class="pure-form-message-inline">
@@ -148,14 +147,14 @@
                 </fieldset>
                 <fieldset class="pure-group" id="requests-override-options">
                     {% if not playwright_enabled %}
-                        <div class="pure-form-message-inline">
+                        <div class="pure-form-message-inline"  data-visible-for="fetch_backend=html_requests">
                             <strong>Request override is currently only used by the <i>Basic fast Plaintext/HTTP Client</i> method.</strong>
                         </div>
                     {% endif %}
-                    <div class="pure-control-group" id="request-method">
+                    <div class="pure-control-group" id="request-method"  data-visible-for="fetch_backend=html_requests">
                         {{ render_field(form.method) }}
                     </div>
-                    <div class="pure-control-group" id="request-headers">
+                    <div class="pure-control-group" id="request-headers"  data-visible-for="fetch_backend=html_requests fetch_backend=html_webdriver">
 {{ render_field(form.headers, rows=5, placeholder="Example
 Cookie: foobar
 User-Agent: wonderbra 1.0") }}
@@ -171,7 +170,7 @@ User-Agent: wonderbra 1.0") }}
                         </div>
 
                     </div>
-                    <div class="pure-control-group" id="request-body">
+                    <div class="pure-control-group" id="request-body"  data-visible-for="fetch_backend=html_requests">
                                         {{ render_field(form.body, rows=5, placeholder="Example
 {
    \"name\":\"John\",
@@ -180,6 +179,9 @@ User-Agent: wonderbra 1.0") }}
 }") }}
                     </div>
                 </fieldset>
+                <div  class="pure-control-group inline-radio">
+                    {{ render_checkbox_field(form.ignore_status_codes) }}
+                </div>
             </div>
             {% if playwright_enabled %}
             <div class="tab-pane-inner" id="browser-steps">

changedetectionio/templates/settings.html

@@ -11,7 +11,7 @@
 </script>
 <script src="{{url_for('static_content', group='js', filename='tabs.js')}}" defer></script>
 <script src="{{url_for('static_content', group='js', filename='notifications.js')}}" defer></script>
-
+<script src="{{url_for('static_content', group='js', filename='vis.js')}}" defer></script>
 <script src="{{url_for('static_content', group='js', filename='global-settings.js')}}" defer></script>
 <div class="edit-form">
     <div class="tabs collapsable">
@@ -111,7 +111,7 @@
                     <br>
                     Tip: <a href="https://github.com/dgtlmoon/changedetection.io/wiki/Proxy-configuration#brightdata-proxy-support">Connect using Bright Data and Oxylabs Proxies, find out more here.</a>
                 </div>
-                <fieldset class="pure-group" id="webdriver-override-options">
+                <fieldset class="pure-group" id="webdriver-override-options" data-visible-for="application-fetch_backend=html_webdriver">
                     <div class="pure-form-message-inline">
                         <strong>If you're having trouble waiting for the page to be fully rendered (text missing etc), try increasing the 'wait' time here.</strong>
                         <br>