jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add modal to edit backup label and preserveSecs

Browse Source
This commit is contained in:
Johannes Zellner
2022-04-05 14:41:41 +02:00
parent 2692a3bca7
commit 9c6b3a9825
3 changed files with 85 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/backups.html
+42 -1
View File
@@ -10,6 +10,14 @@
<div class="col-xs-3 text-muted">{{ 'backups.backupDetails.id' | tr }}:</div>
<div class="col-xs-9 text-right">{{ backupDetails.backup.id }}</div>
</div>
<div class="row">
<div class="col-xs-3 text-muted">Label:</div>
<div class="col-xs-9 text-right">{{ backupDetails.backup.label }}</div>
</div>
<div class="row">
<div class="col-xs-3 text-muted">PreserveSecs:</div>
<div class="col-xs-9 text-right">{{ backupDetails.backup.preserveSecs }}</div>
</div>
<div class="row">
<div class="col-xs-3 text-muted">{{ 'backups.backupDetails.date' | tr }}:</div>
<div class="col-xs-9 text-right">{{ backupDetails.backup.creationTime | prettyLongDate }}</div>
@@ -35,6 +43,36 @@
</div>
</div>
<!-- Modal edit individual backup (label and retention sec) -->
<div class="modal fade" id="editBackupModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Edit Backup</h4>
</div>
<div class="modal-body">
<form name="editBackupForm" role="form" novalidate ng-submit="editBackup.submit()" autocomplete="off">
<p class="has-error text-center" ng-show="editBackup.error">{{ editBackup.error }}</p>
<div class="form-group">
<label class="control-label" for="inputBackupLabel">Label</label>
<input type="text" class="form-control" ng-model="editBackup.label" id="inputBackupLabel" name="label" ng-disabled="editBackup.busy" placeholder="" autofocus>
</div>
<div class="form-group">
<label class="control-label" for="inputBackupPreservSecs">Preserve Backup (in Seconds):</label>
<input type="number" class="form-control" min="0" ng-model="editBackup.preserveSecs" id="inputBackupPreservSecs" name="preserveSecs" ng-disabled="editBackup.busy" placeholder="" autofocus>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">{{ 'main.dialog.cancel' | tr }}</button>
<button type="submit" class="btn btn-outline btn-success pull-right" ng-click="editBackup.submit()" ng-disabled="editBackupForm.$invalid || editBackup.busy"><i class="fa fa-circle-notch fa-spin" ng-show="editBackup.busy"></i><span> {{ 'main.dialog.save' | tr }}</span></button>
</div>
</div>
</div>
</div>
<!-- Modal backup failed -->
<div class="modal fade" id="createBackupFailedModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
@@ -506,7 +544,8 @@
<th>{{ 'backups.listing.version' | tr }}</th>
<th>{{ 'main.table.date' | tr }}</th>
<th>{{ 'backups.listing.contents' | tr }}</th>
<th class="text-right" width="180px">{{ 'main.actions' | tr }}</th>
<th>Label</th>
<th class="text-right">{{ 'main.actions' | tr }}</th>
</tr>
</thead>
<tbody>
@@ -517,7 +556,9 @@
<span ng-show="!backup.contents.length">{{ 'backups.listing.noApps' | tr }}</span>
<span ng-show="backup.contents.length">{{ 'backups.listing.appCount' | tr:{ appCount: backup.contents.length } }}</span>
</td>
<td ng-click="backupDetails.show(backup)" class="hand">{{ backup.label }}</td>
<td class="text-right no-wrap" style="vertical-align: bottom">
<button class="btn btn-xs btn-default" ng-click="editBackup.show(backup)" uib-tooltip="Edit Backup"><i class="fa fa-pencil-alt"></i></button>
<button class="btn btn-xs btn-default" ng-click="downloadConfig(backup)" uib-tooltip="{{ 'backups.listing.tooltipDownloadBackupConfig' | tr }}"><i class="fas fa-file-alt"></i></button>
</td>
</tr>
src/views/backups.js
+34 -1
View File
@@ -368,6 +368,39 @@ angular.module('Application').controller('BackupsController', ['$scope', '$locat
download(filename, JSON.stringify(tmp, null, 4));
};
$scope.editBackup = {
busy: false,
error: null,
backup: null,
label: '',
preserveSecs: 0,
show: function (backup) {
$scope.editBackup.backup = backup;
$scope.editBackup.label = backup.label;
$scope.editBackup.preserveSecs = backup.preserveSecs || 0;
$scope.editBackup.error = null;
$scope.editBackup.busy = false;
$('#editBackupModal').modal('show');
},
submit: function () {
$scope.editBackup.error = null;
$scope.editBackup.busy = true;
Client.editBackup($scope.editBackup.backup.id, $scope.editBackup.label, $scope.editBackup.preserveSecs, function (error) {
$scope.editBackup.busy = false;
if (error) return $scope.editBackup.error = error.message;
fetchBackups();
$('#editBackupModal').modal('hide');
});
}
};
$scope.backupDetails = {
backup: null,
@@ -824,7 +857,7 @@ angular.module('Application').controller('BackupsController', ['$scope', '$locat
document.getElementById('gcsKeyFileInput').onchange = readFileLocally($scope.configureBackup.gcsKey, 'content', 'keyFileName');
// setup all the dialog focus handling
['configureBackupModal'].forEach(function (id) {
['configureBackupModal', 'editBackupModal'].forEach(function (id) {
$('#' + id).on('shown.bs.modal', function () {
$(this).find("[autofocus]:first").focus();
});