124 lines
5.2 KiB
HTML
124 lines
5.2 KiB
HTML
<!-- Contenedor Principal -->
|
|
<div x-data="videoinstitucionalForm" class="bg-white mx-3 my-3 rounded-lg p-6">
|
|
<h1 class="text-2xl font-bold mb-4">Gestión de Video Institucional</h1>
|
|
<p class="mb-4 text-sm">Actualiza el archivo del video institucional.</p>
|
|
|
|
<div x-show="loading" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex z-50 justify-center items-center">
|
|
<img src="../img/loading.gif" alt="Cargando..." class="w-16 h-16" />
|
|
</div>
|
|
|
|
<!-- Contenedor del Formulario -->
|
|
<div class="bg-white p-6 rounded-lg border shadow max-w-2xl mx-auto">
|
|
<!-- Alerta -->
|
|
<div x-show="showAlert" class="mb-4 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
|
|
<span x-text="alertMessage"></span>
|
|
</div>
|
|
<form @submit.prevent="submitUpdate">
|
|
<!-- Campo para el archivo Video Institucional -->
|
|
<div class="mb-6">
|
|
<label class="block mb-2" for="video_institucional">Archivo Video Institucional</label>
|
|
<input type="file" id="video_institucional" @change="handleFileChange($event, 'video_institucional')" class="border border-gray-300 rounded w-full p-2" accept=".mp4" />
|
|
<p x-show="video_institucional_path" class="mt-2 text-sm text-gray-600">
|
|
Archivo actual: <a :href="`${window.location.origin}/${video_institucional_path}`" target="_blank" class="text-blue-500 underline" x-text="video_institucional_path"></a>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Botón de Guardar -->
|
|
<div class="mt-6 text-right">
|
|
<button type="submit" class="bg-[#8eb02f] text-white px-4 py-2 rounded">Guardar Cambios</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
|
|
<!-- Alpine.js Script -->
|
|
<script>
|
|
document.addEventListener('alpine:init', () => {
|
|
Alpine.data('videoinstitucionalForm', () => ({
|
|
// Campos relacionados con el archivo
|
|
video_institucional: null,
|
|
video_institucional_path: '',
|
|
loading: false,
|
|
id_dato : 0,
|
|
showAlert: false,
|
|
alertMessage: '',
|
|
|
|
init() {
|
|
this.loadData();
|
|
},
|
|
|
|
loadData() {
|
|
this.loading = true;
|
|
fetch('/loadvideoinstitucional') // Cambia esta URL al endpoint correspondiente
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data && data.video_institucional) {
|
|
this.id_dato = data.ID;
|
|
this.video_institucional_path = data.video_institucional; // Ruta del archivo actual
|
|
}
|
|
})
|
|
.catch(error => console.error('Error:', error))
|
|
.finally(() => {
|
|
this.loading = false;
|
|
});
|
|
},
|
|
|
|
handleFileChange(event) {
|
|
const file = event.target.files[0];
|
|
if (!file) return;
|
|
|
|
// Validar que sea MP4
|
|
const allowedTypes = ['video/mp4'];
|
|
if(!allowedTypes.includes(file.type)) {
|
|
this.showAlert = true;
|
|
this.alertMessage = 'El archivo debe ser un video MP4.';
|
|
this.video_institucional = null;
|
|
event.target.value = ''; // Reset input
|
|
return;
|
|
}
|
|
|
|
// Validar tamaño del archivo (ej: máx 50MB)
|
|
const maxSize = 50 * 1024 * 1024; // 50MB
|
|
if(file.size > maxSize) {
|
|
this.showAlert = true;
|
|
this.alertMessage = 'El archivo no debe exceder los 50MB.';
|
|
this.video_institucional = null;
|
|
event.target.value = ''; // Reset input
|
|
return;
|
|
}
|
|
|
|
// Si pasa las validaciones, asignar el archivo y cerrar alerta
|
|
this.showAlert = false;
|
|
this.alertMessage = '';
|
|
this.video_institucional = file;
|
|
},
|
|
|
|
submitUpdate() {
|
|
this.loading = true;
|
|
const formData = new FormData();
|
|
// Validar si hay un archivo nuevo
|
|
if (this.video_institucional) {
|
|
formData.append('video_institucional', this.video_institucional);
|
|
} else if (this.video_institucional_path) {
|
|
// Si no hay archivo nuevo, enviar el valor actual
|
|
formData.append('video_institucional', this.video_institucional_path);
|
|
}
|
|
|
|
fetch('/app/videoinstitucional/'+this.id_dato, { // Cambia esta URL al endpoint correspondiente
|
|
method: 'PUT',
|
|
body: formData
|
|
})
|
|
.then(response => response.json())
|
|
.then(() => {
|
|
this.loadData(); // Recargar datos después de la actualización
|
|
})
|
|
.catch(error => console.error('Error:', error))
|
|
.finally(() => {
|
|
this.loading = false;
|
|
});
|
|
}
|
|
}));
|
|
});
|
|
</script>
|
|
</div>
|