forked from UKSOURCE/cms.lams
nhuttruong
30b90051c9
- Add Programme Mongoose model with sub-schemas and migrateFromJson static method - Add programme CRUD controller with audit logging and icon sanitization - Add programme admin views (index, edit) with tabbed form and dynamic arrays - Add seed migration script for programmes - Add /api/programmes and /api/programmes/:id public API endpoints - Register programme routes in admin and public router - Update dashboard with Programmes card and API endpoint entries - Update admin sidebar layout to include Programmes nav link
611 lines
31 KiB
Plaintext
611 lines
31 KiB
Plaintext
<div class="container">
|
|
<div class="d-flex justify-content-between align-items-center mt-4 mb-4 flex-wrap gap-2">
|
|
<div>
|
|
<h1 class="h3 mb-0" style="color: var(--primary-dark);"><%= title %></h1>
|
|
<p class="text-muted mb-0">Fields marked with <span class="text-danger">*</span> are required.</p>
|
|
</div>
|
|
<div class="d-flex gap-2">
|
|
<% if (programme._id && frontendUrl) { %>
|
|
<a href="<%= frontendUrl %>/programmes/<%= programme.id %>" class="btn btn-outline-primary" target="_blank" rel="noopener">
|
|
<i class="fas fa-external-link-alt me-2"></i>Preview
|
|
</a>
|
|
<% } %>
|
|
<a href="/admin/programme" class="btn btn-outline-secondary">
|
|
<i class="fas fa-arrow-left me-2"></i>Back to list
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<form
|
|
action="/admin/programme/update/<%= programme._id ? programme._id : 'new' %>?imageType=programmes"
|
|
method="POST"
|
|
enctype="multipart/form-data"
|
|
id="programmeForm"
|
|
class="content-with-fixed-buttons"
|
|
>
|
|
<%# Hidden JSON inputs for dynamic arrays %>
|
|
<input type="hidden" name="coreCourses" id="coreCoursesJson">
|
|
<input type="hidden" name="outcomes" id="outcomesJson">
|
|
<input type="hidden" name="faqs" id="faqsJson">
|
|
<input type="hidden" name="electives" id="electivesJson">
|
|
|
|
<div class="card shadow-sm border-0 mb-4">
|
|
<div class="card-header bg-white border-bottom">
|
|
<ul class="nav nav-tabs card-header-tabs" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" data-bs-toggle="tab" href="#tab-basic" role="tab">
|
|
<i class="fas fa-info-circle me-2"></i>Basic Info
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-bs-toggle="tab" href="#tab-detail" role="tab">
|
|
<i class="fas fa-file-alt me-2"></i>Detail Page
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-bs-toggle="tab" href="#tab-curriculum" role="tab">
|
|
<i class="fas fa-book me-2"></i>Curriculum
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-bs-toggle="tab" href="#tab-outcomes" role="tab">
|
|
<i class="fas fa-star me-2"></i>Outcomes
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-bs-toggle="tab" href="#tab-faq" role="tab">
|
|
<i class="fas fa-question-circle me-2"></i>FAQs
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-bs-toggle="tab" href="#tab-pricing" role="tab">
|
|
<i class="fas fa-dollar-sign me-2"></i>Pricing
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<div class="tab-content">
|
|
|
|
<%# ─── TAB 1: Basic Info ─────────────────────────────────────────── %>
|
|
<div class="tab-pane fade show active" id="tab-basic" role="tabpanel">
|
|
<div class="row g-3">
|
|
<div class="col-md-4">
|
|
<label class="form-label fw-medium" for="fieldId">ID / Code <span class="text-danger">*</span></label>
|
|
<input type="text" class="form-control" id="fieldId" name="id" value="<%= programme.id || '' %>" required placeholder="e.g. bs-cs, mba-db">
|
|
<div class="form-text">Dùng làm URL slug: /programmes/<strong>bs-cs</strong></div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label fw-medium" for="fieldLevel">Level</label>
|
|
<input type="text" class="form-control" id="fieldLevel" name="level" value="<%= programme.level || '' %>" placeholder="Bachelor's Degree, Master's…">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label fw-medium" for="fieldShortName">Short Name</label>
|
|
<input type="text" class="form-control" id="fieldShortName" name="shortName" value="<%= programme.shortName || '' %>" placeholder="MBA, B.S., Cert…">
|
|
</div>
|
|
<div class="col-md-12">
|
|
<label class="form-label fw-medium" for="fieldTitle">Title <span class="text-danger">*</span></label>
|
|
<input type="text" class="form-control" id="fieldTitle" name="title" value="<%= programme.title || '' %>" required>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<label class="form-label fw-medium" for="fieldDescription">Description (Listing card)</label>
|
|
<textarea class="form-control" id="fieldDescription" name="description" rows="3"><%= programme.description || '' %></textarea>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label fw-medium" for="fieldDuration">Duration</label>
|
|
<input type="text" class="form-control" id="fieldDuration" name="duration" value="<%= programme.duration || '' %>" placeholder="4 Years (Flexible)">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label fw-medium" for="fieldFormat">Format</label>
|
|
<input type="text" class="form-control" id="fieldFormat" name="format" value="<%= programme.format || '100% Online' %>">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label fw-medium" for="fieldLink">Public Link</label>
|
|
<input type="text" class="form-control" id="fieldLink" name="link" value="<%= programme.link || '' %>" placeholder="/programmes/bs-cs">
|
|
<div class="form-text">Tự sinh từ ID nếu để trống. Hiện tại: <code id="linkPreview">/programmes/<%= programme.id || '…' %></code></div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<div class="form-check form-switch mt-2">
|
|
<input class="form-check-input" type="checkbox" role="switch" id="fieldSelected" name="selected" value="true" <%= programme.selected ? 'checked' : '' %>>
|
|
<label class="form-check-label" for="fieldSelected">
|
|
<i class="fas fa-star text-warning me-1"></i>Featured / Selected (hiển thị nổi bật trên listing)
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<%# ─── TAB 2: Detail Page ────────────────────────────────────────── %>
|
|
<div class="tab-pane fade" id="tab-detail" role="tabpanel">
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<label class="form-label fw-medium" for="fieldDetailBadge">Detail Badge</label>
|
|
<input type="text" class="form-control" id="fieldDetailBadge" name="detailBadge" value="<%= programme.detailBadge || '' %>" placeholder="Bachelor of Science">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label fw-medium" for="fieldDetailTitle">Detail Title</label>
|
|
<input type="text" class="form-control" id="fieldDetailTitle" name="detailTitle" value="<%= programme.detailTitle || '' %>" placeholder="Computer Science">
|
|
</div>
|
|
<div class="col-md-12">
|
|
<label class="form-label fw-medium" for="fieldDetailDescription">Detail Description</label>
|
|
<textarea class="form-control" id="fieldDetailDescription" name="detailDescription" rows="3"><%= programme.detailDescription || '' %></textarea>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<label class="form-label fw-medium" for="fieldOverview">Overview (main body text)</label>
|
|
<textarea class="form-control" id="fieldOverview" name="overview" rows="5"><%= programme.overview || '' %></textarea>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label fw-medium" for="fieldCredits">Total Credits</label>
|
|
<input type="number" class="form-control" id="fieldCredits" name="credits" value="<%= programme.credits || 120 %>" min="0">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label fw-medium" for="fieldNextStartDate">Next Start Date</label>
|
|
<input type="text" class="form-control" id="fieldNextStartDate" name="nextStartDate" value="<%= programme.nextStartDate || '' %>" placeholder="September 1st">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<% /* placeholder col */ %>
|
|
</div>
|
|
|
|
<%# Hero Image Upload %>
|
|
<div class="col-md-8">
|
|
<label class="form-label fw-medium" for="heroImageUrl">Hero Image URL</label>
|
|
<div class="input-group mb-2">
|
|
<input type="text" class="form-control" id="heroImageUrl" name="heroImageUrl" value="<%= programme.heroImage || '' %>">
|
|
<button type="button" class="btn btn-outline-primary btn-upload-image" data-target-input="heroImageUrl" data-image-type="programmes">
|
|
<i class="fas fa-upload me-1"></i>Upload
|
|
</button>
|
|
</div>
|
|
<small class="text-muted">Hoặc upload file: </small>
|
|
<input type="file" name="heroImage" class="form-control form-control-sm mt-1" accept="image/*" id="heroImageFile">
|
|
</div>
|
|
<div class="col-md-4 d-flex align-items-end">
|
|
<div id="heroImagePreview" class="border rounded overflow-hidden bg-light w-100" style="height:100px;">
|
|
<% const hi = programme.heroImage; if (hi) { %>
|
|
<% let src = hi; if (!src.startsWith('http')) { src = src.startsWith('/') ? src : '/' + src; } %>
|
|
<img src="<%= src %>" alt="" class="w-100 h-100" style="object-fit:cover;" id="heroPreviewImg" onerror="this.style.display='none'">
|
|
<% } else { %>
|
|
<div class="h-100 d-flex align-items-center justify-content-center text-muted small">
|
|
<div class="text-center"><i class="fas fa-image fa-2x mb-1 d-block opacity-25"></i>No image</div>
|
|
</div>
|
|
<% } %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<%# ─── TAB 3: Curriculum ─────────────────────────────────────────── %>
|
|
<div class="tab-pane fade" id="tab-curriculum" role="tabpanel">
|
|
<div class="mb-4">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<div>
|
|
<h6 class="mb-0">Core Courses</h6>
|
|
<small class="text-muted">Môn học bắt buộc trong chương trình</small>
|
|
</div>
|
|
<button type="button" class="btn btn-sm btn-primary" id="addCourseBtn">
|
|
<i class="fas fa-plus me-1"></i>Add Course
|
|
</button>
|
|
</div>
|
|
<div id="coursesContainer" class="vstack gap-3">
|
|
<% (programme.coreCourses || []).forEach(function(course, idx) { %>
|
|
<div class="card course-row border">
|
|
<div class="card-body">
|
|
<div class="row g-2">
|
|
<div class="col-md-2">
|
|
<label class="form-label small">Course ID</label>
|
|
<input type="text" class="form-control course-id" value="<%= course.id || '' %>" placeholder="CS101">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label small">Title</label>
|
|
<input type="text" class="form-control course-title" value="<%= course.title || '' %>">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label small">Icon</label>
|
|
<select class="form-select course-icon-select">
|
|
<option value="">— No icon —</option>
|
|
<% iconOptions.forEach(function(opt) { %>
|
|
<option value="<%= opt.value %>" <%= (course.icon === opt.value) ? 'selected' : '' %>><%= opt.label %></option>
|
|
<% }); %>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-2 d-flex align-items-end justify-content-end">
|
|
<button type="button" class="btn btn-outline-danger btn-sm remove-course">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<label class="form-label small">Description</label>
|
|
<input type="text" class="form-control course-description" value="<%= course.description || '' %>">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% }); %>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<div>
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<div>
|
|
<h6 class="mb-0">Electives</h6>
|
|
<small class="text-muted">Môn học tự chọn</small>
|
|
</div>
|
|
<button type="button" class="btn btn-sm btn-secondary" id="addElectiveBtn">
|
|
<i class="fas fa-plus me-1"></i>Add Elective
|
|
</button>
|
|
</div>
|
|
<div id="electivesContainer" class="vstack gap-2">
|
|
<% (programme.electives || []).forEach(function(elective) { %>
|
|
<div class="input-group elective-row">
|
|
<input type="text" class="form-control elective-input" value="<%= elective %>">
|
|
<button type="button" class="btn btn-outline-danger remove-elective"><i class="fas fa-times"></i></button>
|
|
</div>
|
|
<% }); %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<%# ─── TAB 4: Outcomes ───────────────────────────────────────────── %>
|
|
<div class="tab-pane fade" id="tab-outcomes" role="tabpanel">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<div>
|
|
<h6 class="mb-0">Learning Outcomes</h6>
|
|
<small class="text-muted">Những gì sinh viên đạt được sau khoá học</small>
|
|
</div>
|
|
<button type="button" class="btn btn-sm btn-primary" id="addOutcomeBtn">
|
|
<i class="fas fa-plus me-1"></i>Add Outcome
|
|
</button>
|
|
</div>
|
|
<div id="outcomesContainer" class="vstack gap-3">
|
|
<% (programme.outcomes || []).forEach(function(outcome) { %>
|
|
<div class="card outcome-row border">
|
|
<div class="card-body">
|
|
<div class="row g-2">
|
|
<div class="col-md-6">
|
|
<label class="form-label small">Title</label>
|
|
<input type="text" class="form-control outcome-title" value="<%= outcome.title || '' %>">
|
|
</div>
|
|
<div class="col-md-5">
|
|
<label class="form-label small">Icon</label>
|
|
<select class="form-select outcome-icon-select">
|
|
<option value="">— No icon —</option>
|
|
<% iconOptions.forEach(function(opt) { %>
|
|
<option value="<%= opt.value %>" <%= (outcome.icon === opt.value) ? 'selected' : '' %>><%= opt.label %></option>
|
|
<% }); %>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-1 d-flex align-items-end justify-content-end">
|
|
<button type="button" class="btn btn-outline-danger btn-sm remove-outcome"><i class="fas fa-trash"></i></button>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<label class="form-label small">Description</label>
|
|
<textarea class="form-control outcome-description" rows="2"><%= outcome.description || '' %></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% }); %>
|
|
</div>
|
|
</div>
|
|
|
|
<%# ─── TAB 5: FAQs ───────────────────────────────────────────────── %>
|
|
<div class="tab-pane fade" id="tab-faq" role="tabpanel">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<div>
|
|
<h6 class="mb-0">Frequently Asked Questions</h6>
|
|
<small class="text-muted">Câu hỏi thường gặp trên trang chi tiết chương trình</small>
|
|
</div>
|
|
<button type="button" class="btn btn-sm btn-primary" id="addFaqBtn">
|
|
<i class="fas fa-plus me-1"></i>Add FAQ
|
|
</button>
|
|
</div>
|
|
<div id="faqsContainer" class="vstack gap-3">
|
|
<% (programme.faqs || []).forEach(function(faq) { %>
|
|
<div class="card faq-row border">
|
|
<div class="card-body">
|
|
<div class="row g-2">
|
|
<div class="col-md-11">
|
|
<label class="form-label small">Question</label>
|
|
<input type="text" class="form-control faq-question" value="<%= faq.question || '' %>">
|
|
</div>
|
|
<div class="col-md-1 d-flex align-items-end justify-content-end">
|
|
<button type="button" class="btn btn-outline-danger btn-sm remove-faq"><i class="fas fa-trash"></i></button>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<label class="form-label small">Answer</label>
|
|
<textarea class="form-control faq-answer" rows="2"><%= faq.answer || '' %></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% }); %>
|
|
</div>
|
|
</div>
|
|
|
|
<%# ─── TAB 6: Pricing ────────────────────────────────────────────── %>
|
|
<div class="tab-pane fade" id="tab-pricing" role="tabpanel">
|
|
<div class="row g-3">
|
|
<div class="col-md-4">
|
|
<label class="form-label fw-medium" for="fieldCost">Cost (hiển thị listing)</label>
|
|
<input type="text" class="form-control" id="fieldCost" name="cost" value="<%= programme.cost || '' %>" placeholder="$299 / month">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label fw-medium" for="fieldMonthlyCost">Monthly Cost (sidebar)</label>
|
|
<input type="text" class="form-control" id="fieldMonthlyCost" name="monthlyCost" value="<%= programme.monthlyCost || '' %>" placeholder="$299">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label fw-medium" for="fieldPerCourseCost">Per Course Cost (sidebar)</label>
|
|
<input type="text" class="form-control" id="fieldPerCourseCost" name="perCourseCost" value="<%= programme.perCourseCost || '' %>" placeholder="$450">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div><%# end .tab-content %>
|
|
</div><%# end .card-body %>
|
|
</div><%# end .card %>
|
|
|
|
<div class="fixed-bottom-buttons">
|
|
<a href="/admin/programme" class="btn btn-secondary">
|
|
<i class="fas fa-times me-2"></i>Cancel
|
|
</a>
|
|
<button type="submit" class="btn btn-primary" id="submitBtn">
|
|
<i class="fas fa-save me-2"></i>Save Programme
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
window.PROGRAMME_ICON_OPTIONS = <%- JSON.stringify(iconOptions || []) %>;
|
|
|
|
function escHtml(s) {
|
|
return String(s || '')
|
|
.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
|
|
}
|
|
|
|
function iconOptionsHtml(selected) {
|
|
var opts = window.PROGRAMME_ICON_OPTIONS;
|
|
var html = '<option value="">— No icon —</option>';
|
|
for (var i = 0; i < opts.length; i++) {
|
|
var o = opts[i];
|
|
var sel = (o.value === selected) ? ' selected' : '';
|
|
html += '<option value="' + escHtml(o.value) + '"' + sel + '>' + escHtml(o.label) + '</option>';
|
|
}
|
|
return html;
|
|
}
|
|
|
|
function buildCourseRow(c) {
|
|
c = c || {};
|
|
return (
|
|
'<div class="card course-row border">' +
|
|
'<div class="card-body">' +
|
|
'<div class="row g-2">' +
|
|
'<div class="col-md-2"><label class="form-label small">Course ID</label>' +
|
|
'<input type="text" class="form-control course-id" value="' + escHtml(c.id) + '" placeholder="CS101"></div>' +
|
|
'<div class="col-md-4"><label class="form-label small">Title</label>' +
|
|
'<input type="text" class="form-control course-title" value="' + escHtml(c.title) + '"></div>' +
|
|
'<div class="col-md-4"><label class="form-label small">Icon</label>' +
|
|
'<select class="form-select course-icon-select"><' + 'option value="">— No icon —</' + 'option>' + iconOptionsHtml(c.icon) + '</select></div>' +
|
|
'<div class="col-md-2 d-flex align-items-end justify-content-end">' +
|
|
'<button type="button" class="btn btn-outline-danger btn-sm remove-course"><i class="fas fa-trash"></i></button></div>' +
|
|
'<div class="col-md-12"><label class="form-label small">Description</label>' +
|
|
'<input type="text" class="form-control course-description" value="' + escHtml(c.description) + '"></div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>'
|
|
);
|
|
}
|
|
|
|
function buildOutcomeRow(o) {
|
|
o = o || {};
|
|
return (
|
|
'<div class="card outcome-row border">' +
|
|
'<div class="card-body">' +
|
|
'<div class="row g-2">' +
|
|
'<div class="col-md-6"><label class="form-label small">Title</label>' +
|
|
'<input type="text" class="form-control outcome-title" value="' + escHtml(o.title) + '"></div>' +
|
|
'<div class="col-md-5"><label class="form-label small">Icon</label>' +
|
|
'<select class="form-select outcome-icon-select"><option value="">— No icon —</option>' + iconOptionsHtml(o.icon) + '</select></div>' +
|
|
'<div class="col-md-1 d-flex align-items-end justify-content-end">' +
|
|
'<button type="button" class="btn btn-outline-danger btn-sm remove-outcome"><i class="fas fa-trash"></i></button></div>' +
|
|
'<div class="col-md-12"><label class="form-label small">Description</label>' +
|
|
'<textarea class="form-control outcome-description" rows="2">' + escHtml(o.description) + '</textarea></div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>'
|
|
);
|
|
}
|
|
|
|
function buildFaqRow(f) {
|
|
f = f || {};
|
|
return (
|
|
'<div class="card faq-row border">' +
|
|
'<div class="card-body">' +
|
|
'<div class="row g-2">' +
|
|
'<div class="col-md-11"><label class="form-label small">Question</label>' +
|
|
'<input type="text" class="form-control faq-question" value="' + escHtml(f.question) + '"></div>' +
|
|
'<div class="col-md-1 d-flex align-items-end justify-content-end">' +
|
|
'<button type="button" class="btn btn-outline-danger btn-sm remove-faq"><i class="fas fa-trash"></i></button></div>' +
|
|
'<div class="col-md-12"><label class="form-label small">Answer</label>' +
|
|
'<textarea class="form-control faq-answer" rows="2">' + escHtml(f.answer) + '</textarea></div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>'
|
|
);
|
|
}
|
|
|
|
function updateHeroPreview(url) {
|
|
var el = document.getElementById('heroImagePreview');
|
|
if (!el) return;
|
|
if (!url) {
|
|
el.innerHTML = '<div class="h-100 d-flex align-items-center justify-content-center text-muted small"><div class="text-center"><i class="fas fa-image fa-2x mb-1 d-block opacity-25"></i>No image</div></div>';
|
|
return;
|
|
}
|
|
var src = url;
|
|
if (!src.startsWith('http://') && !src.startsWith('https://')) {
|
|
src = src.startsWith('/') ? src : '/' + src;
|
|
}
|
|
el.innerHTML = '<img src="' + escHtml(src) + '" alt="" class="w-100 h-100" style="object-fit:cover;">';
|
|
}
|
|
|
|
function openImageUploader(targetInputId, imageType) {
|
|
var fileInput = document.createElement('input');
|
|
fileInput.type = 'file';
|
|
fileInput.accept = 'image/*';
|
|
fileInput.style.display = 'none';
|
|
document.body.appendChild(fileInput);
|
|
fileInput.onchange = async function (e) {
|
|
var file = e.target.files[0];
|
|
if (!file) return;
|
|
try {
|
|
var formData = new FormData();
|
|
formData.append('image', file);
|
|
var uploadBtn = document.querySelector('[data-target-input="' + targetInputId + '"]');
|
|
var original = uploadBtn ? uploadBtn.innerHTML : '';
|
|
if (uploadBtn) { uploadBtn.disabled = true; uploadBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>...'; }
|
|
var res = await fetch('/admin/upload/image?imageType=' + encodeURIComponent(imageType || 'general'), {
|
|
method: 'POST', body: formData,
|
|
});
|
|
var result = await res.json();
|
|
if (!result.success) throw new Error(result.error || 'Upload failed');
|
|
var input = document.getElementById(targetInputId);
|
|
if (input) { input.value = result.path || ''; updateHeroPreview(input.value); }
|
|
if (uploadBtn) { uploadBtn.disabled = false; uploadBtn.innerHTML = original; }
|
|
} catch (err) {
|
|
console.error(err);
|
|
alert('Upload failed: ' + (err.message || err));
|
|
var b = document.querySelector('[data-target-input="' + targetInputId + '"]');
|
|
if (b) { b.disabled = false; b.innerHTML = '<i class="fas fa-upload me-1"></i>Upload'; }
|
|
} finally {
|
|
document.body.removeChild(fileInput);
|
|
}
|
|
};
|
|
fileInput.click();
|
|
}
|
|
|
|
function syncHiddenJson() {
|
|
// Core Courses
|
|
var courses = [];
|
|
document.querySelectorAll('#coursesContainer .course-row').forEach(function(row) {
|
|
courses.push({
|
|
id: row.querySelector('.course-id').value.trim(),
|
|
title: row.querySelector('.course-title').value.trim(),
|
|
description: row.querySelector('.course-description').value.trim(),
|
|
icon: row.querySelector('.course-icon-select').value,
|
|
});
|
|
});
|
|
document.getElementById('coreCoursesJson').value = JSON.stringify(courses);
|
|
|
|
// Outcomes
|
|
var outcomes = [];
|
|
document.querySelectorAll('#outcomesContainer .outcome-row').forEach(function(row) {
|
|
outcomes.push({
|
|
title: row.querySelector('.outcome-title').value.trim(),
|
|
description: row.querySelector('.outcome-description').value.trim(),
|
|
icon: row.querySelector('.outcome-icon-select').value,
|
|
});
|
|
});
|
|
document.getElementById('outcomesJson').value = JSON.stringify(outcomes);
|
|
|
|
// FAQs
|
|
var faqs = [];
|
|
document.querySelectorAll('#faqsContainer .faq-row').forEach(function(row) {
|
|
faqs.push({
|
|
question: row.querySelector('.faq-question').value.trim(),
|
|
answer: row.querySelector('.faq-answer').value.trim(),
|
|
});
|
|
});
|
|
document.getElementById('faqsJson').value = JSON.stringify(faqs);
|
|
|
|
// Electives — gửi dạng [{value: "..."}, ...] giống student-support
|
|
var electives = [];
|
|
document.querySelectorAll('#electivesContainer .elective-input').forEach(function(inp) {
|
|
var v = inp.value.trim();
|
|
if (v) electives.push({ value: v });
|
|
});
|
|
document.getElementById('electivesJson').value = JSON.stringify(electives);
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
var form = document.getElementById('programmeForm');
|
|
form.addEventListener('submit', function (e) {
|
|
e.preventDefault();
|
|
var btn = document.getElementById('submitBtn');
|
|
btn.disabled = true;
|
|
btn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Saving…';
|
|
try {
|
|
syncHiddenJson();
|
|
form.submit();
|
|
} catch (err) {
|
|
console.error(err);
|
|
alert('Could not prepare form data. Please try again.');
|
|
btn.disabled = false;
|
|
btn.innerHTML = '<i class="fas fa-save me-2"></i>Save Programme';
|
|
}
|
|
});
|
|
|
|
// Upload image buttons
|
|
document.querySelectorAll('.btn-upload-image').forEach(function(btn) {
|
|
btn.addEventListener('click', function () {
|
|
openImageUploader(this.dataset.targetInput, this.dataset.imageType);
|
|
});
|
|
});
|
|
|
|
// Hero image preview sync on text input
|
|
var heroInput = document.getElementById('heroImageUrl');
|
|
if (heroInput) {
|
|
heroInput.addEventListener('input', function () { updateHeroPreview(this.value); });
|
|
}
|
|
|
|
// Auto-sync link preview khi admin gõ ID
|
|
var fieldId = document.getElementById('fieldId');
|
|
var linkPreview = document.getElementById('linkPreview');
|
|
var fieldLink = document.getElementById('fieldLink');
|
|
if (fieldId && linkPreview) {
|
|
fieldId.addEventListener('input', function () {
|
|
var slug = this.value.trim().toLowerCase().replace(/\s+/g, '-');
|
|
linkPreview.textContent = '/programmes/' + (slug || '…');
|
|
// Nếu field link đang rỗng, tự động điền slug
|
|
if (fieldLink && !fieldLink.value) {
|
|
fieldLink.placeholder = '/programmes/' + (slug || 'your-id');
|
|
}
|
|
});
|
|
}
|
|
|
|
// Add buttons
|
|
document.getElementById('addCourseBtn').addEventListener('click', function () {
|
|
document.getElementById('coursesContainer').insertAdjacentHTML('beforeend', buildCourseRow({}));
|
|
});
|
|
document.getElementById('addOutcomeBtn').addEventListener('click', function () {
|
|
document.getElementById('outcomesContainer').insertAdjacentHTML('beforeend', buildOutcomeRow({}));
|
|
});
|
|
document.getElementById('addFaqBtn').addEventListener('click', function () {
|
|
document.getElementById('faqsContainer').insertAdjacentHTML('beforeend', buildFaqRow({}));
|
|
});
|
|
document.getElementById('addElectiveBtn').addEventListener('click', function () {
|
|
document.getElementById('electivesContainer').insertAdjacentHTML('beforeend',
|
|
'<div class="input-group elective-row">' +
|
|
'<input type="text" class="form-control elective-input" value="">' +
|
|
'<button type="button" class="btn btn-outline-danger remove-elective"><i class="fas fa-times"></i></button>' +
|
|
'</div>'
|
|
);
|
|
});
|
|
|
|
// Remove buttons (event delegation)
|
|
document.getElementById('coursesContainer').addEventListener('click', function(e) {
|
|
if (e.target.closest('.remove-course')) e.target.closest('.course-row').remove();
|
|
});
|
|
document.getElementById('outcomesContainer').addEventListener('click', function(e) {
|
|
if (e.target.closest('.remove-outcome')) e.target.closest('.outcome-row').remove();
|
|
});
|
|
document.getElementById('faqsContainer').addEventListener('click', function(e) {
|
|
if (e.target.closest('.remove-faq')) e.target.closest('.faq-row').remove();
|
|
});
|
|
document.getElementById('electivesContainer').addEventListener('click', function(e) {
|
|
if (e.target.closest('.remove-elective')) e.target.closest('.elective-row').remove();
|
|
});
|
|
});
|
|
</script>
|