1117 lines
36 KiB
JavaScript
1117 lines
36 KiB
JavaScript
(function () {
|
|
var webUiHelpers = window.webUiHelpers || {};
|
|
var escapeHtml = webUiHelpers.escapeHtml;
|
|
var formatDashboardDate = webUiHelpers.formatDashboardDate;
|
|
var getClientRowKey = webUiHelpers.getClientRowKey;
|
|
var getClientDisplayName = webUiHelpers.getClientDisplayName;
|
|
var setButtonVariant = webUiHelpers.setButtonVariant;
|
|
var normalizeDisplayIp = webUiHelpers.normalizeDisplayIp;
|
|
|
|
function initConfirmForms() {
|
|
document.addEventListener('submit', function (event) {
|
|
var form = event.target;
|
|
if (!form || !form.getAttribute) {
|
|
return;
|
|
}
|
|
if (form.hasAttribute && form.hasAttribute('data-async-command')) {
|
|
return;
|
|
}
|
|
var message = form.getAttribute('data-confirm-message');
|
|
if (message && !window.confirm(message)) {
|
|
event.preventDefault();
|
|
return;
|
|
}
|
|
|
|
var actionPath = '';
|
|
try {
|
|
actionPath = new URL(form.action, window.location.href).pathname;
|
|
} catch (_error) {
|
|
actionPath = String(form.action || '');
|
|
}
|
|
|
|
if (!/\/delete(?:\/|$)/.test(actionPath)) {
|
|
return;
|
|
}
|
|
|
|
if (form.dataset && form.dataset.busy === 'true') {
|
|
event.preventDefault();
|
|
return;
|
|
}
|
|
|
|
event.preventDefault();
|
|
form.dataset.busy = 'true';
|
|
|
|
fetch(form.action, {
|
|
method: (form.method || 'POST').toUpperCase(),
|
|
headers: {
|
|
'X-Requested-With': 'XMLHttpRequest',
|
|
'Accept': 'application/json, text/plain, */*'
|
|
},
|
|
credentials: 'same-origin'
|
|
}).then(function (response) {
|
|
if (!response.ok) {
|
|
return response.text().then(function (text) {
|
|
var error = new Error(text || 'Unable to delete item.');
|
|
error.status = response.status;
|
|
throw error;
|
|
});
|
|
}
|
|
|
|
if (isLoginRedirect(response)) {
|
|
window.location.replace(response.url || '/login');
|
|
return;
|
|
}
|
|
|
|
window.location.replace(response.url || window.location.href);
|
|
}).catch(function (error) {
|
|
if (typeof showToast === 'function') {
|
|
var status = Number(error && error.status);
|
|
var variant = status === 403 ? 'warning' : status >= 400 && status < 500 ? 'warning' : 'danger';
|
|
showToast(error.message || 'Unable to delete item.', variant);
|
|
return;
|
|
}
|
|
window.alert(error.message || 'Unable to delete item.');
|
|
}).finally(function () {
|
|
delete form.dataset.busy;
|
|
});
|
|
});
|
|
}
|
|
|
|
function updateDataSourceToggle(form, response) {
|
|
var toggleButton = document.querySelector('button[form="' + form.id + '"][data-async-data-source-toggle]');
|
|
if (!toggleButton) {
|
|
return;
|
|
}
|
|
|
|
var willEnable = toggleButton.getAttribute('data-enabled') !== 'true';
|
|
toggleButton.setAttribute('data-enabled', willEnable ? 'true' : 'false');
|
|
toggleButton.className = toggleButton.className.replace(/btn-(danger|success)/g, willEnable ? 'btn-danger' : 'btn-success');
|
|
toggleButton.innerHTML = '<i class="bi ' + (willEnable ? 'bi-pause-fill' : 'bi-play-fill') + ' me-1" aria-hidden="true"></i>' + (willEnable ? 'Disable' : 'Enable');
|
|
|
|
var message = '';
|
|
try {
|
|
message = new URL(response.url, window.location.href).searchParams.get('message') || '';
|
|
} catch (_error) {
|
|
message = '';
|
|
}
|
|
if (typeof showToast === 'function') {
|
|
showToast(message || (willEnable ? 'Data source enabled.' : 'Data source disabled.'), 'success');
|
|
}
|
|
}
|
|
|
|
function initDeleteButtons() {
|
|
document.addEventListener('click', function (event) {
|
|
var deleteButton = event.target.closest('[data-delete-action-url]');
|
|
if (!deleteButton) {
|
|
return;
|
|
}
|
|
|
|
if (deleteButton.disabled || (deleteButton.dataset && deleteButton.dataset.busy === 'true')) {
|
|
event.preventDefault();
|
|
return;
|
|
}
|
|
|
|
var actionUrl = deleteButton.getAttribute('data-delete-action-url');
|
|
if (!actionUrl) {
|
|
return;
|
|
}
|
|
|
|
var message = deleteButton.getAttribute('data-confirm-message');
|
|
if (message && !window.confirm(message)) {
|
|
event.preventDefault();
|
|
return;
|
|
}
|
|
|
|
event.preventDefault();
|
|
deleteButton.dataset.busy = 'true';
|
|
|
|
fetch(actionUrl, {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-Requested-With': 'XMLHttpRequest',
|
|
'Accept': 'application/json, text/plain, */*'
|
|
},
|
|
credentials: 'same-origin'
|
|
}).then(function (response) {
|
|
if (!response.ok) {
|
|
return response.text().then(function (text) {
|
|
var error = new Error(text || 'Unable to delete item.');
|
|
error.status = response.status;
|
|
throw error;
|
|
});
|
|
}
|
|
|
|
if (isLoginRedirect(response)) {
|
|
window.location.replace(response.url || '/login');
|
|
return;
|
|
}
|
|
|
|
window.location.replace(response.url || window.location.href);
|
|
}).catch(function (error) {
|
|
if (typeof showToast === 'function') {
|
|
var status = Number(error && error.status);
|
|
var variant = status === 403 ? 'warning' : status >= 400 && status < 500 ? 'warning' : 'danger';
|
|
showToast(error.message || 'Unable to delete item.', variant);
|
|
return;
|
|
}
|
|
window.alert(error.message || 'Unable to delete item.');
|
|
}).finally(function () {
|
|
delete deleteButton.dataset.busy;
|
|
});
|
|
});
|
|
}
|
|
|
|
function markFormDirty(form) {
|
|
if (!form || !form.hasAttribute || form.hasAttribute('data-clean-on-load')) {
|
|
return;
|
|
}
|
|
form.dataset.dirty = 'true';
|
|
}
|
|
|
|
function clearFormDirty(form) {
|
|
if (!form) {
|
|
return;
|
|
}
|
|
form.dataset.dirty = 'false';
|
|
}
|
|
|
|
function isFormDirty(form) {
|
|
return Boolean(form && form.dataset && form.dataset.dirty === 'true');
|
|
}
|
|
|
|
function isRegionEditorField(target) {
|
|
return Boolean(target && typeof target.closest === 'function' && target.closest('.region-item'));
|
|
}
|
|
|
|
function initDirtyTracking() {
|
|
document.addEventListener('input', function (event) {
|
|
var target = event.target;
|
|
if (!target || !target.form || isRegionEditorField(target)) {
|
|
return;
|
|
}
|
|
markFormDirty(target.form);
|
|
}, true);
|
|
|
|
document.addEventListener('change', function (event) {
|
|
var target = event.target;
|
|
if (!target || !target.form || isRegionEditorField(target)) {
|
|
return;
|
|
}
|
|
markFormDirty(target.form);
|
|
}, true);
|
|
}
|
|
|
|
function clampLimitedInputValue(input) {
|
|
if (!input || !input.matches || !input.matches('input[data-limit-input-value]')) {
|
|
return;
|
|
}
|
|
|
|
var minAttr = input.getAttribute('min');
|
|
var maxAttr = input.getAttribute('max');
|
|
var minValue = minAttr === null || minAttr === '' ? null : Number(minAttr);
|
|
var maxValue = maxAttr === null || maxAttr === '' ? null : Number(maxAttr);
|
|
var rawValue = String(input.value || '').trim();
|
|
|
|
if (!rawValue) {
|
|
return;
|
|
}
|
|
|
|
var numericValue = Number(rawValue);
|
|
if (!Number.isFinite(numericValue)) {
|
|
return;
|
|
}
|
|
|
|
if (Number.isFinite(minValue) && numericValue < minValue) {
|
|
input.value = String(minValue);
|
|
return;
|
|
}
|
|
|
|
if (Number.isFinite(maxValue) && numericValue > maxValue) {
|
|
input.value = String(maxValue);
|
|
}
|
|
}
|
|
|
|
function initLimitedInputValues() {
|
|
document.addEventListener('input', function (event) {
|
|
clampLimitedInputValue(event.target);
|
|
}, true);
|
|
|
|
document.addEventListener('change', function (event) {
|
|
clampLimitedInputValue(event.target);
|
|
}, true);
|
|
|
|
document.addEventListener('paste', function (event) {
|
|
var target = event.target;
|
|
if (!target || !target.matches || !target.matches('input[data-limit-input-value]')) {
|
|
return;
|
|
}
|
|
|
|
window.setTimeout(function () {
|
|
clampLimitedInputValue(target);
|
|
}, 0);
|
|
}, true);
|
|
}
|
|
|
|
function clampLimitedTextValue(input) {
|
|
if (!input || !input.matches || !input.matches('input[data-limit-text-length], textarea[data-limit-text-length]')) {
|
|
return;
|
|
}
|
|
|
|
var maxLength = Number(input.getAttribute('maxlength'));
|
|
if (!Number.isFinite(maxLength) || maxLength < 1) {
|
|
return;
|
|
}
|
|
|
|
var value = String(input.value || '');
|
|
if (value.length > maxLength) {
|
|
input.value = value.slice(0, maxLength);
|
|
}
|
|
}
|
|
|
|
function initLimitedTextInputValues() {
|
|
document.addEventListener('input', function (event) {
|
|
clampLimitedTextValue(event.target);
|
|
}, true);
|
|
|
|
document.addEventListener('change', function (event) {
|
|
clampLimitedTextValue(event.target);
|
|
}, true);
|
|
|
|
document.addEventListener('paste', function (event) {
|
|
var target = event.target;
|
|
if (!target || !target.matches || !target.matches('input[data-limit-text-length], textarea[data-limit-text-length]')) {
|
|
return;
|
|
}
|
|
|
|
window.setTimeout(function () {
|
|
clampLimitedTextValue(target);
|
|
}, 0);
|
|
}, true);
|
|
}
|
|
|
|
function initCancelConfirm() {
|
|
document.addEventListener('click', function (event) {
|
|
var cancelTarget = event.target.closest('[data-confirm-unsaved]');
|
|
if (!cancelTarget) {
|
|
return;
|
|
}
|
|
|
|
var form = cancelTarget.form || cancelTarget.closest('form') || document.querySelector('form[data-dirty="true"]');
|
|
if (!isFormDirty(form)) {
|
|
return;
|
|
}
|
|
|
|
var message = cancelTarget.getAttribute('data-confirm-unsaved') || 'You have unsaved changes. Leave this page?';
|
|
if (!window.confirm(message)) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
}
|
|
}, true);
|
|
}
|
|
|
|
function parseAsyncSaveResponseMessage(responseText) {
|
|
var savedMessage = '';
|
|
try {
|
|
var responseDocument = new DOMParser().parseFromString(responseText || '', 'text/html');
|
|
var toastBody = responseDocument.querySelector('.toast-body');
|
|
if (toastBody && toastBody.textContent) {
|
|
savedMessage = toastBody.textContent.trim();
|
|
}
|
|
} catch (_error) {
|
|
savedMessage = '';
|
|
}
|
|
|
|
return savedMessage;
|
|
}
|
|
|
|
function parseAsyncSaveErrorMessage(responseText) {
|
|
var errorMessage = parseAsyncSaveResponseMessage(responseText);
|
|
if (errorMessage) {
|
|
return errorMessage;
|
|
}
|
|
|
|
return String(responseText || '').trim();
|
|
}
|
|
|
|
function isWarningSaveError(error) {
|
|
var status = Number(error && error.status);
|
|
if (status === 400 || status === 422) {
|
|
return true;
|
|
}
|
|
|
|
return /region names must be unique/i.test(String(error && error.message || ''));
|
|
}
|
|
|
|
function getAsyncSaveActionField(form) {
|
|
if (!form || !form.querySelector) {
|
|
return null;
|
|
}
|
|
|
|
return form.querySelector('input[type="hidden"][name="save_action"]') || form.querySelector('input[type="hidden"][name="action"]');
|
|
}
|
|
|
|
function isLoginRedirect(response) {
|
|
if (!response || !response.redirected || !response.url) {
|
|
return false;
|
|
}
|
|
|
|
try {
|
|
return new URL(response.url, window.location.href).pathname === '/login';
|
|
} catch (_error) {
|
|
return /\/login(?:[?#]|$)/.test(String(response.url || ''));
|
|
}
|
|
}
|
|
|
|
async function submitAsyncSaveForm(form, event, options) {
|
|
var settings = options || {};
|
|
if (!form || !form.hasAttribute || !form.hasAttribute('data-async-save')) {
|
|
return false;
|
|
}
|
|
|
|
if (form.dataset && form.dataset.busy === 'true') {
|
|
if (event) {
|
|
event.preventDefault();
|
|
}
|
|
return false;
|
|
}
|
|
|
|
var message = form.getAttribute('data-confirm-message');
|
|
if (message && !window.confirm(message)) {
|
|
if (event) {
|
|
event.preventDefault();
|
|
}
|
|
return false;
|
|
}
|
|
|
|
if (event) {
|
|
event.preventDefault();
|
|
}
|
|
|
|
form.dataset.busy = 'true';
|
|
|
|
try {
|
|
if (typeof settings.beforeSubmit === 'function') {
|
|
var beforeResult = await settings.beforeSubmit(form, event);
|
|
if (beforeResult === false) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
var hiddenSaveAction = getAsyncSaveActionField(form);
|
|
var formData = new FormData(form);
|
|
var submitterValue = String((hiddenSaveAction && hiddenSaveAction.value) || form.dataset.submitterValue || '').trim().toLowerCase();
|
|
if (event && event.submitter && event.submitter.name) {
|
|
submitterValue = String(event.submitter.value || '').trim().toLowerCase();
|
|
formData.set(event.submitter.name, event.submitter.value || '');
|
|
}
|
|
|
|
var hasFileValue = false;
|
|
formData.forEach(function (value) {
|
|
if (value && typeof value === 'object' && typeof value.name === 'string') {
|
|
hasFileValue = true;
|
|
}
|
|
});
|
|
|
|
var isMultipart = hasFileValue || String(form.enctype || '').toLowerCase() === 'multipart/form-data';
|
|
var body = isMultipart ? formData : new URLSearchParams();
|
|
|
|
if (!isMultipart) {
|
|
formData.forEach(function (value, key) {
|
|
body.append(key, value);
|
|
});
|
|
}
|
|
|
|
var response = await fetch(form.action, {
|
|
method: (form.method || 'POST').toUpperCase(),
|
|
headers: Object.assign({
|
|
'X-Requested-With': 'XMLHttpRequest',
|
|
'Accept': 'text/html, application/json, text/plain, */*'
|
|
}, isMultipart ? {} : {
|
|
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
|
|
}),
|
|
body: isMultipart ? body : body.toString(),
|
|
credentials: 'same-origin'
|
|
});
|
|
|
|
if (!response.ok) {
|
|
var responseText = await response.text();
|
|
var error = new Error(parseAsyncSaveErrorMessage(responseText) || (settings.errorMessage || 'Unable to save changes.'));
|
|
error.status = response.status;
|
|
throw error;
|
|
}
|
|
|
|
if (isLoginRedirect(response)) {
|
|
window.location.replace(response.url || '/login');
|
|
return true;
|
|
}
|
|
|
|
var responseText = await response.text();
|
|
var responseDocument = null;
|
|
try {
|
|
responseDocument = new DOMParser().parseFromString(responseText || '', 'text/html');
|
|
} catch (_error) {
|
|
responseDocument = null;
|
|
}
|
|
|
|
if (typeof settings.afterSuccess === 'function') {
|
|
await settings.afterSuccess({
|
|
form: form,
|
|
response: response,
|
|
responseText: responseText,
|
|
responseDocument: responseDocument,
|
|
submitterValue: submitterValue
|
|
});
|
|
}
|
|
|
|
try {
|
|
form.dispatchEvent(new CustomEvent('web-async-save:success', {
|
|
bubbles: true,
|
|
detail: {
|
|
form: form,
|
|
response: response,
|
|
responseText: responseText,
|
|
responseDocument: responseDocument,
|
|
submitterValue: submitterValue
|
|
}
|
|
}));
|
|
} catch (_error) {
|
|
// Ignore event dispatch failures and continue the save flow.
|
|
}
|
|
|
|
clearFormDirty(form);
|
|
|
|
if (submitterValue === 'close' || submitterValue === 'new') {
|
|
var redirectUrl = submitterValue === 'close'
|
|
? String(response.url || form.dataset.asyncSaveCloseUrl || window.location.href)
|
|
: String(response.url || form.dataset.asyncSaveNewUrl || window.location.href);
|
|
window.location.replace(redirectUrl);
|
|
return true;
|
|
}
|
|
|
|
if (form.dataset && form.dataset.asyncSaveNewRedirect === 'response-url') {
|
|
window.location.replace(String(response.url || form.dataset.asyncSaveNewUrl || window.location.href));
|
|
return true;
|
|
}
|
|
|
|
var successMessage = typeof settings.getSuccessMessage === 'function'
|
|
? settings.getSuccessMessage({
|
|
form: form,
|
|
response: response,
|
|
responseText: responseText,
|
|
responseDocument: responseDocument,
|
|
submitterValue: submitterValue
|
|
})
|
|
: parseAsyncSaveResponseMessage(responseText);
|
|
|
|
var resolvedSuccessMessage = successMessage || String(settings.fallbackSuccessMessage || 'Saved.');
|
|
|
|
if (form.dataset && form.dataset.asyncSaveRefreshPage === 'true') {
|
|
if (typeof window.queueToastAfterRefresh === 'function') {
|
|
window.queueToastAfterRefresh(resolvedSuccessMessage, 'success');
|
|
} else if (typeof showToast === 'function') {
|
|
showToast(resolvedSuccessMessage, 'success');
|
|
}
|
|
window.setTimeout(function () {
|
|
window.location.reload();
|
|
}, 1000);
|
|
return true;
|
|
}
|
|
|
|
showToast(resolvedSuccessMessage, 'success');
|
|
return true;
|
|
} catch (error) {
|
|
if (typeof showToast === 'function') {
|
|
var variant = isWarningSaveError(error) ? 'warning' : 'danger';
|
|
showToast(error && error.message ? error.message : (settings.errorMessage || 'Unable to save changes.'), variant);
|
|
} else {
|
|
window.alert(error && error.message ? error.message : (settings.errorMessage || 'Unable to save changes.'));
|
|
}
|
|
return false;
|
|
} finally {
|
|
delete form.dataset.busy;
|
|
delete form.dataset.submitterValue;
|
|
if (typeof settings.afterFinally === 'function') {
|
|
settings.afterFinally(form);
|
|
}
|
|
var hiddenInput = getAsyncSaveActionField(form);
|
|
if (hiddenInput) {
|
|
hiddenInput.value = '';
|
|
}
|
|
}
|
|
}
|
|
|
|
window.webAsyncSaveForm = window.webAsyncSaveForm || {};
|
|
window.webAsyncSaveForm.submit = submitAsyncSaveForm;
|
|
window.webAsyncSaveForm.parseResponseMessage = parseAsyncSaveResponseMessage;
|
|
|
|
function initAsyncCommandForms() {
|
|
function getAnnouncementActionState(actionPath) {
|
|
var isPlay = /\/play$/.test(actionPath);
|
|
return {
|
|
nextActionPath: actionPath.replace(/\/(?:play|stop)$/, isPlay ? '/stop' : '/play'),
|
|
nextLabel: isPlay ? 'Stop' : 'Play',
|
|
nextIcon: isPlay ? 'bi-stop-fill' : 'bi-play-fill',
|
|
nextClassName: isPlay ? 'btn-outline-warning' : 'btn-outline-success',
|
|
nextConfirmMessage: isPlay
|
|
? 'Stop this announcement on the selected screens now?'
|
|
: 'Send this announcement to the selected screens now?'
|
|
};
|
|
}
|
|
|
|
function updateAnnouncementActionButton(form, actionPath) {
|
|
if (!form) {
|
|
return false;
|
|
}
|
|
|
|
var state = getAnnouncementActionState(actionPath);
|
|
var visibleButton = form.querySelector('button[type="submit"]') || (form.id ? document.querySelector('button[form="' + form.id + '"]') : null);
|
|
if (!visibleButton) {
|
|
return false;
|
|
}
|
|
|
|
form.action = state.nextActionPath;
|
|
form.setAttribute('data-confirm-message', state.nextConfirmMessage);
|
|
visibleButton.className = visibleButton.className.replace(/btn-outline-(success|warning)/g, state.nextClassName);
|
|
visibleButton.innerHTML = '<i class="bi ' + state.nextIcon + ' me-1" aria-hidden="true"></i>' + state.nextLabel;
|
|
return true;
|
|
}
|
|
|
|
function updateFontToggleRow(form) {
|
|
if (!form) {
|
|
return false;
|
|
}
|
|
|
|
var row = form.closest ? form.closest('tr[data-font-toggle-row]') : null;
|
|
if (!row) {
|
|
return false;
|
|
}
|
|
|
|
var enabledInput = form.querySelector('input[name="enabled"]');
|
|
var toggleButton = form.querySelector('button[type="submit"]');
|
|
var statusBadge = row.querySelector('[data-font-status-badge]');
|
|
var isCurrentlyEnabled = String(row.getAttribute('data-font-enabled') || '').trim() === 'true';
|
|
var willEnable = !isCurrentlyEnabled;
|
|
|
|
if (enabledInput) {
|
|
enabledInput.value = isCurrentlyEnabled ? '0' : '1';
|
|
}
|
|
|
|
if (toggleButton) {
|
|
toggleButton.textContent = willEnable ? 'Disable' : 'Enable';
|
|
}
|
|
|
|
if (statusBadge) {
|
|
statusBadge.className = statusBadge.className.replace(/text-bg-(success|secondary)/g, willEnable ? 'text-bg-success' : 'text-bg-secondary');
|
|
statusBadge.textContent = willEnable ? 'Enabled' : 'Disabled';
|
|
}
|
|
|
|
row.setAttribute('data-font-enabled', willEnable ? 'true' : 'false');
|
|
return true;
|
|
}
|
|
|
|
document.addEventListener('submit', function (event) {
|
|
var form = event.target;
|
|
if (!form || !form.hasAttribute || !form.hasAttribute('data-async-command')) {
|
|
return;
|
|
}
|
|
|
|
if (form.dataset && form.dataset.busy === 'true') {
|
|
event.preventDefault();
|
|
return;
|
|
}
|
|
|
|
var message = form.getAttribute('data-confirm-message');
|
|
if (message && !window.confirm(message)) {
|
|
event.preventDefault();
|
|
return;
|
|
}
|
|
|
|
var actionPath = '';
|
|
try {
|
|
actionPath = new URL(form.action, window.location.href).pathname;
|
|
} catch (_error) {
|
|
actionPath = String(form.action || '');
|
|
}
|
|
var shouldReloadAfterSuccess = /^\/announcements\/\d+\/(?:play|stop)$/.test(actionPath);
|
|
|
|
event.preventDefault();
|
|
|
|
form.dataset.busy = 'true';
|
|
|
|
var formData = new FormData(form);
|
|
var body = new URLSearchParams();
|
|
formData.forEach(function (value, key) {
|
|
body.append(key, value);
|
|
});
|
|
|
|
fetch(form.action, {
|
|
method: (form.method || 'POST').toUpperCase(),
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
|
|
'X-Requested-With': 'XMLHttpRequest',
|
|
'Accept': 'application/json, text/plain, */*'
|
|
},
|
|
body: body.toString(),
|
|
credentials: 'same-origin'
|
|
}).then(function (response) {
|
|
if (!response || Number(response.status) >= 400) {
|
|
return;
|
|
}
|
|
|
|
if (/^\/settings\/fonts\/[^/]+\/toggle$/.test(actionPath)) {
|
|
updateFontToggleRow(form);
|
|
return;
|
|
}
|
|
|
|
if (/^\/data-sources\/(?:api-sources|rss-feeds|weather)\/\d+$/.test(actionPath)) {
|
|
updateDataSourceToggle(form, response);
|
|
return;
|
|
}
|
|
|
|
if (shouldReloadAfterSuccess && response && response.ok) {
|
|
window.location.reload();
|
|
return;
|
|
}
|
|
}).finally(function () {
|
|
delete form.dataset.busy;
|
|
});
|
|
}, true);
|
|
}
|
|
|
|
function initAsyncSaveForms() {
|
|
var refreshSequence = 0;
|
|
|
|
function setSaveActionValue(form, value) {
|
|
if (!form) {
|
|
return;
|
|
}
|
|
|
|
var hiddenInput = getAsyncSaveActionField(form);
|
|
if (!hiddenInput) {
|
|
hiddenInput = document.createElement('input');
|
|
hiddenInput.type = 'hidden';
|
|
hiddenInput.name = 'save_action';
|
|
form.appendChild(hiddenInput);
|
|
}
|
|
|
|
hiddenInput.value = String(value || '').trim().toLowerCase();
|
|
}
|
|
|
|
function getResponseQueryValue(responseUrl, key) {
|
|
try {
|
|
var url = new URL(responseUrl, window.location.href);
|
|
return String(url.searchParams.get(key) || '').trim();
|
|
} catch (_error) {
|
|
return '';
|
|
}
|
|
}
|
|
|
|
function rebindRefreshTarget(targetElement) {
|
|
if (!targetElement) {
|
|
return;
|
|
}
|
|
|
|
if (typeof window.initJsonTogglePanels === 'function') {
|
|
window.initJsonTogglePanels(targetElement);
|
|
}
|
|
if (typeof window.initLocalDateTimes === 'function') {
|
|
window.initLocalDateTimes(targetElement);
|
|
}
|
|
if (typeof window.initTableSearches === 'function') {
|
|
window.initTableSearches(targetElement);
|
|
}
|
|
if (targetElement.id === 'playlist-items-body' && typeof window.rebindPlaylistTableDrag === 'function') {
|
|
window.rebindPlaylistTableDrag(targetElement);
|
|
}
|
|
}
|
|
|
|
function replaceRefreshTargetFromPage(refreshTargetSelector, sequenceId) {
|
|
if (sequenceId !== refreshSequence) {
|
|
return;
|
|
}
|
|
|
|
fetch(window.location.href, {
|
|
method: 'GET',
|
|
headers: {
|
|
'X-Requested-With': 'XMLHttpRequest',
|
|
'Accept': 'text/html, application/xhtml+xml'
|
|
},
|
|
credentials: 'same-origin',
|
|
cache: 'no-store'
|
|
}).then(function (response) {
|
|
if (!response.ok) {
|
|
throw new Error('Unable to refresh saved data.');
|
|
}
|
|
return response.text();
|
|
}).then(function (text) {
|
|
if (sequenceId !== refreshSequence) {
|
|
return;
|
|
}
|
|
|
|
var responseDocument = new DOMParser().parseFromString(text || '', 'text/html');
|
|
var currentTarget = document.querySelector(refreshTargetSelector);
|
|
var nextTarget = responseDocument.querySelector(refreshTargetSelector);
|
|
if (!currentTarget || !nextTarget) {
|
|
return;
|
|
}
|
|
|
|
currentTarget.outerHTML = nextTarget.outerHTML;
|
|
rebindRefreshTarget(document.querySelector(refreshTargetSelector));
|
|
}).catch(function () {
|
|
// Ignore refresh replacement failures and leave the existing content in place.
|
|
});
|
|
}
|
|
|
|
function watchRefreshTask(refreshStateUrl, refreshTaskId, refreshTargetSelector, sequenceId) {
|
|
var pollDelayMs = 1000;
|
|
var maxAttempts = 60;
|
|
|
|
function poll(attempt) {
|
|
if (sequenceId !== refreshSequence) {
|
|
return;
|
|
}
|
|
|
|
var stateUrl;
|
|
try {
|
|
stateUrl = new URL(refreshStateUrl, window.location.href);
|
|
} catch (_error) {
|
|
return;
|
|
}
|
|
stateUrl.searchParams.set('refresh_task_id', refreshTaskId);
|
|
|
|
fetch(stateUrl.toString(), {
|
|
method: 'GET',
|
|
headers: {
|
|
'X-Requested-With': 'XMLHttpRequest',
|
|
'Accept': 'application/json, text/plain, */*'
|
|
},
|
|
credentials: 'same-origin',
|
|
cache: 'no-store'
|
|
}).then(function (response) {
|
|
if (!response.ok) {
|
|
throw new Error('Unable to check refresh status.');
|
|
}
|
|
return response.json();
|
|
}).then(function (payload) {
|
|
if (sequenceId !== refreshSequence) {
|
|
return;
|
|
}
|
|
|
|
var status = String(payload && payload.status || '').trim().toLowerCase();
|
|
if (status === 'queued' || status === 'running') {
|
|
if (attempt < maxAttempts) {
|
|
window.setTimeout(function () {
|
|
poll(attempt + 1);
|
|
}, pollDelayMs);
|
|
}
|
|
return;
|
|
}
|
|
|
|
replaceRefreshTargetFromPage(refreshTargetSelector, sequenceId);
|
|
}).catch(function () {
|
|
if (attempt < maxAttempts) {
|
|
window.setTimeout(function () {
|
|
poll(attempt + 1);
|
|
}, pollDelayMs);
|
|
}
|
|
});
|
|
}
|
|
|
|
poll(0);
|
|
}
|
|
|
|
document.addEventListener('click', function (event) {
|
|
var target = event.target;
|
|
if (!target || !target.closest) {
|
|
return;
|
|
}
|
|
|
|
var refreshButton = target.closest('[data-manual-refresh-url]');
|
|
if (refreshButton) {
|
|
event.preventDefault();
|
|
if (refreshButton.disabled) {
|
|
return;
|
|
}
|
|
refreshButton.disabled = true;
|
|
fetch(refreshButton.getAttribute('data-manual-refresh-url'), {
|
|
method: 'POST',
|
|
credentials: 'same-origin',
|
|
headers: { 'X-Requested-With': 'XMLHttpRequest' }
|
|
}).then(function (response) {
|
|
if (!response.ok) {
|
|
throw new Error('Refresh failed');
|
|
}
|
|
window.location.assign(response.url);
|
|
}).catch(function () {
|
|
refreshButton.disabled = false;
|
|
});
|
|
return;
|
|
}
|
|
|
|
var button = target.closest('button[name="save_action"], button[name="action"]');
|
|
if (!button) {
|
|
return;
|
|
}
|
|
|
|
var form = button.form || button.closest('form');
|
|
if (!form || !form.hasAttribute || !form.hasAttribute('data-async-save')) {
|
|
return;
|
|
}
|
|
|
|
setSaveActionValue(form, button.value || '');
|
|
form.dataset.submitterValue = String(button.value || '').trim().toLowerCase();
|
|
}, true);
|
|
|
|
document.addEventListener('submit', function (event) {
|
|
var form = event.target;
|
|
if (!form || !form.hasAttribute || !form.hasAttribute('data-async-save')) {
|
|
return;
|
|
}
|
|
submitAsyncSaveForm(form, event, {
|
|
fallbackSuccessMessage: 'Saved.',
|
|
afterSuccess: function (context) {
|
|
var refreshTargetSelector = String(form.getAttribute('data-async-save-refresh-target') || '').trim();
|
|
var refreshStateUrl = String(form.getAttribute('data-async-save-refresh-state-url') || '').trim();
|
|
var refreshTaskId = getResponseQueryValue(context.response.url || '', 'refresh_task_id');
|
|
|
|
if (refreshTargetSelector && refreshStateUrl && refreshTaskId) {
|
|
refreshSequence += 1;
|
|
watchRefreshTask(refreshStateUrl, refreshTaskId, refreshTargetSelector, refreshSequence);
|
|
} else if (refreshTargetSelector && context.responseDocument) {
|
|
var currentTarget = document.querySelector(refreshTargetSelector);
|
|
var nextTarget = context.responseDocument.querySelector(refreshTargetSelector);
|
|
if (currentTarget && nextTarget) {
|
|
currentTarget.outerHTML = nextTarget.outerHTML;
|
|
rebindRefreshTarget(document.querySelector(refreshTargetSelector));
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}, true);
|
|
}
|
|
|
|
function initSubmitOnChange() {
|
|
var fields = document.querySelectorAll('[data-submit-on-change]');
|
|
Array.prototype.forEach.call(fields, function (field) {
|
|
field.addEventListener('change', function () {
|
|
var form = field.form || field.closest('form');
|
|
if (form) {
|
|
form.submit();
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
function renderJsonPrimitive(value) {
|
|
if (value === null) {
|
|
return '<span class="text-body-secondary">null</span>';
|
|
}
|
|
if (value === true || value === false) {
|
|
return '<span class="text-success">' + String(value) + '</span>';
|
|
}
|
|
if (typeof value === 'number') {
|
|
return '<span class="text-info">' + escapeHtml(String(value)) + '</span>';
|
|
}
|
|
return '<span class="text-body">"' + escapeHtml(String(value)) + '"</span>';
|
|
}
|
|
|
|
function renderJsonNode(key, value, isRoot) {
|
|
var isArray = Array.isArray(value);
|
|
var isObject = value && typeof value === 'object' && !isArray;
|
|
|
|
if (!isArray && !isObject) {
|
|
var primitiveLabel = isRoot ? 'value' : String(key);
|
|
return '<div class="json-tree-leaf"><span class="json-tree-key">' + escapeHtml(primitiveLabel) + '</span><span class="mx-1">:</span>' + renderJsonPrimitive(value) + '</div>';
|
|
}
|
|
|
|
var entries = isArray
|
|
? value.map(function (entry, index) {
|
|
return renderJsonNode('[' + index + ']', entry, false);
|
|
}).join('')
|
|
: Object.keys(value).map(function (childKey) {
|
|
return renderJsonNode(childKey, value[childKey], false);
|
|
}).join('');
|
|
|
|
var summaryLabel = isRoot ? (isArray ? 'Array' : 'Object') : String(key);
|
|
var summaryMeta = isArray ? '[' + value.length + ']' : '{' + Object.keys(value).length + '}';
|
|
return '' +
|
|
'<details class="json-tree-node"' + (isRoot ? ' open' : '') + '>' +
|
|
'<summary><span class="json-tree-key">' + escapeHtml(summaryLabel) + '</span><span class="mx-1">:</span><span class="text-body-secondary">' + escapeHtml(summaryMeta) + '</span></summary>' +
|
|
'<div class="ms-3 ps-3 border-start">' + entries + '</div>' +
|
|
'</details>';
|
|
}
|
|
|
|
function renderJsonTree(value) {
|
|
if (Array.isArray(value) || (value && typeof value === 'object')) {
|
|
return renderJsonNode('', value, true);
|
|
}
|
|
return renderJsonNode('value', value, true);
|
|
}
|
|
|
|
function initJsonTogglePanels(root) {
|
|
var scope = root && root.querySelectorAll ? root : document;
|
|
var panels = scope.querySelectorAll('[data-json-toggle-panel]');
|
|
Array.prototype.forEach.call(panels, function (panel) {
|
|
var output = panel.querySelector('[data-json-toggle-output]');
|
|
if (!output) {
|
|
return;
|
|
}
|
|
|
|
var card = panel.closest ? panel.closest('.card') : null;
|
|
var collapseButton = card ? card.querySelector('[data-json-toggle-collapse-all]') : null;
|
|
var expandButton = card ? card.querySelector('[data-json-toggle-expand-all]') : null;
|
|
var sourceNode = panel.querySelector('[data-json-toggle-source]');
|
|
var rawJson = '';
|
|
try {
|
|
rawJson = JSON.parse(String(sourceNode ? sourceNode.textContent : '""'));
|
|
} catch (_error) {
|
|
rawJson = '';
|
|
}
|
|
|
|
if (typeof rawJson !== 'string' || !rawJson.trim()) {
|
|
if (collapseButton) {
|
|
collapseButton.classList.add('d-none');
|
|
}
|
|
if (expandButton) {
|
|
expandButton.classList.add('d-none');
|
|
}
|
|
return;
|
|
}
|
|
|
|
var parsedJson;
|
|
try {
|
|
parsedJson = JSON.parse(rawJson);
|
|
} catch (_error) {
|
|
if (collapseButton) {
|
|
collapseButton.classList.add('d-none');
|
|
}
|
|
if (expandButton) {
|
|
expandButton.classList.add('d-none');
|
|
}
|
|
return;
|
|
}
|
|
|
|
var formattedJson = JSON.stringify(parsedJson, null, 2);
|
|
var formattedTree = renderJsonTree(parsedJson);
|
|
|
|
function setAllSectionsExpanded(expanded) {
|
|
var details = output.querySelectorAll('details');
|
|
Array.prototype.forEach.call(details, function (detail) {
|
|
detail.open = expanded;
|
|
});
|
|
|
|
syncButtons();
|
|
}
|
|
|
|
function syncButtons() {
|
|
var details = output.querySelectorAll('details');
|
|
var allExpanded = details.length > 0 && Array.prototype.every.call(details, function (detail) { return detail.open; });
|
|
var allCollapsed = details.length > 0 && Array.prototype.every.call(details, function (detail) { return !detail.open; });
|
|
if (collapseButton) {
|
|
collapseButton.disabled = !details.length || allCollapsed;
|
|
collapseButton.setAttribute('aria-pressed', String(allCollapsed));
|
|
}
|
|
if (expandButton) {
|
|
expandButton.disabled = !details.length || allExpanded;
|
|
expandButton.setAttribute('aria-pressed', String(allExpanded));
|
|
}
|
|
}
|
|
|
|
output.innerHTML = formattedTree;
|
|
setAllSectionsExpanded(false);
|
|
var rootDetails = output.querySelector('details');
|
|
if (rootDetails) {
|
|
rootDetails.open = true;
|
|
}
|
|
syncButtons();
|
|
|
|
if (collapseButton) {
|
|
collapseButton.addEventListener('click', function () {
|
|
setAllSectionsExpanded(false);
|
|
syncButtons();
|
|
});
|
|
}
|
|
|
|
if (expandButton) {
|
|
expandButton.addEventListener('click', function () {
|
|
setAllSectionsExpanded(true);
|
|
syncButtons();
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
function initLocalDateTimes(root) {
|
|
var scope = root && root.querySelectorAll ? root : document;
|
|
var elements = scope.querySelectorAll('[data-local-datetime]');
|
|
Array.prototype.forEach.call(elements, function (element) {
|
|
var rawValue = String(element.getAttribute('datetime') || element.getAttribute('data-local-datetime') || element.textContent || '').trim();
|
|
if (!rawValue) {
|
|
return;
|
|
}
|
|
|
|
var date = new Date(rawValue);
|
|
if (Number.isNaN(date.getTime())) {
|
|
return;
|
|
}
|
|
|
|
element.textContent = formatDashboardDate(date, element.getAttribute('data-local-datetime-format') === '24h');
|
|
});
|
|
}
|
|
|
|
function initTableSearches(root) {
|
|
if (typeof window.initTableSearches === 'function') {
|
|
window.initTableSearches(root);
|
|
}
|
|
}
|
|
|
|
function createSlideThumbPlaceholder() {
|
|
var placeholder = document.createElement('span');
|
|
var icon = document.createElement('i');
|
|
|
|
placeholder.className = 'playlist-slide-thumb-placeholder';
|
|
icon.className = 'bi bi-image';
|
|
icon.setAttribute('aria-hidden', 'true');
|
|
placeholder.appendChild(icon);
|
|
return placeholder;
|
|
}
|
|
|
|
function attachSlideThumbFallbacks(root) {
|
|
var scope = root && root.querySelectorAll ? root : document;
|
|
|
|
Array.prototype.forEach.call(scope.querySelectorAll('.playlist-slide-thumb-image'), function (image) {
|
|
if (image.getAttribute('data-slide-thumb-fallback-bound') === 'true') {
|
|
return;
|
|
}
|
|
image.setAttribute('data-slide-thumb-fallback-bound', 'true');
|
|
image.addEventListener('error', function () {
|
|
if (image.parentNode) {
|
|
image.parentNode.replaceChild(createSlideThumbPlaceholder(), image);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
initConfirmForms();
|
|
initDeleteButtons();
|
|
initDirtyTracking();
|
|
initLimitedInputValues();
|
|
initLimitedTextInputValues();
|
|
initCancelConfirm();
|
|
initAsyncCommandForms();
|
|
initAsyncSaveForms();
|
|
initSubmitOnChange();
|
|
initJsonTogglePanels();
|
|
initLocalDateTimes();
|
|
initTableSearches();
|
|
attachSlideThumbFallbacks(document);
|
|
window.initJsonTogglePanels = initJsonTogglePanels;
|
|
window.initLocalDateTimes = initLocalDateTimes;
|
|
window.clampLimitedInputValue = clampLimitedInputValue;
|
|
window.initLimitedInputValues = initLimitedInputValues;
|
|
window.clampLimitedTextValue = clampLimitedTextValue;
|
|
window.initLimitedTextInputValues = initLimitedTextInputValues;
|
|
window.createSlideThumbPlaceholder = createSlideThumbPlaceholder;
|
|
window.attachSlideThumbFallbacks = attachSlideThumbFallbacks;
|
|
}());
|