94 lines
4.3 KiB
JavaScript
94 lines
4.3 KiB
JavaScript
// assets/js/app.js
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// Initialization Charts Settings
|
|
Chart.register(ChartDataLabels);
|
|
Chart.defaults.font.family = "'Sarabun', sans-serif";
|
|
Chart.defaults.color = '#64748b';
|
|
Chart.defaults.scale.grid.color = '#f1f5f9';
|
|
Chart.defaults.scale.grid.drawBorder = false;
|
|
Chart.defaults.plugins.tooltip.backgroundColor = 'rgba(15, 23, 42, 0.9)';
|
|
Chart.defaults.plugins.tooltip.titleFont = { size: 12, family: "'Sarabun', sans-serif", weight: 'bold' };
|
|
Chart.defaults.plugins.tooltip.padding = 10;
|
|
Chart.defaults.plugins.tooltip.cornerRadius = 8;
|
|
});
|
|
|
|
// ============================================================================
|
|
// ฟังก์ชัน Global UI สำหรับจัดการแท็บและเมนู Sidebar (เพื่อทดแทน mock_data.js)
|
|
// ============================================================================
|
|
window.toggleSubmenu = function(id, btn) {
|
|
const el = document.getElementById(id);
|
|
const icon = btn.querySelector('.fa-chevron-down');
|
|
if (el && el.classList.contains('hidden')) {
|
|
el.classList.remove('hidden'); el.classList.add('flex');
|
|
if(icon) icon.classList.add('rotate-180');
|
|
btn.classList.add('text-white');
|
|
} else if (el) {
|
|
el.classList.add('hidden'); el.classList.remove('flex');
|
|
if(icon) icon.classList.remove('rotate-180');
|
|
btn.classList.remove('text-white');
|
|
}
|
|
};
|
|
|
|
window.switchTab = function(tabId, btnElement, pageTitle) {
|
|
// ซ่อนทุกแท็บก่อน
|
|
document.querySelectorAll('.tab-content').forEach(el => {
|
|
el.classList.add('hidden');
|
|
el.classList.remove('block', 'animate-fade-in');
|
|
});
|
|
|
|
// เคลียร์สถานะปุ่มเมนูทั้งหมด
|
|
document.querySelectorAll('.sidebar-tab').forEach(btn => {
|
|
btn.classList.remove('bg-blue-600/20', 'text-blue-400', 'font-bold', 'border-blue-500/20', 'shadow-[inset_0_1px_1px_rgba(255,255,255,0.05)]');
|
|
btn.classList.add('text-slate-400', 'font-medium', 'border-transparent');
|
|
});
|
|
|
|
// แสดงแท็บที่เลือก
|
|
const targetTab = document.getElementById(tabId);
|
|
if (targetTab) {
|
|
targetTab.classList.remove('hidden');
|
|
targetTab.classList.add('block', 'animate-fade-in');
|
|
}
|
|
|
|
// ไฮไลต์ปุ่มปัจจุบัน
|
|
btnElement.classList.remove('text-slate-400', 'font-medium', 'border-transparent');
|
|
btnElement.classList.add('bg-blue-600/20', 'text-blue-400', 'font-bold', 'border-blue-500/20', 'shadow-[inset_0_1px_1px_rgba(255,255,255,0.05)]');
|
|
|
|
// เปลี่ยนชื่อหัวเพจ
|
|
const pageTitleEl = document.getElementById('page-title');
|
|
if(pageTitleEl) pageTitleEl.innerText = pageTitle;
|
|
|
|
// เลื่อนหน้าจอกลับขึ้นบนสุด
|
|
const mainContent = document.getElementById('main-content');
|
|
if(mainContent) mainContent.scrollTop = 0;
|
|
|
|
// ปิด Sidebar หากเป็นหน้าจอมือถือ
|
|
if (window.innerWidth < 1024) window.closeSidebar();
|
|
|
|
// Trigger Resize ให้ Chart อัปเดตขนาดให้พอดี
|
|
window.dispatchEvent(new Event('resize'));
|
|
};
|
|
|
|
window.openSidebar = function() {
|
|
const sb = document.getElementById('sidebar');
|
|
const overlay = document.getElementById('sidebar-overlay');
|
|
if(sb) sb.classList.remove('-translate-x-full');
|
|
if(overlay) {
|
|
overlay.classList.remove('hidden');
|
|
setTimeout(() => {
|
|
overlay.classList.remove('opacity-0', 'pointer-events-none');
|
|
overlay.classList.add('opacity-100', 'pointer-events-auto');
|
|
}, 10);
|
|
}
|
|
};
|
|
|
|
window.closeSidebar = function() {
|
|
const sb = document.getElementById('sidebar');
|
|
const overlay = document.getElementById('sidebar-overlay');
|
|
if(sb) sb.classList.add('-translate-x-full');
|
|
if(overlay) {
|
|
overlay.classList.remove('opacity-100', 'pointer-events-auto');
|
|
overlay.classList.add('opacity-0', 'pointer-events-none');
|
|
setTimeout(() => overlay.classList.add('hidden'), 300);
|
|
}
|
|
}; |