Vladislav_Postnikov
/
HomeWork1


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
							<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Form</title>
</head>
<body>	

	<div id="formContainer">
		
	</div>

	<script>
	function Form(el, data, okCallback, cancelCallback){
    	let formBody = document.createElement('div')
    	let okButton = document.createElement('button')
    	okButton.innerHTML = 'OK'
		let cancelButton = document.createElement('button')
    	cancelButton.innerHTML = 'Cancel'

    	formBody.innerHTML = '<h1>тут будет форма после перервы</h1>';

    	let inputCreators = {
   			String(key, value, oninput){
        		let input = document.createElement('input')
       			input.type = 'text'
        		input.placeholder = key
        		input.value       = value
        		input.oninput     = () => oninput(input.value)
       			return input;
    		},
    		Boolean(key, value, oninput){
       			//label for с input type='checkbox' внутри
        		let input = document.createElement('input')
       			input.type = 'text'
        		input.placeholder = key
        		input.value       = value
        		input.oninput     = () => oninput(input.value)
       			return input;
    		},
   			Date(key, value, oninput){
        		//используйте datetime-local
        		let input = document.createElement('input')
       			input.type = 'text'
        		input.placeholder = key
        		input.value       = value
        		input.oninput     = () => oninput(input.value)
       			return input;
    		},
		}

    	for(let item in data){
    		const table=document.createElement('table');
    		let tr=document.createElement('tr');
    		let th=document.createElement('th');
    		let p=document.createElement('p');
    		p.innerText=item+":";
    		th.append(p);
    		tr.append(th);
    		let td=document.createElement('td');
    		let input=inputCreators[data[item].constructor.name](item,data[item],value=>{
    				data[item]=value;
    		})
    		td.append(input);
    		tr.append(td);
    		table.append(tr);
    		formBody.append(table);
    	}

    	if(typeof okCallback === 'function'){
        	formBody.appendChild(okButton);
        	okButton.onclick = (e) => {
            	console.log(this);
            	this.okCallback(e);
        	}
    	}

    	if (typeof cancelCallback === 'function'){
        	formBody.appendChild(cancelButton);
        	cancelButton.onclick = cancelCallback;
    	}

    	el.appendChild(formBody);
    	this.okCallback     = okCallback;
    	this.cancelCallback = cancelCallback;
    	this.data           = data;
    	this.validators     = {};
	}

	let form = new Form(formContainer, {
    	name: 'Anakin',
    	surname: 'Skywalker',
    	married: true,
    	birthday: new Date((new Date).getTime() - 86400000 * 30*365)
	}, () => console.log('ok'),() => console.log('cancel') );
	
	form.okCallback = () => console.log('ok2');

	/*form.validators.surname = (value, key, data, input) => value.length > 2 && value[0].toUpperCase() == value[0] && !value.includes(' ') ? true : 'Wrong name';*/


/*if(item=='married'){
    			let check=document.createElement('input');
    			check.type='checkbox';
    			if(data[item]==true){
    				check.checked=true;
    			}else{
    				check.checked=false;
    			}
    			td.append(check);
    		}else{*/
	</script>

</body>
</html>