haeaeae/duplicati
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

GUI-Extension progress bar, icons and show/hide logic

Browse Source 
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
This commit is contained in:
dbddhkpde
2018-03-25 20:49:10 +02:00
committed by GitHub
parent 96c4966693
commit a9222e88ae
1 changed files with 19 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Duplicati/Server/webroot/ngax/templates/home.html
+19 -1
View File
@@ -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>