375 lines
20 KiB
HTML
Executable File
375 lines
20 KiB
HTML
Executable File
<!-- Container Principal -->
|
|
<div x-data="parametrizacionForm" class="bg-white rounded-lg shadow">
|
|
<div class="container mx-auto p-6 w-full">
|
|
<h1 class="text-2xl font-bold mb-4">Parametrización del sitio web</h1>
|
|
<p class="mb-4 text-sm">Gestión de parametrización del sitio web</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>
|
|
|
|
<!-- Inicio del contenedor de grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<!-- Sección General -->
|
|
<div class="p-6 rounded-lg border w-full shadow">
|
|
<h2 class="text-xl font-bold mb-2">General</h2>
|
|
<!-- Contenido de la sección General -->
|
|
<label class="block mb-2" for="logo">Logo</label>
|
|
<input type="file" id="logo" @change="handleFileChange($event, 'logo')"
|
|
class="border border-gray-300 rounded w-full p-2 mb-2" accept="image/*">
|
|
<p x-show="logo_path" class="mb-2 text-sm text-gray-600">
|
|
Logo actual: <a :href="`/${logo_path}`" target="_blank" class="text-blue-500 underline"
|
|
x-text="logo_path.split('/').pop()"></a>
|
|
</p>
|
|
|
|
<!--<label class="block mb-2" for="video_institucional">Video institucional</label>
|
|
<input type="file" id="video_institucional" @change="handleFileChange($event, 'video_institucional')" class="border border-gray-300 rounded w-full p-2 mb-2" accept="video/*">
|
|
<p x-show="video_institucional_path" class="mb-2 text-sm text-gray-600">
|
|
Logo actual: <a :href="`/${video_institucional_path}`" target="_blank" class="text-blue-500 underline" x-text="video_institucional_path.split('/').pop()"></a>
|
|
</p>-->
|
|
|
|
<label class="block mb-2" for="descripcion_seo">Descripción SEO</label>
|
|
<textarea type="text" id="descripcion_seo" x-model="descripcion_seo"
|
|
placeholder="Ingrese la descripción SEO"
|
|
class="border border-gray-300 rounded w-full p-2 mb-4"></textarea>
|
|
|
|
<label class="block mb-2" for="email">Correo electrónico</label>
|
|
<input type="email" id="email" x-model="email" placeholder="Ingrese el correo electrónico"
|
|
class="border border-gray-300 rounded w-full p-2 mb-4">
|
|
|
|
<label class="block mb-2" for="enlace_pagar_ahora">Enlace de Pagar Ahora</label>
|
|
<input type="url" id="enlace_pagar_ahora" x-model="enlace_pagar_ahora"
|
|
placeholder="Ingrese el enlace de pago" class="border border-gray-300 rounded w-full p-2 mb-4">
|
|
|
|
<label class="block mb-2" for="imagen_resena">Imagen de la Reseña</label>
|
|
<input type="file" id="imagen_resena" @change="handleFileChange($event, 'imagen_resena')"
|
|
class="border border-gray-300 rounded w-full p-2 mb-4" accept="image/*">
|
|
<!-- Mostrar imagen actual de la reseña -->
|
|
<p x-show="imagen_resena_path" class="mb-2 text-sm text-gray-600">
|
|
Imagen actual: <a :href="`/${imagen_resena_path}`" target="_blank" class="text-blue-500 underline"
|
|
x-text="imagen_resena_path.split('/').pop()"></a>
|
|
</p>
|
|
|
|
<!-- Botón de Guardar para esta sección -->
|
|
<div class="mt-4 text-right">
|
|
<button @click.prevent="submitUpdateGeneral"
|
|
class="bg-[#8eb02f] text-white px-4 py-2 rounded">Guardar General</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sección Documentos -->
|
|
<div class="p-6 rounded-lg border w-full shadow">
|
|
<h2 class="text-xl font-bold mb-2">Documentos</h2>
|
|
<!-- Contenido de la sección Documentos -->
|
|
<label class="block mb-2" for="contrato_condiciones">Contrato Condiciones</label>
|
|
<input type="file" id="contrato_condiciones" @change="handleFileChange($event, 'contrato_condiciones')"
|
|
class="border border-gray-300 rounded w-full p-2 mb-2" accept=".pdf">
|
|
<!-- Mostrar contrato de condiciones actual -->
|
|
<p x-show="contrato_condiciones_path" class="mb-2 text-sm text-gray-600">
|
|
Archivo actual: <a :href="`/${contrato_condiciones_path}`" target="_blank"
|
|
class="text-blue-500 underline" x-text="contrato_condiciones_path.split('/').pop()"></a>
|
|
</p>
|
|
|
|
<label class="block mb-2" for="proteccion_datos">Protección de Datos</label>
|
|
<input type="file" id="proteccion_datos" @change="handleFileChange($event, 'proteccion_datos')"
|
|
class="border border-gray-300 rounded w-full p-2 mb-2" accept=".pdf">
|
|
<!-- Mostrar protección de datos actual -->
|
|
<p x-show="proteccion_datos_path" class="mb-2 text-sm text-gray-600">
|
|
Archivo actual: <a :href="`/${proteccion_datos_path}`" target="_blank"
|
|
class="text-blue-500 underline" x-text="proteccion_datos_path.split('/').pop()"></a>
|
|
</p>
|
|
|
|
<label class="block mb-2" for="contrato_condiciones_descripcion">Descripción de Condiciones</label>
|
|
<input type="text" id="contrato_condiciones_descripcion" x-model="contrato_condiciones_descripcion"
|
|
placeholder="Ingrese la descripción" class="border border-gray-300 rounded w-full p-2 mb-4">
|
|
|
|
<label class="block mb-2" for="proteccion_datos_descripcion">Descripción de Protección de Datos</label>
|
|
<input type="text" id="proteccion_datos_descripcion" x-model="proteccion_datos_descripcion"
|
|
placeholder="Ingrese la descripción" class="border border-gray-300 rounded w-full p-2 mb-4">
|
|
|
|
<!-- Botón de Guardar para esta sección -->
|
|
<div class="mt-4 text-right">
|
|
<button @click.prevent="submitUpdateDocumentos"
|
|
class="bg-[#8eb02f] text-white px-4 py-2 rounded">Guardar Documentos</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sección Redes Sociales -->
|
|
<div class="p-6 rounded-lg border w-full shadow">
|
|
<h2 class="text-xl font-bold mb-2">Redes Sociales</h2>
|
|
<!-- Contenido de la sección Redes Sociales -->
|
|
<label class="block mb-2" for="enlace_facebook">Enlace Facebook</label>
|
|
<input type="url" id="enlace_facebook" x-model="enlace_facebook"
|
|
placeholder="Ingrese el enlace de Facebook" class="border border-gray-300 rounded w-full p-2 mb-4">
|
|
|
|
<label class="block mb-2" for="enlace_instagram">Enlace Instagram</label>
|
|
<input type="url" id="enlace_instagram" x-model="enlace_instagram"
|
|
placeholder="Ingrese el enlace de Instagram" class="border border-gray-300 rounded w-full p-2 mb-4">
|
|
|
|
<label class="block mb-2" for="enlace_whatsapp">Whatsapp Principal</label>
|
|
<input type="url" id="enlace_whatsapp" x-model="enlace_whatsapp"
|
|
placeholder="Ingrese el número de Whatsapp" class="border border-gray-300 rounded w-full p-2 mb-4">
|
|
|
|
<!-- Campo Select para Estado -->
|
|
<label class="block mb-2" for="estado_redes">Estado</label>
|
|
<select id="estado_redes" x-model="estado_redes" class="border border-gray-300 rounded w-full p-2 mb-4">
|
|
<option value="true">Activo</option>
|
|
<option value="false">Inactivo</option>
|
|
</select>
|
|
|
|
<!-- Botón de Guardar para esta sección -->
|
|
<div class="mt-4 text-right">
|
|
<button @click.prevent="submitUpdateRedes" class="bg-[#8eb02f] text-white px-4 py-2 rounded">Guardar
|
|
Redes Sociales</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sección FNB (ocupa el ancho completo)
|
|
<div class="p-6 rounded-lg border w-full shadow">
|
|
<h2 class="text-xl font-bold mb-2">FNB</h2>
|
|
|
|
<label class="block mb-2" for="email_notificaciones_fnb">Email Notificaciones FNB</label>
|
|
<input type="email" id="email_notificaciones_fnb" x-model="email_notificaciones_fnb" placeholder="Ingrese el correo" class="border border-gray-300 rounded w-full p-2 mb-2">
|
|
<label class="block mb-2" for="descripcion_fnb">Descripción</label>
|
|
<textarea type="text" id="descripcion_fnb" x-model="descripcion_fnb" placeholder="Ingrese la descripción FNB" class="border border-gray-300 rounded w-full p-2 mb-4"></textarea>
|
|
|
|
<label class="block mb-2" for="donde_comprar_fnb">Dónde Comprar FNB</label>
|
|
<input type="file" id="donde_comprar_fnb" @change="handleFileChange($event, 'donde_comprar_fnb')" class="border border-gray-300 rounded w-full p-2 mb-4" accept=".pdf">
|
|
|
|
<p x-show="donde_comprar_fnb_path" class="mb-2 text-sm text-gray-600">
|
|
Archivo actual: <a :href="`/${donde_comprar_fnb_path}`" target="_blank" class="text-blue-500 underline" x-text="donde_comprar_fnb_path.split('/').pop()"></a>
|
|
</p>
|
|
|
|
|
|
<div class="mt-4 text-right">
|
|
<button @click.prevent="submitUpdateFNB" class="bg-[#8eb02f] text-white px-4 py-2 rounded">Guardar FNB</button>
|
|
</div>
|
|
</div>-->
|
|
|
|
<!-- Sección FNB (ocupa el ancho completo) -->
|
|
<div class="p-6 rounded-lg border w-full shadow">
|
|
<h2 class="text-xl font-bold mb-2">Importancia del pago</h2>
|
|
<!-- Contenido de la sección FNB -->
|
|
<label class="block mb-2" for="descripcion">Descripción</label>
|
|
<textarea type="text" id="descripcion" x-model="descripcion" placeholder="Ingrese la descripción SEO"
|
|
class="border border-gray-300 rounded w-full p-2 mb-4"></textarea>
|
|
|
|
<label class="block mb-2" for="descripcion_cuadro_azul">Descripción del cuadro azul</label>
|
|
<textarea type="text" id="descripcion_cuadro_azul" x-model="descripcion_cuadro_azul"
|
|
placeholder="Ingrese la descripción SEO"
|
|
class="border border-gray-300 rounded w-full p-2 mb-4"></textarea>
|
|
|
|
<!-- Botón de Guardar para esta sección -->
|
|
<div class="mt-4 text-right">
|
|
<button @click.prevent="submitUpdateImportancia"
|
|
class="bg-[#8eb02f] text-white px-4 py-2 rounded">Guardar importancia del Pago</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- Fin del contenedor de grid -->
|
|
</div>
|
|
|
|
<!-- Alpine.js Script -->
|
|
<script>
|
|
document.addEventListener('alpine:init', () => {
|
|
Alpine.data('parametrizacionForm', () => ({
|
|
logo: null,
|
|
descripcion_seo: '',
|
|
email: '',
|
|
enlace_pagar_ahora: '',
|
|
contrato_condiciones: null,
|
|
proteccion_datos: null,
|
|
contrato_condiciones_descripcion: '',
|
|
proteccion_datos_descripcion: '',
|
|
enlace_facebook: '',
|
|
enlace_instagram: '',
|
|
enlace_whatsapp: '',
|
|
email_notificaciones_fnb: '',
|
|
donde_comprar_fnb: null,
|
|
loading: false,
|
|
logo_path: '',
|
|
video_institucional: null,
|
|
video_institucional_path: '',
|
|
contrato_condiciones_path: '',
|
|
proteccion_datos_path: '',
|
|
donde_comprar_fnb_path: '',
|
|
descripcion: '',
|
|
descripcion_cuadro_azul: '',
|
|
descripcion_fnb: '',
|
|
estado_redes: true,
|
|
imagen_resena: null,
|
|
imagen_resena_path: '',
|
|
id_dato: 0,
|
|
|
|
init() {
|
|
this.loadData();
|
|
},
|
|
|
|
loadData() {
|
|
this.loading = true;
|
|
fetch('/loadparametrizacionweb')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data) {
|
|
this.id_dato = data.ID;
|
|
this.descripcion_seo = data.descripcion_seo;
|
|
this.email = data.email;
|
|
this.enlace_pagar_ahora = data.enlace_pagar_ahora;
|
|
this.contrato_condiciones_descripcion = data.contrato_condiciones_descripcion;
|
|
this.proteccion_datos_descripcion = data.proteccion_datos_descripcion;
|
|
this.enlace_facebook = data.enlace_facebook;
|
|
this.enlace_instagram = data.enlace_instagram;
|
|
this.enlace_whatsapp = data.enlace_whatsapp;
|
|
this.email_notificaciones_fnb = data.email_notificaciones_fnb;
|
|
this.logo_path = data.logo;
|
|
this.video_institucional_path = data.video_institucional;
|
|
this.contrato_condiciones_path = data.contrato_condiciones;
|
|
this.proteccion_datos_path = data.proteccion_datos;
|
|
this.donde_comprar_fnb_path = data.donde_comprar_fnb;
|
|
this.descripcion = data.descripcion;
|
|
this.descripcion_cuadro_azul = data.descripcion_cuadro_azul;
|
|
this.descripcion_fnb = data.descripcion_fnb;
|
|
this.estado_redes = data.estado_redes;
|
|
this.imagen_resena_path = data.imagen_resena;
|
|
}
|
|
})
|
|
.catch(error => console.error('Error:', error))
|
|
.finally(() => {
|
|
this.loading = false;
|
|
});
|
|
},
|
|
|
|
handleFileChange(event, field) {
|
|
if (field === 'imagen_resena') {
|
|
this.imagen_resena = event.target.files[0];
|
|
} else if (field === 'logo') {
|
|
this.logo = event.target.files[0];
|
|
} else if (field === 'contrato_condiciones') {
|
|
this.contrato_condiciones = event.target.files[0];
|
|
} else if (field === 'proteccion_datos') {
|
|
this.proteccion_datos = event.target.files[0];
|
|
} else if (field === 'donde_comprar_fnb') {
|
|
this.donde_comprar_fnb = event.target.files[0];
|
|
} else if (field === 'video_institucional') {
|
|
this.video_institucional = event.target.files[0];
|
|
}
|
|
},
|
|
|
|
|
|
// Funciones de actualización para cada sección
|
|
submitUpdateGeneral() {
|
|
this.loading = true;
|
|
const formData = new FormData();
|
|
formData.append('descripcion_seo', this.descripcion_seo);
|
|
formData.append('email', this.email);
|
|
formData.append('enlace_pagar_ahora', this.enlace_pagar_ahora);
|
|
if (this.logo) formData.append('logo', this.logo);
|
|
//if (this.video_institucional) formData.append('video_institucional', this.video_institucional);
|
|
if (this.imagen_resena) formData.append('imagen_resena', this.imagen_resena);
|
|
fetch('/app/parametrizacion-web/'+this.id_dato, {
|
|
method: 'PUT',
|
|
body: formData
|
|
})
|
|
.then(response => response.json())
|
|
.then(() => {
|
|
this.loadData();
|
|
})
|
|
.catch(error => console.error('Error:', error))
|
|
.finally(() => {
|
|
this.loading = false;
|
|
});
|
|
},
|
|
|
|
|
|
|
|
submitUpdateDocumentos() {
|
|
this.loading = true;
|
|
const formData = new FormData();
|
|
formData.append('contrato_condiciones_descripcion', this.contrato_condiciones_descripcion);
|
|
formData.append('proteccion_datos_descripcion', this.proteccion_datos_descripcion);
|
|
if (this.contrato_condiciones) formData.append('contrato_condiciones', this.contrato_condiciones);
|
|
if (this.proteccion_datos) formData.append('proteccion_datos', this.proteccion_datos);
|
|
|
|
fetch('/app/parametrizacion-web/'+this.id_dato, {
|
|
method: 'PUT',
|
|
body: formData
|
|
})
|
|
.then(response => response.json())
|
|
.then(() => {
|
|
this.loadData();
|
|
})
|
|
.catch(error => console.error('Error:', error))
|
|
.finally(() => {
|
|
this.loading = false;
|
|
});
|
|
},
|
|
|
|
submitUpdateRedes() {
|
|
this.loading = true;
|
|
const formData = new FormData();
|
|
formData.append('enlace_facebook', this.enlace_facebook);
|
|
formData.append('enlace_instagram', this.enlace_instagram);
|
|
formData.append('enlace_whatsapp', this.enlace_whatsapp);
|
|
formData.append('estado_redes', this.estado_redes);
|
|
|
|
fetch('/app/parametrizacion-web/'+this.id_dato, {
|
|
method: 'PUT',
|
|
body: formData
|
|
})
|
|
.then(response => response.json())
|
|
.then(() => {
|
|
this.loadData();
|
|
})
|
|
.catch(error => console.error('Error:', error))
|
|
.finally(() => {
|
|
this.loading = false;
|
|
});
|
|
},
|
|
|
|
submitUpdateFNB() {
|
|
this.loading = true;
|
|
const formData = new FormData();
|
|
formData.append('email_notificaciones_fnb', this.email_notificaciones_fnb);
|
|
formData.append('descripcion_fnb', this.descripcion_fnb);
|
|
if (this.donde_comprar_fnb) formData.append('donde_comprar_fnb', this.donde_comprar_fnb);
|
|
|
|
fetch('/app/parametrizacion-web/'+this.id_dato, {
|
|
method: 'PUT',
|
|
body: formData
|
|
})
|
|
.then(response => response.json())
|
|
.then(() => {
|
|
this.loadData();
|
|
})
|
|
.catch(error => console.error('Error:', error))
|
|
.finally(() => {
|
|
this.loading = false;
|
|
});
|
|
},
|
|
|
|
submitUpdateImportancia() {
|
|
this.loading = true;
|
|
const formData = new FormData();
|
|
formData.append('descripcion', this.descripcion);
|
|
formData.append('descripcion_cuadro_azul', this.descripcion_cuadro_azul);
|
|
|
|
fetch('/app/parametrizacion-web/'+this.id_dato, {
|
|
method: 'PUT',
|
|
body: formData
|
|
})
|
|
.then(response => response.json())
|
|
.then(() => {
|
|
this.loadData();
|
|
})
|
|
.catch(error => console.error('Error:', error))
|
|
.finally(() => {
|
|
this.loading = false;
|
|
});
|
|
},
|
|
|
|
}));
|
|
});
|
|
</script>
|
|
|
|
</div> |