110 lines
3.6 KiB
JavaScript
110 lines
3.6 KiB
JavaScript
new Vue({
|
|
el: '#app',
|
|
data() {
|
|
return {
|
|
inputData: '',
|
|
inputFormat: 'auto',
|
|
outputFormat: 'json',
|
|
outputData: '',
|
|
loading: false,
|
|
message: '',
|
|
success: false,
|
|
darkMode: false // para el modo oscuro
|
|
};
|
|
},
|
|
methods: {
|
|
// function para auto-detectar el formato de los datos de entrada
|
|
detectFormat(input) {
|
|
try {
|
|
JSON.parse(input);
|
|
return 'json';
|
|
} catch (e) {
|
|
// No es JSON
|
|
}
|
|
|
|
if (input.trim().startsWith('<') && input.trim().endsWith('>')) {
|
|
return 'xml';
|
|
}
|
|
|
|
if (/^a:\d+:\{.*\}$/.test(input)) {
|
|
return 'phpSerialized';
|
|
}
|
|
|
|
return 'unknown';
|
|
},
|
|
toggleDarkMode() {
|
|
this.darkMode = !this.darkMode; // Invertir el valor de darkMode
|
|
},
|
|
async convertData() {
|
|
this.message = '';
|
|
|
|
if (!this.inputData.trim()) {
|
|
this.showAlert('Por favor, ingrese los datos de entrada.', false);
|
|
return;
|
|
}
|
|
|
|
// Si el usuario seleccionó "auto", detectar el formato
|
|
if (this.inputFormat === 'auto') {
|
|
const detectedFormat = this.detectFormat(this.inputData);
|
|
if (detectedFormat === 'unknown') {
|
|
this.showAlert('No se pudo detectar el formato de entrada.', false);
|
|
return;
|
|
}
|
|
this.inputFormat = detectedFormat;
|
|
this.showAlert(`Formato detectado: ${detectedFormat.toUpperCase()}.`, true);
|
|
}
|
|
|
|
if (this.inputFormat === this.outputFormat) {
|
|
this.showAlert('Seleccione formatos diferentes para la conversión.', false);
|
|
return;
|
|
}
|
|
|
|
this.loading = true;
|
|
|
|
try {
|
|
const response = await fetch('/index.php', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
inputData: this.inputData,
|
|
inputFormat: this.inputFormat,
|
|
outputFormat: this.outputFormat
|
|
})
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (response.ok) {
|
|
this.outputData = result.data.convertedData;
|
|
this.$nextTick(() => hljs.highlightElement(this.$refs.outputData));
|
|
this.showAlert('Conversión exitosa.', true);
|
|
} else {
|
|
this.outputData = 'Error en la conversión.';
|
|
this.showAlert(result.message || 'Error desconocido.', false);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
this.outputData = 'Error al convertir los datos.';
|
|
this.showAlert('Ocurrió un error al convertir los datos.', false);
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
},
|
|
showAlert(message, success) {
|
|
this.message = message;
|
|
this.success = success;
|
|
}
|
|
},
|
|
watch: {
|
|
darkMode(val) {
|
|
if (val) {
|
|
document.body.classList.add('dark-mode');
|
|
} else {
|
|
document.body.classList.remove('dark-mode');
|
|
}
|
|
}
|
|
}
|
|
});
|