forked from UKSOURCE/cms.hailearning.edu.vn
99 lines
3.9 KiB
Plaintext
99 lines
3.9 KiB
Plaintext
<div class="container my-5">
|
|
<h1>🧪 Test Footer Implementation</h1>
|
|
<p>Trang này test việc render footer từ backend API trong layout chính</p>
|
|
|
|
<div class="alert alert-info">
|
|
<h5>📊 Kiểm tra các yếu tố:</h5>
|
|
<ul class="mb-0">
|
|
<li>✅ Footer được load từ <code>GET /api/footer</code></li>
|
|
<li>✅ Render đúng các section: About, Columns, Contact, Social</li>
|
|
<li>✅ Tôn trọng thứ tự (order) của columns và social links</li>
|
|
<li>✅ XSS protection với escapeHtml()</li>
|
|
<li>✅ Fallback footer nếu API lỗi</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5>🔗 API Test</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<button class="btn btn-primary" onclick="testFooterAPI()">Test API</button>
|
|
<div id="apiResult" class="mt-3"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5>📱 Footer Status</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="footerStatus">
|
|
<p>Footer sẽ được load tự động khi trang tải xong.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
async function testFooterAPI() {
|
|
const resultDiv = document.getElementById("apiResult");
|
|
resultDiv.innerHTML = "<p>⏳ Đang test API...</p>";
|
|
|
|
try {
|
|
const response = await fetch("/api/footer");
|
|
const data = await response.json();
|
|
|
|
let html = '<div class="alert alert-success">';
|
|
html += "<h6>✅ API Response thành công:</h6>";
|
|
html += `<p><strong>About:</strong> ${data.about?.title || "N/A"}</p>`;
|
|
html += `<p><strong>Columns:</strong> ${data.columns?.length || 0} cột</p>`;
|
|
html += `<p><strong>Social:</strong> ${data.social?.links?.length || 0} links</p>`;
|
|
html += `<p><strong>Contact:</strong> ${data.contact?.email || "N/A"}</p>`;
|
|
html += "</div>";
|
|
|
|
resultDiv.innerHTML = html;
|
|
} catch (error) {
|
|
resultDiv.innerHTML = `<div class="alert alert-danger">❌ Lỗi: ${error.message}</div>`;
|
|
}
|
|
}
|
|
|
|
// Monitor footer loading
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const statusDiv = document.getElementById("footerStatus");
|
|
|
|
// Check if footer elements exist
|
|
const footerContent = document.getElementById("footerContent");
|
|
const footerCopyright = document.getElementById("footerCopyright");
|
|
|
|
if (footerContent && footerCopyright) {
|
|
statusDiv.innerHTML = `
|
|
<div class="alert alert-success">
|
|
✅ Footer elements found<br>
|
|
✅ Dynamic loading script active<br>
|
|
✅ Footer sẽ được render từ API
|
|
</div>
|
|
`;
|
|
|
|
// Monitor footer content changes
|
|
const observer = new MutationObserver(function (mutations) {
|
|
mutations.forEach(function (mutation) {
|
|
if (mutation.target.id === "footerContent" && mutation.target.innerHTML.includes("About")) {
|
|
statusDiv.innerHTML +=
|
|
'<div class="alert alert-info mt-2">🎉 Footer đã được render thành công!</div>';
|
|
}
|
|
});
|
|
});
|
|
|
|
observer.observe(footerContent, { childList: true, subtree: true });
|
|
} else {
|
|
statusDiv.innerHTML = '<div class="alert alert-warning">⚠️ Footer elements không tìm thấy</div>';
|
|
}
|
|
});
|
|
</script>
|