updateweb
This commit is contained in:
Local Server
269
website/public/test-custom-pages.html
Normal file
269
website/public/test-custom-pages.html
Normal file
@@ -0,0 +1,269 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user