273 lines
16 KiB
PHP
273 lines
16 KiB
PHP
<?php
|
||
require_once 'includes/header.php';
|
||
|
||
$msg = $_GET['msg'] ?? '';
|
||
?>
|
||
|
||
<div class="page-content">
|
||
<div class="page-header">
|
||
<div>
|
||
<h2 class="page-title">ตารางห้องประชุม (Requests)</h2>
|
||
<p class="page-subtitle">จัดการรายการขอใช้งานและสร้างลิงก์ Google Meet</p>
|
||
</div>
|
||
<div>
|
||
<button class="btn btn-primary rounded-pill px-4 shadow-sm" data-bs-toggle="modal" data-bs-target="#addModal">
|
||
<i class="bi bi-plus-lg me-1"></i> สร้างรายการใหม่
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<?php if ($msg == 'success'): ?>
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
window.showToast('ดำเนินการสำเร็จ', 'success');
|
||
});
|
||
</script>
|
||
<?php endif; ?>
|
||
|
||
<div class="card-premium">
|
||
<div class="card-body p-4">
|
||
<div class="table-responsive">
|
||
<table id="requestsTable" class="table table-hover align-middle mb-0 w-100">
|
||
<thead class="table-light">
|
||
<tr>
|
||
<th class="text-center text-nowrap ps-3">วัน-เวลาที่ขอ</th>
|
||
<th>ชื่อเรื่อง</th>
|
||
<th class="text-center text-nowrap">วัน-เวลาที่จอง</th>
|
||
<th class="text-center text-nowrap">ผู้ขอ</th>
|
||
<th class="text-center text-nowrap">Link/QR Code</th>
|
||
<th class="text-center text-nowrap pe-3">จัดการ</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<?php
|
||
try {
|
||
$stmt = $pdo_sys->query("SELECT * FROM meet_requests ORDER BY id DESC");
|
||
while ($row = $stmt->fetch()) {
|
||
echo "<tr>";
|
||
echo "<td class='text-center text-nowrap ps-3 small text-muted' data-order='" . $row['created_at'] . "'>" . format_thai_date($row['created_at'], true) . "</td>";
|
||
echo "<td class='fw-medium text-dark'>" . htmlspecialchars($row['topic']) . "</td>";
|
||
|
||
$time_str_booking = date('H:i', strtotime($row['start_time'])) . " - " . date('H:i', strtotime($row['end_time']));
|
||
echo "<td class='text-center text-nowrap' data-order='" . $row['meet_date'] . "'>
|
||
<span class='fw-medium'>" . format_thai_date($row['meet_date']) . "</span>
|
||
<span class='badge bg-light text-secondary border ms-2 fw-normal px-2 py-1 rounded-pill' style='font-size: 0.75rem;'><i class='bi bi-clock me-1'></i>" . $time_str_booking . "</span>
|
||
</td>";
|
||
|
||
echo "<td class='text-center text-nowrap'>" . htmlspecialchars($row['created_by']) . "</td>";
|
||
|
||
echo "<td class='text-center text-nowrap'>";
|
||
if (!empty($row['meet_link'])) {
|
||
$link = htmlspecialchars($row['meet_link']);
|
||
|
||
// Generate full text for copying
|
||
$thai_months_full = [
|
||
1 => 'มกราคม', 2 => 'กุมภาพันธ์', 3 => 'มีนาคม', 4 => 'เมษายน', 5 => 'พฤษภาคม', 6 => 'มิถุนายน',
|
||
7 => 'กรกฎาคม', 8 => 'สิงหาคม', 9 => 'กันยายน', 10 => 'ตุลาคม', 11 => 'พฤศจิกายน', 12 => 'ธันวาคม'
|
||
];
|
||
$ts = strtotime($row['meet_date']);
|
||
$full_date = date('j', $ts) . ' ' . $thai_months_full[(int)date('n', $ts)] . ' ' . (date('Y', $ts) + 543);
|
||
$time_str = date('H:i', strtotime($row['start_time'])) . ' – ' . date('H:i', strtotime($row['end_time']));
|
||
|
||
$copy_text = "เรื่อง : " . $row['topic'] . "\nวันที่ : " . $full_date . "\nเวลา : " . $time_str . "\nลิงค์ประชุม : " . $row['meet_link'];
|
||
|
||
echo "<div class='d-flex gap-2 justify-content-center'>";
|
||
echo "<button class='btn btn-sm btn-light btn-icon-only' style='width: 32px; height: 32px;' onclick='showQR(this)' data-link='$link' data-copy-text='".htmlspecialchars($copy_text, ENT_QUOTES)."' title='แสดง QR Code'><i class='bi bi-qr-code'></i></button>";
|
||
echo "<button class='btn btn-sm btn-light btn-icon-only' style='width: 32px; height: 32px;' onclick='copyMeetDetails(this)' data-copy-text='".htmlspecialchars($copy_text, ENT_QUOTES)."' title='คัดลอกลิงก์'><i class='bi bi-clipboard'></i></button>";
|
||
echo "</div>";
|
||
} else {
|
||
echo "<span class='text-muted small'>ไม่มีลิงก์</span>";
|
||
}
|
||
echo "</td>";
|
||
|
||
echo "<td class='text-center text-nowrap pe-3'>";
|
||
$is_owner = ($row['created_by'] === ($_SESSION['fullname'] ?? ''));
|
||
$can_manage = (($_SESSION['role'] ?? '') === 'superadmin' || $is_owner);
|
||
|
||
if ($can_manage) {
|
||
echo "<div class='d-flex gap-2 justify-content-center'>";
|
||
echo "<button class='btn btn-sm btn-light text-primary btn-icon-only' style='width: 32px; height: 32px;' onclick='openEditModal(" . $row['id'] . ", \"" . htmlspecialchars($row['topic'], ENT_QUOTES) . "\", \"" . $row['meet_date'] . "\", \"" . date('H:i', strtotime($row['start_time'])) . "\", \"" . date('H:i', strtotime($row['end_time'])) . "\")' title='แก้ไข'><i class='bi bi-pencil fs-6'></i></button>";
|
||
echo "<a href='requests_action.php?action=delete&id=" . $row['id'] . "' class='btn btn-sm btn-light text-danger btn-icon-only' style='width: 32px; height: 32px;' onclick='return confirm(\"ยืนยันการลบรายการนี้?\")' title='ลบ'><i class='bi bi-trash fs-6'></i></a>";
|
||
echo "</div>";
|
||
} else {
|
||
echo "<span class='text-muted small'>-</span>";
|
||
}
|
||
echo "</td>";
|
||
echo "</tr>";
|
||
}
|
||
} catch (PDOException $e) {
|
||
echo "<tr><td colspan='7' class='text-danger'>Error: " . $e->getMessage() . "</td></tr>";
|
||
}
|
||
?>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal Add -->
|
||
<div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="addModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog modal-dialog-centered">
|
||
<div class="modal-content" style="border-radius: 16px; border: none; box-shadow: var(--shadow-lg);">
|
||
<div class="modal-header border-0 pb-0 pt-4 px-4">
|
||
<h5 class="modal-title fw-bold" id="addModalLabel">สร้างรายการขอประชุมใหม่</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
</div>
|
||
<form action="requests_action.php" method="POST">
|
||
<input type="hidden" name="action" value="create">
|
||
<div class="modal-body p-4">
|
||
<div class="mb-3">
|
||
<label class="form-label fw-medium text-muted small text-uppercase">หัวข้อการประชุม</label>
|
||
<input type="text" name="topic" class="form-control form-control-lg bg-light border-0" required placeholder="ระบุเรื่องที่ต้องการประชุม">
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label fw-medium text-muted small text-uppercase">วันที่ขอใช้งาน</label>
|
||
<input type="date" name="meet_date" class="form-control bg-light border-0" required>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-6 mb-3">
|
||
<label class="form-label fw-medium text-muted small text-uppercase">ตั้งแต่เวลา</label>
|
||
<input type="time" name="start_time" class="form-control bg-light border-0" required>
|
||
</div>
|
||
<div class="col-6 mb-3">
|
||
<label class="form-label fw-medium text-muted small text-uppercase">ถึงเวลา</label>
|
||
<input type="time" name="end_time" class="form-control bg-light border-0" required>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer border-0 pt-0 pb-4 px-4">
|
||
<button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">ยกเลิก</button>
|
||
<button type="submit" class="btn btn-primary rounded-pill px-4">สร้างและรับลิงก์</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal Edit -->
|
||
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog modal-dialog-centered">
|
||
<div class="modal-content" style="border-radius: 16px; border: none; box-shadow: var(--shadow-lg);">
|
||
<div class="modal-header border-0 pb-0 pt-4 px-4">
|
||
<h5 class="modal-title fw-bold" id="editModalLabel">แก้ไขรายการขอประชุม</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
</div>
|
||
<form action="requests_action.php" method="POST">
|
||
<input type="hidden" name="action" value="edit">
|
||
<input type="hidden" name="id" id="edit_id" value="">
|
||
<div class="modal-body p-4">
|
||
<div class="mb-3">
|
||
<label class="form-label fw-medium text-muted small text-uppercase">หัวข้อการประชุม</label>
|
||
<input type="text" name="topic" id="edit_topic" class="form-control form-control-lg bg-light border-0" required placeholder="ระบุเรื่องที่ต้องการประชุม">
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label fw-medium text-muted small text-uppercase">วันที่ขอใช้งาน</label>
|
||
<input type="date" name="meet_date" id="edit_date" class="form-control bg-light border-0" required>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-6 mb-3">
|
||
<label class="form-label fw-medium text-muted small text-uppercase">ตั้งแต่เวลา</label>
|
||
<input type="time" name="start_time" id="edit_start_time" class="form-control bg-light border-0" required>
|
||
</div>
|
||
<div class="col-6 mb-3">
|
||
<label class="form-label fw-medium text-muted small text-uppercase">ถึงเวลา</label>
|
||
<input type="time" name="end_time" id="edit_end_time" class="form-control bg-light border-0" required>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer border-0 pt-0 pb-4 px-4">
|
||
<button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">ยกเลิก</button>
|
||
<button type="submit" class="btn btn-primary rounded-pill px-4">บันทึกการแก้ไข</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- QR Code Library -->
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
|
||
<script>
|
||
$(document).ready(function() {
|
||
$('#requestsTable').DataTable({
|
||
"language": {
|
||
"url": "//cdn.datatables.net/plug-ins/1.13.6/i18n/th.json"
|
||
},
|
||
"order": [[0, "desc"]],
|
||
"pageLength": 10,
|
||
"dom": '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>t<"row"<"col-sm-12 col-md-5"i><"col-sm-12 col-md-7"p>>',
|
||
});
|
||
});
|
||
|
||
function copyLink(link) {
|
||
navigator.clipboard.writeText(link).then(() => {
|
||
window.showToast('คัดลอกลิงก์สำเร็จ!', 'success');
|
||
});
|
||
}
|
||
|
||
function openEditModal(id, topic, date, startTime, endTime) {
|
||
document.getElementById('edit_id').value = id;
|
||
document.getElementById('edit_topic').value = topic;
|
||
document.getElementById('edit_date').value = date;
|
||
document.getElementById('edit_start_time').value = startTime;
|
||
document.getElementById('edit_end_time').value = endTime;
|
||
|
||
var editModal = new bootstrap.Modal(document.getElementById('editModal'));
|
||
editModal.show();
|
||
}
|
||
|
||
function copyMeetDetails(btn) {
|
||
const textToCopy = btn.getAttribute('data-copy-text');
|
||
navigator.clipboard.writeText(textToCopy).then(() => {
|
||
window.showToast('คัดลอกข้อมูลการประชุมสำเร็จ!', 'success');
|
||
});
|
||
}
|
||
|
||
function showQR(btn) {
|
||
const link = btn.getAttribute('data-link');
|
||
const copyText = btn.getAttribute('data-copy-text');
|
||
|
||
// Encode the copy text properly for the template literal
|
||
const encodedCopyText = copyText.replace(/'/g, "\\'").replace(/\n/g, "\\n");
|
||
|
||
Swal.fire({
|
||
title: 'QR Code สำหรับเข้าร่วม',
|
||
html: `
|
||
<div id="qrcode" class="d-flex justify-content-center mt-3 mb-4"></div>
|
||
<div class="input-group">
|
||
<input type="text" class="form-control text-muted" value="${link}" readonly>
|
||
<button class="btn btn-primary px-3" onclick="navigator.clipboard.writeText('${encodedCopyText}').then(()=>{window.showToast('คัดลอกข้อมูลสำเร็จ!', 'success')})" title="คัดลอกลิงก์"><i class="bi bi-clipboard"></i> คัดลอก</button>
|
||
</div>
|
||
<p class="mt-3 mb-0 small text-muted">แสกน QR Code หรือกดคัดลอกลิงก์เพื่อเข้าร่วมประชุม</p>
|
||
`,
|
||
showCloseButton: true,
|
||
showConfirmButton: false,
|
||
didOpen: () => {
|
||
new QRCode(document.getElementById("qrcode"), {
|
||
text: link,
|
||
width: 200,
|
||
height: 200,
|
||
colorDark : "#0F172A",
|
||
colorLight : "#ffffff",
|
||
correctLevel : QRCode.CorrectLevel.H
|
||
});
|
||
}
|
||
});
|
||
}
|
||
</script>
|
||
|
||
<?php require_once 'includes/footer.php'; ?>
|
||
|
||
<script>
|
||
$(document).ready(function() {
|
||
$('#requestsTable').DataTable({
|
||
"language": {
|
||
"url": "//cdn.datatables.net/plug-ins/1.13.6/i18n/th.json"
|
||
},
|
||
"order": [[0, "desc"]],
|
||
"pageLength": 10,
|
||
"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>>',
|
||
});
|
||
});
|
||
</script>
|