Initial commit

ระบบขอใช้งานประชุมออนไลน์ผ่าน Google Meet/assets/js/app.js

@@ -0,0 +1,222 @@
+// 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 => {});
+    }
+});

ระบบขอใช้งานประชุมออนไลน์ผ่าน Google Meet/assets/js/dashboard.js

@@ -0,0 +1,118 @@
+window.dashboardCharts = [];
+
+function initDashboardCharts(monthlyData, statusData) {
+    const rootStyle = getComputedStyle(document.documentElement);
+    const getVar = (name) => rootStyle.getPropertyValue(name).trim();
+
+    // Chart Options for Dark Mode Compatibility
+    const commonOptions = {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+            legend: {
+                labels: {
+                    color: getVar('--text-main') || '#64748B',
+                    font: { family: 'Sarabun' }
+                }
+            }
+        },
+        scales: {
+            x: {
+                ticks: { color: getVar('--text-muted') || '#94A3B8', font: { family: 'Sarabun' } },
+                grid: { color: getVar('--border-color') || '#E2E8F0' }
+            },
+            y: {
+                ticks: { color: getVar('--text-muted') || '#94A3B8', font: { family: 'Sarabun' } },
+                grid: { color: getVar('--border-color') || '#E2E8F0' }
+            }
+        }
+    };
+
+    // 1. Line Chart (Monthly Activity)
+    const lineCtx = document.getElementById('monthlyChart');
+    if (lineCtx) {
+        const lineChart = new Chart(lineCtx, {
+            type: 'line',
+            data: {
+                labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
+                datasets: [{
+                    label: 'จำนวนผู้ใช้งาน/การจอง',
+                    data: monthlyData || [12, 19, 15, 25, 22, 30, 28, 35],
+                    borderColor: '#0F766E', // Primary color
+                    backgroundColor: 'rgba(15, 118, 110, 0.1)',
+                    borderWidth: 2,
+                    tension: 0.4,
+                    fill: true
+                }]
+            },
+            options: commonOptions
+        });
+        window.dashboardCharts.push(lineChart);
+    }
+
+    // 2. Doughnut Chart (Status Overview)
+    const doughnutCtx = document.getElementById('statusChart');
+    if (doughnutCtx) {
+        const doughnutChart = new Chart(doughnutCtx, {
+            type: 'doughnut',
+            data: {
+                labels: ['เสร็จสิ้น', 'รอดำเนินการ', 'กำลังใช้งาน', 'ไม่มีข้อมูล'],
+                datasets: [{
+                    data: statusData || [55, 25, 15, 5],
+                    backgroundColor: [
+                        '#10B981', // Success (Completed)
+                        '#F59E0B', // Warning (Pending)
+                        '#0ea5e9', // Info (Active)
+                        '#64748B'  // Muted
+                    ],
+                    borderWidth: 0,
+                    hoverOffset: 4
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                cutout: '75%',
+                plugins: {
+                    legend: {
+                        position: 'bottom',
+                        labels: {
+                            color: getVar('--text-main') || '#64748B',
+                            padding: 20,
+                            font: { family: 'Sarabun' }
+                        }
+                    }
+                }
+            }
+        });
+        window.dashboardCharts.push(doughnutChart);
+    }
+}
+
+window.updateChartsTheme = function() {
+    if (!window.dashboardCharts || window.dashboardCharts.length === 0) return;
+    
+    const rootStyle = getComputedStyle(document.documentElement);
+    const textMain = rootStyle.getPropertyValue('--text-main').trim() || '#64748B';
+    const textMuted = rootStyle.getPropertyValue('--text-muted').trim() || '#94A3B8';
+    const borderColor = rootStyle.getPropertyValue('--border-color').trim() || '#E2E8F0';
+
+    window.dashboardCharts.forEach(chart => {
+        // Update Legend
+        if (chart.options.plugins && chart.options.plugins.legend && chart.options.plugins.legend.labels) {
+            chart.options.plugins.legend.labels.color = textMain;
+        }
+        // Update Scales (if exist)
+        if (chart.options.scales) {
+            if (chart.options.scales.x) {
+                if (chart.options.scales.x.ticks) chart.options.scales.x.ticks.color = textMuted;
+                if (chart.options.scales.x.grid) chart.options.scales.x.grid.color = borderColor;
+            }
+            if (chart.options.scales.y) {
+                if (chart.options.scales.y.ticks) chart.options.scales.y.ticks.color = textMuted;
+                if (chart.options.scales.y.grid) chart.options.scales.y.grid.color = borderColor;
+            }
+        }
+        chart.update();
+    });
+};