| .. | |||||
| dashboard.php | |||||
| index.php |
| Server IP : 122.155.15.77 / Your IP : 216.73.216.114 Web Server : Microsoft-IIS/10.0 System : Windows NT IDC-PLESK-01 10.0 build 17763 (Windows Server 2016) AMD64 User : IWPD_391(usr0000329) ( 0) PHP Version : 7.4.33 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : C:/Inetpub/vhosts/watpa.ac.th/events.watpa.ac.th/Epass/admin/ |
Upload File : |
<?php
require_once __DIR__ . '/../lib/session.php';
requireLogin(['admin']);
require "../config/db.php";
if ($role != 'admin') {
header("Location: ../index.php");
exit;
}
$activityImgW = 200;
$activityImgH = 200;
$uploadError = '';
$uploadSuccess = '';
$uploadPATH = '../uploads/';
/* =========================
ADD NEW ACTIVITY
========================= */
if (
isset($_POST["new_name"]) && $_POST["new_name"] !== "" &&
isset($_POST["new_key"])
) {
$imgPath = '';
if (!empty($_FILES['new_img']['name'])) {
if ($_FILES['new_img']['error'] !== UPLOAD_ERR_OK) {
$uploadError = "Upload error occurred";
} else if (is_uploaded_file($_FILES['new_img']['tmp_name'])) {
if (!is_dir($uploadPATH)) {
mkdir($uploadPATH, 0777, true);
}
$fileName = basename($_FILES['new_img']['name']);
$targetPath = $uploadPATH . time() . "_" . preg_replace('/[^\w.]+/', '', $fileName);
$tmpName = $_FILES['new_img']['tmp_name'];
[$w, $h, $type] = @getimagesize($tmpName) ?: [0, 0, 0];
if ($w && $h) {
switch ($type) {
case IMAGETYPE_JPEG: $src = imagecreatefromjpeg($tmpName); break;
case IMAGETYPE_PNG: $src = imagecreatefrompng($tmpName); break;
case IMAGETYPE_GIF: $src = imagecreatefromgif($tmpName); break;
default: $src = false;
}
if ($src) {
$dst = imagescale($src, $activityImgW, $activityImgH);
if ($dst && imagejpeg($dst, $targetPath, 85)) {
$imgPath = $targetPath;
}
imagedestroy($src);
if ($dst) imagedestroy($dst);
}
}
}
}
if (empty($uploadError)) {
$stmt = $pdo->prepare(
"INSERT INTO activities (name, staff_key, img_url)
VALUES (?, ?, ?)"
);
$stmt->execute([
$_POST["new_name"],
$_POST["new_key"],
$imgPath
]);
$uploadSuccess = "Activity added successfully!";
header("Location: " . $_SERVER['PHP_SELF'] . "?success=added");
exit;
}
}
/* =========================
UPDATE ACTIVITY
========================= */
if (
isset($_POST["edit_id"]) &&
isset($_POST["edit_name"]) &&
isset($_POST["edit_key"])
) {
$imgPath = $_POST['existing_img_url'] ?? '';
if (!empty($_FILES['edit_img']['name'])) {
if ($_FILES['edit_img']['error'] === UPLOAD_ERR_OK &&
is_uploaded_file($_FILES['edit_img']['tmp_name'])
) {
if (!is_dir($uploadPATH)) {
mkdir($uploadPATH, 0777, true);
}
$fileName = basename($_FILES['edit_img']['name']);
$targetPath = $uploadPATH . time() . "_" . preg_replace('/[^\w.]+/', '', $fileName);
$tmpName = $_FILES['edit_img']['tmp_name'];
[$w, $h, $type] = @getimagesize($tmpName) ?: [0, 0, 0];
if ($w && $h) {
switch ($type) {
case IMAGETYPE_JPEG: $src = imagecreatefromjpeg($tmpName); break;
case IMAGETYPE_PNG: $src = imagecreatefrompng($tmpName); break;
case IMAGETYPE_GIF: $src = imagecreatefromgif($tmpName); break;
default: $src = false;
}
if ($src) {
$dst = imagescale($src, $activityImgW, $activityImgH);
if ($dst && imagejpeg($dst, $targetPath, 85)) {
if ($imgPath && file_exists($imgPath)) {
unlink($imgPath);
}
$imgPath = $targetPath;
}
imagedestroy($src);
if ($dst) imagedestroy($dst);
}
}
}
}
$stmt = $pdo->prepare(
"UPDATE activities
SET name=?, staff_key=?, img_url=?
WHERE id=?"
);
$stmt->execute([
$_POST["edit_name"],
$_POST["edit_key"],
$imgPath,
$_POST["edit_id"]
]);
header("Location: " . $_SERVER['PHP_SELF'] . "?success=updated");
exit;
}
/* =========================
DELETE ACTIVITY
========================= */
if (isset($_GET["delete"])) {
$id = intval($_GET["delete"]);
$stmt = $pdo->prepare("SELECT img_url FROM activities WHERE id=?");
$stmt->execute([$id]);
$row = $stmt->fetch();
if ($row && $row['img_url'] && file_exists($row['img_url'])) {
unlink($row['img_url']);
}
$stmt = $pdo->prepare("DELETE FROM activities WHERE id=?");
$stmt->execute([$id]);
header("Location: " . $_SERVER['PHP_SELF'] . "?success=deleted");
exit;
}
/* =========================
LOAD ACTIVITIES
========================= */
$stmt = $pdo->prepare("SELECT * FROM activities ORDER BY id");
$stmt->execute();
$activities = $stmt->fetchAll();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Manage Activities</title>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
:root {
--primary: #0f172a;
--primary-hover: #1e293b;
--accent: #3b82f6;
--accent-hover: #2563eb;
--bg: #f8fafc;
--card-bg: #ffffff;
--border: #e2e8f0;
--text: #1e293b;
--text-muted: #64748b;
--success: #10b981;
--danger: #ef4444;
--warning: #f59e0b;
--shadow: 0 1px 3px rgba(0,0,0,0.05);
--shadow-lg: 0 10px 40px rgba(0,0,0,0.08);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
/* ===== HEADER ===== */
.header {
background: var(--card-bg);
border-radius: 20px;
padding: 32px;
margin-bottom: 24px;
box-shadow: var(--shadow-lg);
display: flex;
justify-content: space-between;
align-items: center;
}
.header h1 {
font-size: 32px;
font-weight: 800;
color: var(--primary);
margin-bottom: 8px;
letter-spacing: -0.02em;
}
.header p {
color: var(--text-muted);
font-size: 16px;
}
.btn-primary {
padding: 14px 28px;
border-radius: 12px;
border: none;
background: var(--accent);
color: white;
font-weight: 600;
font-size: 15px;
cursor: pointer;
transition: all 0.2s;
font-family: inherit;
box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
}
.btn-primary:hover {
background: var(--accent-hover);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}
.btn-secondary {
padding: 14px 28px;
border-radius: 12px;
border: 2px solid var(--border);
background: white;
color: var(--primary);
font-weight: 600;
font-size: 15px;
cursor: pointer;
transition: all 0.2s;
font-family: inherit;
}
.btn-secondary:hover {
border-color: var(--primary);
background: var(--primary);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.2);
}
/* ===== ALERTS ===== */
.alert {
padding: 16px 20px;
border-radius: 12px;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 12px;
font-weight: 500;
animation: slideIn 0.3s ease;
}
.alert-success {
background: #d1fae5;
color: #065f46;
border: 2px solid #6ee7b7;
}
.alert-error {
background: #fee2e2;
color: #991b1b;
border: 2px solid #fca5a5;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ===== MODAL ===== */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
z-index: 1000;
align-items: center;
justify-content: center;
animation: fadeIn 0.2s;
}
.modal.active {
display: flex;
}
.modal-content {
background: var(--card-bg);
border-radius: 20px;
padding: 32px;
max-width: 600px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
animation: slideUp 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.modal-header h2 {
font-size: 24px;
font-weight: 800;
color: var(--primary);
}
.close-btn {
width: 32px;
height: 32px;
border-radius: 8px;
border: none;
background: var(--bg);
cursor: pointer;
font-size: 20px;
color: var(--text-muted);
transition: all 0.2s;
}
.close-btn:hover {
background: var(--border);
color: var(--primary);
}
/* ===== FORM ===== */
.form-group {
margin-bottom: 20px;
}
.form-label {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--text);
margin-bottom: 8px;
}
.form-input {
width: 100%;
padding: 12px 16px;
border: 2px solid var(--border);
border-radius: 10px;
font-size: 15px;
font-family: inherit;
transition: all 0.2s;
}
.form-input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.file-input-wrapper {
position: relative;
display: inline-block;
width: 100%;
}
.file-input-label {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 16px;
border: 2px dashed var(--border);
border-radius: 10px;
cursor: pointer;
transition: all 0.2s;
background: var(--bg);
}
.file-input-label:hover {
border-color: var(--accent);
background: white;
}
.file-input {
display: none;
}
.image-preview {
margin-top: 12px;
text-align: center;
}
.image-preview img {
max-width: 200px;
border-radius: 12px;
border: 2px solid var(--border);
}
.form-actions {
display: flex;
gap: 12px;
margin-top: 24px;
}
.btn {
padding: 12px 24px;
border-radius: 10px;
border: none;
font-weight: 600;
font-size: 15px;
cursor: pointer;
transition: all 0.2s;
font-family: inherit;
}
.btn-save {
background: var(--accent);
color: white;
flex: 1;
}
.btn-save:hover {
background: var(--accent-hover);
transform: translateY(-2px);
}
.btn-cancel {
background: var(--bg);
color: var(--text);
padding: 12px 24px;
}
.btn-cancel:hover {
background: var(--border);
}
/* ===== ACTIVITIES GRID ===== */
.activities-section {
background: var(--card-bg);
border-radius: 20px;
padding: 32px;
box-shadow: var(--shadow-lg);
}
.section-header {
margin-bottom: 24px;
}
.section-header h2 {
font-size: 24px;
font-weight: 800;
color: var(--primary);
}
.activities-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
.activity-card {
background: var(--bg);
border: 2px solid var(--border);
border-radius: 16px;
padding: 20px;
transition: all 0.2s;
}
.activity-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
border-color: var(--accent);
}
.activity-image {
width: 100%;
height: 180px;
object-fit: cover;
border-radius: 12px;
margin-bottom: 16px;
background: white;
border: 2px solid var(--border);
}
.activity-image.placeholder {
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
color: var(--text-muted);
}
.activity-name {
font-size: 18px;
font-weight: 700;
color: var(--primary);
margin-bottom: 8px;
}
.activity-key {
font-size: 13px;
color: var(--text-muted);
font-family: 'Courier New', monospace;
background: white;
padding: 6px 10px;
border-radius: 6px;
display: inline-block;
margin-bottom: 16px;
}
.activity-actions {
display: flex;
gap: 8px;
}
.btn-edit {
flex: 1;
padding: 10px;
border-radius: 8px;
border: none;
background: var(--primary);
color: white;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
font-family: inherit;
}
.btn-edit:hover {
background: var(--primary-hover);
}
.btn-delete {
padding: 10px 16px;
border-radius: 8px;
border: none;
background: var(--danger);
color: white;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
font-family: inherit;
}
.btn-delete:hover {
background: #dc2626;
}
.empty-state {
text-align: center;
padding: 60px 20px;
color: var(--text-muted);
}
.empty-state-icon {
font-size: 64px;
margin-bottom: 16px;
}
.empty-state-text {
font-size: 18px;
font-weight: 600;
margin-bottom: 8px;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
body {
padding: 12px;
}
.header {
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding: 24px;
}
.header > div:last-child {
width: 100%;
}
.header > div:last-child button {
width: 100%;
}
.header h1 {
font-size: 24px;
}
.activities-grid {
grid-template-columns: 1fr;
}
.modal-content {
padding: 24px;
}
}
</style>
</head>
<body>
<div class="container">
<!-- HEADER -->
<div class="header">
<div>
<h1>Manage Activities</h1>
<p>Edit, and organize your activities</p>
</div>
<div style="display: flex; gap: 12px;">
<button class="btn-secondary" onclick="window.location.href='dashboard.php'">
📊 View Dashboard
</button>
</div>
</div>
<!-- SUCCESS/ERROR MESSAGES -->
<?php if (isset($_GET['success'])): ?>
<div class="alert alert-success">
✅
<?php
switch($_GET['success']) {
case 'added': echo 'Activity added successfully!'; break;
case 'updated': echo 'Activity updated successfully!'; break;
case 'deleted': echo 'Activity deleted successfully!'; break;
}
?>
</div>
<?php endif; ?>
<?php if ($uploadError): ?>
<div class="alert alert-error">
❌ <?= htmlspecialchars($uploadError) ?>
</div>
<?php endif; ?>
<!-- ACTIVITIES SECTION -->
<div class="activities-section">
<div class="section-header">
<h2>All Activities (<?= count($activities) ?>)</h2>
</div>
<?php if (empty($activities)): ?>
<div class="empty-state">
<div class="empty-state-icon">📭</div>
<div class="empty-state-text">No activities yet</div>
<p>Click "Add New Activity" to get started</p>
</div>
<?php else: ?>
<div class="activities-grid">
<?php foreach ($activities as $activity): ?>
<div class="activity-card">
<?php if (!empty($activity['img_url']) && file_exists($activity['img_url'])): ?>
<img src="<?= htmlspecialchars($activity['img_url']) ?>"
alt="<?= htmlspecialchars($activity['name']) ?>"
class="activity-image">
<?php else: ?>
<div class="activity-image placeholder">🎨</div>
<?php endif; ?>
<div class="activity-name"><?= htmlspecialchars($activity['name']) ?></div>
<div class="activity-key">🔑 <?= htmlspecialchars($activity['staff_key']) ?></div>
<div class="activity-actions">
<button class="btn-edit" onclick='openEditModal(<?= json_encode($activity) ?>)'>
✏️ Edit
</button>
<button class="btn-delete" onclick="confirmDelete(<?= $activity['id'] ?>, '<?= htmlspecialchars($activity['name'], ENT_QUOTES) ?>')">
🗑️
</button>
</div>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
</div>
</div>
<!-- ADD MODAL -->
<div class="modal" id="addModal">
<div class="modal-content">
<div class="modal-header">
<h2>➕ Add New Activity</h2>
<button class="close-btn" onclick="closeAddModal()">✕</button>
</div>
<form method="POST" enctype="multipart/form-data">
<div class="form-group">
<label class="form-label">Activity Name</label>
<input type="text" name="new_name" class="form-input" placeholder="e.g., Reading Time" required>
</div>
<div class="form-group">
<label class="form-label">Staff Key</label>
<input type="text" name="new_key" class="form-input" placeholder="e.g., READ123" required>
</div>
<div class="form-group">
<label class="form-label">Activity Image (Optional)</label>
<div class="file-input-wrapper">
<label for="new_img" class="file-input-label">
<span>📷</span>
<span>Click to upload image</span>
</label>
<input type="file" name="new_img" id="new_img" class="file-input" accept="image/*" onchange="previewImage(this, 'newPreview')">
</div>
<div id="newPreview" class="image-preview"></div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-save">💾 Save Activity</button>
<button type="button" class="btn btn-cancel" onclick="closeAddModal()">Cancel</button>
</div>
</form>
</div>
</div>
<!-- EDIT MODAL -->
<div class="modal" id="editModal">
<div class="modal-content">
<div class="modal-header">
<h2>✏️ Edit Activity</h2>
<button class="close-btn" onclick="closeEditModal()">✕</button>
</div>
<form method="POST" enctype="multipart/form-data">
<input type="hidden" name="edit_id" id="edit_id">
<input type="hidden" name="existing_img_url" id="existing_img_url">
<div class="form-group">
<label class="form-label">Activity Name</label>
<input type="text" name="edit_name" id="edit_name" class="form-input" required>
</div>
<div class="form-group">
<label class="form-label">Staff Key</label>
<input type="text" name="edit_key" id="edit_key" class="form-input" required>
</div>
<div class="form-group">
<label class="form-label">Activity Image</label>
<div class="file-input-wrapper">
<label for="edit_img" class="file-input-label">
<span>📷</span>
<span>Click to change image</span>
</label>
<input type="file" name="edit_img" id="edit_img" class="file-input" accept="image/*" onchange="previewImage(this, 'editPreview')">
</div>
<div id="editPreview" class="image-preview"></div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-save">💾 Update Activity</button>
<button type="button" class="btn btn-cancel" onclick="closeEditModal()">Cancel</button>
</div>
</form>
</div>
</div>
<script>
// Add Modal
function openAddModal() {
document.getElementById('addModal').classList.add('active');
}
function closeAddModal() {
document.getElementById('addModal').classList.remove('active');
}
// Edit Modal
function openEditModal(activity) {
document.getElementById('edit_id').value = activity.id;
document.getElementById('edit_name').value = activity.name;
document.getElementById('edit_key').value = activity.staff_key;
document.getElementById('existing_img_url').value = activity.img_url || '';
const preview = document.getElementById('editPreview');
if (activity.img_url) {
preview.innerHTML = `<img src="${activity.img_url}" alt="Current image">`;
} else {
preview.innerHTML = '';
}
document.getElementById('editModal').classList.add('active');
}
function closeEditModal() {
document.getElementById('editModal').classList.remove('active');
}
// Preview Image
function previewImage(input, previewId) {
const preview = document.getElementById(previewId);
if (input.files && input.files[0]) {
const reader = new FileReader();
reader.onload = function(e) {
preview.innerHTML = `<img src="${e.target.result}" alt="Preview">`;
};
reader.readAsDataURL(input.files[0]);
}
}
// Delete Confirmation
function confirmDelete(id, name) {
if (confirm(`Are you sure you want to delete "${name}"?\n\nThis action cannot be undone.`)) {
window.location.href = `?delete=${id}`;
}
}
// Close modals on outside click
window.onclick = function(event) {
const addModal = document.getElementById('addModal');
const editModal = document.getElementById('editModal');
if (event.target === addModal) {
closeAddModal();
}
if (event.target === editModal) {
closeEditModal();
}
}
// Auto-hide success messages
setTimeout(function() {
const alerts = document.querySelectorAll('.alert');
alerts.forEach(alert => {
alert.style.transition = 'opacity 0.5s';
alert.style.opacity = '0';
setTimeout(() => alert.remove(), 500);
});
}, 5000);
</script>
</body>
</html>| .. | |||||
| dashboard.php | |||||
| index.php |