Skip to content

Commit

Permalink
Adding some UI feedback for times that extend into the next day
Browse files Browse the repository at this point in the history
  • Loading branch information
dgtlmoon committed Nov 29, 2024
1 parent c393b71 commit 3dd0c15
Show file tree
Hide file tree
Showing 3 changed files with 47 additions and 7 deletions.
2 changes: 1 addition & 1 deletion changedetectionio/flask_app.py
Original file line number Diff line number Diff line change
Expand Up @@ -1811,7 +1811,7 @@ def ticker_thread_check_time_launch_checks():
if time_schedule_limit and time_schedule_limit.get('enabled'):
result = watch.watch_recheck_is_within_schedule(default_tz=datastore.data['settings']['application'].get('timezone', 'UTC'))
if not result:
logger.debug(f"{uuid} time scheduler - not within schedule skipping.")
logger.trace(f"{uuid} Time scheduler - not within schedule skipping.")
continue

# If they supplied an individual entry minutes to threshold.
Expand Down
44 changes: 38 additions & 6 deletions changedetectionio/static/js/watch-settings.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
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);
Expand All @@ -15,12 +17,14 @@ function toggleOpacity(checkboxSelector, fieldSelector, inverted) {
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);
Expand All @@ -45,7 +49,6 @@ function getTimeInTimezone(timezone) {
}



function request_textpreview_update() {
if (!$('body').hasClass('preview-text-enabled')) {
console.error("Preview text was requested but body tag was not setup")
Expand Down Expand Up @@ -92,6 +95,8 @@ 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) {
Expand All @@ -102,12 +107,39 @@ $(document).ready(function () {
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
$(document).on('click', '[data-template].set-schedule', function () {
// Get the value of the 'data-template' attribute

switch ($(this).attr('data-template')) {
case 'business-hours':
Expand Down Expand Up @@ -138,7 +170,7 @@ $(document).ready(function () {
break;
}
});

$('#notification-setting-reset-to-default').click(function (e) {
$('#notification_title').val('');
$('#notification_body').val('');
Expand All @@ -155,8 +187,8 @@ $(document).ready(function () {
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");
$("#text-preview-before-inner").css('max-height', (vh-300)+"px");
$("#text-preview-inner").css('max-height', (vh - 300) + "px");
$("#text-preview-before-inner").css('max-height', (vh - 300) + "px");

$("#activate-text-preview").click(function (e) {
$('body').toggleClass('preview-text-enabled')
Expand Down
8 changes: 8 additions & 0 deletions changedetectionio/templates/_helpers.html
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,12 @@
padding-left: 0.5rem;
padding-right: 0.5rem;
}
#timespan-warning {
color: #ff0000;
}
.day-schedule.warning table {
background-color: #ffbbc2;
}
ul#day-wrapper {
list-style: none;
}
Expand Down Expand Up @@ -121,6 +127,8 @@
{{ render_nolabel_field(form.time_schedule_limit[day]) }}
</li>
{% endfor %}
<li id="timespan-warning">Warning, one or more of your 'days' has a duration that would extend into the next day.<br>
This could have unintended consequences.</li>
<li id="timezone-info">
{{ render_field(form.time_schedule_limit.timezone) }} <span id="local-time-in-tz"></span>
<datalist id="timezones" style="display: none;">
Expand Down

0 comments on commit 3dd0c15

Please sign in to comment.