refactor: update btn on/off tab in home page

This commit is contained in:
Đỗ Minh Nhật
2026-04-10 03:29:00 +07:00
parent fb951cb6ce
commit 48a230105c
11 changed files with 228 additions and 95 deletions

View File

@@ -3,8 +3,17 @@
<div class="row g-4">
<!-- Basic Info -->
<div class="col-md-12">
<div class="card border shadow-sm mb-1">
<div class="card-header bg-white d-flex justify-content-center align-items-center">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="achievementEnabled"
<%=(data.achievements?.enabled !==false ) ? 'checked' : '' %>>
</div>
</div>
</div>
<div class="card border shadow-sm">
<div class="card-header bg-white">
<div class="card-header bg-white d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<i class="fas fa-chart-pie me-2"></i>General Information
</h6>
@@ -13,23 +22,13 @@
<div class="row g-3">
<div class="col-md-6">
<label class="form-label fw-medium">Heading</label>
<input
type="text"
class="form-control"
id="achievementsHeading"
value="<%= data.achievements?.heading || '' %>"
placeholder="e.g., Our Achievements in Numbers"
/>
<input type="text" class="form-control" id="achievementsHeading"
value="<%= data.achievements?.heading || '' %>" placeholder="e.g., Our Achievements in Numbers" />
</div>
<div class="col-md-6">
<label class="form-label fw-medium">Subheading</label>
<input
type="text"
class="form-control"
id="achievementsSubheading"
value="<%= data.achievements?.subheading || '' %>"
placeholder="e.g., Did You Know"
/>
<input type="text" class="form-control" id="achievementsSubheading"
value="<%= data.achievements?.subheading || '' %>" placeholder="e.g., Did You Know" />
</div>
</div>
</div>
@@ -45,54 +44,38 @@
</h6>
</div>
<div class="card-body" id="achievementItemsContainer">
<% for(let i=0; i<4; i++) {
const item = (data.achievements?.items && data.achievements.items[i]) || {};
%>
<div class="card mb-3 bg-light border achievement-item">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-3">
<h6 class="card-title fw-bold mb-0">Achievement #<%= i + 1 %></h6>
</div>
<div class="row g-3">
<div class="col-md-3">
<label class="form-label fw-medium">Value (Number)</label>
<input
type="text"
class="form-control achievement-value"
value="<%= item.value || '' %>"
placeholder="e.g., 95"
/>
<% for(let i=0; i<4; i++) { const item=(data.achievements?.items && data.achievements.items[i]) || {}; %>
<div class="card mb-3 bg-light border achievement-item">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-3">
<h6 class="card-title fw-bold mb-0">Achievement #<%= i + 1 %>
</h6>
</div>
<div class="col-md-3">
<label class="form-label fw-medium">Suffix</label>
<input
type="text"
class="form-control achievement-suffix"
value="<%= item.suffix || '' %>"
placeholder="e.g., %"
/>
</div>
<div class="col-md-6">
<label class="form-label fw-medium">Label</label>
<input
type="text"
class="form-control achievement-label"
value="<%= item.label || '' %>"
placeholder="e.g., Visa Success Rate"
/>
</div>
<div class="col-md-12">
<label class="form-label fw-medium">Description</label>
<textarea
class="form-control achievement-description"
rows="2"
placeholder="Short description of this achievement"
><%= item.description || '' %></textarea>
<div class="row g-3">
<div class="col-md-3">
<label class="form-label fw-medium">Value (Number)</label>
<input type="text" class="form-control achievement-value" value="<%= item.value || '' %>"
placeholder="e.g., 95" />
</div>
<div class="col-md-3">
<label class="form-label fw-medium">Suffix</label>
<input type="text" class="form-control achievement-suffix" value="<%= item.suffix || '' %>"
placeholder="e.g., %" />
</div>
<div class="col-md-6">
<label class="form-label fw-medium">Label</label>
<input type="text" class="form-control achievement-label" value="<%= item.label || '' %>"
placeholder="e.g., Visa Success Rate" />
</div>
<div class="col-md-12">
<label class="form-label fw-medium">Description</label>
<textarea class="form-control achievement-description" rows="2"
placeholder="Short description of this achievement"><%= item.description || '' %></textarea>
</div>
</div>
</div>
</div>
</div>
<% } %>
<% } %>
</div>
</div>
</div>
@@ -102,8 +85,11 @@
<script>
// Đăng ký scraper cho phần achievements
window.homeScrapers = window.homeScrapers || {};
window.homeScrapers.achievements = function() {
window.homeScrapers.achievements = function () {
const items = [];
const enabled = document.getElementById("achievementEnabled")?.checked !== false;
document.querySelectorAll('.achievement-item').forEach(el => {
items.push({
value: el.querySelector('.achievement-value').value,
@@ -116,7 +102,8 @@
return {
heading: document.getElementById('achievementsHeading').value,
subheading: document.getElementById('achievementsSubheading').value,
items: items
items: items,
enabled
};
};
</script>
</script>