localhots
/
confection
1
0
Fork 0
Code Releases Activity

Implement nested fieldsets

This commit is contained in:
Gregory Eremin 2015-01-25 18:14:57 +07:00
parent ab364e1908
commit 7c607ad025
2 changed files with 95 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
static/app.js
View File

@ -17,10 +17,40 @@ 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'),
node;
if (field.value === null) {
node = makeFieldSetNode(field.title, fieldsets[field.path + '/']);
} else if (!field.path.match(/^\/[^\/]+\//)) {
node = makeFieldNode(field);
}
container.appendChild(node);
}
}
function makeFieldNode(field) {
var formGroup = makeDivNode('form-group'),
label = makeLabelNode(field.path, field.title),
input;
@ -48,8 +78,22 @@ function drawForm(fields) {
}
formGroup.appendChild(input);
container.appendChild(formGroup);
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) {

24
static/config.html
View File

@ -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>