35004-vm/assets/js/main.js
2025-10-16 21:35:54 +00:00

94 lines
3.7 KiB
JavaScript

document.addEventListener('DOMContentLoaded', function () {
const mappingForm = document.getElementById('mappingForm');
const convertForm = document.getElementById('convertForm');
const inputSample = document.getElementById('inputSample');
const outputSample = document.getElementById('outputSample');
const buildMappingBtn = document.getElementById('buildMappingBtn');
const fullInputFile = document.getElementById('fullInputFile');
const convertBtn = document.getElementById('convertBtn');
const convertSection = document.getElementById('convertSection');
const convertResult = document.getElementById('convertResult');
const mappingFileInput = document.getElementById('mappingFile');
function checkMappingFiles() {
buildMappingBtn.disabled = !(inputSample.files.length > 0 && outputSample.files.length > 0);
}
function checkConvertFile() {
convertBtn.disabled = !(fullInputFile.files.length > 0);
}
inputSample.addEventListener('change', checkMappingFiles);
outputSample.addEventListener('change', checkMappingFiles);
fullInputFile.addEventListener('change', checkConvertFile);
mappingForm.addEventListener('submit', function (e) {
e.preventDefault();
buildMappingBtn.disabled = true;
buildMappingBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Building...';
const formData = new FormData(this);
formData.append('action', 'build_mapping');
fetch('api.php', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
if (data.success) {
alert('Mapping built successfully!');
mappingFileInput.value = data.mapping_file;
convertSection.classList.remove('d-none');
} else {
let errorMsg = 'Error building mapping: ' + data.error;
if(data.details) {
errorMsg += '\nDetails: ' + JSON.stringify(data.details);
}
alert(errorMsg);
}
})
.catch(error => {
console.error('Error:', error);
alert('An error occurred while building the mapping.');
})
.finally(() => {
buildMappingBtn.disabled = false;
buildMappingBtn.innerHTML = '<i class="fas fa-cogs me-2"></i>Build Mapping';
});
});
convertForm.addEventListener('submit', function (e) {
e.preventDefault();
convertBtn.disabled = true;
convertBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Converting...';
convertResult.innerHTML = '';
const formData = new FormData(this);
formData.append('action', 'convert');
fetch('api.php', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
if (data.success) {
convertResult.innerHTML = `<div class="alert alert-success">Conversion successful! <a href="outputs/${data.download_url}" download>Download Converted File</a></div>`;
} else {
convertResult.innerHTML = `<div class="alert alert-danger">Error: ${data.error}</div>`;
}
})
.catch(error => {
console.error('Error:', error);
convertResult.innerHTML = `<div class="alert alert-danger">An unexpected error occurred.</div>`;
})
.finally(() => {
convertBtn.disabled = false;
convertBtn.innerHTML = '<i class="fas fa-sync-alt me-2"></i>Convert';
});
});
});