Shinobi/web/libs/js/dash2.monitorStates.js

320 lines
14 KiB
JavaScript

$(document).ready(function(){
$.monitorStates = {
e: $('#monitorStates'),
selector: $('#monitorStatesSelector'),
monitors: $('#monitorStatesMonitors'),
loaded: {}
}
$.monitorStates.f = $.monitorStates.e.find('form')
$.monitorStates.loadPresets = function(callback){
$.get($.ccio.init('location',$user) + $user.auth_token + '/monitorStates/' + $user.ke,function(d){
var html = ''
$.each(d.presets,function(n,v){
$.monitorStates.loaded[v.name] = v
html += '<option value="' + v.name + '">' + v.name + '</option>'
})
$.monitorStates.selector.find('optgroup').html(html)
if(callback)callback()
})
}
$.monitorStates.e.on('shown.bs.modal', function (e) {
if($.monitorStates.selector.val() === '')$.monitorStates.loadPresets()
})
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>`
}
}
}
})
}
return html
}
$.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">
&nbsp;<i class="fa fa-times"></i>&nbsp;
</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)
var val = el.val()
try{
el.css('border-color','green')
var parsed = JSON.parse(val)
el.val(JSON.stringify(parsed,null,3))
}catch(err){
el.css('border-color','red')
return $.ccio.init('note',{title:lang['Invalid JSON'],text:lang.InvalidJSONText,type:'error'})
}
})
$.monitorStates.e.on('click','.delete',function(e){
$.confirm.e.modal('show');
$.confirm.title.text(lang['Delete Monitor States Preset']);
$.confirm.body.html(lang.deleteMonitorStateText1);
$.confirm.click({title:'Delete',class:'btn-danger'},function(){
var form = $.monitorStates.f.serializeObject()
$.post($.ccio.init('location',$user) + $user.auth_token + '/monitorStates/' + $user.ke + '/' + form.name + '/delete',function(d){
$.ccio.log(d)
if(d.ok === true){
$.monitorStates.loadPresets()
$.ccio.init('note',{title:lang.Success,text:d.msg,type:'success'})
}
})
})
})
$.monitorStates.e.on('click','.delete-monitor',function(e){
var el = $(this).parents('.state-monitor-row')
$.confirm.e.modal('show');
$.confirm.title.text(lang['Delete Monitor State']);
$.confirm.body.html(lang.deleteMonitorStateText2)
$.confirm.click({title:'Delete',class:'btn-danger'},function(){
el.remove()
})
})
$.monitorStates.selector.change(function(e){
var selected = $(this).val()
var loaded = $.monitorStates.loaded[selected]
var namespace = $.monitorStates.e.find('[name="name"]')
var deleteButton = $.monitorStates.e.find('.delete')
if(loaded){
namespace.val(loaded.name)
var html = ''
$.each(loaded.details.monitors,function(n,v){
html += $.monitorStates.drawMonitor(v)
})
$.monitorStates.monitors.html(html)
deleteButton.show()
}else{
namespace.val('')
$.monitorStates.monitors.empty()
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 = $.monitorStates.getFormValues()
if(form.name === ''){
return $.ccio.init('note',{title:lang['Invalid Data'],text:lang['Name cannot be empty.'],type:'error'})
}
if(monitors.length === 0){
return $.ccio.init('note',{title:lang['Invalid Data'],text:lang['Must be atleast one row'],type:'error'})
}
var data = {
monitors: monitors
}
$.post($.ccio.init('location',$user) + $user.auth_token + '/monitorStates/' + $user.ke + '/' + form.name + '/insert',{data:data},function(d){
$.ccio.log(d)
if(d.ok === true){
$.monitorStates.loadPresets(function(){
$.monitorStates.selector.val(form.name)
})
$.ccio.init('note',{title:lang.Success,text:d.msg,type:'success'})
}
})
return false;
})
})