270 lines
8.1 KiB
HTML
270 lines
8.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Custom Pages Test - Sky Art Shop</title>
|
|
<link
|
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
|
rel="stylesheet"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
|
|
/>
|
|
<style>
|
|
body {
|
|
padding: 40px;
|
|
background: #f8f9fa;
|
|
}
|
|
.test-card {
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 30px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.test-result {
|
|
padding: 15px;
|
|
border-radius: 6px;
|
|
margin-top: 15px;
|
|
font-family: monospace;
|
|
}
|
|
.success {
|
|
background: #d4edda;
|
|
color: #155724;
|
|
border: 1px solid #c3e6cb;
|
|
}
|
|
.error {
|
|
background: #f8d7da;
|
|
color: #721c24;
|
|
border: 1px solid #f5c6cb;
|
|
}
|
|
.page-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
.page-list li {
|
|
padding: 10px;
|
|
border-bottom: 1px solid #eee;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.page-list li:last-child {
|
|
border-bottom: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1 class="mb-4">
|
|
<i class="bi bi-clipboard-check"></i> Custom Pages System Test
|
|
</h1>
|
|
|
|
<div class="test-card">
|
|
<h3><i class="bi bi-list-ul"></i> Available Custom Pages</h3>
|
|
<p class="text-muted">
|
|
These pages are published and visible on the frontend:
|
|
</p>
|
|
<ul class="page-list" id="pagesList">
|
|
<li class="text-center"><em>Loading...</em></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-card">
|
|
<h3><i class="bi bi-link-45deg"></i> Quick Links</h3>
|
|
<div class="d-grid gap-2">
|
|
<a href="/admin/pages.html" class="btn btn-primary" target="_blank">
|
|
<i class="bi bi-gear"></i> Open Admin Pages Manager
|
|
</a>
|
|
<button class="btn btn-success" onclick="createTestPage()">
|
|
<i class="bi bi-plus-circle"></i> Create Test Page
|
|
</button>
|
|
<button class="btn btn-info" onclick="loadPages()">
|
|
<i class="bi bi-arrow-clockwise"></i> Refresh Page List
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-card">
|
|
<h3><i class="bi bi-terminal"></i> API Response</h3>
|
|
<div
|
|
id="apiResponse"
|
|
class="test-result success"
|
|
style="display: none"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let pagesData = [];
|
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
loadPages();
|
|
});
|
|
|
|
async function loadPages() {
|
|
try {
|
|
const response = await fetch("/api/pages");
|
|
const data = await response.json();
|
|
|
|
if (data.success && data.pages) {
|
|
pagesData = data.pages;
|
|
displayPages(data.pages);
|
|
showResult(
|
|
"API Response: " + JSON.stringify(data, null, 2),
|
|
"success"
|
|
);
|
|
} else {
|
|
showResult(
|
|
"Failed to load pages: " + JSON.stringify(data),
|
|
"error"
|
|
);
|
|
}
|
|
} catch (error) {
|
|
showResult("Error loading pages: " + error.message, "error");
|
|
}
|
|
}
|
|
|
|
function displayPages(pages) {
|
|
const list = document.getElementById("pagesList");
|
|
|
|
if (pages.length === 0) {
|
|
list.innerHTML =
|
|
'<li class="text-center text-muted"><em>No published pages found</em></li>';
|
|
return;
|
|
}
|
|
|
|
list.innerHTML = pages
|
|
.map(
|
|
(page) => `
|
|
<li>
|
|
<div>
|
|
<strong>${escapeHtml(page.title)}</strong>
|
|
<br>
|
|
<small class="text-muted">Slug: ${escapeHtml(
|
|
page.slug
|
|
)} | Created: ${new Date(
|
|
page.createdat
|
|
).toLocaleDateString()}</small>
|
|
</div>
|
|
<div>
|
|
<a href="/page.html?slug=${encodeURIComponent(
|
|
page.slug
|
|
)}" class="btn btn-sm btn-outline-primary" target="_blank">
|
|
<i class="bi bi-eye"></i> View
|
|
</a>
|
|
</div>
|
|
</li>
|
|
`
|
|
)
|
|
.join("");
|
|
}
|
|
|
|
async function createTestPage() {
|
|
const title = "Test Page " + Date.now();
|
|
const slug = "test-page-" + Date.now();
|
|
|
|
const testContent = {
|
|
ops: [
|
|
{ insert: "Welcome to the Test Page", attributes: { header: 1 } },
|
|
{ insert: "\n\nThis is a test page created automatically. " },
|
|
{
|
|
insert: "It contains formatted text",
|
|
attributes: { bold: true },
|
|
},
|
|
{ insert: " with " },
|
|
{ insert: "different styles", attributes: { italic: true } },
|
|
{ insert: ".\n\n" },
|
|
{ insert: "Key Features:", attributes: { header: 2 } },
|
|
{ insert: "\n" },
|
|
{
|
|
insert: "Rich text editing with Quill",
|
|
attributes: { list: "bullet" },
|
|
},
|
|
{ insert: "\n" },
|
|
{ insert: "Create and edit pages", attributes: { list: "bullet" } },
|
|
{ insert: "\n" },
|
|
{ insert: "Delete pages", attributes: { list: "bullet" } },
|
|
{ insert: "\n" },
|
|
{ insert: "Display on frontend", attributes: { list: "bullet" } },
|
|
{ insert: "\n" },
|
|
],
|
|
};
|
|
|
|
const testHTML = `
|
|
<h1>Welcome to the Test Page</h1>
|
|
<p>This is a test page created automatically. <strong>It contains formatted text</strong> with <em>different styles</em>.</p>
|
|
<h2>Key Features:</h2>
|
|
<ul>
|
|
<li>Rich text editing with Quill</li>
|
|
<li>Create and edit pages</li>
|
|
<li>Delete pages</li>
|
|
<li>Display on frontend</li>
|
|
</ul>
|
|
`;
|
|
|
|
try {
|
|
// Note: This will fail without authentication
|
|
const response = await fetch("/api/admin/pages", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
credentials: "include",
|
|
body: JSON.stringify({
|
|
title: title,
|
|
slug: slug,
|
|
content: JSON.stringify(testContent),
|
|
contenthtml: testHTML,
|
|
metatitle: title,
|
|
metadescription: "This is a test page",
|
|
ispublished: true,
|
|
}),
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
showResult(
|
|
"Test page created successfully! ID: " + data.page.id,
|
|
"success"
|
|
);
|
|
loadPages();
|
|
} else {
|
|
showResult(
|
|
"Failed to create test page. You may need to be logged in as admin. Error: " +
|
|
(data.message || "Unknown error"),
|
|
"error"
|
|
);
|
|
}
|
|
} catch (error) {
|
|
showResult(
|
|
"Error creating test page: " +
|
|
error.message +
|
|
". Make sure you are logged in as admin.",
|
|
"error"
|
|
);
|
|
}
|
|
}
|
|
|
|
function showResult(message, type) {
|
|
const result = document.getElementById("apiResponse");
|
|
result.textContent = message;
|
|
result.className = "test-result " + type;
|
|
result.style.display = "block";
|
|
}
|
|
|
|
function escapeHtml(text) {
|
|
const map = {
|
|
"&": "&",
|
|
"<": "<",
|
|
">": ">",
|
|
'"': """,
|
|
"'": "'",
|
|
};
|
|
return text.replace(/[&<>"']/g, (m) => map[m]);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|