File manager - Edit - /home/webapp68.cm.in.th/u68319090026/final/news/categories.html
Back
<!DOCTYPE html> <html lang="th"> <head> <meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /> <title>จัดการหมวดหมู่</title> <link href="https://fonts.googleapis.com/css2?family=Sarabun&display=swap" rel="stylesheet" /> <style> body { font-family: "Sarabun", sans-serif; max-width: 600px; margin: 20px auto; background: #f5f7fa; color: #333; } nav { text-align: center; margin-bottom: 20px; } nav a { margin: 0 10px; text-decoration: none; color: #3366cc; font-weight: 600; } nav a:hover { text-decoration: underline; } h1 { text-align: center; margin-bottom: 20px; } .item-list > div { background: white; padding: 12px; margin-bottom: 8px; border-radius: 6px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } label { font-weight: 600; margin-top: 12px; display: block; } input { width: 100%; padding: 8px; margin-top: 4px; border-radius: 4px; border: 1px solid #bbb; box-sizing: border-box; } button { padding: 8px 12px; border: none; border-radius: 4px; background-color: #3366cc; color: white; cursor: pointer; margin-top: 10px; } button:hover { background-color: #254a99; } .edit-btn { background-color: #007bff; margin-left: 8px; } .edit-btn:hover { background-color: #0056b3; } .delete-btn { background-color: #dc3545; } .delete-btn:hover { background-color: #c9302c; } .cancel-btn { background-color: #6c757d; margin-left: 8px; } .cancel-btn:hover { background-color: #5a6268; } .message { margin-top: 12px; padding: 10px; border-radius: 6px; } .message.success { background: #d4edda; color: #155724; } .message.error { background: #f8d7da; color: #721c24; } </style> </head> <body> <nav> <a href="dashboard.html">Dashboard</a> <a href="summary.html">สรุปจำนวนบทความ</a> <a href="users.html">จัดการผู้ใช้งาน</a> <a href="categories.html">จัดการหมวดหมู่</a> <a href="articles.html">เพิ่ม/แก้ไข/ลบ บทความ</a> </nav> <h1>จัดการหมวดหมู่</h1> <div id="category-list" class="item-list"></div> <form id="category-form"> <label>ชื่อหมวดหมู่</label> <input type="text" id="category-name" required /> <button type="submit" class="save-btn">เพิ่มหมวดหมู่</button> <button type="button" id="cancel-edit" class="cancel-btn" style="display:none;">ยกเลิก</button> </form> <div id="category-message" class="message" style="display:none;"></div> <script> if(localStorage.getItem('isAdminLoggedIn') !== 'true') { alert('เฉพาะแอดมินเท่านั้น'); window.location.href = 'index.html'; } const STORAGE_KEY = 'college_news_categories'; function getCategories() { return JSON.parse(localStorage.getItem(STORAGE_KEY)) || []; } function saveCategories(data) { localStorage.setItem(STORAGE_KEY, JSON.stringify(data)); } let editIndex = -1; function renderCategories() { const categories = getCategories(); const html = categories.map((cat, idx) => ` <div> <span>${cat}</span> <div> <button class="edit-btn" onclick="editCategory(${idx})">แก้ไข</button> <button class="delete-btn" onclick="deleteCategory(${idx})">ลบ</button> </div> </div> `).join(''); document.getElementById('category-list').innerHTML = html; } function editCategory(idx) { const categories = getCategories(); document.getElementById('category-name').value = categories[idx]; document.querySelector('.save-btn').innerText = 'อัปเดต'; document.getElementById('cancel-edit').style.display = 'inline-block'; editIndex = idx; } function deleteCategory(idx) { if (!confirm('คุณแน่ใจว่าจะลบหมวดหมู่นี้?')) return; let categories = getCategories(); const removed = categories.splice(idx, 1)[0]; saveCategories(categories); renderCategories(); clearForm(); showMessage(`ลบหมวดหมู่ "${removed}" เรียบร้อย`, true); } function clearForm() { document.getElementById('category-form').reset(); document.querySelector('.save-btn').innerText = 'เพิ่มหมวดหมู่'; document.getElementById('cancel-edit').style.display = 'none'; editIndex = -1; } function showMessage(msg, success) { const el = document.getElementById('category-message'); el.innerText = msg; el.className = 'message ' + (success ? 'success' : 'error'); el.style.display = 'block'; setTimeout(() => el.style.display = 'none', 3000); } document.getElementById('category-form').addEventListener('submit', e => { e.preventDefault(); const catName = document.getElementById('category-name').value.trim(); if (!catName) { return showMessage('กรุณากรอกชื่อหมวดหมู่', false); } let categories = getCategories(); if (editIndex >= 0) { if (categories.includes(catName) && categories[editIndex] !== catName) { return showMessage('ชื่อหมวดหมู่นี้มีอยู่แล้ว', false); } categories[editIndex] = catName; showMessage('แก้ไขหมวดหมู่เรียบร้อย', true); } else { if (categories.includes(catName)) { return showMessage('ชื่อหมวดหมู่นี้มีอยู่แล้ว', false); } categories.push(catName); showMessage('เพิ่มหมวดหมู่เรียบร้อย', true); } saveCategories(categories); renderCategories(); clearForm(); }); document.getElementById('cancel-edit').addEventListener('click', e => { e.preventDefault(); clearForm(); }); // ตัวอย่างข้อมูลหมวดหมู่ถ้ายังไม่มี if (!localStorage.getItem(STORAGE_KEY)) { saveCategories(['ข่าวสาร', 'กิจกรรม', 'ประชาสัมพันธ์']); } renderCategories(); </script> </body> </html>
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.88 |
proxy
|
phpinfo
|
Settings