359 lines
22 KiB
PHP
359 lines
22 KiB
PHP
<?php
|
|
require_once 'config.php';
|
|
require_once 'db.php';
|
|
|
|
$page = $_GET['page'] ?? 'competitions';
|
|
$selected_year = $_GET['year'] ?? '';
|
|
|
|
// Variables to hold data
|
|
$competitions = [];
|
|
$meetings = [];
|
|
$years = [];
|
|
|
|
if ($page === 'competitions') {
|
|
// Build query for competitions
|
|
$comp_query = "SELECT c.*,
|
|
(SELECT GROUP_CONCAT(author_name SEPARATOR ', ') FROM competition_authors WHERE competition_id = c.id) as authors
|
|
FROM competitions c";
|
|
if (!empty($selected_year)) {
|
|
$comp_query .= " WHERE c.year_th = :year";
|
|
}
|
|
$comp_query .= " ORDER BY c.year_th DESC, c.id DESC";
|
|
|
|
$comp_stmt = $pdo->prepare($comp_query);
|
|
if (!empty($selected_year)) {
|
|
$comp_stmt->bindParam(':year', $selected_year, PDO::PARAM_INT);
|
|
}
|
|
$comp_stmt->execute();
|
|
$competitions = $comp_stmt->fetchAll();
|
|
|
|
// Get unique years for filter
|
|
$years_stmt = $pdo->query("SELECT DISTINCT year_th FROM competitions ORDER BY year_th DESC");
|
|
$years = $years_stmt->fetchAll(PDO::FETCH_COLUMN);
|
|
} elseif ($page === 'meetings') {
|
|
// Build query for meetings
|
|
$meet_query = "SELECT * FROM meeting_minutes";
|
|
// We can filter meetings by year as well (Year + 543)
|
|
if (!empty($selected_year)) {
|
|
$meet_query .= " WHERE YEAR(meeting_date) + 543 = :year";
|
|
}
|
|
$meet_query .= " ORDER BY meeting_date DESC";
|
|
|
|
$meet_stmt = $pdo->prepare($meet_query);
|
|
if (!empty($selected_year)) {
|
|
$meet_stmt->bindParam(':year', $selected_year, PDO::PARAM_INT);
|
|
}
|
|
$meet_stmt->execute();
|
|
$meetings = $meet_stmt->fetchAll();
|
|
|
|
// Extract unique years from meeting dates
|
|
$years_stmt = $pdo->query("SELECT DISTINCT YEAR(meeting_date) + 543 as year_th FROM meeting_minutes ORDER BY year_th DESC");
|
|
$years = $years_stmt->fetchAll(PDO::FETCH_COLUMN);
|
|
}
|
|
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="th">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ระบบจัดเก็บผลงาน P4Q</title>
|
|
<link rel="icon" type="image/png" href="logo.png">
|
|
<link href="https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
|
|
<style>
|
|
body {
|
|
font-family: 'Sarabun', sans-serif;
|
|
background-color: #f4f6f9;
|
|
}
|
|
.content-card {
|
|
background-color: #ffffff;
|
|
border-radius: 0.5rem;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
|
border: 1px solid #e5e7eb;
|
|
}
|
|
/* Custom DataTable */
|
|
.dataTables_wrapper .dataTables_filter input {
|
|
border: 1px solid #ced4da;
|
|
border-radius: 0.25rem;
|
|
padding: 0.375rem 0.75rem;
|
|
outline: none;
|
|
}
|
|
.dataTables_wrapper .dataTables_filter input:focus {
|
|
border-color: #80bdff;
|
|
box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
|
|
}
|
|
table.dataTable thead th { border-bottom: 2px solid #dee2e6; }
|
|
table.dataTable.no-footer { border-bottom: 1px solid #dee2e6; }
|
|
|
|
/* Sidebar transition */
|
|
#sidebar {
|
|
transition: transform 0.3s ease, width 0.3s ease;
|
|
}
|
|
.sidebar-collapsed {
|
|
width: 4rem; /* w-16 */
|
|
}
|
|
.sidebar-collapsed .menu-text {
|
|
display: none;
|
|
}
|
|
.sidebar-collapsed .logo-text {
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
#sidebar {
|
|
position: absolute;
|
|
height: 100%;
|
|
z-index: 50;
|
|
transform: translateX(-100%);
|
|
}
|
|
#sidebar.mobile-open {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="text-gray-800 h-screen overflow-hidden flex">
|
|
|
|
<!-- Sidebar -->
|
|
<aside id="sidebar" class="w-64 bg-green-900 text-white flex flex-col flex-shrink-0 shadow-lg">
|
|
<div class="h-16 flex items-center justify-center px-4 border-b border-green-800">
|
|
<img src="logo.png" alt="Logo" class="h-10 w-auto bg-white p-1 rounded-full" onerror="this.src='https://via.placeholder.com/40'">
|
|
<span class="logo-text ml-3 font-bold text-lg whitespace-nowrap overflow-hidden">P4Q ระบบผลงาน</span>
|
|
</div>
|
|
|
|
<nav class="flex-1 py-4 overflow-y-auto">
|
|
<a href="?page=competitions" class="flex items-center px-4 py-3 <?= $page === 'competitions' ? 'bg-green-800 border-l-4 border-white text-white' : 'text-green-100 hover:bg-green-800 hover:text-white' ?> transition-colors">
|
|
<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path></svg>
|
|
<span class="menu-text ml-3 font-medium whitespace-nowrap">รายการประกวดผลงาน</span>
|
|
</a>
|
|
|
|
<a href="?page=meetings" class="flex items-center px-4 py-3 <?= $page === 'meetings' ? 'bg-green-800 border-l-4 border-white text-white' : 'text-green-100 hover:bg-green-800 hover:text-white' ?> transition-colors">
|
|
<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path></svg>
|
|
<span class="menu-text ml-3 font-medium whitespace-nowrap">บันทึกประชุมคณะกรรมการ</span>
|
|
</a>
|
|
</nav>
|
|
|
|
<div class="p-4 border-t border-green-800">
|
|
<a href="admin/login.php" class="flex items-center text-green-200 hover:text-white transition-colors" title="ผู้ดูแลระบบ">
|
|
<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
|
|
<span class="menu-text ml-3 text-sm">ผู้ดูแลระบบ</span>
|
|
</a>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Overlay for mobile sidebar -->
|
|
<div id="sidebarOverlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden md:hidden"></div>
|
|
|
|
<!-- Main Content Wrapper -->
|
|
<div class="flex-1 flex flex-col h-screen overflow-hidden relative">
|
|
|
|
<!-- Header / Navbar -->
|
|
<header class="h-16 bg-white shadow-sm flex items-center justify-between px-4 sm:px-6 lg:px-8 flex-shrink-0 z-10 relative">
|
|
<div class="flex items-center">
|
|
<button id="sidebarToggle" class="text-gray-500 hover:text-green-700 focus:outline-none p-2 mr-2 rounded-md hover:bg-gray-100 transition-colors">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
|
|
</button>
|
|
<h2 class="text-xl font-bold text-gray-800">
|
|
<?= $page === 'competitions' ? 'รายการผลงานที่ส่งประกวด' : 'บันทึกการประชุมคณะกรรมการ' ?>
|
|
</h2>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Scrollable Main Content -->
|
|
<main class="flex-1 overflow-y-auto p-4 md:p-8 relative">
|
|
<div class="max-w-7xl mx-auto">
|
|
|
|
<!-- Filter Section -->
|
|
<div class="content-card p-5 mb-6 flex flex-col sm:flex-row items-center justify-between border-l-4 border-l-blue-600">
|
|
<h3 class="font-bold text-gray-800 mb-4 sm:mb-0">ค้นหาข้อมูลตามปี</h3>
|
|
<form action="" method="GET" class="flex items-center space-x-3 w-full sm:w-auto">
|
|
<input type="hidden" name="page" value="<?= htmlspecialchars((string)$page) ?>">
|
|
<label for="year" class="text-sm font-semibold text-gray-700 whitespace-nowrap">เลือกปี (พ.ศ.):</label>
|
|
<select name="year" id="year" class="form-select block w-full sm:w-48 pl-3 pr-8 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded border bg-gray-50">
|
|
<option value="">-- แสดงทั้งหมด --</option>
|
|
<?php foreach ($years as $y): ?>
|
|
<option value="<?= $y ?>" <?= $selected_year == $y ? 'selected' : '' ?>><?= $y ?></option>
|
|
<?php endforeach; ?>
|
|
</select>
|
|
<button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded text-sm font-medium transition-colors shadow-sm whitespace-nowrap">
|
|
กรองข้อมูล
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<?php if ($page === 'competitions'): ?>
|
|
<!-- Competitions Table -->
|
|
<div class="content-card p-6">
|
|
<div class="overflow-x-auto">
|
|
<table class="datatable w-full text-left border-collapse border border-gray-200">
|
|
<thead>
|
|
<tr class="bg-gray-100 text-gray-700 text-sm">
|
|
<th class="border py-3 px-4 font-bold text-center w-24">ปี (พ.ศ.)</th>
|
|
<th class="border py-3 px-4 font-bold">ชื่อผลงาน</th>
|
|
<th class="border py-3 px-4 font-bold text-center w-32">ผลรางวัล</th>
|
|
<th class="border py-3 px-4 font-bold">ผู้จัดทำ</th>
|
|
<th class="border py-3 px-4 font-bold text-center w-32">ไฟล์แนบ</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="text-sm">
|
|
<?php foreach ($competitions as $c): ?>
|
|
<tr class="hover:bg-gray-50 transition-colors">
|
|
<td class="border py-3 px-4 text-center font-medium text-gray-700"><?= $c['year_th'] ?></td>
|
|
<td class="border py-3 px-4">
|
|
<div class="font-bold text-blue-900"><?= htmlspecialchars((string)$c['title']) ?></div>
|
|
<?php if (!empty(trim(strip_tags((string)$c['details'])))): ?>
|
|
<button onclick="document.getElementById('details_comp_<?= $c['id'] ?>').classList.toggle('hidden')" class="text-xs text-blue-600 hover:text-blue-800 hover:underline mt-1 focus:outline-none flex items-center">
|
|
<svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
|
|
ดูรายละเอียด
|
|
</button>
|
|
<div id="details_comp_<?= $c['id'] ?>" class="hidden mt-2 p-3 bg-blue-50 border border-blue-100 rounded text-sm text-gray-700">
|
|
<?= $c['details'] ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
</td>
|
|
<td class="border py-3 px-4 text-center">
|
|
<span class="inline-flex items-center justify-center px-2.5 py-1 rounded text-xs font-bold bg-yellow-50 text-yellow-700 border border-yellow-400">
|
|
<?= htmlspecialchars((string)$c['rank_result']) ?>
|
|
</span>
|
|
</td>
|
|
<td class="border py-3 px-4 text-gray-600"><?= htmlspecialchars((string)$c['authors']) ?></td>
|
|
<td class="border py-3 px-4 align-middle">
|
|
<?php
|
|
$att_stmt = $pdo->prepare("SELECT * FROM competition_attachments WHERE competition_id = ?");
|
|
$att_stmt->execute([$c['id']]);
|
|
$files = $att_stmt->fetchAll();
|
|
if (count($files) > 0): ?>
|
|
<div class="flex flex-col space-y-1 items-center">
|
|
<?php foreach ($files as $file): ?>
|
|
<a href="https://drive.google.com/file/d/<?= htmlspecialchars((string)$file['gdrive_file_id']) ?>/view" target="_blank" class="inline-flex items-center justify-center text-xs text-white bg-red-600 hover:bg-red-700 border border-red-700 px-2 py-1 rounded shadow-sm transition-colors w-full" title="<?= htmlspecialchars((string)$file['file_name']) ?>">
|
|
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path></svg>
|
|
PDF
|
|
</a>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
<?php else: ?>
|
|
<span class="text-xs text-gray-400 block text-center">-</span>
|
|
<?php endif; ?>
|
|
</td>
|
|
</tr>
|
|
<?php endforeach; ?>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<?php elseif ($page === 'meetings'): ?>
|
|
<!-- Meetings Table -->
|
|
<div class="content-card p-6">
|
|
<div class="overflow-x-auto">
|
|
<table class="datatable w-full text-left border-collapse border border-gray-200">
|
|
<thead>
|
|
<tr class="bg-gray-100 text-gray-700 text-sm">
|
|
<th class="border py-3 px-4 font-bold w-32 text-center">วันที่ประชุม</th>
|
|
<th class="border py-3 px-4 font-bold">เรื่อง</th>
|
|
<th class="border py-3 px-4 font-bold text-center w-32">ไฟล์แนบ</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="text-sm">
|
|
<?php foreach ($meetings as $m): ?>
|
|
<tr class="hover:bg-gray-50 transition-colors">
|
|
<td class="border py-3 px-4 text-gray-700 font-medium text-center whitespace-nowrap"><?= date('d/m/Y', strtotime($m['meeting_date'])) ?></td>
|
|
<td class="border py-3 px-4">
|
|
<div class="font-bold text-blue-900"><?= htmlspecialchars((string)$m['title']) ?></div>
|
|
<?php if (!empty(trim(strip_tags((string)$m['details'])))): ?>
|
|
<button onclick="document.getElementById('details_meet_<?= $m['id'] ?>').classList.toggle('hidden')" class="text-xs text-blue-600 hover:text-blue-800 hover:underline mt-1 focus:outline-none flex items-center">
|
|
<svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
|
|
ดูรายละเอียด
|
|
</button>
|
|
<div id="details_meet_<?= $m['id'] ?>" class="hidden mt-2 p-3 bg-blue-50 border border-blue-100 rounded text-sm text-gray-700">
|
|
<?= $m['details'] ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
</td>
|
|
<td class="border py-3 px-4 align-middle">
|
|
<?php
|
|
$att_stmt = $pdo->prepare("SELECT * FROM meeting_attachments WHERE meeting_id = ?");
|
|
$att_stmt->execute([$m['id']]);
|
|
$files = $att_stmt->fetchAll();
|
|
if (count($files) > 0): ?>
|
|
<div class="flex flex-col space-y-1 items-center">
|
|
<?php foreach ($files as $file): ?>
|
|
<a href="https://drive.google.com/file/d/<?= htmlspecialchars((string)$file['gdrive_file_id']) ?>/view" target="_blank" class="inline-flex items-center justify-center text-xs text-white bg-red-600 hover:bg-red-700 border border-red-700 px-2 py-1 rounded shadow-sm transition-colors w-full" title="<?= htmlspecialchars((string)$file['file_name']) ?>">
|
|
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path></svg>
|
|
ดาวน์โหลด
|
|
</a>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
<?php else: ?>
|
|
<span class="text-xs text-gray-400 block text-center">-</span>
|
|
<?php endif; ?>
|
|
</td>
|
|
</tr>
|
|
<?php endforeach; ?>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Fixed Footer -->
|
|
<footer class="bg-white border-t border-gray-200 py-4 text-center text-sm text-gray-500 w-full flex-shrink-0 z-10 shadow-[0_-2px_10px_rgba(0,0,0,0.05)]">
|
|
© <?= date('Y') ?> ระบบจัดเก็บผลงาน P4Q. โรงพยาบาล
|
|
</footer>
|
|
|
|
</div>
|
|
|
|
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
|
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Initialize DataTable
|
|
$('.datatable').DataTable({
|
|
"language": {
|
|
"url": "//cdn.datatables.net/plug-ins/1.13.6/i18n/th.json"
|
|
},
|
|
"pageLength": 10,
|
|
"order": [] // disable initial sort to keep SQL ordering
|
|
});
|
|
|
|
// Sidebar Toggle Logic
|
|
const sidebar = document.getElementById('sidebar');
|
|
const sidebarToggle = document.getElementById('sidebarToggle');
|
|
const sidebarOverlay = document.getElementById('sidebarOverlay');
|
|
|
|
sidebarToggle.addEventListener('click', function() {
|
|
if (window.innerWidth < 768) {
|
|
// Mobile: slide in/out
|
|
sidebar.classList.toggle('mobile-open');
|
|
sidebarOverlay.classList.toggle('hidden');
|
|
} else {
|
|
// Desktop: collapse to icons
|
|
sidebar.classList.toggle('sidebar-collapsed');
|
|
}
|
|
});
|
|
|
|
// Close sidebar when clicking overlay on mobile
|
|
sidebarOverlay.addEventListener('click', function() {
|
|
sidebar.classList.remove('mobile-open');
|
|
sidebarOverlay.classList.add('hidden');
|
|
});
|
|
|
|
// Handle window resize to reset states if needed
|
|
window.addEventListener('resize', function() {
|
|
if (window.innerWidth >= 768) {
|
|
sidebar.classList.remove('mobile-open');
|
|
sidebarOverlay.classList.add('hidden');
|
|
} else {
|
|
sidebar.classList.remove('sidebar-collapsed');
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|