Skip to content

Commit

Permalink
UI performance overhaul (museumsvictoria#188)
Browse files Browse the repository at this point in the history 
Better handing of very large nodes
* UI performance overhaul
* Console space fix
* build(deps): bump websocket-extensions in /nodel-webui-js
Bumps [websocket-extensions](https://github.com/faye/websocket-extensions-node) from 0.1.3 to 0.1.4.
* Use HTTP or HTTPS depending on what client uses
* Use hosticon as favicon
* Throttle log further optimisation
* Remove redundant debug block
* Update to log throttling mechanism
* Add bindings filter
* Further fixes for log buffer and display
* Fix for initialising the log if there is no prior activity
* Fix polling mode not updating
* Clean up gruntfile
  • Loading branch information
@mcartmel @scroix
mcartmel authored and scroix committed Apr 1, 2024
1 parent 802fec5 commit 5902d60
Show file tree
Hide file tree
Showing 5 changed files with 293 additions and 159 deletions.
2 changes: 2 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,3 +33,5 @@ nodel-webui-js/node_modules/
/nodel-webui-js/temp
nodel-webui-js/src/dark/theme.less
nodel-webui-js/src/light/theme.less
nodel-webui-js/.ftppass
nodel-webui-js/sftpCache.json
6 changes: 3 additions & 3 deletions nodel-webui-js/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

132 changes: 76 additions & 56 deletions nodel-webui-js/src/index.xsl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -529,22 +529,22 @@
<%else ~inobj || !~nokeytitle%>
<label data-link="for{:~idxid(~idx,'<%:~id%>_field_<%:~key%>')}"><%>~key%></label>
<%/if%>
<input title="<%>desc%>" type="number" class="form-control" placeholder="<%>hint%>" step="any" data-link="{intToStr:<%:~key%>:strToInt} id{:~idxid(~idx,'<%:~id%>_field_<%:~key%>')}"/>
<input title="<%>desc%>" type="<%if format=='range'%>range<%else%>number<%/if%>" class="form-control" placeholder="<%>hint%>" step="<%if step%><%>step%><%else%>any<%/if%>" <%if min%>min="<%>min%>"<%/if%> <%if max%>max="<%>max%>"<%/if%> data-link="{intToStr:<%:~key%>:strToInt} id{:~idxid(~idx,'<%:~id%>_field_<%:~key%>')}"/>
<%if format=='range'%><output data-link="{intToStr:<%:~key%>:strToInt}"></output><%/if%>
</div>
]]>
</script>
<script id="booleanTmpl" type="text/x-jsrender">
<![CDATA[
<div>
<%if title%>
<label data-link="for{:~idxid(~idx,'<%:~id%>_field_<%:~key%>_group')}"><%>title%></label>
<%else ~inobj || !~nokeytitle%>
<label data-link="for{:~idxid(~idx,'<%:~id%>_field_<%:~key%>_group')}"><%>~key%></label>
<%/if%>
<div class="form-group">
<div class="checkbox" data-link="id{:~idxid(~idx,'<%:~id%>_field_<%:~key%>_group')}">
<label data-link="for{:~idxid(~idx,'<%:~id%>_field_<%:~key%>')}">
<input title="<%>desc%>" type="checkbox" class="styled" data-link="{:<%:~key%>:} id{:~idxid(~idx,'<%:~id%>_field_<%:~key%>')}"/>
Yes
<%if title%>
<%>title%>
<%else ~inobj || !~nokeytitle%>
<%>~key%>
<%/if%>
</label>
</div>
</div>
Expand All @@ -553,7 +553,7 @@
<script id="remoteTmpl" type="text/x-jsrender">
<![CDATA[
<form data-form="true" class="base" autocomplete="off">
{^{if true ~initHid('_$visible')}}
{^{if true ~initHid('_$visible') ~initHid('_$filtername') ~initHid('_$filldown')}}
<fieldset>
<%for schema ~key=key?key:''%>
<%if type=="object"%>
Expand All @@ -569,17 +569,19 @@
<table class="tableremote">
<thead>
<tr>
<td></td>
<td>
<div class="">
<input class="form-control" type="text" data-link="_$filtername" placeholder="filter"/>
</div>
</td>
<td></td>
<td>
{^{if ~initHid('_$filldown')}}
<div class="input-group">
<input class="form-control node" type="text" data-link="_$filldown" placeholder="fill selected"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default remotenodecopy <%:~fieldkey%>"><i class="far fa-copy"></i></button>
</span>
</div>
{{/if}}
<div class="input-group">
<input class="form-control node" type="text" data-link="_$filldown" placeholder="fill selected"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default remotenodecopy <%:~fieldkey%>"><i class="far fa-copy"></i></button>
</span>
</div>
</td>
<td><button type="button" class="btn btn-default remotefill <%:~fieldkey%>"><i class="fas fa-magic"></i></button></td>
</tr>
Expand All @@ -592,44 +594,46 @@
</thead>
<tbody>
<%for prop ~key=key%>
{^{if ~initObj('<%:~key%>', <%:~key%>)}}
{^{if ~initObj(<%:~key%>, <%:~key%>)}}
{^{for <%:~key%>}}
<%props properties%>
<tr>
<%for prop ~key=key%>
{^{if ~initObj('<%:~key%>', <%:~key%>)}}
{^{for <%:~key%>}}
<td>
<label class="multi">
{^{if ~initHid('_$checked')}}
<input type="checkbox" data-link="_$checked"/>
{{/if}}
<%>title%>
</label>
</td>
<td>
{^{if ~initHid('_$status')}}
{^{if _$status == 'Wired'}}
<a data-link="href{:'/nodes.xml?filter='+node}"><span class="binding wired fas fa-link reachable"></span></a>
{{else}}
<a><span class="binding fas fa-unlink"></span></a>
{^{if ~iswithin('<%:key%>',~root._$filtername)}}
<tr>
<%for prop ~key=key%>
{^{if ~initObj('<%:~key%>', <%:~key%>)}}
{^{for <%:~key%>}}
<td>
<label class="multi">
{^{if ~initHid('_$checked')}}
<input type="checkbox" data-link="_$checked"/>
{{/if}}
<%>title%>
</label>
</td>
<td>
{^{if ~initHid('_$status')}}
{^{if _$status == 'Wired'}}
<a data-link="href{:'/nodes.xml?filter='+node}"><span class="binding wired fas fa-link reachable"></span></a>
{{else}}
<a><span class="binding fas fa-unlink"></span></a>
{{/if}}
{{/if}}
{{/if}}
</td>
<td>
<div>
<input spellcheck="false" placeholder="node" type="text" class="form-control node" data-link="node"/>
</div>
</td>
<td>
<div>
<input spellcheck="false" placeholder="<%>~fieldkey%>" type="text" class="form-control <%>~fieldkey%>" data-link="<%>~fieldkey%>"/>
</div>
</td>
{{/for}}
{{/if}}
<%/for%>
</tr>
</td>
<td>
<div>
<input spellcheck="false" placeholder="node" type="text" class="form-control node" data-link="node"/>
</div>
</td>
<td>
<div>
<input spellcheck="false" placeholder="<%>~fieldkey%>" type="text" class="form-control <%>~fieldkey%>" data-link="<%>~fieldkey%>"/>
</div>
</td>
{{/for}}
{{/if}}
<%/for%>
</tr>
{{/if}}
<%/props%>
{{/for}}
{{/if}}
Expand All @@ -650,6 +654,16 @@
</form>
]]>
</script>
<script id="actsigHoldingTmpl" type="text/x-jsrender">
<![CDATA[
<div class="row">
<div class="col-sm-12">
<button type="submit" class="btn btn-warning enable" title="Enable">Enable</button>
<div class="loader"></div>
</div>
</div>
]]>
</script>
<script id="actsigTmpl" type="text/x-jsrender">
<![CDATA[
{{for forms}}
Expand Down Expand Up @@ -727,12 +741,18 @@
{^{if init}}
<h6>Initialising</h6>
{{else}}
{^{for logs filter=~srcflt mapDepends='flt' srch='alias' start=0 end=end}}
<li data-link="data-type{:type} class{:'log log_'+type+'_'+alias}">
{^{for logs filter=~srcflt mapDepends='flt' srch='alias' start=0 end=end sorted=srtd}}
<li data-link="data-type{:type} class{:'log log_'+source+'_'+type+'_'+alias}">
<span data-link="class{:'logicon log_src_'+source+' log_typ_'+type}"></span>
<span class="logtitle">{^{>rawalias}}</span><span class="logtimestamp"> - {^{>~nicetime(timestamp)}}</span>
{^{if ~isset(arg)}}
<span class="logarg">{^{:~jsonhighlight(~sanitize(arg, 250))}}</span>
<span class="logarg">
{^{if ~root.hold or ~root.flt}}
{^{:~jsonhighlight(~sanitize(arg, 250))}}
{{else}}
{^{:~sanitize(arg, 250)}}
{{/if}}
</span>
{{/if}}
</li>
{{/for}}
Expand Down
Loading

0 comments on commit 5902d60

Please sign in to comment.