Use tabs instead of accordion for restore/clone ui
This commit is contained in:
Johannes Zellner
@@ -181,137 +181,98 @@
|
||||
<h4 class="modal-title">Backups - {{ appRestore.app.fqdn }}</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<!-- new backup -->
|
||||
<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" ng-model="appRestore.action" value="backup" data-toggle="collapse" data-parent="#appRestoreAccordion" data-target="#appRestoreBackup">Backup</input>
|
||||
</label>
|
||||
<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 or clone from yet.</p>
|
||||
|
||||
<uib-tabset active="appRestore.action" ng-show="!appRestore.busyFetching && appRestore.backups.length">
|
||||
<!-- restore -->
|
||||
<uib-tab index="'restore'" heading="Restore">
|
||||
<br/>
|
||||
<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>
|
||||
<div id="appRestoreBackup" class="panel-collapse collapse">
|
||||
<div class="panel-body">
|
||||
<p>This takes a live snapshot of this application.</p>
|
||||
</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>
|
||||
</uib-tab>
|
||||
|
||||
<!-- clone -->
|
||||
<uib-tab index="'clone'" heading="Clone">
|
||||
<br/>
|
||||
<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="appCloneForm" ng-submit="appRestore.clone()" autocomplete="off">
|
||||
<div class="has-error text-center" ng-show="appRestore.error.other" ng-bind-html="appRestore.error.other"></div>
|
||||
<div class="form-group" ng-class="{ 'has-error': (appCloneForm.location.$dirty && appCloneForm.location.$invalid) || (!appCloneForm.location.$dirty && appRestore.error.location) }">
|
||||
<label class="control-label" for="appRestoreLocationInput">Location {{ appRestore.error.location }} </label>
|
||||
<div class="input-group form-inline">
|
||||
<input type="text" class="form-control" ng-model="appRestore.location" id="appRestoreLocationInput" name="location" placeholder="Leave empty to use bare domain" autofocus>
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||||
{{ (appRestore.location ? (appRestore.domain.provider !== 'caas' ? '.' : '-') : '') + appRestore.domain.domain }}
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
||||
<li ng-repeat="domain in domains">
|
||||
<a href="" ng-click="appRestore.domain = domain">{{ domain.domain }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- restore -->
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<label class="radio-inline panel-title">
|
||||
<input type="radio" class="control-label" name="appRestoreAction" ng-model="appRestore.action" value="restore" data-toggle="collapse" data-parent="#appRestoreAccordion" data-target="#appRestoreRestore">Restore</input>
|
||||
</label>
|
||||
</div>
|
||||
<div id="appRestoreRestore" class="panel-collapse collapse in">
|
||||
<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>
|
||||
<p class="text-center" ng-show="appRestore.location && appRestore.domain.provider === 'manual' && !appRestore.domain.config.wildcard">
|
||||
<b>Add an A record manually for {{ appRestore.location }} to this Cloudron's public IP</b>
|
||||
<br>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- clone -->
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<label class="radio-inline panel-title">
|
||||
<input type="radio" class="control-label" name="appRestoreAction" ng-model="appRestore.action" value="clone" data-toggle="collapse" data-parent="#appRestoreAccordion" data-target="#appRestoreClone">Clone</input>
|
||||
</label>
|
||||
</div>
|
||||
<div id="appRestoreClone" 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 clone from.</p>
|
||||
|
||||
<div ng-show="appRestore.backups.length !== 0">
|
||||
<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/>
|
||||
|
||||
<form role="form" name="appCloneForm" ng-submit="appRestore.clone()" autocomplete="off">
|
||||
<div class="has-error text-center" ng-show="appRestore.error.other" ng-bind-html="appRestore.error.other"></div>
|
||||
<div class="form-group" ng-class="{ 'has-error': (appCloneForm.location.$dirty && appCloneForm.location.$invalid) || (!appCloneForm.location.$dirty && appRestore.error.location) }">
|
||||
<label class="control-label" for="appRestoreLocationInput">Location {{ appRestore.error.location }} </label>
|
||||
<div class="input-group form-inline">
|
||||
<input type="text" class="form-control" ng-model="appRestore.location" id="appRestoreLocationInput" name="location" placeholder="Leave empty to use bare domain" autofocus>
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||||
{{ (appRestore.location ? (appRestore.domain.provider !== 'caas' ? '.' : '-') : '') + appRestore.domain.domain }}
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
||||
<li ng-repeat="domain in domains">
|
||||
<a href="" ng-click="appRestore.domain = domain">{{ domain.domain }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-center" ng-show="appRestore.location && appRestore.domain.provider === 'manual' && !appRestore.domain.config.wildcard">
|
||||
<b>Add an A record manually for {{ appRestore.location }} to this Cloudron's public IP</b>
|
||||
<br>
|
||||
</p>
|
||||
|
||||
<div class="has-error text-center" ng-show="appRestore.error.port">{{ appRestore.error.port }}</div>
|
||||
<div ng-repeat="(env, info) in appRestore.portBindingsInfo">
|
||||
<ng-form name="portInfo_form">
|
||||
<div class="form-group" ng-class="{ 'has-error': (!appRestore.itemName{{$index}}.$dirty && appRestore.error.port) || (portInfo_form.itemName{{$index}}.$dirty && portInfo_form.itemName{{$index}}.$invalid) }">
|
||||
<label class="control-label" for="inputPortInfo{{env}}"><input type="checkbox" ng-model="appRestore.portBindingsEnabled[env]"> {{ info.description }} ({{ HOST_PORT_MIN }} - {{ HOST_PORT_MAX }})</label>
|
||||
<input type="number" class="form-control" ng-model="appRestore.portBindings[env]" ng-disabled="!appRestore.portBindingsEnabled[env]" id="inputPortInfo{{env}}" later-name="itemName{{$index}}" min="{{hostPortMin}}" max="{{hostPortMax}}" required>
|
||||
</div>
|
||||
</ng-form>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div> <!-- accordion -->
|
||||
<div class="has-error text-center" ng-show="appRestore.error.port">{{ appRestore.error.port }}</div>
|
||||
<div ng-repeat="(env, info) in appRestore.portBindingsInfo">
|
||||
<ng-form name="portInfo_form">
|
||||
<div class="form-group" ng-class="{ 'has-error': (!appRestore.itemName{{$index}}.$dirty && appRestore.error.port) || (portInfo_form.itemName{{$index}}.$dirty && portInfo_form.itemName{{$index}}.$invalid) }">
|
||||
<label class="control-label" for="inputPortInfo{{env}}"><input type="checkbox" ng-model="appRestore.portBindingsEnabled[env]"> {{ info.description }} ({{ HOST_PORT_MIN }} - {{ HOST_PORT_MAX }})</label>
|
||||
<input type="number" class="form-control" ng-model="appRestore.portBindings[env]" ng-disabled="!appRestore.portBindingsEnabled[env]" id="inputPortInfo{{env}}" later-name="itemName{{$index}}" min="{{hostPortMin}}" max="{{hostPortMax}}" required>
|
||||
</div>
|
||||
</ng-form>
|
||||
</div>
|
||||
</form>
|
||||
</fieldset>
|
||||
</uib-tab>
|
||||
</uib-tabset>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-success" ng-show="appRestore.action === 'backup'" ng-click="appRestore.createBackup()"> Backup</button>
|
||||
<button type="button" class="btn btn-danger" ng-show="appRestore.action === 'restore'" 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>
|
||||
<button type="button" class="btn btn-success" ng-show="appRestore.action === 'clone'" ng-click="appRestore.clone()" ng-show="appRestore.backups.length !== 0" ng-disabled="appCloneForm.$invalid || appRestore.busy || !appRestore.selectedBackup"><i class="fa fa-circle-o-notch fa-spin" ng-show="appRestore.busy"></i> Clone</button>
|
||||
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary pull-left" ng-click="appRestore.createBackup()" ng-disabled="appRestore.app.installationState === 'pending_backup'" uib-tooltip="Take a live snapshot of this app" tooltip-placement="right"><i class="fa fa-circle-o-notch fa-spin" ng-show="appRestore.app.installationState === 'pending_backup'"></i> Create Backup</button>
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-success" ng-click="appRestore.clone()" ng-show="appRestore.action === 'clone' && appRestore.backups.length !== 0" ng-disabled="appCloneForm.$invalid || appRestore.busy || !appRestore.selectedBackup"><i class="fa fa-circle-o-notch fa-spin" ng-show="appRestore.busy"></i> Clone</button>
|
||||
<button type="button" class="btn btn-danger" ng-click="appRestore.restore()" ng-show="appRestore.action === 'restore' && 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>
|
||||
|
||||
Reference in New Issue
Block a user