From ccd44aa76c423d7a721901ef3bb2aee57a717b62 Mon Sep 17 00:00:00 2001
From: Torsten Dreyer <torsten@ŧ3r.de>
Date: Fri, 27 Feb 2015 16:28:04 +0100
Subject: [PATCH] Phi: improve the property browser

- add icon hints for expand/collapseable properties
- add icon and function for refresh value
---
 webgui/topics/Simulator/Properties.html | 12 +++++
 webgui/topics/Simulator/Properties.js   | 59 ++++++++++++++-----------
 2 files changed, 44 insertions(+), 27 deletions(-)

diff --git a/webgui/topics/Simulator/Properties.html b/webgui/topics/Simulator/Properties.html
index 65bb0d603..62aad0d8c 100644
--- a/webgui/topics/Simulator/Properties.html
+++ b/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,
diff --git a/webgui/topics/Simulator/Properties.js b/webgui/topics/Simulator/Properties.js
index 1e8851b7e..91c78a957 100644
--- a/webgui/topics/Simulator/Properties.js
+++ b/webgui/topics/Simulator/Properties.js
@@ -5,32 +5,19 @@ define([
     function PropertyViewModel() {
         var self = this;
 
-        var updateId = 0;
-        function update( id ) {
-            if( id != updateId ) return;
-        }
-        self.name = '';
-        self.value = ko.observable('');
-        self.children = ko.observableArray([]);
-        self.index = 0;
-        self.path = '';
-        self.hasChildren = false;
-        self.hasValue = false;
+        function load() {
+            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;
+                }
 
-        self.isExpanded = ko.observable(false);
-        self.isExpanded.subscribe(function(newValue) {
-            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 = [];
+                var a = [];
+                if (data.children) {
                     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) {