Make it an accordion
This commit is contained in:
Girish Ramakrishnan
@@ -181,46 +181,64 @@
|
||||
<h4 class="modal-title">Backup & Restore - {{ appRestore.app.fqdn }}</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<h4>Take Backup</h4>
|
||||
<hr style="margin: 3px 0px 5px 0px"/>
|
||||
<o>This takes a live snapshot of this application.</p>
|
||||
<div><button type="button" class="btn btn-success" ng-click="appRestore.createBackup()"> Backup</button></div>
|
||||
|
||||
<br/>
|
||||
|
||||
<h4>Restore From Backup</h4>
|
||||
<hr style="margin: 3px 0px 5px 0px"/>
|
||||
<p class="text-center" ng-show="appRestore.busyFetching"><i class="fa fa-circle-o-notch fa-spin"></i> Fetching backups</p>
|
||||
<p class="text-danger" ng-show="appRestore.backups.length === 0 && !appRestore.busyFetching">This app has no backups to restore from.</p>
|
||||
|
||||
<div ng-show="appRestore.backups.length !== 0">
|
||||
<p>Restoring the app will lose all content generated since the backup.</p>
|
||||
<label class="control-label">Select Backup</label>
|
||||
<div class="dropdown">
|
||||
<button type="button" class="btn btn-default" data-toggle="dropdown">{{ appRestore.selectedBackup.creationTime | prettyDate }} - v{{appRestore.selectedBackup.version}} ({{ appRestore.selectedBackup.creationTime | prettyLongDate }}) <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li ng-repeat="backup in appRestore.backups | orderBy:'-creationTime'">
|
||||
<a href="" ng-click="appRestore.selectBackup(backup)">{{ backup.creationTime | prettyDate }} - v{{backup.version}} ({{ backup.creationTime | prettyLongDate }})</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<br/>
|
||||
<fieldset>
|
||||
<form role="form" name="appRestoreForm" ng-submit="appRestore.restore()" autocomplete="off">
|
||||
<div class="form-group" ng-class="{ 'has-error': (appRestoreForm.password.$dirty && appRestoreForm.password.$invalid) || (!appRestoreForm.password.$dirty && appRestore.error.password) }">
|
||||
<label class="control-label" for="appRestorePasswordInput">Provide your password to confirm this action</label>
|
||||
<div class="control-label" ng-show="(appRestoreForm.password.$dirty && appRestoreForm.password.$invalid) || (!appRestoreForm.password.$dirty && appRestore.error.password)">
|
||||
<small ng-show=" appRestoreForm.password.$dirty && appRestoreForm.password.$invalid">Password required</small>
|
||||
<small ng-show="!appRestoreForm.password.$dirty && appRestore.error.password">Wrong password</small>
|
||||
</div>
|
||||
<input type="password" class="form-control" ng-model="appRestore.password" id="appRestorePasswordInput" name="password" required autofocus>
|
||||
<div id="appRestoreAccordion" class="panel-group">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<label class="radio-inline panel-title">
|
||||
<input type="radio" class="control-label" name="appRestoreAction" value="backup" data-toggle="collapse" data-parent="#appRestoreAccordion" data-target="#appRestoreBackup">Take Backup</input>
|
||||
</label>
|
||||
</div>
|
||||
<div id="appRestoreBackup" class="panel-collapse collapse">
|
||||
<div class="panel-body">
|
||||
<p>This takes a live snapshot of this application.</p>
|
||||
<div><button type="button" class="btn btn-success" ng-click="appRestore.createBackup()"> Backup</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input class="ng-hide" type="submit" ng-disabled="appRestoreForm.$invalid || busy"/>
|
||||
</form>
|
||||
</fieldset>
|
||||
<button type="button" class="btn btn-danger" ng-click="appRestore.restore()" ng-show="appRestore.backups.length !== 0" ng-disabled="appRestoreForm.$invalid || appRestore.busy || !appRestore.selectedBackup"><i class="fa fa-circle-o-notch fa-spin" ng-show="appRestore.busy"></i> Restore</button>
|
||||
</div>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<label class="radio-inline panel-title">
|
||||
<input type="radio" class="control-label" name="appRestoreAction" value="restore" data-toggle="collapse" data-parent="#appRestoreAccordion" data-target="#appRestoreRestore">Restore From Backup</input>
|
||||
</label>
|
||||
</div>
|
||||
<div id="appRestoreRestore" class="panel-collapse collapse">
|
||||
<div class="panel-body">
|
||||
<p class="text-center" ng-show="appRestore.busyFetching"><i class="fa fa-circle-o-notch fa-spin"></i> Fetching backups</p>
|
||||
<p class="text-danger" ng-show="appRestore.backups.length === 0 && !appRestore.busyFetching">This app has no backups to restore from.</p>
|
||||
|
||||
<div ng-show="appRestore.backups.length !== 0">
|
||||
<p>Restoring the app will lose all content generated since the backup.</p>
|
||||
<label class="control-label">Select Backup</label>
|
||||
<div class="dropdown">
|
||||
<button type="button" class="btn btn-default" data-toggle="dropdown">{{ appRestore.selectedBackup.creationTime | prettyDate }} - v{{appRestore.selectedBackup.version}} ({{ appRestore.selectedBackup.creationTime | prettyLongDate }}) <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li ng-repeat="backup in appRestore.backups | orderBy:'-creationTime'">
|
||||
<a href="" ng-click="appRestore.selectBackup(backup)">{{ backup.creationTime | prettyDate }} - v{{backup.version}} ({{ backup.creationTime | prettyLongDate }})</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<br/>
|
||||
<fieldset>
|
||||
<form role="form" name="appRestoreForm" ng-submit="appRestore.restore()" autocomplete="off">
|
||||
<div class="form-group" ng-class="{ 'has-error': (appRestoreForm.password.$dirty && appRestoreForm.password.$invalid) || (!appRestoreForm.password.$dirty && appRestore.error.password) }">
|
||||
<label class="control-label" for="appRestorePasswordInput">Provide your password to confirm this action</label>
|
||||
<div class="control-label" ng-show="(appRestoreForm.password.$dirty && appRestoreForm.password.$invalid) || (!appRestoreForm.password.$dirty && appRestore.error.password)">
|
||||
<small ng-show=" appRestoreForm.password.$dirty && appRestoreForm.password.$invalid">Password required</small>
|
||||
<small ng-show="!appRestoreForm.password.$dirty && appRestore.error.password">Wrong password</small>
|
||||
</div>
|
||||
<input type="password" class="form-control" ng-model="appRestore.password" id="appRestorePasswordInput" name="password" required autofocus>
|
||||
</div>
|
||||
|
||||
<input class="ng-hide" type="submit" ng-disabled="appRestoreForm.$invalid || busy"/>
|
||||
</form>
|
||||
</fieldset>
|
||||
<button type="button" class="btn btn-danger" ng-click="appRestore.restore()" ng-show="appRestore.backups.length !== 0" ng-disabled="appRestoreForm.$invalid || appRestore.busy || !appRestore.selectedBackup"><i class="fa fa-circle-o-notch fa-spin" ng-show="appRestore.busy"></i> Restore</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- accordion -->
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
|
||||
Reference in New Issue
Block a user