mirror of
https://github.com/octoleo/syncthing.git
synced 2025-01-03 15:17:25 +00:00
gui: Add tabs in device editor (#4986)
This commit is contained in:
qepasa
Audrius Butkevicius
parent
e2c44f519c
commit
9fc20b41c6
@ -1,6 +1,13 @@
|
|||||||
<modal id="editDevice" status="default" icon="{{editingExisting ? 'fas fa-pencil-alt' : 'fas fa-desktop'}}" heading="{{editingExisting ? 'Edit Device' : 'Add Device' | translate}}" large="yes" closeable="yes">
|
<modal id="editDevice" status="default" icon="{{editingExisting ? 'fas fa-pencil-alt' : 'fas fa-desktop'}}" heading="{{editingExisting ? 'Edit Device' : 'Add Device' | translate}}" large="yes" closeable="yes">
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<form role="form" name="deviceEditor">
|
<form role="form" name="deviceEditor">
|
||||||
|
<ul class="nav nav-tabs" ng-init="loadFormIntoScope(folderEditor)">
|
||||||
|
<li class="active"><a data-toggle="tab" href="#device-general"><span class="fas fa-cog"></span><span translate>General</span></a></li>
|
||||||
|
<li><a data-toggle="tab" href="#device-sharing"><span class="fas fa-share-alt"></span><span translate>Sharing</span></a></li>
|
||||||
|
<li><a data-toggle="tab" href="#device-advanced"><span class="fas fa-cogs"></span><span translate>Advanced</span></a></li>
|
||||||
|
</ul>
|
||||||
|
<div class="tab-content">
|
||||||
|
<div id="device-general" class="tab-pane in active">
|
||||||
<div class="form-group" ng-class="{'has-error': deviceEditor.deviceID.$invalid && deviceEditor.deviceID.$dirty}" ng-init="loadFormIntoScope(deviceEditor)">
|
<div class="form-group" ng-class="{'has-error': deviceEditor.deviceID.$invalid && deviceEditor.deviceID.$dirty}" ng-init="loadFormIntoScope(deviceEditor)">
|
||||||
<label translate for="deviceID">Device ID</label>
|
<label translate for="deviceID">Device ID</label>
|
||||||
<div ng-if="!editingExisting">
|
<div ng-if="!editingExisting">
|
||||||
@ -24,8 +31,6 @@
|
|||||||
</div>
|
</div>
|
||||||
<div ng-if="editingExisting" class="well well-sm text-monospace" select-on-click>{{currentDevice.deviceID}}</div>
|
<div ng-if="editingExisting" class="well well-sm text-monospace" select-on-click>{{currentDevice.deviceID}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-6">
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label translate for="name">Device Name</label>
|
<label translate for="name">Device Name</label>
|
||||||
<input id="name" class="form-control" type="text" ng-model="currentDevice.name"/>
|
<input id="name" class="form-control" type="text" ng-model="currentDevice.name"/>
|
||||||
@ -33,28 +38,7 @@
|
|||||||
<p translate ng-if="currentDevice.deviceID != myID" class="help-block">Shown instead of Device ID in the cluster status. Will be updated to the name the device advertises if left empty.</p>
|
<p translate ng-if="currentDevice.deviceID != myID" class="help-block">Shown instead of Device ID in the cluster status. Will be updated to the name the device advertises if left empty.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-6">
|
<div class="tab-pane" id="device-sharing">
|
||||||
<div class="form-group">
|
|
||||||
<label translate for="addresses">Addresses</label>
|
|
||||||
<input ng-disabled="currentDevice.deviceID == myID" id="addresses" class="form-control" type="text" ng-model="currentDevice._addressesStr"></input>
|
|
||||||
<p translate class="help-block">Enter comma separated ("tcp://ip:port", "tcp://host:port") addresses or "dynamic" to perform automatic discovery of the address.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-6">
|
|
||||||
<div class="form-group">
|
|
||||||
<label translate>Compression</label>
|
|
||||||
<select class="form-control" ng-model="currentDevice.compression">
|
|
||||||
<option value="always" translate>All Data</option>
|
|
||||||
<option value="metadata" translate>Metadata Only</option>
|
|
||||||
<option value="never" translate>Off</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-6">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-6">
|
<div class="col-md-6">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
@ -99,6 +83,56 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tab-pane" id="device-advanced">
|
||||||
|
<div class="row form-group">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="form-group">
|
||||||
|
<label translate for="addresses">Addresses</label>
|
||||||
|
<input ng-disabled="currentDevice.deviceID == myID" id="addresses" class="form-control" type="text" ng-model="currentDevice._addressesStr"></input>
|
||||||
|
<p translate class="help-block">Enter comma separated ("tcp://ip:port", "tcp://host:port") addresses or "dynamic" to perform automatic discovery of the address.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="form-group">
|
||||||
|
<label translate>Compression</label>
|
||||||
|
<select class="form-control" ng-model="currentDevice.compression">
|
||||||
|
<option value="always" translate>All Data</option>
|
||||||
|
<option value="metadata" translate>Metadata Only</option>
|
||||||
|
<option value="never" translate>Off</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row form-group">
|
||||||
|
<div class="col-md-12">
|
||||||
|
<label translate>Device rate limits</label>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div ng-class="{'has-error': deviceEditor.maxSendKbps.$invalid && deviceEditor.maxSendKbps.$dirty}">
|
||||||
|
<div class="row">
|
||||||
|
<span class="col-md-8" translate>Outgoing Rate Limit (KiB/s)</span>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<input name="maxSendKbps" id="maxSendKbps" class="form-control" type="number" ng-model="currentDevice.maxSendKbps" required="" aria-required="true" min="0"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="help-block" ng-if="!deviceEditor.maxSendKbps.$valid && deviceEditor.maxSendKbps.$dirty" translate>The rate limit must be a non-negative number (0: no limit)</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6" ng-class="{'has-error': deviceEditor.maxRecvKbps.$invalid && deviceEditor.maxRecvKbps.$dirty}">
|
||||||
|
<div class="row">
|
||||||
|
<span class="col-md-8" translate>Outgoing Rate Limit (KiB/s)</span>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<input name="maxRecvKbps" id="maxRecvKbps" class="form-control" type="number" ng-model="currentDevice.maxRecvKbps" required="" aria-required="true" min="0"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="help-block" ng-if="!deviceEditor.maxRecvKbps.$valid && deviceEditor.maxRecvKbps.$dirty" translate>The rate limit must be a non-negative number (0: no limit)</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user