Implement nested fieldsets

static/app.js

@@ -17,39 +17,83 @@ function loadFields(callback) {
 }
 
 function drawForm(fields) {
-    var container = document.getElementById('fields');
+    var container = document.getElementById('fields'),
+        fieldsets = {};
+
+    for (var i = 0; i < fields.length; i++) {
+        var field = fields[i];
+
+        if (field.value !== null) {
+            var fieldNode = makeFieldNode(field),
+                fieldSetName = field.path.match("(.*\/).*")[1];
+
+            if (!fieldsets[fieldSetName]) {
+                fieldsets[fieldSetName] = [];
+            }
+            fieldsets[fieldSetName].push(fieldNode);
+        }
+    }
+
     for (var i = 0; i < fields.length; i++) {
         var field = fields[i],
-            formGroup = makeDivNode('form-group'),
-            label = makeLabelNode(field.path, field.title),
-            input;
+            node;
 
-        formGroup.appendChild(label);
-
-        if (field.options !== null) {
-            input = makeSelectNode(field.options, !field.is_required)
-        } else {
-            input = document.createElement('input');
+        if (field.value === null) {
+            node = makeFieldSetNode(field.title, fieldsets[field.path + '/']);
+        } else if (!field.path.match(/^\/[^\/]+\//)) {
+            node = makeFieldNode(field);
         }
 
-        input.setAttribute('value', field.value);
-        input.setAttribute('id', field.path);
-        input.setAttribute('class', 'form-control');
-        if (field.is_readonly) {
-            input.setAttribute('readonly', 'readonly');
-        }
-
-        switch (field.type) {
-        case "string":
-            input.setAttribute('type', 'text');
-            break;
-        default:
-            console.log("Invalid field type: "+ field.type, field)
-        }
-
-        formGroup.appendChild(input);
-        container.appendChild(formGroup);
+        container.appendChild(node);
     }
+
+}
+
+function makeFieldNode(field) {
+    var formGroup = makeDivNode('form-group'),
+        label = makeLabelNode(field.path, field.title),
+        input;
+
+    formGroup.appendChild(label);
+
+    if (field.options !== null) {
+        input = makeSelectNode(field.options, !field.is_required)
+    } else {
+        input = document.createElement('input');
+    }
+
+    input.setAttribute('value', field.value);
+    input.setAttribute('id', field.path);
+    input.setAttribute('class', 'form-control');
+    if (field.is_readonly) {
+        input.setAttribute('readonly', 'readonly');
+    }
+
+    switch (field.type) {
+    case "string":
+        input.setAttribute('type', 'text');
+        break;
+    default:
+        console.log("Invalid field type: "+ field.type, field)
+    }
+
+    formGroup.appendChild(input);
+
+    return formGroup;
+}
+
+function makeFieldSetNode(title, fields) {
+    var fieldsetNode = document.createElement('fieldset'),
+        legendNode = document.createElement('legend');
+
+    legendNode.appendChild(document.createTextNode(title));
+    fieldsetNode.appendChild(legendNode);
+
+    for (var i = 0; i < fields.length; i++) {
+        fieldsetNode.appendChild(fields[i]);
+    }
+
+    return fieldsetNode;
 }
 
 function makeDivNode(classes) {

static/config.html

@@ -6,6 +6,30 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Configuration Management</title>
     <link rel="stylesheet" href="/bootstrap.min.css">
+    <style type="text/css">
+        .container {
+            margin-top: 1em;
+        }
+        fieldset:before {
+            position: absolute;
+            top: -1%;
+            left: -1.5em;
+            display: block;
+            content: '\0020';
+            width: 8px;
+            height: 95%;
+            margin: 2% 0;
+            background-color: #eee;
+            border-radius: 4px;
+        }
+        fieldset:hover:before {
+            background-color: #66afe9;
+        }
+        fieldset {
+            position: relative;
+            margin-left: 1.5em;
+        }
+    </style>
 </head>
 <body>