Skip to content

Commit

Permalink
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
gashcrumb committed Sep 11, 2013
1 parent 68836db commit eabc054
Show file tree
Hide file tree
Showing 3 changed files with 279 additions and 245 deletions.
283 changes: 153 additions & 130 deletions hawtio-web/src/main/webapp/app/core/html/preferences.html
@@ -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>

0 comments on commit eabc054

Please sign in to comment.