Skip to content

Commit

Permalink
chore(gui): cache input type in each advanced settings category (sync…
Browse files Browse the repository at this point in the history 
…thing#9802)

Each section in the advanced settings dialog has similar code to insert
repeated input fields for each option. But only the first section (GUI
options) was adjusted in syncthing#9743 to avoid calling the `inputTypeFor()`
function repeatedly.

Apply the same caching to a locally scoped variable for each ng-repeat
entry by defining it in an ng-init directive.
  • Loading branch information
@acolomb
acolomb authored Dec 1, 2024
1 parent be952e5 commit 2b8ee4c
Showing 1 changed file with 21 additions and 21 deletions.
42 changes: 21 additions & 21 deletions gui/default/syncthing/settings/advancedSettingsModalView.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,11 +34,11 @@ <h4 class="panel-title" tabindex="0" translate>Options</h4>
<div id="optionsConfig" class="panel-collapse collapse" role="tabpanel" aria-labelledby="optionsHeading">
<div class="panel-body less-padding">
<form class="form-horizontal" role="form">
<div ng-repeat="(key, value) in advancedConfig.options" ng-if="inputTypeFor(key, value) != 'skip'" class="form-group">
<div ng-repeat="(key, value) in advancedConfig.options" ng-init="type = inputTypeFor(key, value)" ng-if="inputTypeFor(key, value) != 'skip'" class="form-group">
<label for="optionsInput{{$index}}" class="col-sm-4 control-label">{{key | uncamel}}&nbsp;<a href="{{docsURL('users/config#config-option-options.')}}{{key | lowercase}}" target="_blank"><span class="fas fa-question-circle"></span></a></label>
<div class="col-sm-8">
<input ng-if="inputTypeFor(key, value) == 'list'" id="optionsInput{{$index}}" class="form-control" type="text" ng-model="advancedConfig.options[key]" ng-list />
<input ng-if="inputTypeFor(key, value) != 'list'" id="optionsInput{{$index}}" class="form-control" type="{{inputTypeFor(key, value)}}" ng-model="advancedConfig.options[key]" />
<input ng-if="type == 'list'" id="optionsInput{{$index}}" class="form-control" type="text" ng-model="advancedConfig.options[key]" ng-list />
<input ng-if="type != 'list'" id="optionsInput{{$index}}" class="form-control" type="{{type}}" ng-model="advancedConfig.options[key]" />
</div>
</div>
</form>
Expand All @@ -53,11 +53,11 @@ <h4 class="panel-title" tabindex="0" translate>LDAP</h4>
<div id="ldapConfig" class="panel-collapse collapse" role="tabpanel" aria-labelledby="ldapHeading">
<div class="panel-body less-padding">
<form class="form-horizontal" role="form">
<div ng-repeat="(key, value) in advancedConfig.ldap" ng-if="inputTypeFor(key, value) != 'skip'" class="form-group">
<div ng-repeat="(key, value) in advancedConfig.ldap" ng-init="type = inputTypeFor(key, value)" ng-if="inputTypeFor(key, value) != 'skip'" class="form-group">
<label for="ldapInput{{$index}}" class="col-sm-4 control-label">{{key | uncamel}}&nbsp;<a href="{{docsURL('users/config#config-option-ldap.')}}{{key | lowercase}}" target="_blank"><span class="fas fa-question-circle"></span></a></label>
<div class="col-sm-8">
<input ng-if="inputTypeFor(key, value) == 'list'" id="ldapInput{{$index}}" class="form-control" type="text" ng-model="advancedConfig.ldap[key]" ng-list />
<input ng-if="inputTypeFor(key, value) != 'list'" id="ldapInput{{$index}}" class="form-control" type="{{inputTypeFor(key, value)}}" ng-model="advancedConfig.ldap[key]" />
<input ng-if="type == 'list'" id="ldapInput{{$index}}" class="form-control" type="text" ng-model="advancedConfig.ldap[key]" ng-list />
<input ng-if="type != 'list'" id="ldapInput{{$index}}" class="form-control" type="{{type}}" ng-model="advancedConfig.ldap[key]" />
</div>
</div>
</form>
Expand All @@ -83,11 +83,11 @@ <h4 ng-if="folder.label.length != 0" class="panel-title" tabindex="0">
<div id="folder{{folderIndex}}Config" class="panel-collapse collapse" role="tabpanel" aria-labelledby="folder{{folderIndex}}Heading">
<div class="panel-body less-padding">
<form class="form-horizontal" role="form">
<div ng-repeat="(key, value) in folder" ng-if="inputTypeFor(key, value) != 'skip'" class="form-group">
<div ng-repeat="(key, value) in folder" ng-init="type = inputTypeFor(key, value)" ng-if="inputTypeFor(key, value) != 'skip'" class="form-group">
<label for="folder{{folderIndex}}Input{{$index}}" class="col-sm-4 control-label">{{key | uncamel}}&nbsp;<a href="{{docsURL('users/config#config-option-folder.')}}{{key | lowercase}}" target="_blank"><span class="fas fa-question-circle"></span></a></label>
<div class="col-sm-8">
<input ng-if="inputTypeFor(key, value) == 'list'" id="folder{{folderIndex}}Input{{$index}}" class="form-control" type="text" ng-model="folder[key]" ng-list />
<input ng-if="inputTypeFor(key, value) != 'list'" id="folder{{folderIndex}}Input{{$index}}" class="form-control" type="{{inputTypeFor(key, value)}}" ng-model="folder[key]" />
<input ng-if="type == 'list'" id="folder{{folderIndex}}Input{{$index}}" class="form-control" type="text" ng-model="folder[key]" ng-list />
<input ng-if="type != 'list'" id="folder{{folderIndex}}Input{{$index}}" class="form-control" type="{{type}}" ng-model="folder[key]" />
</div>
</div>
</form>
Expand All @@ -113,11 +113,11 @@ <h4 class="panel-title" tabindex="0">
<div id="device{{deviceIndex}}Config" class="panel-collapse collapse" role="tabpanel" aria-labelledby="device{{deviceIndex}}Heading">
<div class="panel-body less-padding">
<form class="form-horizontal" role="form">
<div ng-repeat="(key, value) in device" ng-if="inputTypeFor(key, value) != 'skip'" class="form-group">
<div ng-repeat="(key, value) in device" ng-init="type = inputTypeFor(key, value)" ng-if="inputTypeFor(key, value) != 'skip'" class="form-group">
<label for="device{{deviceIndex}}Input{{$index}}" class="col-sm-4 control-label">{{key | uncamel}}&nbsp;<a href="{{docsURL('users/config#config-option-device.')}}{{key | lowercase}}" target="_blank"><span class="fas fa-question-circle"></span></a></label>
<div class="col-sm-8">
<input ng-if="inputTypeFor(key, value) == 'list'" id="device{{deviceIndex}}Input{{$index}}" class="form-control" type="text" ng-model="device[key]" ng-list />
<input ng-if="inputTypeFor(key, value) != 'list'" id="device{{deviceIndex}}Input{{$index}}" class="form-control" type="{{inputTypeFor(key, value)}}" ng-model="device[key]" />
<input ng-if="type == 'list'" id="device{{deviceIndex}}Input{{$index}}" class="form-control" type="text" ng-model="device[key]" ng-list />
<input ng-if="type != 'list'" id="device{{deviceIndex}}Input{{$index}}" class="form-control" type="{{type}}" ng-model="device[key]" />
</div>
</div>
</form>
Expand All @@ -141,11 +141,11 @@ <h4 class="panel-title" tabindex="0" translate>Default Folder</h4>
</div>
<div id="advancedDefaultFolder" class="panel-collapse collapse" role="tabpanel" aria-labelledby="advancedDefaultFolderHeading">
<form class="form-horizontal" role="form">
<div ng-repeat="(key, value) in advancedConfig.defaults.folder" ng-if="inputTypeFor(key, value) != 'skip'" class="form-group">
<div ng-repeat="(key, value) in advancedConfig.defaults.folder" ng-init="type = inputTypeFor(key, value)" ng-if="inputTypeFor(key, value) != 'skip'" class="form-group">
<label for="advancedDefaultFolderInput{{$index}}" class="col-sm-4 control-label">{{key | uncamel}}&nbsp;<a href="{{docsURL('users/config#config-option-folder.')}}{{key | lowercase}}" target="_blank"><span class="fas fa-question-circle"></span></a></label>
<div class="col-sm-8">
<input ng-if="inputTypeFor(key, value) == 'list'" id="advancedDefaultFolderInput{{$index}}" class="form-control" type="text" ng-model="advancedConfig.defaults.folder[key]" ng-list />
<input ng-if="inputTypeFor(key, value) != 'list'" id="advancedDefaultFolderInput{{$index}}" class="form-control" type="{{inputTypeFor(key, value)}}" ng-model="advancedConfig.defaults.folder[key]" />
<input ng-if="type == 'list'" id="advancedDefaultFolderInput{{$index}}" class="form-control" type="text" ng-model="advancedConfig.defaults.folder[key]" ng-list />
<input ng-if="type != 'list'" id="advancedDefaultFolderInput{{$index}}" class="form-control" type="{{type}}" ng-model="advancedConfig.defaults.folder[key]" />
</div>
</div>
</form>
Expand All @@ -157,11 +157,11 @@ <h4 class="panel-title" tabindex="0" translate>Default Device</h4>
</div>
<div id="advancedDefaultDevice" class="panel-collapse collapse" role="tabpanel" aria-labelledby="advancedDefaultDeviceHeading">
<form class="form-horizontal" role="form">
<div ng-repeat="(key, value) in advancedConfig.defaults.device" ng-if="inputTypeFor(key, value) != 'skip'" class="form-group">
<div ng-repeat="(key, value) in advancedConfig.defaults.device" ng-init="type = inputTypeFor(key, value)" ng-if="inputTypeFor(key, value) != 'skip'" class="form-group">
<label for="advancedDefaultDeviceInput{{$index}}" class="col-sm-4 control-label">{{key | uncamel}}&nbsp;<a href="{{docsURL('users/config#config-option-device.')}}{{key | lowercase}}" target="_blank"><span class="fas fa-question-circle"></span></a></label>
<div class="col-sm-8">
<input ng-if="inputTypeFor(key, value) == 'list'" id="advancedDefaultDeviceInput{{$index}}" class="form-control" type="text" ng-model="advancedConfig.defaults.device[key]" ng-list />
<input ng-if="inputTypeFor(key, value) != 'list'" id="advancedDefaultDeviceInput{{$index}}" class="form-control" type="{{inputTypeFor(key, value)}}" ng-model="advancedConfig.defaults.device[key]" />
<input ng-if="type == 'list'" id="advancedDefaultDeviceInput{{$index}}" class="form-control" type="text" ng-model="advancedConfig.defaults.device[key]" ng-list />
<input ng-if="type != 'list'" id="advancedDefaultDeviceInput{{$index}}" class="form-control" type="{{type}}" ng-model="advancedConfig.defaults.device[key]" />
</div>
</div>
</form>
Expand All @@ -173,14 +173,14 @@ <h4 class="panel-title" tabindex="0" translate>Default Ignore Patterns</h4>
</div>
<div id="advancedDefaultIgnores" class="panel-collapse collapse" role="tabpanel" aria-labelledby="advancedDefaultIgnoresHeading">
<form class="form-horizontal" role="form">
<div ng-repeat="(key, value) in advancedConfig.defaults.ignores" ng-if="inputTypeFor(key, value) != 'skip'" class="form-group">
<div ng-repeat="(key, value) in advancedConfig.defaults.ignores" ng-init="type = inputTypeFor(key, value)" ng-if="inputTypeFor(key, value) != 'skip'" class="form-group">
<label for="advancedDefaultIgnoresInput{{$index}}" class="col-sm-4 control-label">{{key | uncamel}}&nbsp;<a href="{{docsURL('users/config#config-option-defaults.ignores.')}}{{key | lowercase}}" target="_blank"><span class="fas fa-question-circle"></span></a></label>
<div class="col-sm-8">
<div ng-switch="key">
<!-- Special case to preserve empty lines in multi-line input -->
<textarea ng-switch-when="lines" id="advancedDefaultIgnoresInput{{$index}}" class="form-control" rows="5" ng-model="advancedConfig.defaults.ignores._lines" ng-model-options="{ getterSetter: true }"></textarea>
<input ng-switch-default ng-if="inputTypeFor(key, value) == 'list'" id="advancedDefaultIgnoresInput{{$index}}" class="form-control" type="text" ng-model="advancedConfig.defaults.ignores[key]" ng-list />
<input ng-switch-default ng-if="inputTypeFor(key, value) != 'list'" id="advancedDefaultIgnoresInput{{$index}}" class="form-control" type="{{inputTypeFor(key, value)}}" ng-model="advancedConfig.defaults.ignores[key]" />
<input ng-switch-default ng-if="type == 'list'" id="advancedDefaultIgnoresInput{{$index}}" class="form-control" type="text" ng-model="advancedConfig.defaults.ignores[key]" ng-list />
<input ng-switch-default ng-if="type != 'list'" id="advancedDefaultIgnoresInput{{$index}}" class="form-control" type="{{type}}" ng-model="advancedConfig.defaults.ignores[key]" />
</div>
</div>
</div>
Expand Down

0 comments on commit 2b8ee4c

Please sign in to comment.