feat: improve repository status UI

public/partials/dashboard.htm

@@ -155,7 +155,10 @@
 
               <div class="mt-1 mr-1" style="margin-top: -0.25rem !important">
                 <strong>Repository</strong>
-                <div class="progress position-relative" style="min-width: 150px">
+                <div
+                  class="progress position-relative"
+                  style="min-width: 150px"
+                >
                   <div
                     class="progress-bar"
                     ng-class="{'progress-bar-striped progress-bar-animated w-100 bg-dark': !quota, 'bg-success': quota.repository.percent < 25 || quota.repository.total == 0, 'bg-danger': quota.repository.percent > 95 && quota.repository.total > 0, 'bg-warning': quota.repository.percent > 75 && quota.repository.total > 0 }"
@@ -210,7 +213,10 @@
 
               <div class="mt-1 mr-1" style="margin-top: -0.25rem !important">
                 <strong>File</strong>
-                <div class="progress position-relative" style="min-width: 150px">
+                <div
+                  class="progress position-relative"
+                  style="min-width: 150px"
+                >
                   <div
                     class="progress-bar"
                     ng-class="{'progress-bar-striped progress-bar-animated w-100 bg-dark': !quota, 'bg-success': quota.file.percent < 25 || quota.file.total == 0, 'bg-danger': quota.file.percent > 95 && quota.file.total > 0, 'bg-warning': quota.file.percent > 75 && quota.file.total > 0 }"
@@ -264,7 +270,7 @@
               <a ng-href="/r/{{repo.repoId}}" ng-bind="repo.repoId"></a>
               <span
                 class="badge"
-                ng-class="{'badge-warning': repo.status == 'removed' || repo.status == 'expired' ||  repo.status == 'removing' || repo.status == 'expiring', 'badge-info': repo.status == 'preparing', 'badge-success': repo.status == 'ready', 'badge-danger': repo.status == 'error'}"
+                ng-class="{'badge-warning': repo.status == 'removed' || repo.status == 'expired' ||  repo.status == 'removing' || repo.status == 'expiring', 'badge-info': repo.status == 'preparing' || repo.status == 'download', 'badge-success': repo.status == 'ready', 'badge-danger': repo.status == 'error'}"
                 ><span ng-bind="repo.status | title"></span>
                 <span
                   ng-if="repo.status == 'error'"
@@ -369,7 +375,7 @@
               <a
                 class="dropdown-item"
                 href="#"
-                ng-show="repo.status == 'ready'"
+                ng-show="repo.status == 'ready' || repo.status == 'error'"
                 ng-click="updateRepository(repo)"
               >
                 <i class="fas fa-sync"></i> Force update
@@ -386,7 +392,7 @@
               <a
                 class="dropdown-item"
                 href="#"
-                ng-show="repo.status != 'removed'"
+                ng-show="repo.status == 'ready'"
                 ng-click="removeRepository(repo)"
               >
                 <i class="fas fa-trash-alt"></i> Remove
@@ -398,7 +404,7 @@
                 class="dropdown-item"
                 href="/w/{{repo.repoId}}/"
                 target="_self"
-                ng-if="repo.options.page"
+                ng-if="repo.options.page && repo.status == 'ready'"
               >
                 <i class="fas fa-globe"></i> View Page
               </a>

public/script/app.js

@@ -622,6 +622,27 @@ angular
       }
       getRepositories();
 
+      function waitRepoToBeReady(repoId, callback) {
+        $http.get("/api/repo/" + repoId).then((res) => {
+          for (const repo of $scope.repositories) {
+            if (repo.repoId == repoId) {
+              repo.status = res.data.status;
+              break;
+            }
+          }
+          if (
+            res.data.status == "ready" ||
+            res.data.status == "error" ||
+            res.data.status == "removed" ||
+            res.data.status == "expired"
+          ) {
+            callback(res.data);
+            return;
+          }
+          setTimeout(() => waitRepoToBeReady(repoId), 2500);
+        });
+      }
+
       $scope.removeRepository = (repo) => {
         if (
           confirm(
@@ -636,12 +657,11 @@ angular
           $scope.toasts.push(toast);
           $http.delete(`/api/repo/${repo.repoId}`).then(
             () => {
-              setTimeout(() => {
+              waitRepoToBeReady(repo.repoId, () => {
                 toast.title = `${repo.repoId} is removed.`;
                 toast.body = `The repository ${repo.repoId} is removed.`;
-                getRepositories();
                 $scope.$apply();
-              }, 5000);
+              });
             },
             (error) => {
               toast.title = `Error during the removal of ${repo.repoId}.`;
@@ -663,12 +683,11 @@ angular
 
         $http.post(`/api/repo/${repo.repoId}/refresh`).then(
           () => {
-            setTimeout(() => {
+            waitRepoToBeReady(repo.repoId, () => {
               toast.title = `${repo.repoId} is refreshed.`;
               toast.body = `The repository ${repo.repoId} is refreshed.`;
-              getRepositories();
               $scope.$apply();
-            }, 5000);
+            });
           },
           (error) => {
             toast.title = `Error during the refresh of ${repo.repoId}.`;