feat: implement dynamic training course tab system and modular PDF data migration scripts
This commit is contained in:
@@ -0,0 +1,140 @@
|
||||
const fs = require('fs');
|
||||
|
||||
let fileContent = fs.readFileSync('src/main/resources/templates/dao-tao-detail.html', 'utf8');
|
||||
|
||||
// 1. Remove the hardcoded tabs from the HTML layout
|
||||
fileContent = fileContent.replace(
|
||||
` <div>
|
||||
<!-- Tabs -->
|
||||
<div class="flex justify-center xl:mb-8 md:mb-6 mb-4" style="margin-bottom: 2rem;">
|
||||
<div class="tabs-container">
|
||||
<button class="dao-tao-tab-btn active" data-tab="overview"> Tổng quan </button>
|
||||
<button class="dao-tao-tab-btn" data-tab="general-info"> Thông tin chung </button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tab: Tổng quan (nội dung chính) -->
|
||||
<div id="tab-overview" class="dao-tao-tab-panel active">
|
||||
<div class="prose prose-blog prose-table prose-content max-w-none" id="postContentParsed">
|
||||
<!-- Nội dung chi tiết sẽ được render tại đây -->
|
||||
</div>
|
||||
<div id="postContentRaw" style="display:none;" th:text="\${post.content}"></div>
|
||||
</div>
|
||||
<!-- Tab: Thông tin chung -->
|
||||
<div id="tab-general-info" class="dao-tao-tab-panel">
|
||||
<div class="prose prose-blog prose-table prose-content max-w-none" id="postGeneralInfoParsed">
|
||||
<!-- Thông tin chung sẽ được render tại đây -->
|
||||
</div>
|
||||
<div id="postExcerptRaw" style="display:none;" th:text="\${post.excerpt}"></div>
|
||||
</div>
|
||||
</div>`,
|
||||
` <div class="prose prose-blog prose-table prose-content max-w-none" id="postContentParsed">
|
||||
<!-- Nội dung chi tiết sẽ được render tại đây -->
|
||||
</div>
|
||||
<div id="postContentRaw" style="display:none;" th:text="\${post.content}"></div>`
|
||||
);
|
||||
|
||||
// 2. Add the trainingCourseInfo block renderer to blocksToHtml function
|
||||
const newBlockHandler = `
|
||||
case "trainingCourseInfo":
|
||||
var d = block.data;
|
||||
var introHtml = d.introText ? d.introText.split('\\n').filter(p=>p.trim()!=='').map(p => '<p>'+p+'</p>').join('') : '';
|
||||
|
||||
var hoSoHtml = d.documents ? d.documents.split('\\n').filter(p=>p.trim()!=='').map(p => '<li>'+p+'</li>').join('') : '';
|
||||
if(hoSoHtml) hoSoHtml = '<ul>' + hoSoHtml + '</ul>';
|
||||
|
||||
var luuYHtml = d.notes ? d.notes.split('\\n').filter(p=>p.trim()!=='').map(p => '<li>'+p+'</li>').join('') : '';
|
||||
if(luuYHtml) luuYHtml = '<ul>' + luuYHtml + '</ul>';
|
||||
|
||||
var locationHtml = d.location ? d.location.split('\\n').filter(p=>p.trim()!=='').map(p => '<p>'+p+'</p>').join('') : '';
|
||||
|
||||
// Generating the complete Tabs HTML
|
||||
html += '<div class="training-course-tabs-wrapper">';
|
||||
html += ' <div class="flex justify-center xl:mb-8 md:mb-6 mb-4" style="margin-bottom: 2rem;">';
|
||||
html += ' <div class="tabs-container">';
|
||||
html += ' <button class="dao-tao-tab-btn active" onclick="switchTrainingTab(this, \\'overview\\')"> Tổng quan </button>';
|
||||
html += ' <button class="dao-tao-tab-btn" onclick="switchTrainingTab(this, \\'general-info\\')"> Thông tin chung </button>';
|
||||
html += ' </div>';
|
||||
html += ' </div>';
|
||||
|
||||
// Tab 1
|
||||
html += ' <div class="dao-tao-tab-panel active" data-tab-content="overview">';
|
||||
if(introHtml) html += introHtml;
|
||||
|
||||
if(d.bannerText) {
|
||||
html += '<div style="-webkit-text-stroke-width:0px;background-color:rgb(255, 255, 255);box-sizing:border-box;color:rgb(102, 102, 102);font-family:Roboto, sans-serif;font-size:16px;font-style:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-weight:400;letter-spacing:normal;margin:0px;orphans:2;padding:0px;text-align:center;text-decoration-color:initial;text-decoration-style:initial;text-decoration-thickness:initial;text-indent:0px;text-transform:none;white-space:normal;widows:2;word-spacing:0px;"><span style="color:rgb(255,0,0);font-family:Roboto, sans-serif;font-size:12pt;"><b style="box-sizing:border-box;margin:0px;padding:0px;"><span style="box-sizing:border-box;margin:0px;padding:0px;"><strong>' + d.bannerText + '</strong></span></b></span></div>';
|
||||
}
|
||||
|
||||
html += '<figure class="table" style="width:100%;"><table class="ck-table-resized" style="border-collapse:collapse;border-spacing:0px;width:100%;">';
|
||||
html += '<colgroup><col style="width:25%;"><col style="width:75%;"></colgroup><tbody>';
|
||||
|
||||
if(d.time) html += '<tr><td><strong>Thời gian:</strong></td><td>' + d.time.replace(/\\n/g, '<br>') + '</td></tr>';
|
||||
if(d.audience) html += '<tr><td><strong>Đối tượng đăng ký:</strong></td><td>' + d.audience.replace(/\\n/g, '<br>') + '</td></tr>';
|
||||
|
||||
var thongTinLopHoc = '';
|
||||
if(d.fileChieuSinh) thongTinLopHoc += 'Thông báo chiêu sinh <a href="'+d.fileChieuSinh+'" target="_blank"><strong>file đính kèm</strong></a>';
|
||||
if(d.filePhieuDangKy) thongTinLopHoc += (thongTinLopHoc?' và ':'') + 'phiếu đăng ký <a href="'+d.filePhieuDangKy+'" target="_blank"><strong>file đính kèm</strong></a>';
|
||||
if(thongTinLopHoc) html += '<tr><td><strong>Thông tin lớp học</strong></td><td><p>' + thongTinLopHoc + '</p></td></tr>';
|
||||
|
||||
if(d.quantity) html += '<tr><td><strong>Số lượng:</strong></td><td><strong>' + d.quantity + '</strong></td></tr>';
|
||||
if(hoSoHtml) html += '<tr><td><strong>Hồ sơ đăng ký tham dự:</strong></td><td>' + hoSoHtml + '</td></tr>';
|
||||
if(luuYHtml) html += '<tr><td><strong>Lưu ý:</strong></td><td>' + luuYHtml + '</td></tr>';
|
||||
|
||||
html += '</tbody></table></figure>';
|
||||
html += ' </div>';
|
||||
|
||||
// Tab 2
|
||||
html += ' <div class="dao-tao-tab-panel" data-tab-content="general-info">';
|
||||
html += '<figure class="table" style="width:100%;"><table style="border-collapse:collapse;border-spacing:0px;width:100%;">';
|
||||
html += '<colgroup><col style="width:25%;"><col style="width:75%;"></colgroup><tbody>';
|
||||
|
||||
if(d.tuitionFee) html += '<tr><td><strong>Học phí:</strong></td><td><strong>' + d.tuitionFee + '</strong></td></tr>';
|
||||
if(locationHtml) html += '<tr><td><strong>Địa điểm nhận hồ sơ và học phí:</strong></td><td>' + locationHtml + '</td></tr>';
|
||||
|
||||
var bankHtml = '';
|
||||
if(d.bankAccountName) bankHtml += '<li>Tên tài khoản: ' + d.bankAccountName + '</li>';
|
||||
if(d.bankAccountNumber) bankHtml += '<li>Số tài khoản: ' + d.bankAccountNumber + '</li>';
|
||||
if(d.bankName) bankHtml += '<li>Tên ngân hàng: ' + d.bankName + '</li>';
|
||||
if(d.transferContent) bankHtml += '<li>Nội dung: <strong>' + d.transferContent + '</strong></li>';
|
||||
|
||||
if(bankHtml) {
|
||||
html += '<tr><td rowspan="2"><strong>Hình thức nộp học phí:</strong></td><td> </td></tr>';
|
||||
html += '<tr><td><strong>Chuyển khoản:</strong><ul>' + bankHtml + '</ul></td></tr>';
|
||||
}
|
||||
|
||||
html += '</tbody></table></figure>';
|
||||
html += ' </div>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
break;
|
||||
case "raw":`;
|
||||
|
||||
fileContent = fileContent.replace('case "raw":', newBlockHandler);
|
||||
|
||||
// 3. Remove the complicated tabSplit logic and leave just normal parsing
|
||||
const tabSplitLogicRegex = /var isJsonSplit = false;[\s\S]*?if \(!isJsonSplit\) \{[\s\S]*?if \(contentText.indexOf\('<!-- TAB_SPLIT -->'\) !== -1\) \{[\s\S]*?\} else \{[\s\S]*?parseEditorContent\(contentText, 'postContentParsed'\);[\s\S]*?parseEditorContent\(excerptText, 'postGeneralInfoParsed'\);[\s\S]*?\}[\s\S]*?\}/;
|
||||
|
||||
fileContent = fileContent.replace(tabSplitLogicRegex, "parseEditorContent(contentText, 'postContentParsed');");
|
||||
|
||||
// 4. Add the switchTrainingTab function script
|
||||
const scriptToAppend = `
|
||||
<script>
|
||||
function switchTrainingTab(btn, tabId) {
|
||||
var container = btn.closest('.training-course-tabs-wrapper');
|
||||
if(!container) return;
|
||||
|
||||
container.querySelectorAll('.dao-tao-tab-btn').forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
|
||||
container.querySelectorAll('.dao-tao-tab-panel').forEach(p => p.classList.remove('active'));
|
||||
var panel = container.querySelector('.dao-tao-tab-panel[data-tab-content="' + tabId + '"]');
|
||||
if(panel) panel.classList.add('active');
|
||||
}
|
||||
</script>
|
||||
`;
|
||||
|
||||
if (!fileContent.includes('function switchTrainingTab')) {
|
||||
fileContent = fileContent.replace('</body>', scriptToAppend + '\n </body>');
|
||||
}
|
||||
|
||||
fs.writeFileSync('src/main/resources/templates/dao-tao-detail.html', fileContent);
|
||||
Reference in New Issue
Block a user