From a9222e88ae77a7cd6c00dd45bcceff71b61e47d5 Mon Sep 17 00:00:00 2001
From: dbddhkpde <37509447+dbddhkpde@users.noreply.github.com>
Date: Sun, 25 Mar 2018 20:49:10 +0200
Subject: [PATCH] GUI-Extension progress bar, icons and show/hide logic

Extend the GUI with a small progress bar within the backup job "details":
- add current action
- change the icon of the active job (paused, running)
- show / hide the GUI-extension (progress bar, filename, action) only if page-event contains a current filename
---
 .../Server/webroot/ngax/templates/home.html   | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/Duplicati/Server/webroot/ngax/templates/home.html b/Duplicati/Server/webroot/ngax/templates/home.html
index 2875e76e9..da18f9ba3 100644
--- a/Duplicati/Server/webroot/ngax/templates/home.html
+++ b/Duplicati/Server/webroot/ngax/templates/home.html
@@ -2,7 +2,11 @@
     <div class="tasks" ng-controller="HomeController">
         <div class="tasklist">
             <div ng-repeat="item in backups" class="task">
-                <a href ng-click="$parent.TaskMenuID == item.Backup.ID ? $parent.TaskMenuID = null : $parent.TaskMenuID = item.Backup.ID">{{item.Backup.Name}}
+                <a href ng-click="$parent.TaskMenuID == item.Backup.ID ? $parent.TaskMenuID = null : $parent.TaskMenuID = item.Backup.ID">
+                    <img ng-show="item.Backup.ID != state.activeTask.Item2" src="img/backup.png">
+                    <img ng-show="item.Backup.ID == state.activeTask.Item2 && state.programState == 'Running'" src="img/backuprunning.png">
+                    <img ng-show="item.Backup.ID == state.activeTask.Item2 && state.programState == 'Paused'" src="img/backuppause.png">
+                    {{item.Backup.Name}}
                     <img ng-show="$parent.TaskMenuID == item.Backup.ID" src="img/arrow_collapse_blue.png">
                     <img ng-show="$parent.TaskMenuID != item.Backup.ID" src="img/arrow_expand_blue.png">
                 </a>
@@ -61,6 +65,20 @@
                             <dd translate translate-n="parseInt(item.Backup.Metadata.BackupListCount)" translate-plural="{{item.Backup.Metadata.TargetSizeString}} / {{$count}} Versions">{{item.Backup.Metadata.TargetSizeString}} / {{$count}} Version</dd>
                         </div>
                     </div>
+                    <div ng-hide="item.Backup.ID != state.activeTask.Item2 || state.lastPgEvent.CurrentFilename == null">
+                        <dt translate>Current action:</dt>
+                        <dd>{{state.lastPgEvent.Phase}}</dd>
+                        <dt translate>Progress:</dt>
+                        <dd>
+                            <div class="progress-small-bg">
+                                <div class="progress-small" style="width: {{(1 - (state.lastPgEvent.CurrentFilesize - state.lastPgEvent.CurrentFileoffset) / state.lastPgEvent.CurrentFilesize) * 200}}px">
+                                    {{(1 - (state.lastPgEvent.CurrentFilesize - state.lastPgEvent.CurrentFileoffset) / state.lastPgEvent.CurrentFilesize) * 100 | number:2}}%
+                                </div>
+                            </div>
+                        </dd>
+                        <dt translate>Current file:</dt>
+                        <dd>{{state.lastPgEvent.CurrentFilename}}</dd>
+                    </div>
                 </dl>
             </div>
         </div>