csmith1865/obscreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 16 Wiki Activity

fix slide notification labels checkbox

Browse Source
This commit is contained in:
jr-k 2024-07-22 02:27:52 +02:00
parent 9869d3c084
commit 4da9cf2e86
10 changed files with 92 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
data/www/js/global.js
View File

@ -162,12 +162,5 @@ jQuery(document).ready(function ($) {
showToast(l.js_common_copied);
});
// Weird fix for toggle in modals
$(document).on('click', '.modal .toggle label', function (e) {
const $toggle = $(this).parents('.toggle:eq(0)');
const $checkbox = $toggle.find('input[type=checkbox]');
$checkbox.prop('checked', !$checkbox.prop('checked'));
});
});

72
data/www/js/slideshow/slides.js
View File

@ -54,19 +54,22 @@ jQuery(document).ready(function ($) {
const $scheduleStartGroup = $modal.find('.slide-schedule-group');
const $scheduleEndGroup = $modal.find('.slide-schedule-end-group');
const $durationGroup = $modal.find('.slide-duration-group');
const $isNotificationGroup = $modal.find('.slide-notification-group');
const $autoDurationGroup = $modal.find('.slide-auto-duration-group');
const $contentGroup = $modal.find('.slide-content-id-group');
const $triggerStart = $scheduleStartGroup.find('.trigger');
const $triggerEnd = $scheduleEndGroup.find('.trigger');
const $targetCronFieldStart = $scheduleStartGroup.find('.target');
const $targetCronFieldEnd = $scheduleEndGroup.find('.target');
const $targetDuration = $durationGroup.find('input');
const $targetAutoDuration = $autoDurationGroup.find('input');
const $datetimepickerStart = $scheduleStartGroup.find('.datetimepicker');
const $datetimepickerEnd = $scheduleEndGroup.find('.datetimepicker');
const $isNotification = $modal.find('#slide-edit-is-notification');
const $isNotification = $modal.find('.slide-is-notification');
const isNotification = $isNotification.val() === '1';
const isVideo = $contentGroup.find('.target').attr('data-type') === 'video';
let isLoopStart = $triggerStart.val() === 'loop';
let isCronStart = $triggerStart.val() === 'cron';
@ -98,7 +101,9 @@ jQuery(document).ready(function ($) {
$datetimepickerStart.toggleClass('hidden', !isDatetimeStart);
$datetimepickerEnd.toggleClass('hidden', !isDatetimeEnd);
$durationGroup.toggleClass('hidden', (isNotification && isDatetimeEnd) || parseInt($targetDuration.val()) === auto_duration_cheatcode);
// $targetAutoDuration
$autoDurationGroup.toggleClass('hidden', (isNotification && isDatetimeEnd) || !isVideo);
$durationGroup.toggleClass('hidden', (isNotification && isDatetimeEnd) || $targetAutoDuration.prop('checked'));
$scheduleEndGroup.toggleClass('hidden', isLoopStart);
$durationGroup.find('.widget input').prop('required', $durationGroup.is(':visible'));
@ -125,19 +130,6 @@ jQuery(document).ready(function ($) {
flushValues();
};
const inputAutoDurationUpdate = function (enableAutoDuration) {
const $modal = $('.modal-slide:visible');
const $input = $modal.find('.slide-auto-duration');
const $durationGroup = $modal.find('.slide-duration-group');
const $durationInput = $durationGroup.find('input');
const $autoDurationGroup = $modal.find('.slide-auto-duration-group');
const activeAutoDuration = $input.prop('checked');
$durationGroup.toggleClass('hidden', enableAutoDuration && activeAutoDuration);
$autoDurationGroup.toggleClass('hidden', !enableAutoDuration);
$durationInput.val(enableAutoDuration && activeAutoDuration ? auto_duration_cheatcode : 3);
};
const main = function () {
$("ul.slides").sortable({
handle: 'a.slide-sort',
@ -160,6 +152,7 @@ jQuery(document).ready(function ($) {
$(document).on('click', '.content-explr-picker', function () {
showPickers('modal-content-explr-picker', function (content) {
inputContentUpdate(content);
inputSchedulerUpdate();
});
});
@ -171,22 +164,32 @@ jQuery(document).ready(function ($) {
const $actionShow = $group.find('.slide-content-show');
const invalidContent = content === undefined || !content.id;
inputAutoDurationUpdate(!invalidContent && content.type === 'video');
if (invalidContent) {
$inputLabel.val('');
$inputId.val('');
$actionShow.addClass('hidden');
$inputId.attr('data-type', '');
return;
}
$inputLabel.val(content.name);
$inputId.val(content.id);
$inputId.attr('data-type', content.type);
$actionShow.removeClass('hidden');
};
$(document).on('change', '.slide-auto-duration', function () {
inputAutoDurationUpdate(true);
const $modal = $(this).parents('.modal:eq(0)');
const $durationGroup = $modal.find('.slide-duration-group');
const $durationInput = $durationGroup.find('input');
if ($(this).prop('checked')) {
$durationInput.val(auto_duration_cheatcode);
} else {
$durationInput.val(3);
}
inputSchedulerUpdate();
});
$(document).on('click', '.slide-content-show', function () {
@ -205,32 +208,37 @@ jQuery(document).ready(function ($) {
const hasDateTimeEnd = hasCronEnd && validateCronDateTime(slide.cron_schedule_end);
const isNotification = slide.is_notification;
const tclass = '#slide-' + (isNotification ? 'notification-' : '') + 'edit';
$modal.find('#slide-edit-auto-duration').prop('checked', slide.duration === auto_duration_cheatcode);
const inputCallbacks = function() {
inputContentUpdate(slide.content);
inputSchedulerUpdate();
};
inputCallbacks();
$modal.find(tclass + '-auto-duration').prop('checked', slide.duration === auto_duration_cheatcode);
$modal.find('input[type=text]:visible:eq(0)').focus().select();
$modal.find('#slide-edit-duration').val(slide.duration);
$modal.find('#slide-edit-enabled').prop('checked', slide.enabled);
$modal.find(tclass + '-duration').val(slide.duration);
$modal.find(tclass + '-enabled').prop('checked', slide.enabled);
$modal.find('#slide-edit-cron-schedule').val(slide.cron_schedule).toggleClass('hidden', !hasCron || hasDateTime);
$modal.find('#slide-edit-cron-schedule-trigger').val(hasDateTime ? 'datetime' : (hasCron ? 'cron' : 'loop'));
$modal.find(tclass + '-cron-schedule').val(slide.cron_schedule).toggleClass('hidden', !hasCron || hasDateTime);
$modal.find(tclass + '-cron-schedule-trigger').val(hasDateTime ? 'datetime' : (hasCron ? 'cron' : 'loop'));
$modal.find('#slide-edit-cron-schedule-end').val(slide.cron_schedule_end).toggleClass('hidden', !hasCronEnd || hasDateTimeEnd);
$modal.find('#slide-edit-cron-schedule-end-trigger').val(hasDateTimeEnd ? 'datetime' : (hasCronEnd ? 'cron' : (isNotification ? 'duration' : 'stayloop')));
$modal.find(tclass + '-cron-schedule-end').val(slide.cron_schedule_end).toggleClass('hidden', !hasCronEnd || hasDateTimeEnd);
$modal.find(tclass + '-cron-schedule-end-trigger').val(hasDateTimeEnd ? 'datetime' : (hasCronEnd ? 'cron' : (isNotification ? 'duration' : 'stayloop')));
$modal.find('#slide-edit-cron-schedule-datetimepicker').toggleClass('hidden', !hasDateTime).val(
$modal.find(tclass + '-cron-schedule-datetimepicker').toggleClass('hidden', !hasDateTime).val(
hasDateTime ? getCronDateTime(slide.cron_schedule) : ''
);
$modal.find('#slide-edit-cron-schedule-end-datetimepicker').toggleClass('hidden', !hasDateTimeEnd).val(
$modal.find(tclass + '-cron-schedule-end-datetimepicker').toggleClass('hidden', !hasDateTimeEnd).val(
hasDateTimeEnd ? getCronDateTime(slide.cron_schedule_end) : ''
);
$modal.find('#slide-edit-id').val(slide.id);
$modal.find(tclass + '-id').val(slide.id);
loadDateTimePicker($modal.find('.datetimepicker'));
inputSchedulerUpdate();
inputCallbacks();
});
$(document).on('click', '.slide-delete', function () {

1
lang/en.json
View File

@ -16,6 +16,7 @@
"slideshow_slide_panel_th_content": "Content",
"slideshow_slide_panel_th_duration": "Ends after",
"slideshow_slide_panel_th_duration_unit": "sec",
"slideshow_slide_panel_th_auto_duration_video": "Video's duration",
"slideshow_slide_panel_th_enabled": "Enabled",
"slideshow_slide_panel_th_cron_scheduled": "Scheduled Start",
"slideshow_slide_panel_th_activity": "Options",

1
lang/es.json
View File

@ -16,6 +16,7 @@
"slideshow_slide_panel_th_content": "Contenido",
"slideshow_slide_panel_th_duration": "Termina después",
"slideshow_slide_panel_th_duration_unit": "seg",
"slideshow_slide_panel_th_auto_duration_video": "Duración del vídeo",
"slideshow_slide_panel_th_enabled": "Habilitado",
"slideshow_slide_panel_th_cron_scheduled": "Inicio Programado",
"slideshow_slide_panel_th_activity": "Opciones",

1
lang/fr.json
View File

@ -16,6 +16,7 @@
"slideshow_slide_panel_th_content": "Contenu",
"slideshow_slide_panel_th_duration": "Fin après",
"slideshow_slide_panel_th_duration_unit": "sec",
"slideshow_slide_panel_th_auto_duration_video": "Durée de la vidéo",
"slideshow_slide_panel_th_enabled": "Activé",
"slideshow_slide_panel_th_cron_scheduled": "Programmation",
"slideshow_slide_panel_th_activity": "Options",

1
lang/it.json
View File

@ -16,6 +16,7 @@
"slideshow_slide_panel_th_content": "Contenuti",
"slideshow_slide_panel_th_duration": "Finito in",
"slideshow_slide_panel_th_duration_unit": "sec",
"slideshow_slide_panel_th_auto_duration_video": "Durata del video",
"slideshow_slide_panel_th_enabled": "Abilitato",
"slideshow_slide_panel_th_cron_scheduled": "Avvia programmazione",
"slideshow_slide_panel_th_activity": "Opzioni",

3
src/model/entity/Slide.py
View File

@ -3,6 +3,7 @@ import time
from typing import Optional, Union
from src.util.utils import str_to_enum
from src.model.enum.ContentType import AUTO_DURATION_CHEATCODE
class Slide:
@ -166,3 +167,5 @@ class Slide:
return slide
def has_auto_duration(self) -> bool:
return self.duration == AUTO_DURATION_CHEATCODE

4
views/slideshow/slides/component/table.jinja.html
View File

@ -62,9 +62,13 @@
{% else %}
<span class="error"><i class="fa fa-warning danger"></i>️ {{ l.slideshow_slide_panel_td_cron_scheduled_bad_cron }}</span>
{% endif %}
{% else %}
{% if slide.has_auto_duration() %}
<i class="fa {{ icon }}"></i> <span class="prefix">{{ l.slideshow_slide_panel_th_auto_duration_video }}</span>
{% else %}
⏱️ <span class="prefix">{{ slide.duration }} {{ l.slideshow_slide_panel_th_duration_unit }}</span>
{% endif %}
{% endif %}
</div>
</div>
</div>

39
views/slideshow/slides/modal/add.jinja.html
View File

@ -1,4 +1,5 @@
<div class="modal modal-slide-{{ 'notification-' if is_notification }}add modal-slide">
{% set tclass = 'slide-' ~ ('notification-' if is_notification ) ~ 'add' %}
<div class="modal modal-{{ tclass }} modal-slide">
<h2>
{% if is_notification %}
{{ l.slideshow_slide_form_add_notification_title }}
@ -14,27 +15,27 @@
</h3>
{% if current_playlist %}
<input name="playlist_id" type="hidden" id="slide-add-playlist-id" value="{{ current_playlist.id }}">
<input name="playlist_id" type="hidden" id="{{ tclass }}-playlist-id" value="{{ current_playlist.id }}">
{% endif %}
<input type="hidden" name="is_notification" id="slide-add-is-notification" value="{{ '1' if is_notification else '0' }}" />
<input type="hidden" name="is_notification" class="slide-is-notification" value="{{ '1' if is_notification else '0' }}" />
<div class="form-group form-group-horizontal">
<label for="">{{ l.slideshow_slide_form_label_enabled }}</label>
<div class="widget">
<div class="toggle">
<input type="checkbox" class="trigger slide-enabled" name="enabled" checked="checked" value="1"
id="slide-add-enabled"/>
<label for="slide-add-enabled"></label>
id="{{ tclass }}-enabled"/>
<label for="{{ tclass }}-enabled"></label>
</div>
</div>
</div>
<div class="form-group slide-content-id-group">
<label for="slide-add-content-id">{{ l.slideshow_slide_form_label_content_id }}</label>
<label for="{{ tclass }}-content-id">{{ l.slideshow_slide_form_label_content_id }}</label>
<div class="widget">
<input type="text" value="" class="disabled target-label content-explr-picker" />
<input type="text" name="content_id" id="slide-add-content-id" required="required" class="target hidden" />
<input type="text" name="content_id" id="{{ tclass }}-content-id" required="required" class="target hidden" />
<button type="button" class="btn btn-naked content-explr-picker">
<i class="fa fa-crosshairs"></i>
</button>
@ -50,25 +51,25 @@
<div class="form-group slide-schedule-group">
<label for="slide-add-cron-schedule">{{ l.slideshow_slide_form_label_cron_scheduled }}</label>
<label for="{{ tclass }}-cron-schedule">{{ l.slideshow_slide_form_label_cron_scheduled }}</label>
<div class="widget">
<select id="slide-add-cron-schedule-trigger" class="trigger"></select>
<input type="text" id="slide-add-cron-schedule-datetimepicker" class="input-naked datetimepicker"
<select id="{{ tclass }}-cron-schedule-trigger" class="trigger"></select>
<input type="text" id="{{ tclass }}-cron-schedule-datetimepicker" class="input-naked datetimepicker"
value=""
placeholder="{{ l.slideshow_slide_form_label_cron_scheduled_datetime_placeholder }}"/>
<input type="text" name="cron_schedule" id="slide-add-cron-schedule" class="target hidden"
<input type="text" name="cron_schedule" id="{{ tclass }}-cron-schedule" class="target hidden"
placeholder="{{ l.slideshow_slide_form_widget_cron_scheduled_placeholder }}"/>
</div>
</div>
<div class="form-group slide-schedule-end-group">
<label for="slide-add-cron-schedule-end">{{ l.slideshow_slide_form_label_cron_scheduled_end }}</label>
<label for="{{ tclass }}-cron-schedule-end">{{ l.slideshow_slide_form_label_cron_scheduled_end }}</label>
<div class="widget">
<select id="slide-add-cron-schedule-end-trigger" class="trigger"> </select>
<input type="text" id="slide-add-cron-schedule-end-datetimepicker" class="input-naked datetimepicker"
<select id="{{ tclass }}-cron-schedule-end-trigger" class="trigger"> </select>
<input type="text" id="{{ tclass }}-cron-schedule-end-datetimepicker" class="input-naked datetimepicker"
value=""
placeholder="{{ l.slideshow_slide_form_label_cron_scheduled_datetime_placeholder }}"/>
<input type="text" name="cron_schedule_end" id="slide-add-cron-schedule-end" class="target hidden"
<input type="text" name="cron_schedule_end" id="{{ tclass }}-cron-schedule-end" class="target hidden"
placeholder="{{ l.slideshow_slide_form_widget_cron_scheduled_placeholder }}"/>
</div>
</div>
@ -77,16 +78,16 @@
<label for="">{{ l.slideshow_slide_form_label_auto_duration }}</label>
<div class="widget">
<div class="toggle">
<input type="checkbox" class="slide-auto-duration" id="slide-add-auto-duration" />
<label for="slide-add-auto-duration"></label>
<input type="checkbox" class="slide-auto-duration" id="{{ tclass }}-auto-duration" />
<label for="{{ tclass }}-auto-duration"></label>
</div>
</div>
</div>
<div class="form-group slide-duration-group">
<label for="slide-add-duration">{{ l.slideshow_slide_form_label_duration }}</label>
<label for="{{ tclass }}-duration">{{ l.slideshow_slide_form_label_duration }}</label>
<div class="widget widget-unit">
<input type="number" name="duration" id="slide-add-duration" required="required" value="3" />
<input type="number" name="duration" id="{{ tclass }}-duration" required="required" value="3" />
<span class="unit">{{ l.slideshow_slide_form_label_duration_unit }}</span>
</div>
</div>

40
views/slideshow/slides/modal/edit.jinja.html
View File

@ -1,4 +1,5 @@
<div class="modal modal-slide-{{ 'notification-' if is_notification }}edit modal-slide hidden">
{% set tclass = 'slide-' ~ ('notification-' if is_notification ) ~ 'edit' %}
<div class="modal modal-{{ tclass }} modal-slide hidden">
<h2>
{% if is_notification %}
{{ l.slideshow_slide_form_edit_notification_title }}
@ -13,27 +14,26 @@
{{ l.slideshow_slide_form_section_content }}
</h3>
<input type="hidden" name="id" id="slide-edit-id"/>
<input type="hidden" name="id" id="{{ tclass }}-id"/>
<input type="hidden" name="is_notification" id="slide-edit-is-notification" value="{{ '1' if is_notification else '0' }}" />
<input type="hidden" name="is_notification" class="slide-is-notification" value="{{ '1' if is_notification else '0' }}" />
<div class="form-group form-group-horizontal">
<label for="">{{ l.slideshow_slide_form_label_enabled }}</label>
<div class="widget">
<div class="toggle">
<input type="checkbox" class="trigger slide-enabled" name="enabled" value="1"
id="slide-edit-enabled"/>
<label for="slide-edit-enabled"></label>
<input type="checkbox" class="trigger slide-enabled" name="enabled" value="1" id="{{ tclass }}-enabled"/>
<label for="{{ tclass }}-enabled"></label>
</div>
</div>
</div>
<div class="form-group slide-content-id-group">
<label for="slide-edit-content-id">{{ l.slideshow_slide_form_label_content_id }}</label>
<label for="{{ tclass }}-content-id">{{ l.slideshow_slide_form_label_content_id }}</label>
<div class="widget">
<input type="text" value="" class="disabled target-label content-explr-picker" />
<input type="hidden" name="content_id" id="slide-edit-content-id" required="required" class="target"></input>
<input type="hidden" name="content_id" id="{{ tclass }}-content-id" required="required" class="target" data-type=""></input>
<button type="button" class="btn btn-naked content-explr-picker">
<i class="fa fa-crosshairs"></i>
</button>
@ -49,25 +49,25 @@
</h3>
<div class="form-group slide-schedule-group">
<label for="slide-edit-cron-schedule">{{ l.slideshow_slide_form_label_cron_scheduled }}</label>
<label for="{{ tclass }}-cron-schedule">{{ l.slideshow_slide_form_label_cron_scheduled }}</label>
<div class="widget">
<select id="slide-edit-cron-schedule-trigger" class="trigger"></select>
<input type="text" id="slide-edit-cron-schedule-datetimepicker" class="input-naked datetimepicker"
<select id="{{ tclass }}-cron-schedule-trigger" class="trigger"></select>
<input type="text" id="{{ tclass }}-cron-schedule-datetimepicker" class="input-naked datetimepicker"
value=""
placeholder="{{ l.slideshow_slide_form_label_cron_scheduled_datetime_placeholder }}"/>
<input type="text" name="cron_schedule" id="slide-edit-cron-schedule" class="target hidden"
<input type="text" name="cron_schedule" id="{{ tclass }}-cron-schedule" class="target hidden"
placeholder="{{ l.slideshow_slide_form_widget_cron_scheduled_placeholder }}"/>
</div>
</div>
<div class="form-group slide-schedule-end-group">
<label for="slide-edit-cron-schedule-end">{{ l.slideshow_slide_form_label_cron_scheduled_end }}</label>
<label for="{{ tclass }}-cron-schedule-end">{{ l.slideshow_slide_form_label_cron_scheduled_end }}</label>
<div class="widget">
<select id="slide-edit-cron-schedule-end-trigger" class="trigger"></select>
<input type="text" id="slide-edit-cron-schedule-end-datetimepicker" class="input-naked datetimepicker"
<select id="{{ tclass }}-cron-schedule-end-trigger" class="trigger"></select>
<input type="text" id="{{ tclass }}-cron-schedule-end-datetimepicker" class="input-naked datetimepicker"
value=""
placeholder="{{ l.slideshow_slide_form_label_cron_scheduled_datetime_placeholder }}"/>
<input type="text" name="cron_schedule_end" id="slide-edit-cron-schedule-end" class="target hidden"
<input type="text" name="cron_schedule_end" id="{{ tclass }}-cron-schedule-end" class="target hidden"
placeholder="{{ l.slideshow_slide_form_widget_cron_scheduled_placeholder }}"/>
</div>
</div>
@ -76,16 +76,16 @@
<label for="">{{ l.slideshow_slide_form_label_auto_duration }}</label>
<div class="widget">
<div class="toggle">
<input type="checkbox" class="slide-auto-duration" id="slide-edit-auto-duration" />
<label for="slide-edit-auto-duration"></label>
<input type="checkbox" class="slide-auto-duration" id="{{ tclass }}-auto-duration" />
<label for="{{ tclass }}-auto-duration"></label>
</div>
</div>
</div>
<div class="form-group slide-duration-group">
<label for="slide-edit-duration">{{ l.slideshow_slide_form_label_duration }}</label>
<label for="{{ tclass }}-duration">{{ l.slideshow_slide_form_label_duration }}</label>
<div class="widget widget-unit">
<input type="number" name="duration" id="slide-edit-duration" required="required"/>
<input type="number" name="duration" id="{{ tclass }}-duration" required="required"/>
<span class="unit">{{ l.slideshow_slide_form_label_duration_unit }}</span>
</div>
</div>