refactor: restructure code and implement active tab UI

This commit is contained in:
Đỗ Minh Nhật
2026-04-09 13:37:48 +07:00
parent 46403d4fcb
commit 5bae55f459
8 changed files with 118 additions and 17 deletions

View File

@@ -41,14 +41,9 @@
aria-selected="false"><i class="fas fa-info-circle me-2"></i>Intro</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link <%= locals.activeTab === 'mission' ? 'active' : '' %>" id="mission-tab"
data-bs-toggle="tab" href="#mission" role="tab"
aria-selected="false"><i class="fas fa-bullseye me-2"></i>Mission</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link <%= locals.activeTab === 'features' ? 'active' : '' %>" id="features-tab"
data-bs-toggle="tab" href="#features" role="tab"
aria-selected="false"><i class="fas fa-star me-2"></i>Features</a>
<a class="nav-link <%= locals.activeTab === 'mission-vision' ? 'active' : '' %>" id="mission-vision-tab"
data-bs-toggle="tab" href="#mission-vision" role="tab"
aria-selected="false"><i class="fas fa-bullseye me-2"></i>Mission & Vision</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link <%= locals.activeTab === 'news' ? 'active' : '' %>" id="news-tab"
@@ -146,7 +141,7 @@
</div>
<!-- Mission Tab -->
<div class="tab-pane fade <%= locals.activeTab === 'mission' ? 'show active' : '' %>" id="mission" role="tabpanel">
<div class="tab-pane fade <%= locals.activeTab === 'mission-vision' ? 'show active' : '' %>" id="mission-vision" role="tabpanel">
<div class="card border shadow-sm">
<div class="card-header bg-white">
<h6 class="mb-0"><i class="fas fa-bullseye me-2"></i>Mission Section</h6>
@@ -215,10 +210,7 @@
</div>
</div>
</div>
</div>
<!-- Features Tab -->
<div class="tab-pane fade <%= locals.activeTab === 'features' ? 'show active' : '' %>" id="features" role="tabpanel">
<div class="card border shadow-sm">
<div class="card-header bg-white">
<h6 class="mb-0"><i class="fas fa-star me-2"></i>Features Section</h6>
@@ -361,11 +353,24 @@
</div>
</div>
<script id="serverAboutData" type="application/json">
<%- JSON.stringify(locals.data || {}) %>
</script>
<script>
let originalFormData = null;
document.addEventListener('DOMContentLoaded', function () {
originalFormData = <%- JSON.stringify(data) %>;
// Lấy nội dung text từ thẻ script ẩn và parse nó thành Object
const dataElement = document.getElementById('serverAboutData');
try {
originalFormData = JSON.parse(dataElement.textContent || '{}');
} catch (error) {
console.error('Lỗi khi parse dữ liệu từ server:', error);
originalFormData = {}; // Giá trị mặc định an toàn nếu parse xịt
}
updateAllJsonInputs(originalFormData);
initializeFormHandlers();
});

View File

@@ -8,6 +8,9 @@
<h6 class="mb-0">
<i class="fas fa-image me-2"></i>Hero Background
</h6>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="switchCheckChecked" checked>
</div>
</div>
<div class="card-body">
<div class="row g-3">