Add toaster

atsebayt/src/components/SurveyAdmin.svelte

@@ -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,
+         });
      })
  }
 

atsebayt/src/components/SurveyQuestions.svelte

@@ -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.",
+         });
      });
  }
 

atsebayt/src/components/Toaster.svelte

@@ -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>

atsebayt/src/routes/__layout.svelte

@@ -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 />

atsebayt/src/routes/surveys/[sid]/live.svelte

@@ -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.",
+             });
          });
      }
  }

atsebayt/src/stores/toasts.js

@@ -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();