chartboard/public/assets/js/app.js
2026-03-30 09:51:33 +05:30

123 lines
4.6 KiB
JavaScript

function applyChartBoardTheme() {
const el = document.documentElement;
const pref = el.getAttribute('data-cb-theme-pref') || 'light';
let resolved = pref;
if (pref === 'system') {
resolved = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
if (resolved !== 'dark') {
resolved = 'light';
}
el.setAttribute('data-cb-theme', resolved);
el.setAttribute('data-bs-theme', resolved);
try {
localStorage.setItem('cb-theme-pref', pref);
} catch (e) {
/* ignore */
}
}
function showToast(message, type = 'success') {
// Placeholder helper for Phase 1 base setup.
console.log(`[${type}] ${message}`);
}
document.addEventListener('DOMContentLoaded', function () {
applyChartBoardTheme();
try {
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () {
if ((document.documentElement.getAttribute('data-cb-theme-pref') || '') === 'system') {
applyChartBoardTheme();
}
});
} catch (e) {
/* ignore */
}
const testButtons = document.querySelectorAll('[data-ds-test-btn]');
testButtons.forEach(function (button) {
button.addEventListener('click', async function () {
const form = button.closest('form');
if (!form) {
return;
}
const resultContainer = form.querySelector('[data-ds-test-result]');
const url = button.getAttribute('data-test-url');
if (!url) {
return;
}
const originalLabel = button.innerHTML;
button.disabled = true;
button.innerHTML = '<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>Testing...';
if (resultContainer) {
resultContainer.innerHTML = '';
}
try {
const response = await fetch(url, {
method: 'POST',
body: new FormData(form),
headers: {
'X-Requested-With': 'XMLHttpRequest',
'Accept': 'application/json'
}
});
const result = await response.json();
const isSuccess = !!result.success;
const message = result.message || (isSuccess ? 'Connection successful.' : 'Connection failed.');
if (resultContainer) {
resultContainer.innerHTML = '<div class="alert mb-0 ' + (isSuccess ? 'alert-success' : 'alert-danger') + '">' + message + '</div>';
}
} catch (error) {
if (resultContainer) {
resultContainer.innerHTML = '<div class="alert alert-danger mb-0">Connection test failed due to a network error.</div>';
}
} finally {
button.disabled = false;
button.innerHTML = originalLabel;
}
});
});
const proofRefreshButton = document.querySelector('[data-proof-refresh-btn]');
if (proofRefreshButton) {
proofRefreshButton.addEventListener('click', async function () {
const proofUrl = proofRefreshButton.getAttribute('data-proof-url');
const proofContainer = document.querySelector('[data-proof-content]');
if (!proofUrl || !proofContainer) {
return;
}
const originalLabel = proofRefreshButton.innerHTML;
proofRefreshButton.disabled = true;
proofRefreshButton.innerHTML = '<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>Refreshing...';
try {
const response = await fetch(proofUrl, {
method: 'GET',
headers: {
'X-Requested-With': 'XMLHttpRequest',
'Accept': 'application/json'
}
});
const result = await response.json();
if (result && result.success && typeof result.html === 'string') {
proofContainer.innerHTML = result.html;
} else {
showToast(result.message || 'Unable to refresh proof.', 'error');
}
} catch (error) {
showToast('Unable to refresh proof due to a network error.', 'error');
} finally {
proofRefreshButton.disabled = false;
proofRefreshButton.innerHTML = originalLabel;
}
});
}
});