Phi: Help has more than just <line>...

webgui/topics/Aircraft/Help.html

@@ -1,6 +1,17 @@
 <style>
 </style>
-<h2 data-bind="text: helpTitle"></h2>
+
-<div data-bind="foreach: helpText">
+<table id="phi-aircraft-helptable" class="ui-widget-content ui-corner-all">
-<span data-bind="text: $data"></span><br />
+    <caption class="ui-widget-header ui-corner-all" data-bind="text: helpTitle"></caption>
-</div>
+    <tbody data-bind="foreach: helpContent">
+        <tr>
+            <!--  ko if: $data.type == 'line' || $data.type == 'text' -->
+            <td colspan="2" data-bind="text: $data.text"></td>
+            <!-- /ko -->
+            <!--  ko if: $data.type == 'key' -->
+                <td data-bind="text: $data.name" style="text-align: right; padding-right: 1em;"></td>
+                <td data-bind="text: $data.desc"></td>
+            <!-- /ko -->
+        </tr>
+    </tbody>
+</table>

webgui/topics/Aircraft/Help.js

@@ -5,19 +5,42 @@ define([
         var self = this;
 
         self.helpTitle = ko.observable("");
-        self.helpText = ko.observableArray([]);
+        self.helpContent = ko.observableArray([]);
 
         jquery.get('/json/sim/help', null, function(data) {
 
-            var helpText = [];
+            var helpContent = [];
             data.children.forEach(function(prop) {
                 if (prop.name === 'title') {
                     self.helpTitle(prop.value);
-                } else if (prop.name == 'line') {
+                } else if (prop.name == 'line' ) {
-                    helpText.push(prop.value);
+                    helpContent.push({
+                        type: 'line',
+                        text: prop.value,
+                    });
+                } else if (prop.name == 'text') {
+                    helpContent.push({
+                        type: 'text',
+                        text: prop.value,
+                    });
+                } else if (prop.name == 'key') {
+                    var content = {
+                            type: 'key',
+                            name: 'noname',
+                            desc: 'nothing',
+                    }
+                    helpContent.push(content);
+                    prop.children.forEach(function(prop) {
+                        if (prop.name === 'name') {
+                            content.name = prop.value;
+                        } else if( prop.name == 'desc' ) {
+                            content.desc = prop.value;
+                        }
+                    });
                 }
             });
-            self.helpText(helpText);
+            console.log(helpContent);
+            self.helpContent(helpContent);
 
         });
     }