Add toaster

This commit is contained in:
nemunaire 2022-03-01 13:16:20 +01:00
parent f77cfa4df8
commit 2a6d18eb77
6 changed files with 86 additions and 6 deletions

View File

@ -3,6 +3,7 @@
import { goto } from '$app/navigation';
import { getQuestions } from '../lib/questions';
import { ToastsStore } from '../stores/toasts';
const dispatch = createEventDispatcher();
export let survey = null;
@ -11,7 +12,9 @@
survey.save().then((response) => {
dispatch('saved');
}, (error) => {
console.log(error)
ToastsStore.addErrorToast({
msg: error.errmsg,
});
})
}
@ -19,7 +22,9 @@
survey.delete().then((response) => {
goto(`surveys`);
}, (error) => {
console.log(error)
ToastsStore.addErrorToast({
msg: error.errmsg,
});
})
}
@ -27,7 +32,9 @@
survey.duplicate().then((response) => {
goto(`surveys/${response.id}`);
}).catch((error) => {
console.log(error)
ToastsStore.addErrorToast({
msg: error.errmsg,
});
})
}

View File

@ -1,5 +1,6 @@
<script>
import { user } from '../stores/user';
import { ToastsStore } from '../stores/toasts';
import QuestionForm from '../components/QuestionForm.svelte';
import { Question } from '../lib/questions';
@ -19,10 +20,16 @@
survey.submitAnswers(res, id_user).then((response) => {
submitInProgress = false;
console.log("Vos réponses ont bien étés sauvegardées.");
ToastsStore.addToast({
msg: "Vos réponses ont bien étés sauvegardées.",
color: "success",
title: "Questionnaire",
});
}, (error) => {
submitInProgress = false;
console.log("Une erreur s'est produite durant l'envoi de vos réponses : " + error + "<br>Veuillez réessayer dans quelques instants.");
ToastsStore.addErrorToast({
msg: "Une erreur s'est produite durant l'envoi de vos réponses : " + error + "\nVeuillez réessayer dans quelques instants.",
});
});
}

View File

@ -0,0 +1,18 @@
<script>
import { ToastsStore } from '../stores/toasts';
</script>
<div class="toast-container position-absolute top-0 end-0 p-3">
{#each $ToastsStore.toasts as toast}
<div class="toast show" role="alert">
<div class="toast-header">
<div class="bg-{toast.color} rounded me-2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
<strong>{#if toast.title}{toast.title}{:else}Questionnaire{/if}</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
{toast.msg}
</div>
</div>
{/each}
</div>

View File

@ -42,6 +42,8 @@
</script>
<script>
import Toaster from '../components/Toaster.svelte';
export let rroute = '';
function switchAdminMode() {
@ -140,3 +142,5 @@
<div class="container mt-3">
<slot></slot>
</div>
<Toaster />

View File

@ -11,6 +11,7 @@
<script>
import { user } from '../../../stores/user';
import { ToastsStore } from '../../../stores/toasts';
import SurveyBadge from '../../../components/SurveyBadge.svelte';
import QuestionForm from '../../../components/QuestionForm.svelte';
import { getQuestion } from '../../../lib/questions';
@ -84,7 +85,9 @@
console.log("Vos réponses ont bien étés sauvegardées.");
}, (error) => {
value = null;
console.log("Une erreur s'est produite durant l'envoi de vos réponses : " + error + "<br>Veuillez réessayer dans quelques instants.");
ToastsStore.addErrorToast({
msg: "Une erreur s'est produite durant l'envoi de vos réponses : " + error + "\nVeuillez réessayer dans quelques instants.",
});
});
}
}

View File

@ -0,0 +1,41 @@
import { writable } from 'svelte/store';
function createToastsStore() {
const { subscribe, set, update } = writable({toasts: []});
const addToast = (o) => {
o.timestamp = new Date();
o.close = () => {
update((i) => {
i.toasts = i.toasts.filter((j) => {
return !(j.title === o.title && j.msg === o.msg && j.timestamp === o.timestamp)
});
return i;
});
}
update((i) => {
i.toasts.unshift(o);
return i;
});
o.cancel = setTimeout(o.close, o.dismiss?o.dismiss:5000);
};
const addErrorToast = (o) => {
if (!o.title) o.title = 'Une erreur est survenue !';
if (!o.color) o.color = 'danger';
return addToast(o);
};
return {
subscribe,
addToast,
addErrorToast,
};
}
export const ToastsStore = createToastsStore();