283 lines
11 KiB
JavaScript
283 lines
11 KiB
JavaScript
jQuery(document).ready(function ($) {
|
|
const loadDateTimePicker = function($els) {
|
|
const d = new Date();
|
|
|
|
$els.each(function() {
|
|
var $el = $(this);
|
|
$el.flatpickr({
|
|
enableTime: true,
|
|
time_24hr: true,
|
|
allowInput: false,
|
|
allowInvalidPreload: false,
|
|
dateFormat: 'Y-m-d H:i',
|
|
defaultHour: d.getHours(),
|
|
defaultMinute: d.getMinutes(),
|
|
onChange: function(selectedDates, dateStr, instance) {
|
|
const d = selectedDates[0];
|
|
const $target = $el.parents('.widget:eq(0)').find('.target');
|
|
$target.val(
|
|
d ? `${d.getMinutes()} ${d.getHours()} ${d.getDate()} ${(d.getMonth() + 1)} * ${d.getFullYear()}` : ''
|
|
);
|
|
}
|
|
});
|
|
$el.addClass('hidden');
|
|
})
|
|
};
|
|
|
|
const getId = function ($el) {
|
|
return $el.hasClass('slide-item') ? $el.attr('data-level') : $el.parents('.slide-item:eq(0)').attr('data-level');
|
|
};
|
|
|
|
const updatePositions = function (table, row) {
|
|
const positions = {};
|
|
$('.slide-item').each(function (index) {
|
|
positions[getId($(this))] = index;
|
|
});
|
|
|
|
$.ajax({
|
|
method: 'POST',
|
|
url: '/slideshow/slide/position',
|
|
headers: {'Content-Type': 'application/json'},
|
|
data: JSON.stringify(positions),
|
|
});
|
|
};
|
|
|
|
const inputTypeUpdate = function () {
|
|
const $modal = $('.modal-slide:visible');
|
|
const $el = $('#slide-add-type');
|
|
const value = $el.val();
|
|
const inputType = $el.find('option').filter(function (i, el) {
|
|
return $(el).val() === value;
|
|
}).data('input');
|
|
|
|
if ($modal.find('.picker:visible').length === 0) {
|
|
$('.slide-add-object-input')
|
|
.addClass('hidden')
|
|
.prop('disabled', true).prop('required', false)
|
|
.filter('#slide-add-object-input-' + inputType)
|
|
.removeClass('hidden')
|
|
.prop('disabled', false).prop('required', true)
|
|
;
|
|
}
|
|
};
|
|
|
|
const inputSchedulerUpdate = function() {
|
|
const $modal = $('.modal-slide:visible');
|
|
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 $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 $datetimepickerStart = $scheduleStartGroup.find('.datetimepicker');
|
|
const $datetimepickerEnd = $scheduleEndGroup.find('.datetimepicker');
|
|
const $isNotification = $isNotificationGroup.find('.trigger');
|
|
|
|
const isNotification = $isNotification.prop('checked');
|
|
let isLoopStart = $triggerStart.val() === 'loop';
|
|
let isCronStart = $triggerStart.val() === 'cron';
|
|
|
|
function updateScheduleChoices(isNotification, isLoopStart, isCronStart) {
|
|
let scheduleStartChoices = $.extend({}, schedule_start_choices);
|
|
let scheduleEndChoices = $.extend({}, schedule_end_choices);
|
|
|
|
if (!isNotification || isLoopStart) {
|
|
delete scheduleStartChoices['cron'];
|
|
delete scheduleEndChoices['duration'];
|
|
}
|
|
|
|
if (isNotification) {
|
|
delete scheduleStartChoices['loop'];
|
|
delete scheduleEndChoices['stayloop'];
|
|
|
|
if (isCronStart) {
|
|
delete scheduleEndChoices['datetime'];
|
|
}
|
|
}
|
|
|
|
return { scheduleStartChoices, scheduleEndChoices };
|
|
}
|
|
|
|
function applyChoices() {
|
|
const { scheduleStartChoices, scheduleEndChoices } = updateScheduleChoices(isNotification, isLoopStart, isCronStart);
|
|
recreateSelectOptions($triggerStart, scheduleStartChoices);
|
|
recreateSelectOptions($triggerEnd, scheduleEndChoices);
|
|
}
|
|
|
|
applyChoices();
|
|
|
|
isLoopStart = $triggerStart.val() === 'loop';
|
|
isCronStart = $triggerStart.val() === 'cron';
|
|
|
|
const isCronEnd = $triggerEnd.val() === 'cron';
|
|
const isDatetimeStart = $triggerStart.val() === 'datetime';
|
|
const isDatetimeEnd = $triggerEnd.val() === 'datetime';
|
|
const isStayloopEnd = $triggerEnd.val() === 'stayloop';
|
|
const isDurationEnd = $triggerEnd.val() === 'duration';
|
|
|
|
const flushValueStart = isLoopStart;
|
|
const flushValueEnd = isLoopStart || isStayloopEnd || isDurationEnd;
|
|
const flushDuration = isNotification && isDatetimeEnd;
|
|
|
|
function toggleVisibility() {
|
|
$targetCronFieldStart.toggleClass('hidden', !isCronStart);
|
|
$targetCronFieldEnd.toggleClass('hidden', !isCronEnd);
|
|
$datetimepickerStart.toggleClass('hidden', !isDatetimeStart);
|
|
$datetimepickerEnd.toggleClass('hidden', !isDatetimeEnd);
|
|
|
|
$durationGroup.toggleClass('hidden', isNotification && isDatetimeEnd);
|
|
$scheduleEndGroup.toggleClass('hidden', isLoopStart);
|
|
|
|
$durationGroup.find('.widget input').prop('required', $durationGroup.is(':visible'));
|
|
}
|
|
|
|
function flushValues() {
|
|
if (flushValueStart) {
|
|
$targetCronFieldStart.val('');
|
|
$datetimepickerStart.val('');
|
|
}
|
|
|
|
if (flushValueEnd) {
|
|
$targetCronFieldEnd.val('');
|
|
$datetimepickerEnd.val('');
|
|
}
|
|
|
|
if (flushDuration) {
|
|
$targetDuration.val('1');
|
|
}
|
|
}
|
|
|
|
toggleVisibility();
|
|
flushValues();
|
|
applyChoices();
|
|
};
|
|
|
|
|
|
const main = function () {
|
|
$("ul.slides").sortable({
|
|
handle: 'a.slide-sort',
|
|
update: updatePositions
|
|
});
|
|
};
|
|
|
|
$(document).on('change', '.modal-slide select.trigger, .modal-slide input.trigger', function () {
|
|
inputSchedulerUpdate();
|
|
});
|
|
|
|
$(document).on('change', '#slide-add-type', inputTypeUpdate);
|
|
|
|
// $(document).on('click', '.picker button', function () {
|
|
// const $parent = $(this).parents('.modal-slide-add');
|
|
// $parent.find('.picker').addClass('hidden').find('select').prop('disabled', true);
|
|
// $parent.find('.upload').removeClass('hidden').find('input,select').prop('disabled', false);
|
|
// inputTypeUpdate();
|
|
// });
|
|
|
|
$(document).on('click', '.slide-add', function () {
|
|
showModal('modal-slide-add');
|
|
const $modal = $('.modal-slide-add:visible');
|
|
loadDateTimePicker($modal.find('.datetimepicker'));
|
|
// $modal.find('.picker').removeClass('hidden').find('select').prop('disabled', false);
|
|
// $modal.find('.upload').addClass('hidden').find('input,select').prop('disabled', true);
|
|
// $modal.find('button[type=submit]').removeClass('hidden');
|
|
// $modal.find('.btn-loading').addClass('hidden');
|
|
inputTypeUpdate();
|
|
inputSchedulerUpdate();
|
|
inputContentUpdate();
|
|
$('.modal-slide-add input:eq(0)').focus().select();
|
|
});
|
|
|
|
$(document).on('click', '.content-explr-picker', function () {
|
|
showPickers('modal-content-explr-picker', function(content) {
|
|
inputContentUpdate(content)
|
|
});
|
|
});
|
|
|
|
const inputContentUpdate = function(content) {
|
|
const $modal = $('.modal-slide:visible');
|
|
const $group = $modal.find('.slide-content-id-group');
|
|
const $inputLabel = $group.find('.target-label');
|
|
const $inputId = $group.find('.target');
|
|
const $actionShow = $group.find('.slide-content-show');
|
|
|
|
if (content === undefined || !content.id) {
|
|
$inputLabel.val('');
|
|
$inputId.val('');
|
|
$actionShow.addClass('hidden');
|
|
return;
|
|
}
|
|
|
|
$inputLabel.val(content.name);
|
|
$inputId.val(content.id);
|
|
$actionShow.removeClass('hidden');
|
|
};
|
|
|
|
$(document).on('click', '.slide-content-show', function () {
|
|
window.open($(this).attr('data-route').replace('__id__', $(this).parents('.widget:eq(0)').find('.target').val()));
|
|
});
|
|
|
|
$(document).on('click', '.slide-edit', function () {
|
|
const slide = JSON.parse($(this).parents('.slide-item:eq(0)').attr('data-entity'));
|
|
showModal('modal-slide-edit');
|
|
|
|
const hasCron = slide.cron_schedule && slide.cron_schedule.length > 0;
|
|
const hasDateTime = hasCron && validateCronDateTime(slide.cron_schedule);
|
|
|
|
const hasCronEnd = slide.cron_schedule_end && slide.cron_schedule_end.length > 0;
|
|
const hasDateTimeEnd = hasCronEnd && validateCronDateTime(slide.cron_schedule_end);
|
|
const isNotification = slide.is_notification;
|
|
|
|
inputContentUpdate(slide.content);
|
|
|
|
$('.modal-slide-edit input:visible:eq(0)').focus().select();
|
|
$('#slide-edit-duration').val(slide.duration);
|
|
$('#slide-edit-is-notification').prop('checked', isNotification);
|
|
$('#slide-edit-enabled').prop('checked', slide.enabled);
|
|
|
|
$('#slide-edit-cron-schedule').val(slide.cron_schedule).toggleClass('hidden', !hasCron || hasDateTime);
|
|
$('#slide-edit-cron-schedule-trigger').val(hasDateTime ? 'datetime' : (hasCron ? 'cron' : 'loop'));
|
|
|
|
$('#slide-edit-cron-schedule-end').val(slide.cron_schedule_end).toggleClass('hidden', !hasCronEnd || hasDateTimeEnd);
|
|
$('#slide-edit-cron-schedule-end-trigger').val(hasDateTimeEnd ? 'datetime' : (hasCronEnd ? 'cron' : (isNotification ? 'duration' : 'stayloop')));
|
|
|
|
$('#slide-edit-cron-schedule-datetimepicker').toggleClass('hidden', !hasDateTime).val(
|
|
hasDateTime ? getCronDateTime(slide.cron_schedule) : ''
|
|
);
|
|
|
|
$('#slide-edit-cron-schedule-end-datetimepicker').toggleClass('hidden', !hasDateTimeEnd).val(
|
|
hasDateTimeEnd ? getCronDateTime(slide.cron_schedule_end) : ''
|
|
);
|
|
$('#slide-edit-id').val(slide.id);
|
|
loadDateTimePicker($('.modal-slide-edit .datetimepicker'));
|
|
|
|
inputSchedulerUpdate();
|
|
});
|
|
|
|
$(document).on('click', '.slide-delete', function () {
|
|
if (confirm(l.js_slideshow_slide_delete_confirmation)) {
|
|
const $item = $(this).parents('.slide-item:eq(0)');
|
|
$item.remove();
|
|
$.ajax({
|
|
method: 'DELETE',
|
|
url: $(this).attr('data-route').replace('__id__', getId($(this))),
|
|
headers: {'Content-Type': 'application/json'},
|
|
success: function(response) {
|
|
$('.playlist-item-'+response.playlist_id+' .playlist-duration').html(secondsToHHMMSS(response.duration));
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
$(document).on('submit', '.modal-slide-add form', function () {
|
|
$(this).find('button[type=submit]').addClass('hidden');
|
|
$(this).find('.btn-loading').removeClass('hidden');
|
|
});
|
|
|
|
main();
|
|
});
|