From 1506de03671929ab720b630555db04285309d95c Mon Sep 17 00:00:00 2001
From: tdurieux <durieuxthomas@hotmail.com>
Date: Tue, 24 Aug 2021 12:32:49 +0200
Subject: [PATCH] add: create toast notifications in the dashboard

---
 public/index.html             | 32 +++++++++++++++++++++++++++++++-
 public/partials/dashboard.htm |  3 +--
 public/script/app.js          | 26 +++++++++++++++++++++++++-
 3 files changed, 57 insertions(+), 4 deletions(-)
diff --git a/public/index.html b/public/index.html
index e415752..0ad01da 100644
--- a/public/index.html
+++ b/public/index.html
@@ -61,7 +61,7 @@
     <script src="/script/external/ace/ace.js"></script>
     <script src="/script/external/ui-ace.min.js"></script>
     <script src="/script/langColors.js"></script>
-    
+
     <!-- Notebook -->
     <script src="/script/external/marked.min.js"></script>
     <script src="/script/external/purify.min.js"></script>
@@ -79,6 +79,36 @@
   <body keypress-events class="d-flex flex-column">
     <ng-include src="'partials/header.htm'"></ng-include>
     <ng-view class="align-items-stretch h-100 w-100 overflow-auto"></ng-view>
+
+    <div
+      class="position-fixed bottom-0 right-0 p-3"
+      style="z-index: 5; right: 0; bottom: 0"
+    >
+      <div
+        id="liveToast"
+        class="toast show"
+        role="alert"
+        aria-live="assertive"
+        aria-atomic="true"
+        data-delay="2000"
+        ng-repeat="toast in toasts"
+      >
+        <div class="toast-header">
+          <strong class="mr-auto" ng-bind="toast.title"></strong>
+          <button
+            type="button"
+            class="ml-2 mb-1 close"
+            data-dismiss="toast"
+            aria-label="Close"
+            ng-click="removeToast(toast);"
+          >
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="toast-body" ng-bind="toast.body"></div>
+      </div>
+    </div>
+
     <script src="https://storage.ko-fi.com/cdn/scripts/overlay-widget.js"></script>
     <script>
       kofiWidgetOverlay.draw("tdurieux", {
diff --git a/public/partials/dashboard.htm b/public/partials/dashboard.htm
index 5704c55..d5c8d20 100644
--- a/public/partials/dashboard.htm
+++ b/public/partials/dashboard.htm
@@ -211,8 +211,7 @@
                   ng-bind="repo.source.commit.substring(0, 8)"
                 ></a>
               </span>
-              anonymized
-              {{repo.anonymizeDate | humanTime}}
+              anonymized {{repo.anonymizeDate | humanTime}}
             </span>
           </div>
           <div class="color-text-secondary mt-2">
diff --git a/public/script/app.js b/public/script/app.js
index 062561a..9258f24 100644
--- a/public/script/app.js
+++ b/public/script/app.js
@@ -359,6 +359,13 @@ angular
       $scope.user = { status: "connection" };
       $scope.site_options;
 
+      $scope.toasts = [];
+
+      $scope.removeToast = function (toast) {
+        const index = $scope.toasts.indexOf(toast);
+        $scope.toasts = $scope.toasts.splice(index, index);
+      };
+
       $scope.path = $location.url();
       $scope.paths = $location.path().substring(1).split("/");
 
@@ -591,15 +598,32 @@ angular
             `Are you sure that you want to remove the repository ${repo.repoId}?`
           )
         ) {
+          const toast = {
+            title: `Removing ${repo.repoId}...`,
+            date: new Date(),
+            body: `The repository ${repo.repoId} is going to be removed.`,
+          };
+          $scope.toasts.push(toast);
           $http.delete(`/api/repo/${repo.repoId}`).then(() => {
+            toast.title = `${repo.repoId} is removed.`;
+            toast.body = `The repository ${repo.repoId} is removed.`;
             getRepositories();
           });
         }
       };
 
       $scope.updateRepository = (repo) => {
+        const toast = {
+          title: `Refreshing ${repo.repoId}...`,
+          date: new Date(),
+          body: `The repository ${repo.repoId} is going to be removed.`,
+        };
+        $scope.toasts.push(toast);
+        
         $http.post(`/api/repo/${repo.repoId}/refresh`).then(() => {
-          alert(`${repo.repoId} is refreshed.`);
+          toast.title = `${repo.repoId} is refreshed.`;
+          toast.body = `The repository ${repo.repoId} is refreshed.`;
+
           getRepositories();
         });
       };
