From 8eb2bda539b7948dc07d2ebbf0da8a00632789c8 Mon Sep 17 00:00:00 2001
From: Pierre-Olivier Mercier <nemunaire@nemunai.re>
Date: Fri, 20 May 2022 10:00:46 +0200
Subject: [PATCH] admin/ui: Improve sync page

---
 admin/static/js/app.js       |  8 +++--
 admin/static/views/sync.html | 68 +++++++++++++++++++++++++++---------
 2 files changed, 57 insertions(+), 19 deletions(-)

diff --git a/admin/static/js/app.js b/admin/static/js/app.js
index 3dce0387..9467e719 100644
--- a/admin/static/js/app.js
+++ b/admin/static/js/app.js
@@ -617,11 +617,15 @@ angular.module("FICApp")
 		    needRefreshSyncReportWhenReady = true;
 		else if (needRefreshSyncReportWhenReady)
 		    refreshSyncReport();
-		if (response.data && response.data.progress)
+	        if (response.data && response.data.progress) {
+		    $scope.syncPercent = Math.floor(response.data.progress * 100 / 255);
 		    $scope.syncProgress = Math.floor(response.data.progress * 100 / 255) + " %";
-		else
+		} else {
 		    $scope.syncProgress = response.data;
+                    $scope.syncPercent = 0;
+                }
 	    }, function(response) {
+                $scope.syncPercent = 0;
 		if (response.data && response.data.errmsg)
 		    $scope.syncProgress = response.data.errmsg;
 		else
diff --git a/admin/static/views/sync.html b/admin/static/views/sync.html
index 32723c5c..a457e6ed 100644
--- a/admin/static/views/sync.html
+++ b/admin/static/views/sync.html
@@ -14,34 +14,68 @@
   </div>
 </div>
 
-<div class="card mt-3 mb-5 text-light bg-dark" ng-show="config.wip || !timeProgression || displayDangerousActions">
-  <div class="card-body">
-    <dl class="row">
-      <dt class="col-2">Synchronisation</dt>
-      <dd class="col-10" title="{{ configro['sync-type'] }}" ng-bind="configro.sync"></dd>
-      <dt class="col-2" ng-if="configro['sync-id']">ID</dt>
-      <dd class="col-10" ng-if="configro['sync-id']">{{ configro['sync-id'] }}</dd>
-    </dl>
-
-    <div class="float-right" ng-if="configro.sync">
-      {{ syncProgress }}
-    </div>
-    <div ng-if="syncReport">
+<div class="card my-3" ng-if="config.wip || !timeProgression || displayDangerousActions">
+  <div class="card-header d-flex justify-content-between">
+    <h3 class="mb-0">
+      Import des thèmes
+    </h3>
+    <div class="badge badge-success align-self-center" ng-if="syncReport">
       Dernier import&nbsp;: {{ syncReport._date[1] }}
     </div>
-    <div class="text-left" ng-if="configro.sync">
+  </div>
+  <div class="progress" style="height: 5px; border-radius: 0;">
+    <div class="progress-bar bg-primary progress-bar-striped" ng-class="{'progress-bar-animated': syncPercent && syncPercent < 100}" role="progressbar" style="width: {{ syncPercent }}%"></div>
+  </div>
+  <div class="card-body">
+    <dl class="row">
+      <dt class="col-2">Type</dt>
+      <dd class="col-10" ng-bind="configro['sync-type']"></dd>
+      <dt class="col-2">Synchronisation</dt>
+      <dd class="col-10" title="{{ configro['sync'] }}" ng-bind="configro.sync"></dd>
+      <dt class="col-2" ng-if="configro['sync-id']">ID</dt>
+      <dd class="col-10" ng-if="configro['sync-id']">{{ configro['sync-id'] }}</dd>
+      <dt class="col-2" ng-if="configro['sync']">Statut</dt>
+      <dd class="col-10" ng-if="configro['sync']">{{ syncProgress }}</dd>
+    </dl>
+
+    <div class="d-flex justify-content-around" ng-if="configro.sync">
       <button ng-if="configro['sync-type'] === 'GitImporter'" type="button" class="btn btn-info" ng-click="baseSync()" ng-disabled="deepSyncInProgress"><span class="glyphicon glyphicon-repeat" aria-hidden="true"></span> Pull</button>
-      <div class="btn-group">
+      <div class="btn-group dropright">
 	<button type="button" class="btn btn-secondary" ng-click="deepSync()" ng-disabled="deepSyncInProgress"><span class="glyphicon glyphicon-import" aria-hidden="true"></span> Synchronisation intégrale</button>
 	<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" ng-disabled="deepSyncInProgress">
 	  <span class="sr-only">Toggle Dropdown</span>
 	</button>
-	<div class="dropdown-menu" ng-controller="ThemesListController">
+	<div class="dropdown-menu" ng-controller="ThemesListController" style="max-height: 45vh; overflow: auto">
 	  <a class="dropdown-item" ng-click="deepSync(theme)" ng-repeat="theme in themes" ng-bind="theme.name"></a>
 	</div>
       </div>
       <button type="button" class="btn btn-secondary" ng-click="speedyDeepSync()" ng-disabled="deepSyncInProgress"><span class="glyphicon glyphicon-import" aria-hidden="true"></span> Synchronisation sans fichiers</button>
-      <a href="check_import.html" class="btn btn-success" target="_self" ng-if="syncReport">Voir le rapport</a>
     </div>
   </div>
 </div>
+
+<div ng-if="syncReport" class="card mb-5" ng-controller="ThemesListController">
+  <div class="card-header">
+    <a href="check_import.html" class="btn btn-success float-right mx-1" target="_self">
+      <span class="glyphicon glyphicon-link" aria-hidden="true"></span>
+      Lien public
+    </a>
+    <button type="button" class="btn btn-primary float-right mx-1" ng-click="updateReport()" title="Actualiser le rapport">
+      <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
+    </button>
+    <h3 class="mb-0">
+      Dernier rapport de synchronisation
+    </h3>
+  </div>
+  <div ng-repeat="(th, line) in syncReport" class="card-body" ng-if="th !== '_date' && line.length">
+    <h3>
+      {{ th }}
+      <a ng-repeat="theme in themes" ng-if="theme.name == th" href="themes/{{ theme.id }}" title="Voir le thème">
+        <span class="glyphicon glyphicon-hand-right" aria-hidden="true"></span>
+      </a>
+    </h3>
+    <ul>
+      <li ng-repeat="item in line">{{ item }}</li>
+    </ul>
+  </div>
+</div>