Vladislav_Postnikov
/
HomeWork1


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
							<!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 check=[];
    	let formBody = document.createElement('div')
    	let okButton = document.createElement('button')
    	okButton.innerHTML = 'OK'
    	okButton.disabled=true;

		let cancelButton = document.createElement('button')
    	cancelButton.innerHTML = 'Cancel';

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

    	this.okCallback     = okCallback
    	this.cancelCallback = cancelCallback
    
    	let backupData = {...data};
    	this.data           = data
    	this.validators     = {}
 
		this.createData = function (object) {
    	formBody.append(table)
    	formBody.appendChild(cancelButton);
    	formBody.appendChild(okButton);

    	let inputCreators = {
   			String(key, value, oninput){
        		let input = document.createElement('input')
       			input.type = 'text'
        		input.placeholder = key
        		if (/^[*]+$/.test(value)) {
                	input.type = 'password';
                	input.value = '';
            	} else {
                	input.type = 'text'
                	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 = 'checkbox'
       			input.checked=value
        		input.placeholder = key
        		input.oninput     = () => oninput(input.checked)
       			return input;
    		},
   			Date(key, value, oninput){
        		//используйте datetime-local
        		let input = document.createElement('input')
            	input.type = 'datetime-local'
            	input.placeholder = key
            	let offset = value.getTimezoneOffset()
            	const now = value.getTime()
            	const nowPlusOffset = new Date(now - offset * 60 * 1000)
            	input.value = nowPlusOffset.toISOString().slice(0, -1)
            	input.oninput = () => oninput(input.value)
            	return input
    		},
		}

    	for(let item in data){
    		
    		let tr=document.createElement('tr');
    		let th=document.createElement('th');
    		let p=document.createElement('p');
    		let errorField = document.createElement('td')
        	let errorFieldMessage = 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);
    		errorField.append(errorFieldMessage)
    		formBody.append(table);

    		input.onchange = () => {
            	if(data[item] === '') {
                	input.style.background = '#FFDEAD';
                	check.push[false]
            	} else {
                	input.style.background = '#fff';
                	check.push[true]
            	}
            	if (this.validators[item]) {
                	let validationResult = this.validators[item](data[item], item, data, input)
                if (validationResult === true) {
                    errorFieldMessage.innerText = ''
                    input.style.background = '#fff';
                    check.push[true]
                }
                else if (typeof validationResult === 'string') {
                    errorFieldMessage.innerText = validationResult
                    input.style.background = '#f00';
                    check.push[false]
                }
            }

            if (item[0] === "*") {
            	input.required = true;
            	th.innerHTML = `<strong>${key.slice(1)} <sup style="color: red">*</sup></strong>`;
        	} else {
            	th.innerText = item;
        	}
        	if (data[item] === '') {
            	input.style.background = '#FFDEAD';
            	check.push[false]
        	} else {
            	input.style.background = '#fff';
            	check.push[true]
        	} 
    	}
    }
}

    	this.createData(this.data);  

    	if(typeof okCallback === 'function'){
        	/*formBody.appendChild(okButton);
        	okButton.onclick = (e) => {
            	console.log(this);
            	this.okCallback(e);
        	}*/
        	if (check.includes(false)){
       			okButton.disabled = true;
    		}else{
        		okButton.disabled = false;
        		okButton.onclick = (e) => {
            		okCallback(this.data);
            		console.log(this);
            		this.okCallback(e);
        		}   
    		}
    	}

    	if (typeof cancelCallback === 'function'){
        	/*formBody.appendChild(cancelButton);
        	cancelButton.onclick = cancelCallback;*/
        	cancelButton.onclick = () => {
        		while (table.hasChildNodes()) {
            	table.removeChild(table.firstChild);
        	}
        		this.createData(backupData)
        		cancelCallback();
    		}
    	}

    	el.appendChild(formBody);
	}

	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';

	form.validators.name = (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>