<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>Config</h2>
<div id="rootparent">
</div>
</div>
</div>
.panel-body{
overflow:hidden;
}
.input-group{
margin-bottom:8px;
}
.glyphicon-chevron-down{
display:block;
}
.glyphicon-chevron-up{
display:none;
}
.in > .glyphicon-chevron-down{
display:none;
}
.in > .glyphicon-chevron-up{
display:block;
}
//# sourceURL=filename.js
var config = {};
// Device42 config
config.Device42 = {
"url":'https://sy3apprmgd42.prod.sbet.com.au/',
"username":"test",
"password":"test",
"savepath": "storage/"
};
// Express Server config
config.Server = {
"port":8888
};
// Mailer config
config.Mailer = {
smtpConfig:{
host: 'smtp://relaymx.prod.sbet.com.au'
},
from:'\"Alarm2Email\" <alarm2email@alarm2email.com>',
subject:'Alarm from Alarm2Email'
};
var parentTmpl = '<div id="parent_{id}" class="panel panel-primary">' +
'<div class="panel-heading">' +
'<h3 class="panel-title">{key}' +
'<span class="pull-right">' +
'<a id="btnCol{id}" class="btn btn-primary btn-xs" role="button" data-toggle="collapse" href="#col{id}">' +
'<i class="glyphicon glyphicon-chevron-down"></i><i class="glyphicon glyphicon-chevron-up"></i></a>' +
'</span></h3></div>' +
'<div class="panel-body collapse" id="col{id}"></div></div>';
var objTmpl = '<div class="input-group">' +
'<span class="input-group-addon">{key}</span>' +
'<input type="text" class="form-control" value="{val}">' +
'<input type="hidden" name="key" val={id}">' +
'</div>';
String.prototype.replaceAll = function(search, replacement) {
var target = this;
return target.replace(new RegExp(search, 'g'), replacement);
};
function scan(obj, parent, id)
{
var k;
if (obj instanceof Object) {
var ptmp = parentTmpl.replaceAll('\{key\}', parent).replaceAll('\{id\}', parent);
var targ = id === "rootparent" ? $('#' + id) : $('#' + id + ' .panel-body');
targ.append(ptmp);
$('#btnCol' + parent).click(function(){
$(this).toggleClass('in');
});
for (k in obj){
if (obj.hasOwnProperty(k)){
//recursive call to scan property
scan( obj[k], k, "parent_" + parent );
}
}
} else {
var objtmp = objTmpl.replaceAll('\{key\}', parent).replaceAll('\{val\}', encodeURI(obj)).replaceAll('\{id\}', parent);
var targ = $('#' + id + ' .panel-body');
targ.append(objtmp);
};
};
function buildConfigTree(config){
var count = 0;
for(var i in config){
scan(config[i], i, "rootparent");
}
}
buildConfigTree(config);
