From 398995264d522c8c142b4d6c6c16fbb22158f3fe Mon Sep 17 00:00:00 2001
From: Torsten Dreyer <torsten@ŧ3r.de>
Date: Fri, 27 Feb 2015 11:24:02 +0100
Subject: [PATCH] Phi: add property browser

---
 webgui/topics/Simulator.html            |   2 +-
 webgui/topics/Simulator/Properties.html |  56 +++++++++++-
 webgui/topics/Simulator/Properties.js   | 109 ++++++++++++++++++++++--
 3 files changed, 158 insertions(+), 9 deletions(-)

diff --git a/webgui/topics/Simulator.html b/webgui/topics/Simulator.html
index bf2b120d1..c3f9955eb 100644
--- a/webgui/topics/Simulator.html
+++ b/webgui/topics/Simulator.html
@@ -6,6 +6,6 @@
                    click: $parent.selectTopic"></li>
     </ul>
 </div>
-<div id="vtabs-content" data-bind="component: { name: selectedComponent, params: { props: $root.props }}">
+<div id="vtabs-content" data-bind="component: { name: selectedComponent }">
     
 </div>
diff --git a/webgui/topics/Simulator/Properties.html b/webgui/topics/Simulator/Properties.html
index 7385606ff..65bb0d603 100644
--- a/webgui/topics/Simulator/Properties.html
+++ b/webgui/topics/Simulator/Properties.html
@@ -1,7 +1,59 @@
 <style>
+.pointer-icon {
+	cursor: pointer;
+}
 
+.property-list {
+	list-style-type: none;
+	list-style-image: none;
+	padding-left: 26px;
+}
+
+.property-name {
+	width: 12em;
+	display: inline-block;
+}
+
+.property-value {
+  padding: 0 0.2em;
+  min-width: 8em;
+  display: inline-block;
+  text-align: right;
+}
 </style>
+<div class="ui-widget ui-widget-content ui-corner-all">
+<div class="ui-widget-header">Property Tree</div>
+<div data-bind="template: { name: 'propertytree-template', data: properties }"></div>
+</div>
+<script type="text/html" id="propertytree-template">
+  <ul class="property-list" data-bind="foreach: $data">
+    <li>
+        <span class="property-name" 
+              data-bind="
+                text: name,
+                css: { 
+                  'pointer-icon': hasChildren, 
+                },
+                click: toggle,
+              "></span>
 
-<div data-bind="foreach: properties">
+        <span class="property-value ui-state-hover pointer-icon ui-corner-all" 
+              data-bind="
+                text: value, 
+                visible: hasValue,
+                click: valueEdit,
+              "></span>
 
-</div>
\ No newline at end of file
+        <div data-bind="
+               template: { 
+                 name: 'propertytree-template',
+                 data: children
+               },
+               visible: isExpanded
+             "></div>
+    </li>
+  </ul>
+</script>
+<script type="text/html" id="inplace-editor-template">
+  <input style="width: 8em" >
+</script>
diff --git a/webgui/topics/Simulator/Properties.js b/webgui/topics/Simulator/Properties.js
index e8f7e4644..19f68e240 100644
--- a/webgui/topics/Simulator/Properties.js
+++ b/webgui/topics/Simulator/Properties.js
@@ -1,21 +1,118 @@
 define([
-        'jquery', 'knockout', 'text!./Properties.html', 
+        'jquery', 'knockout', 'text!./Properties.html',
 ], function(jquery, ko, htmlString) {
+
     function PropertyViewModel() {
         var self = this;
-        self.name = ko.observable('');
+
+        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;
+
+        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 = [];
+                    data.children.forEach(function(prop) {
+                        var p = new PropertyViewModel();
+                        p.name = prop.name;
+                        p.path = prop.path;
+                        p.hasChildren = prop.nChildren > 0;
+                        if (typeof (prop.value) != 'undefined') {
+                            p.value(prop.value);
+                            p.hasValue = true;
+                        } else {
+                            p.hasValue = false;
+                        }
+                        a.push(p);
+                    });
+                    self.children(a.sort(function(a, b) {
+                        if (a.name == b.name) {
+                            return a.index - b.index;
+                        }
+                        return a.name.localeCompare(b.name);
+                    }));
+
+                });
+            } else {
+                self.children.removeAll();
+            }
+        });
+
+        self.toggle = function() {
+            self.isExpanded(!self.isExpanded());
+        }
+
+        self.valueEdit = function(prop, evt) {
+            var inplaceEditor = jquery(jquery('#inplace-editor-template').html());
+
+            var elem = jquery(evt.target);
+            elem.hide();
+            elem.after(inplaceEditor);
+            inplaceEditor.val(elem.text());
+            inplaceEditor.focus();
+
+            function endEdit(val) {
+                inplaceEditor.remove();
+                elem.show();
+
+                if (typeof (val) === 'undefined')
+                    return;
+                var val = val.trim();
+                elem.text(val);
+
+                jquery.post('/json' + self.path, JSON.stringify({
+                    value : val
+                }));
+            }
+
+            inplaceEditor.on('keyup', function(evt) {
+                switch (evt.key) {
+                case 'Esc':
+                    endEdit();
+                    break;
+                case 'Enter':
+                    endEdit(inplaceEditor.val());
+                    break;
+                }
+            });
+
+            inplaceEditor.blur(function() {
+                endEdit(inplaceEditor.val());
+            });
+        }
     }
-    
+
     function ViewModel(params) {
         var self = this;
 
-        var properties = ko.observableArray([]);
+        self.root = new PropertyViewModel();
+        self.root.name = "root";
+        self.root.path = "/";
+        self.root.isExpanded(true);
+        self.properties = self.root.children;
     }
 
-    ViewModel.prototype.dispose = function() {
-    }
+    // ViewModel.prototype.dispose = function() {
+    // }
 
     // Return component definition
     return {