227 lines
10 KiB
JavaScript
227 lines
10 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
||
const leftSection = document.querySelector('.left-section');
|
||
const rightSection = document.querySelector('.right-section');
|
||
|
||
Sortable.create(leftSection, {
|
||
group: 'sections',
|
||
draggable: '.draggable-section',
|
||
handle: 'h2',
|
||
animation: 150
|
||
});
|
||
|
||
Sortable.create(rightSection, {
|
||
group: 'sections',
|
||
draggable: '.draggable-section',
|
||
handle: 'h2',
|
||
animation: 150
|
||
});
|
||
|
||
const addButtons = document.querySelectorAll('.add-item');
|
||
addButtons.forEach(button => {
|
||
button.addEventListener('click', function () {
|
||
const listId = this.dataset.list;
|
||
const listElement = document.querySelector(`.editable-list[data-field="${listId}"]`);
|
||
if (listElement) {
|
||
const newItem = document.createElement('li');
|
||
newItem.classList.add('editable-item');
|
||
let innerHTML = '';
|
||
if (listId === 'skills') {
|
||
innerHTML = `<label>
|
||
<i class="fas fa-check"></i>
|
||
</label>
|
||
<input type="text" class="editable" placeholder="Kỹ năng mới"><button class="remove-item">×<span class="sr-only">Xóa</span></button>`;
|
||
} else if (listId === 'experiences') {
|
||
innerHTML = `
|
||
<div>
|
||
<input type="text" class="editable" data-field="job_title" placeholder="Vị trí">
|
||
<input type="text" class="editable" data-field="company" placeholder="Công ty">
|
||
<div class="date-range">
|
||
<input type="text" class="editable" data-field="start_date"
|
||
placeholder="Từ ngày">
|
||
<input type="text" class="editable" data-field="end_date"
|
||
placeholder="Đến ngày">
|
||
</div>
|
||
<textarea class="editable" data-field="description" placeholder="Mô tả công việc"></textarea>
|
||
</div>
|
||
<button class="remove-item">×<span class="sr-only">Xóa</span></button>
|
||
`;
|
||
} else if (listId === 'educations') {
|
||
innerHTML = `
|
||
<div>
|
||
<input type="text" class="editable" data-field="degree" placeholder="Bằng cấp">
|
||
<input type="text" class="editable" data-field="institution" placeholder="Trường/Trung tâm">
|
||
<input type="text" class="editable" data-field="duration" placeholder="Thời gian">
|
||
<textarea class="editable" data-field="description" placeholder="Mô tả"></textarea>
|
||
</div>
|
||
<button class="remove-item">×<span class="sr-only">Xóa</span></button>
|
||
`;
|
||
} else if (listId == 'awards') {
|
||
innerHTML = `
|
||
<input type="text" class="editable" value="Giải thưởng mới">
|
||
<button class="remove-item">×<span class="sr-only">Xóa</span></button>
|
||
`;
|
||
} else if (listId == 'certifications') {
|
||
innerHTML = `
|
||
<input type="text" class="editable" value="Chứng chỉ mới">
|
||
<button class="remove-item">×<span class="sr-only">Xóa</span></button>
|
||
`;
|
||
} else if (listId == 'activities') {
|
||
innerHTML = `
|
||
<input type="text" class="editable" value="Hoạt động mới">
|
||
<button class="remove-item">×<span class="sr-only">Xóa</span></button>
|
||
`;
|
||
}
|
||
newItem.innerHTML = innerHTML;
|
||
listElement.appendChild(newItem);
|
||
addRemoveButtonListener(newItem.querySelector('.remove-item'));
|
||
|
||
// Khởi tạo lại Sortable cho danh sách đã cập nhật
|
||
Sortable.create(listElement, {
|
||
group: listElement.dataset.field,
|
||
draggable: '.editable-item',
|
||
animation: 150
|
||
});
|
||
}
|
||
});
|
||
});
|
||
|
||
function addRemoveButtonListener(button) {
|
||
button.addEventListener('click', function () {
|
||
this.parentNode.remove();
|
||
});
|
||
}
|
||
|
||
const editableLists = document.querySelectorAll('.editable-list');
|
||
editableLists.forEach(list => {
|
||
Sortable.create(list, {
|
||
group: list.dataset.field,
|
||
draggable: '.editable-item',
|
||
animation: 150
|
||
});
|
||
|
||
const items = list.querySelectorAll('.editable-item');
|
||
items.forEach(item => {
|
||
const removeButton = item.querySelector('.remove-item');
|
||
if (removeButton) {
|
||
addRemoveButtonListener(removeButton);
|
||
}
|
||
});
|
||
});
|
||
|
||
const saveCvButton = document.getElementById('save-cv');
|
||
saveCvButton.addEventListener('click', () => {
|
||
const formData = new FormData();
|
||
|
||
// Thu thập dữ liệu văn bản
|
||
const personalInfoElements = document.querySelectorAll('#personal-info .editable');
|
||
personalInfoElements.forEach(item => {
|
||
formData.append(`personalInfo[${item.dataset.field}]`, item.value);
|
||
});
|
||
|
||
const skillElements = document.querySelectorAll('#skills .editable-item > input.editable');
|
||
skillElements.forEach(item => {
|
||
formData.append('skills[]', item.value);
|
||
});
|
||
|
||
const experienceElements = document.querySelectorAll('#experience .editable-item');
|
||
experienceElements.forEach((item, index) => {
|
||
item.querySelectorAll('.editable').forEach(editable => {
|
||
formData.append(`experiences[${index}][${editable.dataset.field}]`, editable.value || editable.textContent);
|
||
});
|
||
});
|
||
|
||
const educationElements = document.querySelectorAll('#education .editable-item');
|
||
educationElements.forEach((item, index) => {
|
||
item.querySelectorAll('.editable').forEach(editable => {
|
||
formData.append(`educations[${index}][${editable.dataset.field}]`, editable.value || editable.textContent);
|
||
});
|
||
});
|
||
|
||
const awardsElements = document.querySelectorAll('#awards .editable-item > input.editable');
|
||
awardsElements.forEach(item => {
|
||
formData.append('awards[]', item.value);
|
||
});
|
||
|
||
const certificationsElements = document.querySelectorAll('#certifications .editable-item > input.editable');
|
||
certificationsElements.forEach(item => {
|
||
formData.append('certifications[]', item.value);
|
||
});
|
||
|
||
const activitiesElements = document.querySelectorAll('#activities .editable-item > input.editable');
|
||
activitiesElements.forEach(item => {
|
||
formData.append('activities[]', item.value);
|
||
});
|
||
|
||
|
||
// Thu thập file avatar
|
||
var fileInput = $('#avatar-upload')[0];
|
||
var file = fileInput.files[0];
|
||
if (file) {
|
||
formData.append('avatar', file, file.name); // 'avatar' là tên input file ở server
|
||
}
|
||
|
||
const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
|
||
let update_cv_route = $('#update_cv_route').val();
|
||
fetch(update_cv_route, {
|
||
method: 'POST',
|
||
headers: {
|
||
'X-CSRF-TOKEN': csrfToken,
|
||
},
|
||
body: formData, // Gửi FormData
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data.error) {
|
||
alert(data.error);
|
||
} else {
|
||
alert("Cập nhật CV thành công");
|
||
window.location.reload();
|
||
}
|
||
})
|
||
.catch((error) => {
|
||
alert(error);
|
||
});
|
||
});
|
||
});
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
// ... (phần code JavaScript hiện tại của bạn) ...
|
||
|
||
const avatarUpload = document.getElementById('avatar-upload');
|
||
const avatarPreview = document.getElementById('avatar-preview');
|
||
|
||
avatarUpload.addEventListener('change', function () {
|
||
const file = this.files[0];
|
||
if (file) {
|
||
const reader = new FileReader();
|
||
reader.onload = function (e) {
|
||
avatarPreview.src = e.target.result;
|
||
avatarPreview.style.display = 'block'; // Hiển thị ảnh sau khi tải
|
||
}
|
||
reader.readAsDataURL(file); // Đọc dữ liệu ảnh dưới dạng base64
|
||
} else {
|
||
avatarPreview.src = '#';
|
||
avatarPreview.style.display = 'none'; // Ẩn ảnh nếu không có file nào được chọn
|
||
}
|
||
});
|
||
|
||
const exportPdfButton = document.getElementById('export-pdf');
|
||
const cvContainer = document.querySelector('.cv-container');
|
||
|
||
exportPdfButton.addEventListener('click', () => {
|
||
const { jsPDF } = window.jspdf;
|
||
const pdf = new jsPDF('p', 'mm', 'a4');
|
||
const element = document.querySelector('.cv-container');
|
||
|
||
html2canvas(element).then(canvas => {
|
||
const imgData = canvas.toDataURL('image/png');
|
||
const pageWidth = pdf.internal.pageSize.getWidth();
|
||
const pageHeight = pdf.internal.pageSize.getHeight();
|
||
|
||
const imgWidth = pageWidth;
|
||
const imgHeight = canvas.height * imgWidth / canvas.width;
|
||
|
||
pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);
|
||
pdf.save('cv.pdf');
|
||
});
|
||
});
|
||
}); |