UI fixes, also add to global settings

dgtlmoon · Dec 2, 2024 · 8650328 · 8650328
1 parent 3dd0c15
commit 8650328
Show file tree

Hide file tree

Showing 7 changed files with 154 additions and 130 deletions.
diff --git a/changedetectionio/forms.py b/changedetectionio/forms.py
@@ -691,7 +691,7 @@ class DefaultUAInputForm(Form):
 # datastore.data['settings']['requests']..
 class globalSettingsRequestForm(Form):
     time_between_check = FormField(TimeBetweenCheckForm)
-
+    time_schedule_limit = FormField(ScheduleLimitForm)
     proxy = RadioField('Proxy')
     jitter_seconds = IntegerField('Random jitter seconds ± check',
                                   render_kw={"style": "width: 5em;"},

diff --git a/changedetectionio/static/js/plugins.js b/changedetectionio/static/js/plugins.js
@@ -159,4 +159,38 @@
         // Return the current request in case it's needed
         return requests[namespace];
     };
-})(jQuery);
+})(jQuery);
+
+
+
+function toggleOpacity(checkboxSelector, fieldSelector, inverted) {
+    const checkbox = document.querySelector(checkboxSelector);
+    const fields = document.querySelectorAll(fieldSelector);
+
+    function updateOpacity() {
+        const opacityValue = !checkbox.checked ? (inverted ? 0.6 : 1) : (inverted ? 1 : 0.6);
+        fields.forEach(field => {
+            field.style.opacity = opacityValue;
+        });
+    }
+
+    // Initial setup
+    updateOpacity();
+    checkbox.addEventListener('change', updateOpacity);
+}
+
+function toggleVisibility(checkboxSelector, fieldSelector, inverted) {
+    const checkbox = document.querySelector(checkboxSelector);
+    const fields = document.querySelectorAll(fieldSelector);
+
+    function updateOpacity() {
+        const opacityValue = !checkbox.checked ? (inverted ? 'none' : 'block') : (inverted ? 'block' : 'none');
+        fields.forEach(field => {
+            field.style.display = opacityValue;
+        });
+    }
+
+    // Initial setup
+    updateOpacity();
+    checkbox.addEventListener('change', updateOpacity);
+}
diff --git a/changedetectionio/static/js/scheduler.js b/changedetectionio/static/js/scheduler.js
@@ -0,0 +1,102 @@
+function getTimeInTimezone(timezone) {
+    const now = new Date();
+    const options = {
+        timeZone: timezone,
+        weekday: 'long',
+        year: 'numeric',
+        hour12: false,
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+    };
+
+    const formatter = new Intl.DateTimeFormat('en-US', options);
+    return formatter.format(now);
+}
+
+$(document).ready(function () {
+
+    let exceedsLimit = false;
+    const warning_text = $("#timespan-warning")
+    const timezone_text_widget = $("input[id*='-time_schedule_limit-timezone']")
+
+    toggleVisibility('#time_schedule_limit-enabled, #requests-time_schedule_limit-enabled', '#schedule-day-limits-wrapper', true)
+
+    window.setInterval(function () {
+        if (timezone_text_widget.val().length) {
+            document.getElementById('local-time-in-tz').textContent =
+                getTimeInTimezone(timezone_text_widget.val());
+        } else {
+            // So maybe use what is in the placeholder (which will be the default settings)
+            document.getElementById('local-time-in-tz').textContent =
+                getTimeInTimezone(timezone_text_widget.attr('placeholder'));
+        }
+        let allOk = true;
+
+        // Controls setting the warning that the time could overlap into the next day
+        $("li.day-schedule").each(function () {
+            const $schedule = $(this);
+            const $checkbox = $schedule.find("input[type='checkbox']");
+
+            if ($checkbox.is(":checked")) {
+                const timeValue = $schedule.find("input[type='time']").val();
+                const durationHours = parseInt($schedule.find("select[name*='-duration-hours']").val(), 10) || 0;
+                const durationMinutes = parseInt($schedule.find("select[name*='-duration-minutes']").val(), 10) || 0;
+
+                if (timeValue) {
+                    const [startHours, startMinutes] = timeValue.split(":").map(Number);
+                    const totalMinutes = (startHours * 60 + startMinutes) + (durationHours * 60 + durationMinutes);
+
+                    exceedsLimit = totalMinutes > 1440
+                    if (exceedsLimit) {
+                        allOk = false
+                    }
+                    // Set the row/day-of-week highlight
+                    $schedule.toggleClass("warning", exceedsLimit);
+                }
+            } else {
+                $schedule.toggleClass("warning", false);
+            }
+        });
+
+        warning_text.toggle(!allOk)
+    }, 500);
+
+    $('table[id*="time_schedule_limit-saturday"], table[id*="time_schedule_limit-sunday"]').addClass("weekend-day")
+
+    // Presets [weekend] [business hours] etc
+    $(document).on('click', '[data-template].set-schedule', function () {
+        // Get the value of the 'data-template' attribute
+
+        switch ($(this).attr('data-template')) {
+            case 'business-hours':
+                $('.day-schedule table:not(.weekend-day) input[type="time"]').val('09:00')
+                $('.day-schedule table:not(.weekend-day) select[id*="-duration-hours"]').val('8');
+                $('.day-schedule table:not(.weekend-day) select[id*="-duration-minutes"]').val('0');
+                $('.day-schedule input[id*="-enabled"]').prop('checked', true);
+                $('.day-schedule .weekend-day input[id*="-enabled"]').prop('checked', false);
+                break;
+            case 'weekend':
+                $('.day-schedule .weekend-day input[type="time"][id$="start-time"]').val('00:00')
+                $('.day-schedule .weekend-day select[id*="-duration-hours"]').val('24');
+                $('.day-schedule .weekend-day select[id*="-duration-minutes"]').val('0');
+                $('.day-schedule input[id*="-enabled"]').prop('checked', false);
+                $('.day-schedule .weekend-day input[id*="-enabled"]').prop('checked', true);
+                break;
+            case 'reset':
+                $('.day-schedule .day-schedule input[type="time"]').val('00:00')
+                $('.day-schedule .day-schedule select[id*="-duration-hours"]').val('24');
+                $('.day-schedule .day-schedule select[id*="-duration-minutes"]').val('0');
+                $('.day-schedule .day-schedule input[id*="-enabled"]').prop('checked', true);
+                break;
+            case 'once-per-day':
+                $('.day-schedule .day-schedule input[type="time"]').val('00:00')
+                $('.day-schedule .day-schedule select[id*="-duration-hours"]').val('24');
+                $('.day-schedule .day-schedule select[id*="-duration-minutes"]').val('0');
+                $('.day-schedule .day-schedule input[id*="-enabled"]').prop('checked', true);
+                break;
+        }
+    });
+});
diff --git a/changedetectionio/static/js/watch-settings.js b/changedetectionio/static/js/watch-settings.js
@@ -1,53 +1,3 @@
-function toggleOpacity(checkboxSelector, fieldSelector, inverted) {
-    const checkbox = document.querySelector(checkboxSelector);
-    const fields = document.querySelectorAll(fieldSelector);
-
-    function updateOpacity() {
-        const opacityValue = !checkbox.checked ? (inverted ? 0.6 : 1) : (inverted ? 1 : 0.6);
-        fields.forEach(field => {
-            field.style.opacity = opacityValue;
-        });
-    }
-
-    // Initial setup
-    updateOpacity();
-    checkbox.addEventListener('change', updateOpacity);
-}
-
-function toggleVisibility(checkboxSelector, fieldSelector, inverted) {
-    const checkbox = document.querySelector(checkboxSelector);
-    const fields = document.querySelectorAll(fieldSelector);
-
-    function updateOpacity() {
-        const opacityValue = !checkbox.checked ? (inverted ? 'none' : 'block') : (inverted ? 'block' : 'none');
-        fields.forEach(field => {
-            field.style.display = opacityValue;
-        });
-    }
-
-    // Initial setup
-    updateOpacity();
-    checkbox.addEventListener('change', updateOpacity);
-}
-
-function getTimeInTimezone(timezone) {
-    const now = new Date();
-    const options = {
-        timeZone: timezone,
-        weekday: 'long',
-        year: 'numeric',
-        hour12: false,
-        month: '2-digit',
-        day: '2-digit',
-        hour: '2-digit',
-        minute: '2-digit',
-        second: '2-digit',
-    };
-
-    const formatter = new Intl.DateTimeFormat('en-US', options);
-    return formatter.format(now);
-}
-
 
 function request_textpreview_update() {
     if (!$('body').hasClass('preview-text-enabled')) {
@@ -95,81 +45,6 @@ function request_textpreview_update() {
 
 
 $(document).ready(function () {
-    let exceedsLimit = false;
-    const warning_text = $("#timespan-warning")
-
-    window.setInterval(function () {
-        if ($("#time_schedule_limit-timezone").val().length) {
-            document.getElementById('local-time-in-tz').textContent =
-                getTimeInTimezone($("#time_schedule_limit-timezone").val());
-        } else {
-            // So maybe use what is in the placeholder (which will be the default settings)
-            document.getElementById('local-time-in-tz').textContent =
-                getTimeInTimezone($("#time_schedule_limit-timezone").attr('placeholder'));
-        }
-        let allOk = true;
-
-        $("li.day-schedule").each(function () {
-            const $schedule = $(this);
-            const $checkbox = $schedule.find("input[type='checkbox']");
-
-            if ($checkbox.is(":checked")) {
-                const timeValue = $schedule.find("input[type='time']").val();
-                const durationHours = parseInt($schedule.find("select[name*='-duration-hours']").val(), 10) || 0;
-                const durationMinutes = parseInt($schedule.find("select[name*='-duration-minutes']").val(), 10) || 0;
-
-                if (timeValue) {
-                    const [startHours, startMinutes] = timeValue.split(":").map(Number);
-                    const totalMinutes = (startHours * 60 + startMinutes) + (durationHours * 60 + durationMinutes);
-
-                    exceedsLimit = totalMinutes > 1440
-                    if (exceedsLimit) {
-                        allOk = false
-                    }
-                    $schedule.toggleClass("warning", exceedsLimit);
-                }
-            } else {
-                $schedule.toggleClass("warning", false);
-            }
-        });
-
-        warning_text.toggle(!allOk)
-    }, 500);
-
-    $('#time_schedule_limit-saturday, #time_schedule_limit-sunday').addClass("weekend-day")
-
-    $(document).on('click', '[data-template].set-schedule', function () {
-        // Get the value of the 'data-template' attribute
-
-        switch ($(this).attr('data-template')) {
-            case 'business-hours':
-                $('table:not(.weekend-day) input[type="time"]').val('09:00')
-                $('table:not(.weekend-day) select[id*="-duration-hours"]').val('8');
-                $('table:not(.weekend-day) select[id*="-duration-minutes"]').val('0');
-                $('input[id*="-enabled"]').prop('checked', true);
-                $('.weekend-day input[id*="-enabled"]').prop('checked', false);
-                break;
-            case 'weekend':
-                $('.weekend-day input[type="time"][id$="start-time"]').val('00:00')
-                $('.weekend-day select[id*="-duration-hours"]').val('24');
-                $('.weekend-day select[id*="-duration-minutes"]').val('0');
-                $('input[id*="-enabled"]').prop('checked', false);
-                $('.weekend-day input[id*="-enabled"]').prop('checked', true);
-                break;
-            case 'reset':
-                $('.day-schedule input[type="time"]').val('00:00')
-                $('.day-schedule select[id*="-duration-hours"]').val('24');
-                $('.day-schedule select[id*="-duration-minutes"]').val('0');
-                $('.day-schedule input[id*="-enabled"]').prop('checked', true);
-                break;
-            case 'once-per-day':
-                $('.day-schedule input[type="time"]').val('00:00')
-                $('.day-schedule select[id*="-duration-hours"]').val('24');
-                $('.day-schedule select[id*="-duration-minutes"]').val('0');
-                $('.day-schedule input[id*="-enabled"]').prop('checked', true);
-                break;
-        }
-    });
 
     $('#notification-setting-reset-to-default').click(function (e) {
         $('#notification_title').val('');
@@ -184,7 +59,7 @@ $(document).ready(function () {
     });
 
     toggleOpacity('#time_between_check_use_default', '#time-check-widget-wrapper, #time-between-check-schedule', false);
-    toggleVisibility('#time_schedule_limit-enabled', '#schedule-day-limits-wrapper', true)
+
 
     const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
     $("#text-preview-inner").css('max-height', (vh - 300) + "px");

diff --git a/changedetectionio/templates/_helpers.html b/changedetectionio/templates/_helpers.html
@@ -66,7 +66,8 @@
     .day-schedule *, .day-schedule select {
         display: inline-block;
     }
-    .day-schedule label[for^="time_schedule_limit-"][for$="-enabled"] {
+
+    .day-schedule label[for*="time_schedule_limit-"][for$="-enabled"] {
         min-width: 6rem;
         font-weight: bold;
     }
@@ -100,6 +101,9 @@
         padding-left: 50px;
         background-image: url({{ url_for('static_content', group='images', filename='schedule.svg') }});
     }
+    #timespan-warning {
+        display: none;
+    }
     </style>
     <br>
 

diff --git a/changedetectionio/templates/edit.html b/changedetectionio/templates/edit.html
@@ -5,6 +5,7 @@
 <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 src="{{url_for('static_content', group='js', filename='global-settings.js')}}" defer></script>
+<script src="{{url_for('static_content', group='js', filename='scheduler.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 }}');

diff --git a/changedetectionio/templates/settings.html b/changedetectionio/templates/settings.html
@@ -1,7 +1,7 @@
 {% extends 'base.html' %}
 
 {% block content %}
-{% from '_helpers.html' import render_field, render_checkbox_field, render_button %}
+{% from '_helpers.html' import render_field, render_checkbox_field, render_button, render_time_schedule_form %}
 {% from '_common_fields.html' import render_common_settings_form %}
 <script>
     const notification_base_url="{{url_for('ajax_callback_send_notification_test', mode="global-settings")}}";
@@ -10,9 +10,11 @@
 {% endif %}
 </script>
 <script src="{{url_for('static_content', group='js', filename='tabs.js')}}" defer></script>
+<script src="{{url_for('static_content', group='js', filename='plugins.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>
+<script src="{{url_for('static_content', group='js', filename='scheduler.js')}}" defer></script>
 <div class="edit-form">
     <div class="tabs collapsable">
         <ul>
@@ -32,6 +34,12 @@
                     <div class="pure-control-group">
                         {{ render_field(form.requests.form.time_between_check, class="time-check-widget") }}
                         <span class="pure-form-message-inline">Default recheck time for all watches, current system minimum is <i>{{min_system_recheck_seconds}}</i> seconds (<a href="https://github.com/dgtlmoon/changedetection.io/wiki/Misc-system-settings#enviroment-variables">more info</a>).</span>
+                            <div id="time-between-check-schedule">
+                                <!-- Start Time and End Time -->
+                                <div id="limit-between-time">
+                                    {{ render_time_schedule_form(form.requests, available_timezones) }}
+                                </div>
+                        </div>
                     </div>
                     <div class="pure-control-group">
                         {{ render_field(form.requests.form.jitter_seconds, class="jitter_seconds") }}