Phi: improve the property browser

- add icon hints for expand/collapseable properties
- add icon and function for refresh value

webgui/topics/Simulator/Properties.html

@@ -28,6 +28,18 @@
 <script type="text/html" id="propertytree-template">
   <ul class="property-list" data-bind="foreach: $data">
     <li>
+        <span class="ui-icon pointer-icon" style="display: inline-block;"
+              data-bind="
+                css: { 
+                  'ui-icon-triangle-1-e': hasChildren, 
+                  'ui-icon-triangle-1-se': isExpanded, 
+                  'ui-icon-refresh': hasValue, 
+                },
+                attr: {
+                  title: hasValue ? 'click to refresh' : 'click to expand/collapse',
+                },
+                click: toggle,
+        "></span>
         <span class="property-name" 
               data-bind="
                 text: name,

webgui/topics/Simulator/Properties.js

@@ -5,32 +5,19 @@ define([
     function PropertyViewModel() {
         var self = this;
 
-        var updateId = 0;
+        function load() {
-        function update( id ) {
+            jquery.get('/json' + self.path, null, function(data) {
-            if( id != updateId ) return;
+                self.hasChildren = data.nChildren > 0;
-        }
+                if (typeof (data.value) != 'undefined') {
-        self.name = '';
+                    self.value(data.value);
-        self.value = ko.observable('');
+                    self.hasValue = true;
-        self.children = ko.observableArray([]);
+                } else {
-        self.index = 0;
+                    self.value('');
-        self.path = '';
+                    self.hasValue = false;
-        self.hasChildren = false;
+                }
-        self.hasValue = false;
 
-        self.isExpanded = ko.observable(false);
+                var a = [];
-        self.isExpanded.subscribe(function(newValue) {
+                if (data.children) {
-            if (newValue) {
-                jquery.get('/json' + self.path, null, function(data) {
-                    self.hasChildren = data.nChildren > 0;
-                    if (typeof (data.value) != 'undefined') {
-                        self.value(data.value);
-                        self.hasValue = true;
-                    } else {
-                        self.value('');
-                        self.hasValue = false;
-                    }
-
-                    var a = [];
                     data.children.forEach(function(prop) {
                         var p = new PropertyViewModel();
                         p.name = prop.name;
@@ -50,15 +37,33 @@ define([
                         }
                         return a.name.localeCompare(b.name);
                     }));
+                }
 
-                });
+            });
+        }
+        self.name = '';
+        self.value = ko.observable('');
+        self.children = ko.observableArray([]);
+        self.index = 0;
+        self.path = '';
+        self.hasChildren = false;
+        self.hasValue = false;
+
+        self.isExpanded = ko.observable(false);
+        self.isExpanded.subscribe(function(newValue) {
+            if (newValue) {
+                load();
             } else {
                 self.children.removeAll();
             }
         });
 
         self.toggle = function() {
-            self.isExpanded(!self.isExpanded());
+            if (self.hasChildren) {
+                self.isExpanded(!self.isExpanded());
+            } else {
+                load();
+            }
         }
 
         self.valueEdit = function(prop, evt) {