editFolderModalView.html 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
  1. <modal id="editFolder" status="default" icon="{{editingExisting ? 'pencil' : 'folder'}}" heading="{{editingExisting ? 'Edit Folder' : 'Add Folder' | translate}}" large="yes" closeable="yes">
  2. <div class="modal-body">
  3. <form role="form" name="folderEditor">
  4. <ul class="nav nav-tabs" ng-init="loadFormIntoScope(folderEditor)">
  5. <li class="active"><a data-toggle="tab" href="#folder-general" translate>General</a></li>
  6. <li><a data-toggle="tab" href="#folder-versioning" translate>File Versioning</a></li>
  7. <li><a data-toggle="tab" href="#folder-ignores" translate>Ignore Patterns</a></li>
  8. <li><a data-toggle="tab" href="#folder-advanced" translate>Advanced</a></li>
  9. </ul>
  10. <div class="tab-content">
  11. <div id="folder-general" class="tab-pane in active">
  12. <div class="form-group" ng-class="{'has-error': folderEditor.folderLabel.$invalid && folderEditor.folderLabel.$dirty}">
  13. <label for="folderLabel"><span translate>Folder Label</span></label>
  14. <input name="folderLabel" id="folderLabel" class="form-control" type="text" ng-model="currentFolder.label" value="{{currentFolder.label}}"/>
  15. <p class="help-block">
  16. <span translate ng-if="folderEditor.folderLabel.$valid || folderEditor.folderLabel.$pristine">Optional descriptive label for the folder. Can be different on each device.</span>
  17. </p>
  18. </div>
  19. <div class="form-group" ng-class="{'has-error': folderEditor.folderID.$invalid && folderEditor.folderID.$dirty}">
  20. <label for="folderID"><span translate>Folder ID</span></label>
  21. <input name="folderID" ng-readonly="editingExisting || (!editingExisting && currentFolder.viewFlags.importFromOtherDevice)" id="folderID" class="form-control" type="text" ng-model="currentFolder.id" required="" aria-required="true" unique-folder value="{{currentFolder.id}}"/>
  22. <p class="help-block">
  23. <span translate ng-if="folderEditor.folderID.$valid || folderEditor.folderID.$pristine">Required identifier for the folder. Must be the same on all cluster devices.</span>
  24. <span translate ng-if="folderEditor.folderID.$error.uniqueFolder">The folder ID must be unique.</span>
  25. <span translate ng-if="folderEditor.folderID.$error.required && folderEditor.folderID.$dirty">The folder ID cannot be blank.</span>
  26. </p>
  27. </div>
  28. <div class="form-group" ng-class="{'has-error': folderEditor.folderPath.$invalid && folderEditor.folderPath.$dirty}">
  29. <label translate for="folderPath">Folder Path</label>
  30. <input name="folderPath" ng-readonly="editingExisting" id="folderPath" class="form-control" type="text" ng-model="currentFolder.path" list="directory-list" required="" aria-required="true" path-is-sub-dir/>
  31. <datalist id="directory-list">
  32. <option ng-repeat="directory in directoryList" value="{{ directory }}" />
  33. </datalist>
  34. <p class="help-block">
  35. <span ng-if="folderEditor.folderPath.$valid || folderEditor.folderPath.$pristine"><span translate>Path to the folder on the local computer. Will be created if it does not exist. The tilde character (~) can be used as a shortcut for</span> <code>{{system.tilde}}</code>.</br></span>
  36. <span translate ng-if="folderEditor.folderPath.$error.required && folderEditor.folderPath.$dirty">The folder path cannot be blank.</span>
  37. <span class="text-danger" translate translate-value-other-folder="{{folderPathErrors.otherID}}" ng-if="folderPathErrors.isSub && folderPathErrors.otherLabel.length == 0">Warning, this path is a subdirectory of an existing folder "{%otherFolder%}".</span>
  38. <span class="text-danger" translate translate-value-other-folder="{{folderPathErrors.otherID}}" translate-value-other-folder-label="{{folderPathErrors.otherLabel}}" ng-if="folderPathErrors.isSub && folderPathErrors.otherLabel.length != 0">Warning, this path is a subdirectory of an existing folder "{%otherFolderLabel%}" ({%otherFolder%}).</span>
  39. <span class="text-danger" translate translate-value-other-folder="{{folderPathErrors.otherID}}" ng-if="folderPathErrors.isParent && folderPathErrors.otherLabel.length == 0">Warning, this path is a parent directory of an existing folder "{%otherFolder%}".</span>
  40. <span class="text-danger" translate translate-value-other-folder="{{folderPathErrors.otherID}}" translate-value-other-folder-label="{{folderPathErrors.otherLabel}}" ng-if="folderPathErrors.isParent && folderPathErrors.otherLabel.length != 0">Warning, this path is a parent directory of an existing folder "{%otherFolderLabel%}" ({%otherFolder%}).</span>
  41. </p>
  42. </div>
  43. <div class="form-group">
  44. <label translate for="devices">Share With Devices</label>
  45. <p translate class="help-block">Select the devices to share this folder with.</p>
  46. <div class="row">
  47. <div class="col-md-4" ng-repeat="device in otherDevices()">
  48. <div class="checkbox">
  49. <label>
  50. <input type="checkbox" ng-model="currentFolder.selectedDevices[device.deviceID]"/> {{deviceName(device)}}
  51. </label>
  52. </div>
  53. </div>
  54. </div>
  55. </div>
  56. <div translate ng-show="!editingExisting" class="help-block">When adding a new folder, keep in mind that the Folder ID is used to tie folders together between devices. They are case sensitive and must match exactly between all devices.</div>
  57. </div>
  58. <div id="folder-versioning" class="tab-pane">
  59. <div class="form-group">
  60. <label translate>File Versioning</label>&emsp;<a href="https://docs.syncthing.net/users/versioning.html" target="_blank"><span class="fa fa-book"></span>&nbsp;<span translate>Help</span></a>
  61. <select class="form-control" ng-model="currentFolder.fileVersioningSelector">
  62. <option value="none" translate>No File Versioning</option>
  63. <option value="trashcan" translate>Trash Can File Versioning</option>
  64. <option value="simple" translate>Simple File Versioning</option>
  65. <option value="staggered" translate>Staggered File Versioning</option>
  66. <option value="external" translate>External File Versioning</option>
  67. </select>
  68. </div>
  69. <div class="form-group" ng-if="currentFolder.fileVersioningSelector=='trashcan'" ng-class="{'has-error': folderEditor.trashcanClean.$invalid && folderEditor.trashcanClean.$dirty}">
  70. <p translate class="help-block">Files are moved to .stversions directory when replaced or deleted by Syncthing.</p>
  71. <label translate for="trashcanClean">Clean out after</label>
  72. <div class="input-group">
  73. <input name="trashcanClean" id="trashcanClean" class="form-control text-right" type="number" ng-model="currentFolder.trashcanClean" required="" aria-required="true" min="0"/>
  74. <div class="input-group-addon" translate>days</div>
  75. </div>
  76. <p class="help-block">
  77. <span translate ng-if="folderEditor.trashcanClean.$valid || folderEditor.trashcanClean.$pristine">The number of days to keep files in the trash can. Zero means forever.</span>
  78. <span translate ng-if="folderEditor.trashcanClean.$error.required && folderEditor.trashcanClean.$dirty">The number of days must be a number and cannot be blank.</span>
  79. <span translate ng-if="folderEditor.trashcanClean.$error.min && folderEditor.trashcanClean.$dirty">A negative number of days doesn't make sense.</span>
  80. </p>
  81. </div>
  82. <div class="form-group" ng-if="currentFolder.fileVersioningSelector=='simple'" ng-class="{'has-error': folderEditor.simpleKeep.$invalid && folderEditor.simpleKeep.$dirty}">
  83. <p translate class="help-block">Files are moved to date stamped versions in a .stversions directory when replaced or deleted by Syncthing.</p>
  84. <label translate for="simpleKeep">Keep Versions</label>
  85. <input name="simpleKeep" id="simpleKeep" class="form-control" type="number" ng-model="currentFolder.simpleKeep" required="" aria-required="true" min="1"/>
  86. <p class="help-block">
  87. <span translate ng-if="folderEditor.simpleKeep.$valid || folderEditor.simpleKeep.$pristine">The number of old versions to keep, per file.</span>
  88. <span translate ng-if="folderEditor.simpleKeep.$error.required && folderEditor.simpleKeep.$dirty">The number of versions must be a number and cannot be blank.</span>
  89. <span translate ng-if="folderEditor.simpleKeep.$error.min && folderEditor.simpleKeep.$dirty">You must keep at least one version.</span>
  90. </p>
  91. </div>
  92. <div class="form-group" ng-if="currentFolder.fileVersioningSelector=='staggered'" ng-class="{'has-error': folderEditor.staggeredMaxAge.$invalid && folderEditor.staggeredMaxAge.$dirty}">
  93. <p class="help-block"><span translate>Files are moved to date stamped versions in a .stversions directory when replaced or deleted by Syncthing.</span> <span translate>Versions are automatically deleted if they are older than the maximum age or exceed the number of files allowed in an interval.</span></p>
  94. <p translate class="help-block">The following intervals are used: for the first hour a version is kept every 30 seconds, for the first day a version is kept every hour, for the first 30 days a version is kept every day, until the maximum age a version is kept every week.</p>
  95. <label translate for="staggeredMaxAge">Maximum Age</label>
  96. <input name="staggeredMaxAge" id="staggeredMaxAge" class="form-control" type="number" ng-model="currentFolder.staggeredMaxAge" required="" aria-required="true" min="0"/>
  97. <p class="help-block">
  98. <span translate ng-if="folderEditor.staggeredMaxAge.$valid || folderEditor.staggeredMaxAge.$pristine">The maximum time to keep a version (in days, set to 0 to keep versions forever).</span>
  99. <span translate ng-if="folderEditor.staggeredMaxAge.$error.required && folderEditor.staggeredMaxAge.$dirty">The maximum age must be a number and cannot be blank.</span>
  100. <span translate ng-if="folderEditor.staggeredMaxAge.$error.min && folderEditor.staggeredMaxAge.$dirty">A negative number of days doesn't make sense.</span>
  101. </p>
  102. </div>
  103. <div class="form-group" ng-if="currentFolder.fileVersioningSelector == 'staggered'">
  104. <label translate for="staggeredVersionsPath">Versions Path</label>
  105. <input name="staggeredVersionsPath" id="staggeredVersionsPath" class="form-control" type="text" ng-model="currentFolder.staggeredVersionsPath"/>
  106. <p translate class="help-block">Path where versions should be stored (leave empty for the default .stversions directory in the shared folder).</p>
  107. </div>
  108. <div class="form-group" ng-if="currentFolder.fileVersioningSelector=='external'" ng-class="{'has-error': folderEditor.externalCommand.$invalid && folderEditor.externalCommand.$dirty}">
  109. <p translate class="help-block">An external command handles the versioning. It has to remove the file from the shared folder. If the path to the application contains spaces, it should be quoted.</p>
  110. <label translate for="externalCommand">Command</label>
  111. <input name="externalCommand" id="externalCommand" class="form-control" type="text" ng-model="currentFolder.externalCommand" required="" aria-required="true" />
  112. <p class="help-block">
  113. <span translate ng-if="folderEditor.externalCommand.$valid || folderEditor.externalCommand.$pristine">See external versioning help for supported templated command line parameters.</span>
  114. <span translate ng-if="folderEditor.externalCommand.$error.required && folderEditor.externalCommand.$dirty">The path cannot be blank.</span>
  115. </p>
  116. </div>
  117. </div>
  118. <div id="folder-ignores" class="tab-pane">
  119. <p translate>Enter ignore patterns, one per line.</p>
  120. <textarea class="form-control" rows="5"></textarea>
  121. <hr/>
  122. <p class="small"><span translate>Quick guide to supported patterns</span> (<a href="https://docs.syncthing.net/users/ignoring.html" target="_blank" translate>full documentation</a>):</p>
  123. <dl class="dl-horizontal dl-narrow small">
  124. <dt><code>(?d)</code></dt> <dd><b><span translate>Prefix indicating that the file can be deleted if preventing directory removal</span></b></dd>
  125. <dt><code>(?i)</code></dt> <dd><span translate>Prefix indicating that the pattern should be matched without case sensitivity</span></dd>
  126. <dt><code>!</code></dt> <dd><span translate>Inversion of the given condition (i.e. do not exclude)</span></dd>
  127. <dt><code>*</code></dt> <dd><span translate>Single level wildcard (matches within a directory only)</span></dd>
  128. <dt><code>**</code></dt> <dd><span translate>Multi level wildcard (matches multiple directory levels)</span></dd>
  129. <dt><code>//</code></dt> <dd><span translate>Comment, when used at the start of a line</span></dd>
  130. </dl>
  131. <hr/>
  132. <div class="pull-left" ng-show="editingExisting"><span translate translate-value-path="{{currentFolder.path}}{{system.pathSeparator}}.stignore">Editing {%path%}.</span></div>
  133. <div class="pull-left" ng-show="!editingExisting"><span translate translate-value-path="{{currentFolder.path}}{{system.pathSeparator}}.stignore">Creating ignore patterns, overwriting an existing file at {%path%}.</span></div>
  134. </div>
  135. <div id="folder-advanced" class="tab-pane">
  136. <div class="row form-group" ng-class="{'has-error': folderEditor.rescanIntervalS.$invalid && folderEditor.rescanIntervalS.$dirty}">
  137. <div class="col-md-12">
  138. <label translate>Scanning</label>
  139. &nbsp;<a href="https://docs.syncthing.net/users/syncing.html#scanning" target="_blank"><span class="fa fa-book"></span>&nbsp;<span translate>Help</span></a></br>
  140. <div class="row">
  141. <div class="col-md-6">
  142. <input type="checkbox" ng-model="currentFolder.fsWatcherEnabled" tooltip data-original-title="{{'Use notifications from the filesystem to detect changed items.' | translate }}">&nbsp;<span translate>Watch for Changes</span>
  143. </div>
  144. <div class="col-md-6">
  145. <div class="row">
  146. <span class="col-md-8" translate>Full Rescan Interval (s)</span>
  147. <div class="col-md-4">
  148. <input name="rescanIntervalS" id="rescanIntervalS" class="form-control" type="number" ng-model="currentFolder.rescanIntervalS" required="" aria-required="true" min="0"/>
  149. </div>
  150. </div>
  151. <p class="help-block" ng-if="!folderEditor.rescanIntervalS.$valid && folderEditor.rescanIntervalS.$dirty" translate>
  152. The rescan interval must be a non-negative number of seconds.
  153. </p>
  154. </div>
  155. </div>
  156. </div>
  157. </div>
  158. <div class="row">
  159. <div class="col-md-6 form-group">
  160. <label translate>Folder Type</label>
  161. &nbsp;<a href="https://docs.syncthing.net/users/foldertypes.html" target="_blank"><span class="fa fa-book"></span>&nbsp;<span translate>Help</span></a>
  162. <select class="form-control" ng-model="currentFolder.type">
  163. <option value="sendreceive" translate>Send &amp; Receive</option>
  164. <option value="sendonly" translate>Send Only</option>
  165. </select>
  166. <p ng-if="currentFolder.type == 'sendonly'" translate class="help-block">Files are protected from changes made on other devices, but changes made on this device will be sent to the rest of the cluster.</p>
  167. </div>
  168. <div class="col-md-6 form-group">
  169. <label translate>File Pull Order</label>
  170. <select class="form-control" ng-model="currentFolder.order">
  171. <option value="random" translate>Random</option>
  172. <option value="alphabetic" translate>Alphabetic</option>
  173. <option value="smallestFirst" translate>Smallest First</option>
  174. <option value="largestFirst" translate>Largest First</option>
  175. <option value="oldestFirst" translate>Oldest First</option>
  176. <option value="newestFirst" translate>Newest First</option>
  177. </select>
  178. </div>
  179. </div>
  180. <div class="row">
  181. <div class="col-md-6 form-horizontal form-group" ng-class="{'has-error': folderEditor.minDiskFree.$invalid && folderEditor.minDiskFree.$dirty}">
  182. <label for="minDiskFree" translate>Minimum Free Disk Space</label><br/>
  183. <div class="row">
  184. <div class="col-md-9">
  185. <input name="minDiskFree" id="minDiskFree" class="form-control" type="number" ng-model="currentFolder.minDiskFree.value" required="" aria-required="true" min="0" step="0.01"/>
  186. </div>
  187. <div class="col-md-3">
  188. <select class="form-control" ng-model="currentFolder.minDiskFree.unit">
  189. <option value="%">%</option>
  190. <option value="kB">kB</option>
  191. <option value="MB">MB</option>
  192. <option value="GB">GB</option>
  193. <option value="TB">TB</option>
  194. </select>
  195. </div>
  196. </div>
  197. <p class="help-block" ng-show="folderEditor.minDiskFree.$invalid" translate>
  198. Enter a non-negative number (e.g., "2.35") and select a unit. Percentages are as part of the total disk size.
  199. </p>
  200. </div>
  201. <div class="col-md-6 form-group">
  202. <label translate>Permissions</label><br/>
  203. <input type="checkbox" ng-model="currentFolder.ignorePerms"/> <span translate>Ignore</span>
  204. <p translate class="help-block">File permission bits are ignored when looking for changes. Use on FAT file systems.</p>
  205. </select></div>
  206. <p class="col-xs-12 help-block" ng-show="folderEditor.minDiskFree.$invalid">
  207. <span translate>Enter a non-negative number (e.g., "2.35") and select a unit. Percentages are as part of the total disk size.</span>
  208. </p>
  209. </div>
  210. </div>
  211. </div>
  212. </div>
  213. </div>
  214. </form>
  215. </div>
  216. <div class="modal-footer">
  217. <button type="button" class="btn btn-primary btn-sm" ng-click="saveFolder()" ng-disabled="folderEditor.$invalid">
  218. <span class="fa fa-check"></span>&nbsp;<span translate>Save</span>
  219. </button>
  220. <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
  221. <span class="fa fa-times"></span>&nbsp;<span translate>Close</span>
  222. </button>
  223. <button type="button" class="btn btn-warning pull-left btn-sm" data-toggle="modal" data-target="#remove-folder-confirmation" ng-if="editingExisting">
  224. <span class="fa fa-minus-circle"></span>&nbsp;<span translate>Remove</span>
  225. </button>
  226. </div>
  227. </modal>