Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
Fix #538 and also make the editor preferences save to local storage, …
…also add some example code and ensure the editor reflects the current selection
- Loading branch information
Showing
3 changed files
with
279 additions
and
245 deletions.
There are no files selected for viewing
283 changes: 153 additions & 130 deletions
283
hawtio-web/src/main/webapp/app/core/html/preferences.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,160 +1,183 @@ | ||
<!-- TODO Should we split this page into partials, and just just allow plugins to register their configurable preferences to this page? --> | ||
<div ng-controller="Core.PreferencesController" class="prefs"> | ||
|
||
<strong>Behaviour</strong> | ||
<form class="form-horizontal"> | ||
<div class="control-group"> | ||
<label class="control-label" for="updateRate" title="How frequently the data is updated in the browser">Update Rate</label> | ||
|
||
<div class="controls"> | ||
<select id="updateRate" ng-model="updateRate"> | ||
<option value="0">No refreshes</option> | ||
<option value="1000">1 second</option> | ||
<option value="2000">2 seconds</option> | ||
<option value="5000">5 seconds</option> | ||
<option value="10000">10 seconds</option> | ||
<option value="30000">30 seconds</option> | ||
</select> | ||
</div> | ||
</div> | ||
<div class="row-fluid"> | ||
<div class="span10 offset1"> | ||
|
||
<div class="control-group"> | ||
<label class="control-label">Auto Refresh</label> | ||
<div class="controls"> | ||
<input type="checkbox" ng-model="autoRefresh"> | ||
<span class="help-block">Automatically refresh the app when a plugin is updated</span> | ||
</div> | ||
</div> | ||
<strong>Behaviour</strong> | ||
<form class="form-horizontal"> | ||
<div class="control-group"> | ||
<label class="control-label" for="updateRate" title="How frequently the data is updated in the browser">Update Rate</label> | ||
|
||
<div class="controls"> | ||
<select id="updateRate" ng-model="updateRate"> | ||
<option value="0">No refreshes</option> | ||
<option value="1000">1 second</option> | ||
<option value="2000">2 seconds</option> | ||
<option value="5000">5 seconds</option> | ||
<option value="10000">10 seconds</option> | ||
<option value="30000">30 seconds</option> | ||
</select> | ||
</div> | ||
</div> | ||
|
||
<div class="control-group"> | ||
<label class="control-label">Host Identification</label> | ||
<div class="controls"> | ||
<button class="btn" ng-click="showRegexDialog = true" title="Add Regex"><i class="icon-plus"></i></button> | ||
<table ng-show="hosts.length"> | ||
<thead> | ||
<tr> | ||
<th></th> | ||
<th>Name</th> | ||
<th>Regex</th> | ||
<th></th> | ||
</tr> | ||
</thead> | ||
<tbody> | ||
<tr ng-repeat='host in hosts'> | ||
<td> | ||
<i class="icon-remove clickable" ng-click="delete($index)"></i> | ||
<i class="icon-caret-up clickable" ng-hide="$first" ng-click="moveUp($index)"></i> | ||
<i class="icon-caret-down clickable" ng-hide="$last" ng-click="moveDown($index)"></i> | ||
</td> | ||
<td> | ||
<editable-property class="inline-block" ng-model="host" property="name"></editable-property> | ||
</td> | ||
<td> | ||
<editable-property class="inline-block" ng-model="host" property="regex"></editable-property> | ||
</td> | ||
<td><div hawtio-color-picker='host.color'></div></td> | ||
</tr> | ||
</tbody> | ||
</table> | ||
<div hawtio-confirm-dialog="showRegexDialog" on-ok="onOk()" title="Add Regex..."> | ||
<div class="dialog-body"> | ||
<div simple-form data='hostSchema' entity='newHost'> | ||
<div class="control-group"> | ||
<label class="control-label">Auto Refresh</label> | ||
<div class="controls"> | ||
<input type="checkbox" ng-model="autoRefresh"> | ||
<span class="help-block">Automatically refresh the app when a plugin is updated</span> | ||
</div> | ||
</div> | ||
|
||
<div class="control-group"> | ||
<label class="control-label">Host Identification</label> | ||
<div class="controls"> | ||
<button class="btn" ng-click="showRegexDialog = true" title="Add Regex"><i class="icon-plus"></i></button> | ||
<table ng-show="hosts.length"> | ||
<thead> | ||
<tr> | ||
<th></th> | ||
<th>Name</th> | ||
<th>Regex</th> | ||
<th></th> | ||
</tr> | ||
</thead> | ||
<tbody> | ||
<tr ng-repeat='host in hosts'> | ||
<td> | ||
<i class="icon-remove clickable" ng-click="delete($index)"></i> | ||
<i class="icon-caret-up clickable" ng-hide="$first" ng-click="moveUp($index)"></i> | ||
<i class="icon-caret-down clickable" ng-hide="$last" ng-click="moveDown($index)"></i> | ||
</td> | ||
<td> | ||
<editable-property class="inline-block" ng-model="host" property="name"></editable-property> | ||
</td> | ||
<td> | ||
<editable-property class="inline-block" ng-model="host" property="regex"></editable-property> | ||
</td> | ||
<td><div hawtio-color-picker='host.color'></div></td> | ||
</tr> | ||
</tbody> | ||
</table> | ||
<div hawtio-confirm-dialog="showRegexDialog" on-ok="onOk()" title="Add Regex..."> | ||
<div class="dialog-body"> | ||
<div simple-form data='hostSchema' entity='newHost'> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
</form> | ||
</form> | ||
|
||
<strong>Logs</strong> | ||
<form class="form-horizontal"> | ||
<div class="control-group"> | ||
<label class="control-label" for="logCacheSize" title="The number of log messages to keep in the browser">Log cache size</label> | ||
<strong>Logs</strong> | ||
<form class="form-horizontal"> | ||
<div class="control-group"> | ||
<label class="control-label" for="logCacheSize" title="The number of log messages to keep in the browser">Log cache size</label> | ||
|
||
<div class="controls"> | ||
<input id="logCacheSize" type="number" ng-model="logCacheSize"/> | ||
</div> | ||
</div> | ||
</form> | ||
<div class="controls"> | ||
<input id="logCacheSize" type="number" ng-model="logCacheSize"/> | ||
</div> | ||
</div> | ||
</form> | ||
|
||
<strong>Git</strong> | ||
<form class="form-horizontal"> | ||
<div class="control-group"> | ||
<label class="control-label" for="gitUserName" title="The user name to be used when making changes to files with the source control system">User Name</label> | ||
<strong>Git</strong> | ||
<form class="form-horizontal"> | ||
<div class="control-group"> | ||
<label class="control-label" for="gitUserName" title="The user name to be used when making changes to files with the source control system">User Name</label> | ||
|
||
<div class="controls"> | ||
<input id="gitUserName" type="text" placeholder="username" ng-model="gitUserName"/> | ||
</div> | ||
</div> | ||
<div class="control-group"> | ||
<label class="control-label" for="gitUserEmail" title="The email address to use when making changes to files with the source control system">Email address</label> | ||
<div class="controls"> | ||
<input id="gitUserName" type="text" placeholder="username" ng-model="gitUserName"/> | ||
</div> | ||
</div> | ||
<div class="control-group"> | ||
<label class="control-label" for="gitUserEmail" title="The email address to use when making changes to files with the source control system">Email address</label> | ||
|
||
<div class="controls"> | ||
<input id="gitUserEmail" type="email" placeholder="email" ng-model="gitUserEmail"/> | ||
</div> | ||
</div> | ||
</form> | ||
<div class="controls"> | ||
<input id="gitUserEmail" type="email" placeholder="email" ng-model="gitUserEmail"/> | ||
</div> | ||
</div> | ||
</form> | ||
|
||
<strong>ActiveMQ</strong> | ||
<form class="form-horizontal"> | ||
<div class="control-group"> | ||
<label class="control-label" for="activemqUserName" title="The user name to be used when connecting to the broker">User Name</label> | ||
<strong>ActiveMQ</strong> | ||
<form class="form-horizontal"> | ||
<div class="control-group"> | ||
<label class="control-label" for="activemqUserName" title="The user name to be used when connecting to the broker">User Name</label> | ||
|
||
<div class="controls"> | ||
<input id="activemqUserName" type="text" placeholder="username" ng-model="activemqUserName"/> | ||
</div> | ||
</div> | ||
<div class="control-group"> | ||
<label class="control-label" for="activemqPassword" title="Password to be used when connecting to the broker">Password</label> | ||
<div class="controls"> | ||
<input id="activemqUserName" type="text" placeholder="username" ng-model="activemqUserName"/> | ||
</div> | ||
</div> | ||
<div class="control-group"> | ||
<label class="control-label" for="activemqPassword" title="Password to be used when connecting to the broker">Password</label> | ||
|
||
<div class="controls"> | ||
<input id="activemqPassword" type="password" placeholder="password" ng-model="activemqPassword"/> | ||
</div> | ||
</div> | ||
</form> | ||
</div> | ||
<div class="controls"> | ||
<input id="activemqPassword" type="password" placeholder="password" ng-model="activemqPassword"/> | ||
</div> | ||
</div> | ||
</form> | ||
|
||
<!-- TODO Split into its file and include as a partial --> | ||
<div ng-controller="CodeEditor.PreferencesController"> | ||
<strong>Editor</strong> | ||
<form class="form-horizontal"> | ||
<div class="control-group"> | ||
<!-- TODO Split into its file and include as a partial --> | ||
<div ng-controller="CodeEditor.PreferencesController"> | ||
<strong>Editor</strong> | ||
<form class="form-horizontal"> | ||
<div class="control-group"> | ||
<label class="control-label" for="theme" title="The default theme to be used by the code editor">Theme</label> | ||
|
||
<div class="controls"> | ||
<select id="theme" ng-model="preferences.theme"> | ||
<option value="default">Default</option> | ||
<option value="ambiance">Ambiance</option> | ||
<option value="blackboard">Blackboard</option> | ||
<option value="cobalt">Cobalt</option> | ||
<option value="eclipse">Eclipse</option> | ||
<option value="elegant">Elegant</option> | ||
<option value="erlang-dark">Erlang Dark</option> | ||
<option value="lesser-dark">Lesser Dark</option> | ||
<option value="monokai">Monokai</option> | ||
<option value="neat">Neat</option> | ||
<option value="night">Night</option> | ||
<option value="rubyblue">Rubyblue</option> | ||
<option value="solarized">Solarized</option> | ||
<option value="twilight">Twilight</option> | ||
<option value="vibrant-ink">Vibrant Ink</option> | ||
<option value="xq-dark">xq Dark</option> | ||
</select> | ||
<select id="theme" ng-model="preferences.theme"> | ||
<option value="default">Default</option> | ||
<option value="ambiance">Ambiance</option> | ||
<option value="blackboard">Blackboard</option> | ||
<option value="cobalt">Cobalt</option> | ||
<option value="eclipse">Eclipse</option> | ||
<option value="elegant">Elegant</option> | ||
<option value="erlang-dark">Erlang Dark</option> | ||
<option value="lesser-dark">Lesser Dark</option> | ||
<option value="monokai">Monokai</option> | ||
<option value="neat">Neat</option> | ||
<option value="night">Night</option> | ||
<option value="rubyblue">Rubyblue</option> | ||
<option value="solarized">Solarized</option> | ||
<option value="twilight">Twilight</option> | ||
<option value="vibrant-ink">Vibrant Ink</option> | ||
<option value="xq-dark">xq Dark</option> | ||
</select> | ||
</div> | ||
</div> | ||
</form> | ||
</div> | ||
</form> | ||
|
||
<form class="form-horizontal"> | ||
<div class="control-group"> | ||
<form class="form-horizontal"> | ||
<div class="control-group"> | ||
<label class="control-label" for="tabSIze">Tab Size</label> | ||
|
||
<div class="controls"> | ||
<input type="text" id="tabSize" name="tabSize" ng-model="preferences.tabSize"/> | ||
<input type="text" id="tabSize" name="tabSize" ng-model="preferences.tabSize"/> | ||
</div> | ||
</div> | ||
</form> | ||
</div> | ||
</form> | ||
|
||
<script type="text/ng-template" id="exampleText"> | ||
var foo = "World!"; | ||
|
||
<textarea ui-codemirror="preferences" ng-model="codeMirrorModel"></textarea> | ||
var myObject = { | ||
message: "Hello", | ||
getMessage: function() { | ||
return message + " "; | ||
} | ||
}; | ||
|
||
window.alert(myObject.getMessage() + foo); | ||
</script> | ||
|
||
<script type="text/ng-template" id="codeMirrorExTemplate"> | ||
<div hawtio-editor="exampleText" mode="javascript"></div> | ||
</script> | ||
|
||
<div compile="codeMirrorEx"></div> | ||
|
||
</div> | ||
</div> | ||
|
||
</div> | ||
</div> |
Oops, something went wrong.