339 lines
15 KiB
Plaintext
339 lines
15 KiB
Plaintext
<%
|
|
buildOptions = function(field,possiblities){
|
|
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)
|
|
fieldElement += '</optgroup>'
|
|
}else{
|
|
var selected = ''
|
|
if(option.value === field.default){
|
|
selected = 'selected'
|
|
}
|
|
fieldElement += '<option value="' + option.value + '" ' + selected + '>' + option.name + '</option>'
|
|
}
|
|
})
|
|
return fieldElement
|
|
}
|
|
drawBlock = function(monitorSettings){
|
|
if(monitorSettings.evaluation && !eval(monitorSettings.evaluation)){
|
|
return
|
|
}
|
|
var attributes = []
|
|
var styles = []
|
|
var sectionClass = []
|
|
var headerTitle = monitorSettings.headerTitle || lang[monitorSettings.name] || monitorSettings.name
|
|
if(monitorSettings.hidden === true){
|
|
styles.push('display:none')
|
|
}
|
|
if(monitorSettings.style){
|
|
styles.push(monitorSettings.style)
|
|
}
|
|
if(monitorSettings.isSection === true){
|
|
attributes.push('section')
|
|
}
|
|
if(monitorSettings.attribute){
|
|
attributes.push(monitorSettings.attribute)
|
|
}
|
|
if(!monitorSettings.noId && !monitorSettings.id && monitorSettings.name){
|
|
var userSettingsId = monitorSettings.name.replace(/[^a-zA-Z ]/g, '').replace(/[^a-zA-Z ]/g, '').replace(/ /g, '')
|
|
monitorSettings.id = userSettingsId
|
|
}
|
|
if(monitorSettings.id)attributes.push(`id="${monitorSettings.id}"`);
|
|
if(monitorSettings.color){
|
|
sectionClass.push(monitorSettings.color)
|
|
}
|
|
if(monitorSettings['section-class']){
|
|
sectionClass.push(monitorSettings['section-class'])
|
|
}
|
|
if(monitorSettings.isAdvanced){ %>
|
|
<div class="h_us_input h_us_advanced" style="display:none">
|
|
<% }
|
|
if(monitorSettings['section-pre-pre-class']){ %>
|
|
<div class="<%- monitorSettings['section-pre-pre-class'] %>">
|
|
<% }
|
|
if(monitorSettings['section-pre-class']){ %>
|
|
<div class="<%- monitorSettings['section-pre-class'] %>">
|
|
<% }
|
|
%>
|
|
<<%- monitorSettings.isForm ? 'form' : 'div' %> <%- attributes.join(' ') %> style="<%- styles.join(';') %>" class="<%- !monitorSettings.noDefaultSectionClasses ? `card form-group-group p-3 ${define.Theme.isDark ? 'bg-dark' : 'bg-light'} mb-3 shadow` : '' %> <%- sectionClass.join(' ') %>">
|
|
<% if(!monitorSettings['noHeader']){ %>
|
|
<h4 class="form-section-header <%- monitorSettings.headerButtons || monitorSettings.headerTitle && ( monitorSettings.headerTitle.indexOf('<a ') > -1 || monitorSettings.headerTitle.indexOf('<button ') > -1 ) ? 'no-toggle-header' : '' %> cursor-pointer mb-3 pb-3 <%- define.Theme.isDark ? 'text-white' : '' %> border-bottom-dotted border-color-<%- monitorSettings.color || 'dark' %> <%- monitorSettings.headerClass %>"><%- headerTitle %>
|
|
<% if(monitorSettings.headerButtons){ %>
|
|
<div class="pull-right">
|
|
<% monitorSettings.headerButtons.forEach(function(button){ %>
|
|
<a class="btn btn-success btn-xs <%- button.class %>">
|
|
<% if(button.icon){ %><i class="fa fa-<%- button.icon %>"></i><% } %>
|
|
<% if(button.text){ %><%- button.text %><% } %>
|
|
</a>
|
|
<% }) %>
|
|
</div>
|
|
<% } %>
|
|
</h4>
|
|
<% } %>
|
|
<div class="box-wrapper <%- monitorSettings['box-wrapper-class'] || '' %>" style="<%- monitorSettings['box-wrapper-style'] || '' %>">
|
|
<% if(monitorSettings['input-mapping']){ %>
|
|
<div class="form-group-group btn-default card shadow mb-2" style="display:none" input-mapping="<%- monitorSettings['input-mapping'] %>">
|
|
<h5 class="card-body d-flex flex-row m-0">
|
|
<div class="flex-grow-1">
|
|
<%-lang['Input Feeds Selected']%>
|
|
</div>
|
|
<div>
|
|
<a class="btn btn-success btn-sm add_map_row"><i class="fa fa-plus-square-o"></i></a>
|
|
</div>
|
|
</h5>
|
|
<div class="card-footer pb-0 choices"></div>
|
|
</div>
|
|
<% } %>
|
|
<% if(monitorSettings.blockquote){ %>
|
|
<blockquote class="<%- monitorSettings.blockquoteClass || '' %>">
|
|
<%- monitorSettings.blockquote %>
|
|
</blockquote>
|
|
<% } %>
|
|
<% if(monitorSettings.blocks){
|
|
monitorSettings.blocks.forEach(function(settingsBlock){
|
|
drawBlock(settingsBlock)
|
|
})
|
|
}
|
|
if(monitorSettings.info){
|
|
function drawInfoItem(field){
|
|
let evaluation = `${field.evaluation || ''}`
|
|
if(field.ejs){
|
|
try{ %>
|
|
<%- include(`${__dirname}/${field.ejs}.ejs`) %>
|
|
<% }catch(err){
|
|
console.log(err)
|
|
}
|
|
}else if(field.isFormGroupGroup === true){
|
|
drawBlock(field)
|
|
}else{
|
|
if(field.notForSubAccount === true){
|
|
var notForSubAccount = '!details.sub'
|
|
if(!field.evaluation){
|
|
evaluation = notForSubAccount
|
|
}else{
|
|
evaluation += ' && ' + notForSubAccount
|
|
}
|
|
}
|
|
if(evaluation && !eval(evaluation)){
|
|
return
|
|
}
|
|
var hidden = ''
|
|
if(field.hidden === true){
|
|
hidden = 'style="display:none"'
|
|
}
|
|
var fieldClass = []
|
|
var attributes = []
|
|
if(field.name && field.name.indexOf('=') > -1){
|
|
attributes.push(field.name)
|
|
}else if(field.name){
|
|
attributes.push("name=" + field.name)
|
|
}
|
|
if(field.placeholder || field.default){
|
|
attributes.push(`placeholder="${field.placeholder || field.default}"`)
|
|
}else if(field.example){
|
|
attributes.push(`placeholder="Example : ${field.example}"`)
|
|
}
|
|
if(field.default){
|
|
attributes.push(`data-default="${field.default}"`)
|
|
}
|
|
if(field.attribute){
|
|
attributes.push(field.attribute)
|
|
}
|
|
if(field.selector){
|
|
attributes.push(`selector="${field.selector}"`)
|
|
}
|
|
if(field.styles || field.style){
|
|
attributes.push(`style="${field.styles || field.style}"`)
|
|
}
|
|
if(field.id){
|
|
attributes.push(`id="${field.id}"`)
|
|
}
|
|
if(field.class){
|
|
fieldClass.push(`${field.class}`)
|
|
}
|
|
var possiblities = field.possible || []
|
|
var fieldType = field.fieldType || 'text'
|
|
var fieldElement = ''
|
|
var preFill = field.preFill || ''
|
|
switch(fieldType){
|
|
case'btn-group':
|
|
let fieldBtnContent = ``
|
|
field.btns.forEach((btn) => {
|
|
let btnClass = []
|
|
let btnAttributes = []
|
|
const btnBaseElement = btn.forForm || field.forForm ? 'button' : 'a'
|
|
if(btn.class){
|
|
btnClass.push(`${btn.class}`)
|
|
}
|
|
if(btn.attribute){
|
|
btnAttributes.push(btn.attribute)
|
|
}
|
|
fieldBtnContent += `<${btnBaseElement} class="btn ${btnClass.join(' ')}" ${btnAttributes.join(' ')}>${btn.icon ? `<i class="fa fa-${btn.icon}"></i> ` : ''}${btn.btnContent}</${btnBaseElement}>`
|
|
})
|
|
fieldElement = `<div class="btn-group ${field.normalWidth ? '' : 'btn-group-justified'} ${fieldClass.join(' ')}" ${attributes.join(' ')}>${fieldBtnContent}</div>`
|
|
break;
|
|
case'btn':
|
|
baseElement = field.forForm ? 'button' : 'a'
|
|
fieldElement = `<${baseElement} class="btn btn-block ${fieldClass.join(' ')}" ${attributes.join(' ')}>${field.btnContent}</${baseElement}>`
|
|
break;
|
|
case'ul':
|
|
fieldElement = `<ul ${attributes.join(' ')} class="${fieldClass.join(' ')}" ></ul>`
|
|
break;
|
|
case'div':
|
|
fieldElement = `<div ${attributes.join(' ')} class="${fieldClass.join(' ')}" >${field.divContent || ''}`
|
|
break;
|
|
case'script':
|
|
fieldElement = `<script ${attributes.join(' ')} ${field.src ? `src="${window.libURL}/${field.src}"` : ''} >${field.scriptContent || ''}</script>`
|
|
break;
|
|
case'html':
|
|
fieldElement = `${field.html}`
|
|
break;
|
|
case'img':
|
|
fieldElement = `<img ${attributes.join(' ')} class="${fieldClass.join(' ')}" src="${window.libURL}/${field.src}">`
|
|
break;
|
|
case'iconCard':
|
|
fieldElement = `<div ${attributes.join(' ')} class="card mb-3 border-0 ${fieldClass.join(' ')}">
|
|
<div class="card-body">
|
|
<h6 class="card-title text-white">${field.label}</h6>
|
|
<div class="row">
|
|
<h3 class="col-md-6 text-white">${field.text}</h3>
|
|
<h3 class="col-md-6 text-right text-muted" style="opacity:0.8"><i class="fa fa-2x fa-${field.icon}"></i></h3>
|
|
</div>
|
|
</div>
|
|
</div>`
|
|
break;
|
|
case'indicatorBar':
|
|
const numberOfBars = field.bars || 1
|
|
fieldElement = `<div ${attributes.join(' ')} id="indicator-${field.name}" class="mb-2 ${fieldClass.join(' ')}">
|
|
<div class="d-flex flex-row text-white mb-1">
|
|
<div class="pr-2">
|
|
<i class="fa fa-${field.icon}"></i>
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
<small>${field.label}</small>
|
|
</div>
|
|
<div>
|
|
<small class="indicator-percent ${field.indicatorPercentClass || ''}"><i class="fa fa-spinner fa-pulse"></i></small>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="progress">`
|
|
for (let i = 0; i < numberOfBars; i++) {
|
|
fieldElement += `<div title="${field[`title${i}`] || ''}" class="progress-bar progress-bar-${field[`color${i}`] || field.color || 'warning'}" role="progressbar" style="width: ${field[`percent${i}`] || field.percent || '0'}%;"></div>`
|
|
}
|
|
fieldElement += `</div>
|
|
</div>
|
|
</div>`
|
|
break;
|
|
case'form':
|
|
fieldElement = `<form ${attributes.join(' ')} class="${fieldClass.join(' ')}" ></form>`
|
|
break;
|
|
case'table':
|
|
fieldElement = `<table ${hidden} ${attributes.join(' ')} class="${fieldClass.join(' ')}"><tbody></tbody></table>`
|
|
break;
|
|
case'number':
|
|
if(field.numberMin){
|
|
attributes.push(`min="${field.numberMin}"`)
|
|
}
|
|
if(field.numberMax){
|
|
attributes.push(`max="${field.numberMax}"`)
|
|
}
|
|
fieldElement = `<input type="number" class="form-control ${fieldClass.join(' ')}" ` + attributes.join(' ') + '>'
|
|
break;
|
|
case'password':
|
|
fieldElement = `<input type="password" class="form-control ${fieldClass.join(' ')}" ` + attributes.join(' ') + '>'
|
|
break;
|
|
case'text':
|
|
fieldElement = `<input class="form-control ${fieldClass.join(' ')}" ${attributes.join(' ')} value="${preFill}">`
|
|
break;
|
|
case'range':
|
|
fieldElement = `<input type="range" class="form-range ${fieldClass.join(' ')}" ${attributes.join(' ')} min="${field.min}" max="${field.max}">`
|
|
break;
|
|
case'textarea':
|
|
fieldElement = `<textarea class="form-control ${fieldClass.join(' ')}" ` + attributes.join(' ') + '></textarea>'
|
|
break;
|
|
case'select':
|
|
fieldElement = `<select class="form-control ${fieldClass.join(' ')}" ${attributes.join(' ')}>`
|
|
fieldElement += buildOptions(field,possiblities)
|
|
fieldElement += '</select>'
|
|
break;
|
|
}
|
|
if(field['form-group-class-pre-pre-layer']){ %>
|
|
<div class="<%- field['form-group-class-pre-pre-layer'] %>">
|
|
<% };
|
|
if(field['form-group-class-pre-layer']){ %>
|
|
<div class="<%- field['form-group-class-pre-layer'] %>">
|
|
<% };
|
|
if(field['isAdvanced']){ %>
|
|
<div class="h_us_input h_us_advanced" style="display:none">
|
|
<% };
|
|
if(
|
|
fieldType === 'ul' ||
|
|
fieldType === 'div' ||
|
|
fieldType === 'script' ||
|
|
fieldType === 'img' ||
|
|
fieldType === 'html' ||
|
|
fieldType === 'iconCard' ||
|
|
fieldType === 'indicatorBar' ||
|
|
fieldType === 'cardBlock' ||
|
|
fieldType === 'btn' ||
|
|
fieldType === 'btn-group' ||
|
|
fieldType === 'table' ||
|
|
fieldType === 'form'
|
|
){ %>
|
|
<%- fieldElement %>
|
|
<%
|
|
if(fieldType === 'div'){
|
|
if(field.info){
|
|
field.info.forEach(drawInfoItem)
|
|
} %>
|
|
<%- `</div>` %>
|
|
<% }
|
|
%>
|
|
<% }else{ %>
|
|
<div <%- hidden %> <%- field.uiVisibilityConditions ? `visibility-conditions="${field.uiVisibilityConditions}"` : `` %> class="form-group <%- field['form-group-class'] || '' %>" <%- field['form-group-attribute'] || '' %>>
|
|
<div>
|
|
<label><%- field.field %></label>
|
|
</div>
|
|
<div class="mb-2">
|
|
<span>
|
|
<% if(field.description){ %>
|
|
<small><%- field.description %></small>
|
|
<% } %>
|
|
</span>
|
|
</div>
|
|
<div><%- fieldElement %></div>
|
|
</div>
|
|
<% }
|
|
if(field['isAdvanced']){ %>
|
|
</div>
|
|
<% };
|
|
if(field['form-group-class-pre-layer']){ %>
|
|
</div>
|
|
<% };
|
|
if(field['form-group-class-pre-pre-layer']){ %>
|
|
</div>
|
|
<% };
|
|
};
|
|
}
|
|
monitorSettings.info.forEach(drawInfoItem)
|
|
}
|
|
%>
|
|
</div>
|
|
</<%- monitorSettings.isForm ? 'form' : 'div' %>>
|
|
<%
|
|
if(monitorSettings['section-pre-class']){ %>
|
|
</div>
|
|
<% }
|
|
if(monitorSettings['section-pre-pre-class']){ %>
|
|
</div>
|
|
<% }
|
|
if(monitorSettings.isAdvanced){ %>
|
|
</div>
|
|
<% }
|
|
}
|
|
%>
|