223 lines
9.4 KiB
JavaScript
223 lines
9.4 KiB
JavaScript
// Global DataTables Configuration
|
|
if (typeof $ !== 'undefined' && $.fn && $.fn.dataTable) {
|
|
$.extend(true, $.fn.dataTable.defaults, {
|
|
pageLength: 10,
|
|
language: {
|
|
url: "//cdn.datatables.net/plug-ins/1.13.6/i18n/th.json"
|
|
},
|
|
dom: '<"row mb-3"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>t<"row mt-3"<"col-sm-12 col-md-5"i><"col-sm-12 col-md-7"p>>',
|
|
});
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// 1. Sidebar Toggle
|
|
const sidebar = document.getElementById('sidebar');
|
|
const toggleBtn = document.getElementById('sidebarToggle');
|
|
const mobileToggleBtn = document.getElementById('mobileSidebarToggle');
|
|
|
|
if (toggleBtn && sidebar) {
|
|
toggleBtn.addEventListener('click', () => {
|
|
if (window.innerWidth >= 992) {
|
|
sidebar.classList.toggle('collapsed');
|
|
}
|
|
});
|
|
}
|
|
|
|
if (mobileToggleBtn && sidebar) {
|
|
mobileToggleBtn.addEventListener('click', () => {
|
|
sidebar.classList.toggle('show');
|
|
});
|
|
}
|
|
|
|
// 2. Theme Management (Light/Dark)
|
|
const themeToggleBtn = document.getElementById('themeToggle');
|
|
const htmlEl = document.documentElement;
|
|
const themeIcon = themeToggleBtn ? themeToggleBtn.querySelector('i') : null;
|
|
|
|
const savedTheme = localStorage.getItem('theme') || 'light';
|
|
setTheme(savedTheme);
|
|
|
|
if (themeToggleBtn) {
|
|
themeToggleBtn.addEventListener('click', () => {
|
|
const currentTheme = htmlEl.getAttribute('data-theme');
|
|
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
|
setTheme(newTheme);
|
|
});
|
|
}
|
|
|
|
function setTheme(theme) {
|
|
htmlEl.setAttribute('data-theme', theme);
|
|
localStorage.setItem('theme', theme);
|
|
if (themeIcon) {
|
|
themeIcon.className = theme === 'dark' ? 'bi bi-sun-fill' : 'bi bi-moon-fill';
|
|
}
|
|
|
|
// Update Chart.js colors dynamically if function exists
|
|
if (typeof window.updateChartsTheme === 'function') {
|
|
setTimeout(window.updateChartsTheme, 50); // wait for CSS variables to apply
|
|
}
|
|
}
|
|
|
|
// 3. Command Palette (Ctrl + K)
|
|
const cmdPalette = document.getElementById('commandPalette');
|
|
const cmdInput = document.getElementById('cmdInput');
|
|
|
|
if (cmdPalette && cmdInput) {
|
|
document.addEventListener('keydown', (e) => {
|
|
if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
|
|
e.preventDefault();
|
|
cmdPalette.classList.add('active');
|
|
cmdInput.focus();
|
|
}
|
|
if (e.key === 'Escape' && cmdPalette.classList.contains('active')) {
|
|
cmdPalette.classList.remove('active');
|
|
}
|
|
});
|
|
|
|
// Close when clicking outside
|
|
cmdPalette.addEventListener('click', (e) => {
|
|
if (e.target === cmdPalette) {
|
|
cmdPalette.classList.remove('active');
|
|
}
|
|
});
|
|
|
|
// Simple Search Filter
|
|
cmdInput.addEventListener('input', function() {
|
|
const val = this.value.toLowerCase();
|
|
const items = cmdPalette.querySelectorAll('.cmd-item');
|
|
items.forEach(item => {
|
|
const text = item.textContent.toLowerCase();
|
|
item.style.display = text.includes(val) ? 'flex' : 'none';
|
|
});
|
|
});
|
|
}
|
|
|
|
// 4. Toast Notifications
|
|
window.showToast = function(message, type = 'success') {
|
|
const container = document.getElementById('toastContainer');
|
|
if (!container) return;
|
|
|
|
const bgClass = type === 'success' ? 'bg-success text-white' :
|
|
type === 'danger' ? 'bg-danger text-white' :
|
|
type === 'warning' ? 'bg-warning text-dark' : 'bg-primary text-white';
|
|
const iconClass = type === 'success' ? 'bi-check-circle' :
|
|
type === 'danger' ? 'bi-x-circle' :
|
|
type === 'warning' ? 'bi-exclamation-triangle' : 'bi-info-circle';
|
|
|
|
const toastHtml = `
|
|
<div class="toast align-items-center ${bgClass} border-0 mb-2" role="alert" aria-live="assertive" aria-atomic="true">
|
|
<div class="d-flex">
|
|
<div class="toast-body">
|
|
<i class="bi ${iconClass} me-2"></i> ${message}
|
|
</div>
|
|
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
container.insertAdjacentHTML('beforeend', toastHtml);
|
|
const toastEl = container.lastElementChild;
|
|
const bsToast = new bootstrap.Toast(toastEl, { delay: 3000 });
|
|
bsToast.show();
|
|
|
|
toastEl.addEventListener('hidden.bs.toast', () => {
|
|
toastEl.remove();
|
|
});
|
|
};
|
|
|
|
// 5. Real-time Clock
|
|
const rClock = document.getElementById('realtimeClock');
|
|
const rDate = document.getElementById('realtimeDate');
|
|
|
|
function updateClock() {
|
|
if (!rClock) return;
|
|
const now = new Date();
|
|
const hours = String(now.getHours()).padStart(2, '0');
|
|
const minutes = String(now.getMinutes()).padStart(2, '0');
|
|
const seconds = String(now.getSeconds()).padStart(2, '0');
|
|
rClock.textContent = `${hours}:${minutes}:${seconds}`;
|
|
|
|
if (rDate) {
|
|
const options = { year: 'numeric', month: 'short', day: 'numeric' };
|
|
// Adjust Thai year (+543)
|
|
let thDate = now.toLocaleDateString('th-TH', options);
|
|
rDate.textContent = thDate;
|
|
}
|
|
}
|
|
|
|
if (rClock) {
|
|
updateClock();
|
|
setInterval(updateClock, 1000);
|
|
}
|
|
|
|
// 6. Fetch Today's Meetings for Notifications
|
|
const notifButton = document.getElementById('notifButton');
|
|
if (notifButton) {
|
|
notifButton.addEventListener('show.bs.dropdown', function () {
|
|
const content = document.getElementById('notifContent');
|
|
const badge = document.getElementById('notifBadge');
|
|
|
|
// Format today's date for API call
|
|
const today = new Date();
|
|
const year = today.getFullYear();
|
|
const month = String(today.getMonth() + 1).padStart(2, '0');
|
|
const day = String(today.getDate()).padStart(2, '0');
|
|
const startStr = `${year}-${month}-${day}T00:00:00+07:00`;
|
|
const endStr = `${year}-${month}-${day}T23:59:59+07:00`;
|
|
|
|
fetch(`api/get_events.php?start=${startStr}&end=${endStr}`)
|
|
.then(res => res.json())
|
|
.then(events => {
|
|
if (events.length > 0) {
|
|
badge.classList.remove('d-none');
|
|
let html = '';
|
|
events.forEach(evt => {
|
|
let sourceBadge = evt.extendedProps.source === 'internal'
|
|
? '<span class="badge bg-primary text-white" style="font-size: 0.6rem;">ระบบ</span>'
|
|
: '<span class="badge bg-warning text-dark" style="font-size: 0.6rem;">ภายนอก</span>';
|
|
|
|
// format time
|
|
let tStart = new Date(evt.start).toLocaleTimeString('th-TH', {hour: '2-digit', minute:'2-digit'});
|
|
html += `
|
|
<li>
|
|
<a class="dropdown-item py-2" href="calendar.php">
|
|
<div class="d-flex w-100 justify-content-between">
|
|
<h6 class="mb-1 text-truncate" style="max-width: 180px;">${evt.title}</h6>
|
|
<small class="text-muted">${tStart}</small>
|
|
</div>
|
|
<div class="mt-1">${sourceBadge}</div>
|
|
</a>
|
|
</li>
|
|
<li><hr class="dropdown-divider"></li>
|
|
`;
|
|
});
|
|
content.innerHTML = html;
|
|
} else {
|
|
badge.classList.add('d-none');
|
|
content.innerHTML = `<li><a class="dropdown-item text-center text-muted py-3" href="#">ไม่มีการประชุมวันนี้</a></li>`;
|
|
}
|
|
})
|
|
.catch(err => {
|
|
content.innerHTML = `<li><a class="dropdown-item text-center text-danger py-3" href="#">โหลดข้อมูลล้มเหลว</a></li>`;
|
|
});
|
|
});
|
|
|
|
// Initial fetch just to check if we should show the red dot badge
|
|
const today = new Date();
|
|
const year = today.getFullYear();
|
|
const month = String(today.getMonth() + 1).padStart(2, '0');
|
|
const day = String(today.getDate()).padStart(2, '0');
|
|
const startStr = `${year}-${month}-${day}T00:00:00+07:00`;
|
|
const endStr = `${year}-${month}-${day}T23:59:59+07:00`;
|
|
|
|
fetch(`api/get_events.php?start=${startStr}&end=${endStr}`)
|
|
.then(res => res.json())
|
|
.then(events => {
|
|
const badge = document.getElementById('notifBadge');
|
|
if (events.length > 0 && badge) {
|
|
badge.classList.remove('d-none');
|
|
}
|
|
}).catch(e => {});
|
|
}
|
|
});
|