`views/admin-edit-page.ejs`

181 lines
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Edit Page - CMS</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #f5f7fa;
      color: #333;
    }
    .header {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 20px 30px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .btn {
      padding: 10px 20px;
      border: none;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      text-decoration: none;
      display: inline-block;
    }
    .btn-back {
      background: rgba(255, 255, 255, 0.2);
      color: white;
      border: 1px solid rgba(255, 255, 255, 0.3);
    }
    .container {
      max-width: 900px;
      margin: 30px auto;
      padding: 0 30px;
    }
    .card {
      background: white;
      border-radius: 8px;
      padding: 30px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
    }
    .form-group {
      margin-bottom: 20px;
    }
    .form-group label {
      display: block;
      font-weight: 600;
      margin-bottom: 8px;
    }
    .form-group input[type="text"],
    .form-group textarea {
      width: 100%;
      padding: 12px;
      border: 2px solid #e0e0e0;
      border-radius: 8px;
      font-family: inherit;
      font-size: 14px;
    }
    .form-group textarea {
      min-height: 300px;
    }
    .btn-primary {
      background: #667eea;
      color: white;
      padding: 12px 30px;
      font-size: 16px;
      margin-right: 10px;
    }
    .btn-primary:hover {
      background: #5568d3;
    }
    .alert {
      padding: 15px;
      border-radius: 8px;
      margin-bottom: 20px;
    }
    .alert-success {
      background: #d4edda;
      color: #155724;
    }
    .alert-error {
      background: #f8d7da;
      color: #721c24;
    }
  </style>
</head>
<body>
  <div class="header">
    <h1>✏️ Edit Page</h1>
    <a href="/admin" class="btn btn-back">← Back</a>
  </div>

  <div class="container">
    <div id="alert"></div>

    <div class="card">
      <form id="edit-form">
        <div class="form-group">
          <label for="page_title">Page Title</label>
          <input type="text" id="page_title" required>
        </div>

        <div class="form-group">
          <label for="content">Content (HTML supported)</label>
          <textarea id="content" required></textarea>
        </div>

        <button type="submit" class="btn btn-primary">💾 Save Changes</button>
      </form>
    </div>
  </div>

  <script>
    const pageSlug = window.location.pathname.split('/').pop();
    let pageData = null;

    // Load page data
    fetch('/api/cms/pages/' + pageSlug)
      .then(res => res.json())
      .then(data => {
        if (data.success) {
          pageData = data.data;
          document.getElementById('page_title').value = pageData.page_title;
          document.getElementById('content').value = pageData.content;
        } else {
          showAlert('Failed to load page', 'error');
        }
      })
      .catch(error => {
        console.error('Error:', error);
        showAlert('Failed to load page', 'error');
      });

    // Form submission
    document.getElementById('edit-form').addEventListener('submit', async (e) => {
      e.preventDefault();

      const formData = {
        page_title: document.getElementById('page_title').value,
        content: document.getElementById('content').value,
        gallery_images: pageData.gallery_images || []
      };

      try {
        const response = await fetch('/api/cms/pages/' + pageSlug, {
          method: 'PUT',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(formData)
        });

        const data = await response.json();

        if (data.success) {
          showAlert('Page updated successfully!', 'success');
          pageData = data.data;
        } else {
          showAlert('Failed to update: ' + data.message, 'error');
        }
      } catch (error) {
        console.error('Error:', error);
        showAlert('Failed to update page', 'error');
      }
    });

    function showAlert(message, type) {
      const alert = document.getElementById('alert');
      alert.innerHTML = `<div class="alert alert-${type}">${message}</div>`;
      setTimeout(() => alert.innerHTML = '', 5000);
    }
  </script>
</body>
</html>