Skip to content

Instantly share code, notes, and snippets.

@SergProduction

SergProduction/equalUserInterface.html

Created March 27, 2017 01:06
Show Gist options
  • Save SergProduction/d95fc0619937e4d017dcdd74dbb1a7f5 to your computer and use it in GitHub Desktop.
Save SergProduction/d95fc0619937e4d017dcdd74dbb1a7f5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
equalUserInterface.html
<html>
<head>
<meta charset="utf8">
<style type="text/css">
input{
width: 50px
}
</style>
</head>
<body>
<div id="tableSource"></div>
<button id="addEqualIf">если</button>
<button id="addEqualThen">тогда</button>
<button id="clearEqual">очистить</button>
<button id="saveEqual">сохранить конфигурацию</button>
<div id="divEqual"></div>
</div>
</body>
</html>
Raw
index.js
let tableSource = document.getElementById('tableSource')
let addEqualIf = document.getElementById('addEqualIf')
let addEqualThen = document.getElementById('addEqualThen')
let clearEqual = document.getElementById('clearEqual')
let saveEqual = document.getElementById('saveEqual')
let divEqual = document.getElementById('divEqual')
const base1 = [
['id','name','lvl'],
['1584 sdf','serg','80'],
['1756 gh','alex','15'],
['1756 we','ivan','18'],
];
const base2 = [
['id','prof','work'],
['1584 df','develop','y'],
['1756 ty','manager','y'],
['1756 yu','desinger','n'],
]
const allBase = ['base1','base2']
createTable(base1, tableSource)
createTable(base2, tableSource)
addEqualIf.addEventListener('click', ()=>{
addFromsIf(divEqual, allBase).add()
})
addEqualThen.addEventListener('click', ()=>{
addFromsThen(divEqual, allBase).add()
})
Raw
lib.js
function addFromsIf(where, base){
let count = 0;
let description = document.createElement('p')
description.textContent = 'если';
(where || document.body).appendChild(description)
let watchAdd = function(e){
let forms = description || document.body
forms = forms.getElementsByTagName('form')
let lastForm = forms[forms.length - 1]
if( lastForm.elements.val1.value &&
lastForm.elements.val2.value &&
e.target.value ){
add()
}
};
let watchRemove = function(e){
let forms = description || document.body
forms = forms.getElementsByTagName('form')
let del = false;
let arrDel = []
for(let form of forms){
if(del)
arrDel.push(form)
if( !e.target.value ){
if( form.elements.boolean === e.target ){
del = true
form.elements.boolean.addEventListener('change', watchAdd)
}
}
}
arrDel.map(el => {
el.parentElement.removeChild(el)
return null
})
};
function addOrDelete(){
let forms = description || document.body
forms = forms.getElementsByTagName('form')
for(let form of forms){
form.elements.boolean.removeEventListener('change', watchAdd)
form.elements.boolean.addEventListener('change', watchRemove)
}
let lastForm = forms[forms.length - 1]
lastForm.elements.boolean.addEventListener('change', watchAdd)
}
function optionBase(name, ...ne){
let optStr = `<select name="base${name}">`;
base.forEach( el => {
if( ne.includes(el) ) return false
optStr += `<option value="${el}" > ${el} </option>\n`
})
optStr += '</select>'
return optStr
}
function add(name, where){
count+=1;
let newName = name || count
let form = document.createElement('form')
form.name = 'if'
let newForms = `
${optionBase(1)}
<input type="text" name="val1" placeholder="имя/столбец">
<input type="text" name="val1split" placeholder="разделитель">
<select name="equal">
<option value=">" > > </option>
<option value="<" > < </option>
<option value="=="> = </option>
</select>
${optionBase(2, 'folder', 'file_name')}
<input type="text" name="val2" placeholder="имя/столбец">
<input type="text" name="val2split" placeholder="разделитель">
<select name="boolean">
<option value="" ></option>
<option value="&&" > && </option>
<option value="||" > || </option>
</select>`;
form.innerHTML = newForms
where = description || where || document.body
where.appendChild(form)
addOrDelete()
}
function remove(where){
where = description || where || document.body
}
return {add}
}
function addFromsThen(where, base){
let count = '_';
let countNum = 0;
let description = document.createElement('p')
description.textContent = 'тогда';
(where || document.body).appendChild(description)
let watchAdd = function(e){
let forms = description.getElementsByTagName('form')
let lastForm = forms[forms.length - 1]
if( lastForm.elements.val2.value &&
e.target.value ){
add()
}
};
let watchRemove = function(e){
let forms = description.getElementsByTagName('form')
let del = false;
let arrDel = []
for(let form of forms){
if(del)
arrDel.push(form)
if( !e.target.value ){
if( form.elements.boolean === e.target ){
del = true
form.elements.boolean.addEventListener('change', watchAdd)
}
}
}
arrDel.map(el => {
el.parentElement.removeChild(el)
return null
})
};
function addOrDelete(){
let forms = description.getElementsByTagName('form')
for(let form of forms){
form.elements.boolean.removeEventListener('change', watchAdd)
form.elements.boolean.addEventListener('change', watchRemove)
}
let lastForm = forms[forms.length - 1]
lastForm.elements.boolean.addEventListener('change', watchAdd)
}
function optionBase(name, ...ne){
let optStr = `<select name="base${name}">`;
base.forEach( el => {
optStr += `<option value="${el}" > ${el} </option>\n`
})
optStr += '</select>'
return optStr
}
function add(name, where){
countNum+=1;
let newName = name || count + countNum
let form = document.createElement('form')
form.name = 'then'
let newForms = `
<select name="what">
<option value="variable" > сохранить в переменную </option>
<option value="renameFolder" > положить в папку </option>
<option value="renameFile"> переименовать файл </option>
</select>
<input type="text" name="val1" placeholder="имя">
<span>значение из</span>
${optionBase(1)}
<input type="text" name="val2" placeholder="имя/столбец">
<input type="text" name="val2split" placeholder="разделитель">
<select name="boolean">
<option value="" ></option>
<option value="&&" > && </option>
<option value="||" > || </option>
</select>`;
form.innerHTML = newForms
where = description || where || document.body
where.appendChild(form)
addOrDelete()
}
function remove(where){
where = description || where || document.body
}
return {add}
}
//addFroms(divEqual).add()
function createTable(arr, where){
let table = document.createElement('table')
table.border = '1';
table.style.borderSpacing = '0';
table.style.display = 'inline-block';
table.style.marginLeft = '20px';
let tableOuter = '';
for(let i=0; i<arr.length; i++){
tableOuter += '<tr>';
for(let z=0; z<arr[i].length; z++){
tableOuter += '<td>' + arr[i][z] + '</td>';
}
tableOuter += '</tr>';
}
table.innerHTML = tableOuter
where.appendChild(table)
}
function getFunctionBoolean(where0){
let forms = where0 || document.body
forms = forms.getElementsByTagName('form')
let result = 'return ';
for(let form of forms){
result += 'a[' + form.elements.val1.value + ']'
result += ' ' + form.elements.equal.value + ' '
result += 'b[' + form.elements.val2.value + ']'
result += ' ' + form.elements.boolean.value + ' '
//result += '\n';
}
return result
}
@SergProduction
Copy link
Author

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment