243 lines
19 KiB
PHP
243 lines
19 KiB
PHP
<?php
|
|
require_once 'includes/header.php';
|
|
|
|
$msg = '';
|
|
|
|
if ($_SERVER["REQUEST_METHOD"] == "POST") {
|
|
$action = $_POST['action'] ?? '';
|
|
|
|
if ($action == 'api_config') {
|
|
$client_id = $_POST['google_client_id'] ?? '';
|
|
$client_secret = $_POST['google_client_secret'] ?? '';
|
|
|
|
save_setting($pdo_sys, 'google_client_id', $client_id, $_SESSION['fullname']);
|
|
save_setting($pdo_sys, 'google_client_secret', $client_secret, $_SESSION['fullname']);
|
|
|
|
add_log($pdo_sys, $_SESSION['cid'], $_SESSION['fullname'], 'Update Settings', 'Updated Google API settings');
|
|
$msg = 'success';
|
|
} else if ($action == 'ui_config') {
|
|
$header_text = $_POST['header_text'] ?? '';
|
|
$footer_text = $_POST['footer_text'] ?? '';
|
|
|
|
save_setting($pdo_sys, 'header_text', $header_text, $_SESSION['fullname']);
|
|
save_setting($pdo_sys, 'footer_text', $footer_text, $_SESSION['fullname']);
|
|
|
|
add_log($pdo_sys, $_SESSION['cid'], $_SESSION['fullname'], 'Update Settings', 'Updated UI settings');
|
|
$msg = 'success';
|
|
}
|
|
}
|
|
|
|
$current_client_id = get_setting($pdo_sys, 'google_client_id');
|
|
$current_client_secret = get_setting($pdo_sys, 'google_client_secret');
|
|
$current_api_key = get_setting($pdo_sys, 'google_api_key');
|
|
|
|
$current_header_text = get_setting($pdo_sys, 'header_text') ?: 'MOPH System';
|
|
$current_footer_text = get_setting($pdo_sys, 'footer_text') ?: 'สงวนลิขสิทธิ์ © ' . (date('Y') + 543) . ' MOPH System';
|
|
?>
|
|
|
|
<div class="page-content">
|
|
<div class="page-header">
|
|
<div>
|
|
<h2 class="page-title">การตั้งค่าระบบ (Settings)</h2>
|
|
<p class="page-subtitle">ตั้งค่าการเชื่อมต่อ API และระบบพื้นฐาน</p>
|
|
</div>
|
|
</div>
|
|
|
|
<?php if ($msg == 'success'): ?>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
window.showToast('บันทึกการตั้งค่าเรียบร้อยแล้ว', 'success');
|
|
});
|
|
</script>
|
|
<?php endif; ?>
|
|
|
|
<?php if (isset($_SESSION['settings_msg'])): ?>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
window.showToast('<?= addslashes($_SESSION['settings_msg']) ?>', 'success');
|
|
});
|
|
</script>
|
|
<?php unset($_SESSION['settings_msg']); ?>
|
|
<?php endif; ?>
|
|
|
|
<?php if (isset($_SESSION['settings_error'])): ?>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
window.showToast('<?= addslashes($_SESSION['settings_error']) ?>', 'danger');
|
|
});
|
|
</script>
|
|
<?php unset($_SESSION['settings_error']); ?>
|
|
<?php endif; ?>
|
|
|
|
<div class="row g-4">
|
|
<!-- Google API Configuration -->
|
|
<div class="col-lg-6">
|
|
<div class="card-premium h-100">
|
|
<div class="card-header bg-transparent border-0 pt-4 px-4 pb-0">
|
|
<h5 class="fw-bold mb-0"><i class="bi bi-google text-primary me-2"></i>Google API Configuration</h5>
|
|
<p class="text-muted small mt-2">สำหรับการสร้างลิงก์ Google Meet อัตโนมัติ</p>
|
|
</div>
|
|
<div class="card-body p-4 pt-2">
|
|
<form action="" method="POST">
|
|
<input type="hidden" name="action" value="api_config">
|
|
<div class="mb-4">
|
|
<label class="form-label fw-medium text-muted small text-uppercase">Client ID</label>
|
|
<input type="text" name="google_client_id" class="form-control bg-light border-0 py-2" value="<?= htmlspecialchars($current_client_id) ?>" placeholder="Enter Google Client ID">
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="form-label fw-medium text-muted small text-uppercase">Client Secret</label>
|
|
<input type="password" name="google_client_secret" class="form-control bg-light border-0 py-2" value="<?= htmlspecialchars($current_client_secret) ?>" placeholder="Enter Google Client Secret">
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="form-label fw-medium text-muted small text-uppercase">สถานะการเชื่อมต่อ (Connection Status)</label>
|
|
<div class="d-flex align-items-center mt-2">
|
|
<?php
|
|
$refresh_token = get_setting($pdo_sys, 'google_refresh_token');
|
|
if (!empty($refresh_token)):
|
|
?>
|
|
<div class="badge bg-success bg-opacity-10 text-success border border-success border-opacity-25 px-3 py-2 rounded-pill me-3 d-flex align-items-center">
|
|
<i class="bi bi-check-circle-fill me-2"></i>เชื่อมต่อสำเร็จแล้ว
|
|
</div>
|
|
<a href="auth/google_auth.php" class="btn btn-sm btn-outline-secondary rounded-pill px-3">เชื่อมต่อบัญชีใหม่</a>
|
|
<?php else: ?>
|
|
<div class="badge bg-danger bg-opacity-10 text-danger border border-danger border-opacity-25 px-3 py-2 rounded-pill me-3 d-flex align-items-center">
|
|
<i class="bi bi-x-circle-fill me-2"></i>ยังไม่ได้เชื่อมต่อ
|
|
</div>
|
|
<a href="auth/google_auth.php" class="btn btn-sm btn-primary rounded-pill px-3">
|
|
<i class="bi bi-google me-2"></i>เชื่อมต่อบัญชี Google
|
|
</a>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="my-4 border-color">
|
|
|
|
<div class="d-flex justify-content-end gap-2">
|
|
<button type="submit" class="btn btn-primary rounded-pill px-4 shadow-sm">บันทึก Google API</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="mt-5">
|
|
<h6 class="fw-bold text-muted mb-3"><i class="bi bi-info-circle me-1"></i> ขั้นตอนการขอใช้งาน Google API</h6>
|
|
<div class="accordion" id="apiHelpAccordion">
|
|
<div class="accordion-item" style="border-color: var(--border-color); background: transparent;">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-light text-dark fw-medium" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" style="box-shadow: none;">
|
|
1. สร้าง Project ใน Google Cloud Console
|
|
</button>
|
|
</h2>
|
|
<div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#apiHelpAccordion">
|
|
<div class="accordion-body small text-muted">
|
|
<ul>
|
|
<li>ไปที่ <a href="https://console.cloud.google.com/" target="_blank">Google Cloud Console</a> และเข้าสู่ระบบด้วยบัญชี Google ของคุณ</li>
|
|
<li>ที่แถบเมนูด้านบนซ้าย (ถัดจากโลโก้ Google Cloud) ให้คลิก <strong>Select a project</strong></li>
|
|
<li>คลิกปุ่ม <strong>New Project</strong> ที่มุมขวาบนของหน้าต่างที่แสดงขึ้นมา</li>
|
|
<li>ตั้งชื่อโปรเจกต์ของคุณ (เช่น "Meet Booking System") ในช่อง <strong>Project name</strong></li>
|
|
<li>คลิก <strong>Create</strong> และรอระบบสร้างโปรเจกต์สักครู่ เมื่อเสร็จแล้วให้เลือกโปรเจกต์ที่คุณเพิ่งสร้างขึ้นมาเพื่อเข้าไปตั้งค่า</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item" style="border-color: var(--border-color); background: transparent;">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-light text-dark fw-medium" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" style="box-shadow: none;">
|
|
2. เปิดใช้งาน Google Calendar API
|
|
</button>
|
|
</h2>
|
|
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#apiHelpAccordion">
|
|
<div class="accordion-body small text-muted">
|
|
<ul>
|
|
<li>จากเมนูด้านซ้าย (☰) ไปที่ <strong>APIs & Services</strong> > <strong>Library</strong></li>
|
|
<li>ในช่องค้นหา พิมพ์คำว่า <strong>Google Calendar API</strong> แล้วกด Enter</li>
|
|
<li>คลิกที่ <strong>Google Calendar API</strong> จากรายการผลลัพธ์</li>
|
|
<li>คลิกปุ่ม <strong>Enable</strong> สีฟ้าเพื่อเปิดใช้งาน API สำหรับโปรเจกต์นี้ (เพื่อใช้สำหรับสร้าง Google Meet link อัตโนมัติในปฏิทิน)</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item" style="border-color: var(--border-color); background: transparent;">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-light text-dark fw-medium" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" style="box-shadow: none;">
|
|
3. ตั้งค่า OAuth Consent Screen (หน้าจอยินยอม)
|
|
</button>
|
|
</h2>
|
|
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#apiHelpAccordion">
|
|
<div class="accordion-body small text-muted">
|
|
<ul>
|
|
<li>จากเมนูด้านซ้าย ไปที่ <strong>APIs & Services</strong> > <strong>OAuth consent screen</strong></li>
|
|
<li>เลือก <strong>External</strong> (หรือ Internal หากคุณใช้ Google Workspace) แล้วคลิก <strong>Create</strong></li>
|
|
<li>กรอกข้อมูลที่จำเป็น: <strong>App name</strong> (เช่นระบบจองห้องประชุม), <strong>User support email</strong>, และ <strong>Developer contact information</strong> แล้วคลิก <strong>Save and Continue</strong></li>
|
|
<li>หน้า Scopes สามารถกด <strong>Save and Continue</strong> ข้ามไปได้เลย</li>
|
|
<li>หน้า Test users: หากสถานะแอปของคุณเป็น "Testing" คุณจะต้องเพิ่มอีเมลที่คุณจะใช้ล็อกอินระบบจองห้องประชุมลงไปในช่อง <strong>Add Users</strong> เพื่อให้ทดสอบใช้งานได้ แล้วคลิก <strong>Save and Continue</strong></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item" style="border-color: var(--border-color); background: transparent;">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-light text-dark fw-medium" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" style="box-shadow: none;">
|
|
4. สร้าง Credentials (รับ Client ID & Secret)
|
|
</button>
|
|
</h2>
|
|
<div id="collapseFour" class="accordion-collapse collapse" data-bs-parent="#apiHelpAccordion">
|
|
<div class="accordion-body small text-muted">
|
|
<ul>
|
|
<li>จากเมนูด้านซ้าย ไปที่ <strong>APIs & Services</strong> > <strong>Credentials</strong></li>
|
|
<li>คลิก <strong>+ CREATE CREDENTIALS</strong> ด้านบน และเลือก <strong>OAuth client ID</strong></li>
|
|
<li>ช่อง Application type เลือก <strong>Web application</strong> และระบุชื่ออะไรก็ได้</li>
|
|
<li><strong>*สำคัญมาก:</strong> ในส่วน <strong>Authorized redirect URIs</strong> คลิก Add URI แล้วกรอก URL ของระบบคุณที่ลงท้ายด้วย <code>auth/google_auth.php</code> (เช่น <code>http://localhost/meeting/auth/google_auth.php</code> หรือโดเมนจริงของคุณ)</li>
|
|
<li>คลิก <strong>Create</strong></li>
|
|
<li>ระบบจะแสดงหน้าต่างที่มี <strong>Client ID</strong> และ <strong>Client Secret</strong> ให้นำค่าทั้งสองอย่างนี้มาคัดลอกและวางลงในฟอร์มของระบบนี้</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- UI Configuration -->
|
|
<div class="col-lg-6">
|
|
<div class="card-premium h-100">
|
|
<div class="card-header bg-transparent border-0 pt-4 px-4 pb-0">
|
|
<h5 class="fw-bold mb-0"><i class="bi bi-palette-fill text-primary me-2"></i>ข้อความและหน้าตา (UI Settings)</h5>
|
|
<p class="text-muted small mt-2">จัดการข้อความส่วนหัว และส่วนท้ายของเว็บไซต์</p>
|
|
</div>
|
|
<div class="card-body p-4 pt-2">
|
|
<form action="" method="POST">
|
|
<input type="hidden" name="action" value="ui_config">
|
|
<div class="mb-4">
|
|
<label class="form-label fw-medium text-muted small text-uppercase">ชื่อระบบ (Header Text)</label>
|
|
<input type="text" name="header_text" class="form-control bg-light border-0 py-2" value="<?= htmlspecialchars($current_header_text) ?>" placeholder="เช่น MOPH System">
|
|
<div class="form-text mt-2 text-muted">ข้อความนี้จะแสดงอยู่มุมซ้ายบนของเมนูด้านข้าง (Sidebar)</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="form-label fw-medium text-muted small text-uppercase">ข้อความส่วนล่าง (Footer Text)</label>
|
|
<textarea name="footer_text" class="form-control bg-light border-0 py-2" rows="3" placeholder="เช่น ระบบงานประชุมออนไลน์ โรงพยาบาล XYZ"><?= htmlspecialchars($current_footer_text) ?></textarea>
|
|
<div class="form-text mt-2 text-muted">ระบบจะแสดง "สงวนลิขสิทธิ์ © ปีปัจจุบัน" นำหน้าข้อความที่คุณพิมพ์อัตโนมัติ (หากต้องการจัดวางปีด้วยตนเอง ให้พิมพ์คำว่า <code>{year}</code> ลงในข้อความ)</div>
|
|
</div>
|
|
|
|
<hr class="my-4 border-color">
|
|
|
|
<div class="d-flex justify-content-end gap-2">
|
|
<button type="submit" class="btn btn-primary rounded-pill px-4 shadow-sm">บันทึกข้อความ</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="mt-4 p-4 rounded-3 bg-light" style="border: 1px dashed var(--border-color);">
|
|
<h6 class="fw-bold text-muted mb-2"><i class="bi bi-lightbulb-fill text-warning me-1"></i>เคล็ดลับ</h6>
|
|
<p class="text-muted small mb-0">หากต้องการให้แสดงปีปัจจุบันอัตโนมัติในโค้ด PHP (หน้า Footer.php) ระบบจะเพิ่มปี พ.ศ. ให้เอง หากคุณปล่อยให้ช่อง Footer Text ว่างไว้</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<?php require_once 'includes/footer.php'; ?>
|