Proper UI for Monitor States Presets Window
Moe
parent
9347f4187e
commit
088176f256
|
|
@ -98,7 +98,7 @@ img{max-width:100%}
|
|||
|
||||
.demo-blog .demo-blog__posts.montage{max-width:100%}
|
||||
|
||||
/* .mdl-layout__drawer{overflow-y: visible!important} */
|
||||
.mdl-layout__drawer{overflow-y: visible!important}
|
||||
.hide-side .mdl-layout__drawer{overflow-y: hidden}
|
||||
.mdl-layout__header-row{padding-left:10!important}
|
||||
.mdl-layout__header-row .nav>li>a{border-radius:50%;}
|
||||
|
|
@ -417,3 +417,13 @@ ul.msg_list li .message {
|
|||
.slider.slider-horizontal {
|
||||
width:100%!important
|
||||
}
|
||||
/* */
|
||||
.epic-text {
|
||||
margin:15px 0 0 0;
|
||||
text-align:center;
|
||||
color:#777;
|
||||
font-family: sans-serif;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3pt;
|
||||
font-size: 8pt;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
.state-monitor-row-fields{
|
||||
border-bottom: 1px solid #444;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.state-monitor-row-fields .list-group{
|
||||
height: 300px
|
||||
}
|
||||
.state-monitor-row .list-group .list-group-item:first-child{
|
||||
border-top:0;
|
||||
}
|
||||
.state-monitor-row .list-group .list-group-item:last-child{
|
||||
border-bottom:0;
|
||||
}
|
||||
|
||||
.state-monitor-row-select-container {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.state-monitor-row-fields-container {
|
||||
border: 1px solid #444;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.state-monitor-row-fields-field {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
|
@ -31,11 +31,10 @@
|
|||
<div class="form-group-group blue">
|
||||
<h4><%- lang['Monitors'] %>
|
||||
<div class="pull-right">
|
||||
<a class="btn btn-default btn-xs add"> <i class="fa fa-plus"></i> </a>
|
||||
<a class="btn btn-success btn-xs add-monitor"> <i class="fa fa-plus"></i> </a>
|
||||
</div>
|
||||
</h4>
|
||||
<div id="monitorStatesMonitors">
|
||||
</div>
|
||||
<div id="monitorStatesMonitors"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
|
|
@ -69,18 +68,175 @@
|
|||
$.monitorStates.e.on('shown.bs.modal', function (e) {
|
||||
if($.monitorStates.selector.val() === '')$.monitorStates.loadPresets()
|
||||
})
|
||||
$.monitorStates.add = function(loaded,doAppend){
|
||||
if(!loaded){
|
||||
json = ''
|
||||
}else{
|
||||
json = JSON.stringify(loaded,null,3)
|
||||
var buildOptions = function(field,possiblities,fieldData){
|
||||
if(!field)console.error('field',field)
|
||||
var fieldElement = ''
|
||||
possiblities.forEach(function(option){
|
||||
if(option.optgroup){
|
||||
fieldElement += '<optgroup label="' + option.name + '">'
|
||||
fieldElement += buildOptions(field,option.optgroup,fieldData)
|
||||
fieldElement += '</optgroup>'
|
||||
}else{
|
||||
var selected = ''
|
||||
if(option.value === fieldData || option.value === field.default){
|
||||
selected = 'selected'
|
||||
}
|
||||
fieldElement += '<option value="' + option.value + '" ' + selected + '>' + option.name + '</option>'
|
||||
}
|
||||
})
|
||||
return fieldElement
|
||||
}
|
||||
var drawBlock = function(monitorSettings,preloadedData){
|
||||
var html = ''
|
||||
var headerTitle = lang[monitorSettings.name]
|
||||
// if(monitorSettings.evaluation && !eval(monitorSettings.evaluation)){
|
||||
// return
|
||||
// }
|
||||
if(monitorSettings.blocks){
|
||||
monitorSettings.blocks.forEach(function(settingsBlock){
|
||||
html += drawBlock(settingsBlock)
|
||||
})
|
||||
}
|
||||
if(monitorSettings.info){
|
||||
monitorSettings.info.forEach(function(field){
|
||||
if(field.isFormGroupGroup === true){
|
||||
html += drawBlock(field)
|
||||
}else{
|
||||
if(field.notForSubAccount === true){
|
||||
var notForSubAccount = '!details.sub'
|
||||
if(!field.evaluation){
|
||||
field.evaluation = notForSubAccount
|
||||
}else{
|
||||
field.evaluation += ' && ' + notForSubAccount
|
||||
}
|
||||
}
|
||||
if(!field.name || field.evaluation && !eval(field.evaluation)){
|
||||
return
|
||||
}
|
||||
var attributes = []
|
||||
var listGroupClass = []
|
||||
var monitorRowFieldClass = []
|
||||
if(preloadedData){
|
||||
var isDetail = false
|
||||
var name = field.name
|
||||
var fieldData
|
||||
if(name.indexOf('detail=') > -1){
|
||||
isDetail = true
|
||||
name = name.replace('detail=','')
|
||||
if(preloadedData.details)fieldData = preloadedData.details[name]
|
||||
}else{
|
||||
fieldData = preloadedData[name]
|
||||
}
|
||||
if(fieldData){
|
||||
listGroupClass.push('active')
|
||||
if(fieldType !== 'select'){
|
||||
attributes.push(`value="${fieldData}"`)
|
||||
}
|
||||
}else{
|
||||
monitorRowFieldClass.push('display:none')
|
||||
}
|
||||
}else{
|
||||
monitorRowFieldClass.push('display:none')
|
||||
}
|
||||
if(field.placeholder || field.default){
|
||||
attributes.push(`placeholder="${field.placeholder || field.default}"`)
|
||||
}else if(field.example){
|
||||
attributes.push(`placeholder="Example : ${field.example}"`)
|
||||
}
|
||||
var possiblities = field.possible || []
|
||||
var fieldType = field.fieldType || 'text'
|
||||
var fieldElement = ''
|
||||
switch(fieldType){
|
||||
case'number':
|
||||
if(field.numberMin){
|
||||
attributes.push(`min="${field.numberMin}"`)
|
||||
}
|
||||
if(field.numberMax){
|
||||
attributes.push(`max="${field.numberMax}"`)
|
||||
}
|
||||
fieldElement = '<div><input type="number" class="form-control" ' + attributes.join(' ') + '></div>'
|
||||
break;
|
||||
case'password':
|
||||
fieldElement = '<div><input type="password" class="form-control" ' + attributes.join(' ') + '></div>'
|
||||
break;
|
||||
case'text':
|
||||
fieldElement = `<div><input class="form-control" ${attributes.join(' ')}></div>`
|
||||
break;
|
||||
case'textarea':
|
||||
fieldElement = '<div><textarea class="form-control" ' + attributes.join(' ') + '></textarea></div>'
|
||||
break;
|
||||
case'select':
|
||||
fieldElement = '<div><select class="form-control" ' + attributes.join(' ') + '>'
|
||||
fieldElement += buildOptions(field,possiblities,fieldData)
|
||||
fieldElement += '</select></div>'
|
||||
break;
|
||||
}
|
||||
if(fieldType === 'ul' || fieldType === 'div' || fieldType === 'btn' || field.name === 'mid'){
|
||||
|
||||
}else{
|
||||
if(headerTitle){
|
||||
html += `<div class="list-group-item ${listGroupClass.join(' ')}" data-name="${field.name}" data-value="${field.value || ""}">
|
||||
<h4>${headerTitle} : ${field.field}</h4>
|
||||
<div><small>${field.description}</small></div>
|
||||
<div class="state-monitor-row-fields-field mt-4" style="${monitorRowFieldClass.join(' ')}">${fieldElement}</div>
|
||||
</div>`
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
var html = '<div class="state-monitor-row"><h4 style="margin-top:7.5px;margin-bottom:7.5px"><small> </small><div class="pull-right"><a class="btn btn-danger btn-xs delete-monitor"><i class="fa fa-trash-o"></i></a></div></h4><textarea class="json form-control" style="width:100%;height:300px">' + json +'</textarea></div>'
|
||||
if(doAppend)$.monitorStates.monitors.append(html)
|
||||
return html
|
||||
}
|
||||
$.monitorStates.e.find('.add').click(function(e){
|
||||
$.monitorStates.add(null,true)
|
||||
$.monitorStates.drawMonitor = function(preloadedData){
|
||||
var MonitorSettings = $.ccio.definitions['Monitor Settings']
|
||||
var html = ''
|
||||
console.log(MonitorSettings)
|
||||
Object.keys(MonitorSettings.blocks).forEach(function(blockKey){
|
||||
var block = MonitorSettings.blocks[blockKey]
|
||||
html += drawBlock(block,preloadedData)
|
||||
})
|
||||
var monitorSelect = `<select class="state-monitor-row-select form-control">`
|
||||
$.each($.ccio.mon,function(n,monitor){
|
||||
monitorSelect += `<option value="${monitor.mid}">${monitor.name} (${monitor.mid})</option>`
|
||||
})
|
||||
monitorSelect += `</select>`
|
||||
var fullHtml = `<div class="form-group state-monitor-row">
|
||||
<div class="input-group state-monitor-row-select-container">
|
||||
${monitorSelect}
|
||||
<div class="input-group-btn">
|
||||
<a class="btn btn-danger delete-monitor">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-group state-monitor-row-fields-container" style="height:300px;overflow: auto">
|
||||
${html}
|
||||
</div>
|
||||
</div>`
|
||||
return fullHtml
|
||||
}
|
||||
$.monitorStates.e.on('click','.add-monitor',function(e){
|
||||
var el = $(this)
|
||||
var html = $.monitorStates.drawMonitor()
|
||||
$.monitorStates.monitors.append(html)
|
||||
})
|
||||
$.monitorStates.e.on('click','.state-monitor-row-fields-container .list-group-item',function(e){
|
||||
var el = $(this)
|
||||
var listGroupParent = el.parents('.list-group')
|
||||
var fieldContainer = el.find('.state-monitor-row-fields-field')
|
||||
var name = el.attr('data-name')
|
||||
var value = el.attr('data-value')
|
||||
if(el.hasClass('active')){
|
||||
el.removeClass('active')
|
||||
fieldContainer.hide()
|
||||
}else{
|
||||
el.addClass('active')
|
||||
fieldContainer.show()
|
||||
}
|
||||
})
|
||||
$.monitorStates.e.on('click','.state-monitor-row-fields-container .form-control',function(e){
|
||||
e.preventDefault()
|
||||
return false
|
||||
})
|
||||
$.monitorStates.e.on('change','.json',function(e){
|
||||
var el = $(this)
|
||||
|
|
@ -127,7 +283,7 @@
|
|||
namespace.val(loaded.name)
|
||||
var html = ''
|
||||
$.each(loaded.details.monitors,function(n,v){
|
||||
html += $.monitorStates.add(v)
|
||||
html += $.monitorStates.drawMonitor(v)
|
||||
})
|
||||
$.monitorStates.monitors.html(html)
|
||||
deleteButton.show()
|
||||
|
|
@ -137,33 +293,63 @@
|
|||
deleteButton.hide()
|
||||
}
|
||||
})
|
||||
$.monitorStates.getFormValuesFromJson = function(){
|
||||
var rows = $.monitorStates.monitors.find('.state-monitor-row')
|
||||
var monitors = []
|
||||
rows.each(function(n,v){
|
||||
var el = $(v)
|
||||
var textarea = el.find('textarea')
|
||||
try{
|
||||
var json = JSON.parse(el.find('.json').val())
|
||||
textarea.css('border-color','green')
|
||||
if(json.mid)monitors.push(json)
|
||||
}catch(err){
|
||||
textarea.css('border-color','red')
|
||||
$.ccio.init('note',{title:lang['Invalid JSON'],text:lang.InvalidJSONText,type:'error'})
|
||||
}
|
||||
})
|
||||
return monitors
|
||||
}
|
||||
$.monitorStates.getFormValues = function(){
|
||||
var rows = $.monitorStates.monitors.find('.state-monitor-row')
|
||||
var monitors = []
|
||||
rows.each(function(n,v){
|
||||
var monitorJson = {
|
||||
details: {}
|
||||
}
|
||||
var el = $(v)
|
||||
var fieldsSelcted = el.find('.list-group-item.active')
|
||||
monitorJson.mid = el.find('.state-monitor-row-select').val()
|
||||
fieldsSelcted.each(function(nn,element){
|
||||
var field = $(element)
|
||||
var name = field.attr('data-name')
|
||||
var value = field.find('.form-control').val()
|
||||
var isDetail = false
|
||||
if(name.indexOf('detail=') > -1){
|
||||
isDetail = true
|
||||
name = name.replace('detail=','')
|
||||
monitorJson.details[name] = value
|
||||
}else{
|
||||
monitorJson[name] = value
|
||||
}
|
||||
})
|
||||
if(Object.keys(monitorJson).length > 2 || Object.keys(monitorJson.details).length > 2){
|
||||
monitors.push(monitorJson)
|
||||
}
|
||||
})
|
||||
return monitors
|
||||
}
|
||||
$.monitorStates.f.submit(function(e){
|
||||
e.preventDefault()
|
||||
var el = $(this)
|
||||
var form = el.serializeObject()
|
||||
var monitors = []
|
||||
var failedToParseAJson = false
|
||||
var rows = $.monitorStates.monitors.find('.state-monitor-row')
|
||||
var monitors = $.monitorStates.getFormValues()
|
||||
if(form.name === ''){
|
||||
return $.ccio.init('note',{title:lang['Invalid Data'],text:lang['Name cannot be empty.'],type:'error'})
|
||||
}
|
||||
if(rows.length === 0){
|
||||
if(monitors.length === 0){
|
||||
return $.ccio.init('note',{title:lang['Invalid Data'],text:lang['Must be atleast one row'],type:'error'})
|
||||
}
|
||||
rows.each(function(n,v){
|
||||
var el = $(v)
|
||||
try{
|
||||
console.log(el.find('.json').val())
|
||||
var json = JSON.parse(el.find('.json').val())
|
||||
if(json.mid)monitors.push(json)
|
||||
}catch(err){
|
||||
console.log(err)
|
||||
failedToParseAJson = true
|
||||
}
|
||||
})
|
||||
if(failedToParseAJson === true){
|
||||
return $.ccio.init('note',{title:lang['Invalid JSON'],text:lang.InvalidJSONText,type:'error'})
|
||||
}
|
||||
var data = {
|
||||
monitors: monitors
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
<link rel="stylesheet" href="<%-window.libURL%>libs/css/dash2.basic.css">
|
||||
<link rel="stylesheet" href="<%-window.libURL%>libs/css/dash2.misc.css">
|
||||
<link rel="stylesheet" href="<%-window.libURL%>libs/css/dash2.monitors.css">
|
||||
<link rel="stylesheet" href="<%-window.libURL%>libs/css/dash2.monitorStates.css">
|
||||
<link rel="stylesheet" href="<%-window.libURL%>libs/css/dash2.forms.css">
|
||||
<link rel="stylesheet" href="<%-window.libURL%>libs/css/dash2.modal.css">
|
||||
<link rel="stylesheet" href="<%-window.libURL%>libs/css/dash2.powervideo.css">
|
||||
|
|
|
|||
Loading…
Reference in New Issue