se agrega Toast

francisco/photos
Francisco Sandoval 2024-01-20 14:19:38 -03:00
parent 3b1e1a2387
commit 770c712e58
23 changed files with 112 additions and 70 deletions

View File

@ -0,0 +1,37 @@
<script>
let containerToast = null;
function onMessageToast(color, defaultDelay) {
return (message, delay = defaultDelay) => {
const html = `
<div class="toast align-items-center text-bg-${color} border-0"
style="min-height: 5rem;"
role="alert" aria-live="assertive" aria-atomic="true"
data-bs-autohide="true" data-bs-delay="${delay}">
<div class="d-flex">
<div class="toast-body text-light">${message}</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
`;
containerToast.insertAdjacentHTML('afterbegin', html)
const elem = containerToast.querySelector('.toast')
const item = new bootstrap.Toast(elem)
elem.addEventListener('hidden.bs.toast', () => elem.remove())
item.show()
}
}
globalThis.toast = {
success: onMessageToast('success', 5000),
error: onMessageToast('danger', 3000),
danger: onMessageToast('danger', 3000),
warning: onMessageToast('warning', 5000),
info: onMessageToast('info', 5000),
primary: onMessageToast('primary', 5000),
}
</script>
<div class="toast-container position-fixed top-0 end-0 p-3" bind:this={containerToast}>
</div>

View File

@ -19,6 +19,7 @@
import { onMount } from 'svelte' import { onMount } from 'svelte'
import { getInfoToken } from '$/services/login' import { getInfoToken } from '$/services/login'
import { storeSession } from '$/stores/global' import { storeSession } from '$/stores/global'
import Toast from '$/components/Toast.svelte';
let triggerEvent = false; let triggerEvent = false;
@ -69,3 +70,4 @@
</div> </div>
<Notifications /> <Notifications />
<Toast />

View File

@ -31,7 +31,7 @@
aplicaciones = data.results; aplicaciones = data.results;
count = data.count; count = data.count;
} catch (error) { } catch (error) {
alert(error) globalThis.toast.error(error)
} finally { } finally {
loading = false; loading = false;
} }

View File

@ -16,7 +16,7 @@
if (!id) return; if (!id) return;
form = await getAplicacion(id) || {} form = await getAplicacion(id) || {}
} catch (error) { } catch (error) {
alert(error.detail || error) globalThis.toast.success(error.detail || error)
} }
} }
@ -28,14 +28,14 @@
} else { } else {
form = await createAplicacion(form) form = await createAplicacion(form)
} }
alert('Se ha guardado la aplicación') globalThis.toast.success('Se ha guardado la aplicación')
dispatch('refresh') dispatch('refresh')
dispatch('close') dispatch('close')
} catch (error) { } catch (error) {
if (error.detail) { if (error.detail) {
alert(error.detail) globalThis.toast.success(error.detail)
} else { } else {
alert(JSON.stringify(error)) globalThis.toast.success(JSON.stringify(error))
} }
} finally { } finally {
loading = false; loading = false;
@ -47,11 +47,11 @@
if (!confirm('Eliminará el registro?')) return; if (!confirm('Eliminará el registro?')) return;
loading = true; loading = true;
await deleteAplicacion(form.id_aplicacion) await deleteAplicacion(form.id_aplicacion)
alert('Se ha eliminado la aplicación') globalThis.toast.success('Se ha eliminado la aplicación')
dispatch('refresh') dispatch('refresh')
dispatch('close') dispatch('close')
} catch (error) { } catch (error) {
alert(error.detail || error) globalThis.toast.success(error.detail || error)
} finally { } finally {
loading = false; loading = false;
} }

View File

@ -28,7 +28,7 @@
const offset = (page - 1) * limit; const offset = (page - 1) * limit;
comunas = await getComunas({ offset, limit, ordering: 'id_region' }) comunas = await getComunas({ offset, limit, ordering: 'id_region' })
} catch(error) { } catch(error) {
alert(error.detail || error) globalThis.toast.success(error.detail || error)
} finally { } finally {
loading = false loading = false
} }
@ -45,7 +45,7 @@
comuna = await getComuna(id_comuna) comuna = await getComuna(id_comuna)
es_nuevo = false es_nuevo = false
} catch (error) { } catch (error) {
alert(error.detail || error) globalThis.toast.success(error.detail || error)
} finally { } finally {
loading = false loading = false
} }
@ -58,11 +58,11 @@
} else { } else {
await updateComuna(comuna) await updateComuna(comuna)
} }
alert('Comuna guardada con exito') globalThis.toast.success('Comuna guardada con exito')
comuna = null; // se cierra el modal comuna = null; // se cierra el modal
onPage(page) // refresco la tabla de registros onPage(page) // refresco la tabla de registros
} catch (error) { } catch (error) {
alert(error.detail || error) globalThis.toast.success(error.detail || error)
} }
} }
@ -70,11 +70,11 @@
try { try {
if (!confirm(`Desea eliminar la comuna [${comuna.nombre_comuna}]?`)) return; if (!confirm(`Desea eliminar la comuna [${comuna.nombre_comuna}]?`)) return;
await deleteComuna(comuna.id_comuna) await deleteComuna(comuna.id_comuna)
alert('Comuna eliminada con exito') globalThis.toast.success('Comuna eliminada con exito')
comuna = null; // se cierra el modal comuna = null; // se cierra el modal
onPage(page) // refresco la tabla de registros onPage(page) // refresco la tabla de registros
} catch (error) { } catch (error) {
alert(error.detail || error) globalThis.toast.success(error.detail || error)
} }
} }
</script> </script>

View File

@ -11,7 +11,7 @@
try { try {
regiones = await getRegiones() regiones = await getRegiones()
} catch (error) { } catch (error) {
alert(error.detail || error) globalThis.toast.success(error.detail || error)
} }
} }
</script> </script>

View File

@ -16,12 +16,12 @@
getOperadores({ vigente: 1 }) getOperadores({ vigente: 1 })
.then(data => data.sort((a,b) => a.nombre_operador < b.nombre_operador? -1 : 1)) .then(data => data.sort((a,b) => a.nombre_operador < b.nombre_operador? -1 : 1))
.then(data => operadores = data) .then(data => operadores = data)
.catch(error => alert(error)) .catch(error => globalThis.toast.error(error))
getLineas({ vigente: 1 }) getLineas({ vigente: 1 })
.then(data => data.sort((a,b) => a.nombre_linea < b.nombre_linea? -1 : 1)) .then(data => data.sort((a,b) => a.nombre_linea < b.nombre_linea? -1 : 1))
.then(data => lineas = data) .then(data => lineas = data)
.catch(error => alert(error)) .catch(error => globalThis.toast.error(error))
function onChangeOperador() { function onChangeOperador() {
id_linea = '' id_linea = ''

View File

@ -25,7 +25,7 @@
imagenes = await getParaderoImagenes(parada.id_paradero); imagenes = await getParaderoImagenes(parada.id_paradero);
} }
} catch (error) { } catch (error) {
alert(error); globalThis.toast.error(error);
} finally { } finally {
loading = false; loading = false;
} }
@ -34,9 +34,9 @@
async function onSave() { async function onSave() {
try { try {
await updateParadero(form); await updateParadero(form);
alert("Información guardada"); globalThis.toast.success("Información guardada");
} catch (error) { } catch (error) {
alert(error); globalThis.toast.error(error);
} }
} }
@ -47,7 +47,7 @@
imagenes = await getParaderoImagenes(parada.id_paradero); imagenes = await getParaderoImagenes(parada.id_paradero);
form.file1.value = ""; form.file1.value = "";
} catch (error) { } catch (error) {
alert(error); globalThis.toast.error(error);
} }
} }
@ -59,7 +59,7 @@
(imagen) => imagen.id_paradero_imagen !== id_paradero_imagen, (imagen) => imagen.id_paradero_imagen !== id_paradero_imagen,
); );
} catch (error) { } catch (error) {
alert(error); globalThis.toast.error(error);
} }
} }
</script> </script>

View File

@ -19,7 +19,7 @@
if (!id_paradero) return; if (!id_paradero) return;
loading = true loading = true
dispositivos = await getDispositivos({ id_paradero }) dispositivos = await getDispositivos({ id_paradero })
url_qrcode = `${url_base}/public/infoStop?codigoParadero=${id_paradero}`; // url_qrcode = `${url_base}/public/infoStop?codigoParadero=${id_paradero}`;
} catch (error) { } catch (error) {
console.log({ error }); console.log({ error });
} finally { } finally {
@ -55,7 +55,7 @@
dispositivos = [ ...dispositivos, { ...nuevoDispositivo, tipo_dispositivo }] dispositivos = [ ...dispositivos, { ...nuevoDispositivo, tipo_dispositivo }]
nuevoDispositivo = null nuevoDispositivo = null
} catch (error) { } catch (error) {
alert(error) globalThis.toast.error(error)
} finally { } finally {
loading = false loading = false
} }
@ -68,7 +68,7 @@
await deleteDispositivo(id_dispositivo) await deleteDispositivo(id_dispositivo)
dispositivos = dispositivos.filter(el => el.id_dispositivo !== id_dispositivo) dispositivos = dispositivos.filter(el => el.id_dispositivo !== id_dispositivo)
} catch (error) { } catch (error) {
alert(error) globalThis.toast.error(error)
} finally { } finally {
loading = false loading = false
} }
@ -137,14 +137,15 @@
</div> </div>
{/if} {/if}
<div class="m-6"></div> {#if url_qrcode}
<div class="m-6"></div>
<div class="text-center mb-3"> <div class="text-center mb-3">
{#if url_qrcode}
<QrCode value={url_qrcode} /> <QrCode value={url_qrcode} />
{/if} </div>
</div> <a class="d-block my-3 text-center" target="_blank" href={url_qrcode}>Link</a>
<div class="text-center"> <div class="text-center">
<button class="btn btn-secondary">Imprimir QR</button> <button class="btn btn-secondary">Imprimir QR</button>
</div> </div>
{/if}
</div> </div>

View File

@ -17,27 +17,27 @@
if (!id_paradero) return; if (!id_paradero) return;
form = await getParadero(id_paradero) form = await getParadero(id_paradero)
} catch (error) { } catch (error) {
alert(error) globalThis.toast.error(error)
} }
} }
async function onSaveParadero() { async function onSaveParadero() {
try { try {
form = form.id_paradero ? await updateParadero(form) : await createParadero(form) form = form.id_paradero ? await updateParadero(form) : await createParadero(form)
alert('Información guardada') globalThis.toast.success('Información guardada')
} catch (error) { } catch (error) {
alert(error) globalThis.toast.error(error)
} }
} }
async function onDeleteParadero() { async function onDeleteParadero() {
try { try {
await deleteParadero(form.id_paradero) await deleteParadero(form.id_paradero)
alert('Paradero eliminado') globalThis.toast.success('Paradero eliminado')
dispatch('delete', form) dispatch('delete', form)
dispatch('close') dispatch('close')
} catch (error) { } catch (error) {
alert(error) globalThis.toast.error(error)
} }
} }
@ -45,9 +45,9 @@
try { try {
const { url_image } = await saveImageParadero(paradero.id_paradero, inputfile.files[0]) const { url_image } = await saveImageParadero(paradero.id_paradero, inputfile.files[0])
imagenEl.src = url_image + '?nocache=' + (new Date()).valueOf() imagenEl.src = url_image + '?nocache=' + (new Date()).valueOf()
alert('Imagen cambiada') globalThis.toast.success('Imagen cambiada')
} catch (error) { } catch (error) {
alert(error) globalThis.toast.error(error)
} }
} }
</script> </script>

View File

@ -70,7 +70,7 @@
regiones = await getRegiones() regiones = await getRegiones()
comunas = await getComunas() comunas = await getComunas()
} catch (error) { } catch (error) {
alert(error) globalThis.toast.error(error)
} }
} }
@ -80,7 +80,7 @@
const paraderos = data_default || await getMarcasParaderos() const paraderos = data_default || await getMarcasParaderos()
storeParaderos.set(paraderos) storeParaderos.set(paraderos)
} catch (error) { } catch (error) {
alert(error) globalThis.toast.error(error)
} finally { } finally {
loading = false loading = false
} }

View File

@ -124,7 +124,7 @@
} }
} catch (error) { } catch (error) {
alert(error) globalThis.toast.error(error)
} finally { } finally {
loading = false; loading = false;
} }

View File

@ -26,7 +26,7 @@
const offset = (page - 1) * limit; const offset = (page - 1) * limit;
personas = await getPersonas({ offset, limit }) personas = await getPersonas({ offset, limit })
} catch (error) { } catch (error) {
alert(error.detail || error) globalThis.toast.success(error.detail || error)
} finally { } finally {
loading = false; loading = false;
} }

View File

@ -14,7 +14,7 @@
try { try {
tipos_tratamiento = await getTiposPersona() tipos_tratamiento = await getTiposPersona()
} catch (error) { } catch (error) {
alert(error.detail || error) globalThis.toast.success(error.detail || error)
} }
} }

View File

@ -30,7 +30,7 @@
loading = true loading = true
form = await getPersona(rut) form = await getPersona(rut)
} catch (error) { } catch (error) {
alert(error.detail || error) globalThis.toast.success(error.detail || error)
} finally { } finally {
loading = false loading = false
} }
@ -44,10 +44,10 @@
} else { } else {
await updatePersona(form) await updatePersona(form)
} }
alert('Datos guardados con exito!') globalThis.toast.success('Datos guardados con exito!')
navigate('/personas') navigate('/personas')
} catch (error) { } catch (error) {
alert(error.detail || error) globalThis.toast.success(error.detail || error)
} }
} }
</script> </script>

View File

@ -31,7 +31,7 @@
roles = data.results; roles = data.results;
count = data.count; count = data.count;
} catch (error) { } catch (error) {
alert(error) globalThis.toast.error(error)
} finally { } finally {
loading = false; loading = false;
} }

View File

@ -27,7 +27,7 @@
await fetchPermisosAplicaciones(id_rol) await fetchPermisosAplicaciones(id_rol)
await fetchPermisosLineas(id_rol) await fetchPermisosLineas(id_rol)
} catch (error) { } catch (error) {
alert(error) globalThis.toast.error(error)
} }
} }
@ -44,7 +44,7 @@
return { ...app, id_rol_app, acceso, solo_visualizar, modificado: false } return { ...app, id_rol_app, acceso, solo_visualizar, modificado: false }
}) })
} catch (error) { } catch (error) {
alert(error) globalThis.toast.error(error)
} }
} }
@ -59,7 +59,7 @@
return { ...linea, id_rol_linea: item?.id_rol_linea || null, acceso, modificado: false } return { ...linea, id_rol_linea: item?.id_rol_linea || null, acceso, modificado: false }
}) })
} catch (error) { } catch (error) {
alert(error) globalThis.toast.error(error)
} }
} }
@ -73,9 +73,9 @@
await fetchPermisosLineas(form.id_rol) await fetchPermisosLineas(form.id_rol)
} }
dispatch('refresh') dispatch('refresh')
alert('Propiedades del Rol guardadas.') globalThis.toast.success('Propiedades del Rol guardadas.')
} catch (error) { } catch (error) {
alert(error) globalThis.toast.error(error)
} }
} }
@ -83,7 +83,7 @@
try { try {
} catch (error) { } catch (error) {
alert(error) globalThis.toast.error(error)
} }
} }
@ -104,9 +104,9 @@
await updateRolyaplicacion({ id_rol_app, solo_visualizar }) await updateRolyaplicacion({ id_rol_app, solo_visualizar })
} }
} }
alert('Permisos de aplicaciones guardadas') globalThis.toast.success('Permisos de aplicaciones guardadas')
} catch (error) { } catch (error) {
alert(error) globalThis.toast.error(error)
} }
} }
@ -124,10 +124,10 @@
await createRolLinea({ id_rol, id_linea }) await createRolLinea({ id_rol, id_linea })
} }
} }
alert('Permisos de lineas guardadas') globalThis.toast.success('Permisos de lineas guardadas')
} catch (error) { } catch (error) {
alert(error) globalThis.toast.error(error)
} }
} }

View File

@ -46,6 +46,8 @@
bgcolor2, bgcolor2,
color2, color2,
}); });
globalThis.toast.success('Datos de ruta guardados correctamente.')
dispatch("close"); dispatch("close");
} catch (error) { } catch (error) {
const data = JSON.parse(error) || null; const data = JSON.parse(error) || null;

View File

@ -17,7 +17,7 @@
try { try {
operadores = await getOperadores({ ordering: 'nombre_operador' }) operadores = await getOperadores({ ordering: 'nombre_operador' })
} catch (error) { } catch (error) {
alert(error) globalThis.toast.error(error)
} }
} }
@ -28,7 +28,7 @@
if (id_operador) conditions.id_operador = id_operador; if (id_operador) conditions.id_operador = id_operador;
lineas = await getLineas(conditions) lineas = await getLineas(conditions)
} catch (error) { } catch (error) {
alert(error) globalThis.toast.error(error)
} finally { } finally {
loading = false loading = false
} }

View File

@ -25,7 +25,7 @@
const offset = (page - 1) * limit; const offset = (page - 1) * limit;
usuarios = await getUsuarios({ offset, limit, ordering: 'login' }) usuarios = await getUsuarios({ offset, limit, ordering: 'login' })
} catch(error) { } catch(error) {
alert(error.detail || error) globalThis.toast.success(error.detail || error)
} finally { } finally {
loading = false; loading = false;
} }

View File

@ -6,7 +6,7 @@
export let clave2 = '' export let clave2 = ''
let roles = [] let roles = []
getRoles().then(data => roles = data).catch(error => alert(error)) getRoles().then(data => roles = data).catch(error => globalThis.toast.error(error))
</script> </script>
<div class="row"> <div class="row">

View File

@ -38,7 +38,7 @@
form_usuario = data; form_usuario = data;
} catch (error) { } catch (error) {
console.error(error) console.error(error)
alert(error.detail || error) globalThis.toast.success(error.detail || error)
} finally { } finally {
loading = false; loading = false;
} }
@ -47,7 +47,7 @@
async function onSave() { async function onSave() {
try { try {
if (form_usuario.clave && form_usuario.clave !== clave2) { if (form_usuario.clave && form_usuario.clave !== clave2) {
return alert('Segunda contraseña debe coincidir') return globalThis.toast.success('Segunda contraseña debe coincidir')
} }
if (es_nuevo) { if (es_nuevo) {
// para crear un usuario, es requerido enviar los datos de la persona ademas. // para crear un usuario, es requerido enviar los datos de la persona ademas.
@ -56,10 +56,10 @@
await updateUsuario(form_usuario) await updateUsuario(form_usuario)
await updatePersona(form_persona) await updatePersona(form_persona)
} }
alert('Datos guardados con exito!') globalThis.toast.success('Datos guardados con exito!')
navigate('/usuarios') navigate('/usuarios')
} catch (error) { } catch (error) {
alert(error.detail || error) globalThis.toast.success(error.detail || error)
} }
} }
@ -67,10 +67,10 @@
try { try {
if (!confirm(`Desea eliminar a ${form_usuario.login}?`)) return; if (!confirm(`Desea eliminar a ${form_usuario.login}?`)) return;
await deleteUsuario($params.login) await deleteUsuario($params.login)
alert('Registro eliminado con exito!') globalThis.toast.success('Registro eliminado con exito!')
navigate('/usuarios') navigate('/usuarios')
} catch (error) { } catch (error) {
alert(error.detail || error) globalThis.toast.success(error.detail || error)
} }
} }
</script> </script>

View File

@ -115,7 +115,7 @@ export async function deleteLineaParadero(id_paradero_linea) {
export async function getInfoPublic(id_paradero) { export async function getInfoPublic(id_paradero) {
const res = await fetch(`${base}/paraderos/info-public/${id_paradero}`, { const res = await fetch(`${base}/paraderos/info-public/${id_paradero}/`, {
headers: { "Authorization": `Bearer ${getToken()}` } headers: { "Authorization": `Bearer ${getToken()}` }
}) })
if (!res.ok) throw await res.text() if (!res.ok) throw await res.text()