|
|
@@ -0,0 +1,173 @@
|
|
|
+function Form(el, data, okCallback, cancelCallback) {
|
|
|
+ let table = document.createElement('table');
|
|
|
+ table.className = 'table';
|
|
|
+ for (let key in data) {
|
|
|
+ let tr = document.createElement('tr');
|
|
|
+ tr.className = 'tr';
|
|
|
+ let th = document.createElement('th');
|
|
|
+ th.className = 'th';
|
|
|
+ let td = document.createElement('td');
|
|
|
+ td.className = 'td';
|
|
|
+
|
|
|
+ th.innerHTML = key;
|
|
|
+
|
|
|
+ if (key === 'name' || key === 'password') {
|
|
|
+ let fieldForStar = document.createElement('span');
|
|
|
+ fieldForStar.textContent = '*';
|
|
|
+ fieldForStar.style.color = 'red';
|
|
|
+ th.appendChild(fieldForStar);
|
|
|
+ }
|
|
|
+
|
|
|
+ tr.appendChild(th);
|
|
|
+
|
|
|
+ let type = data[key].constructor.name;
|
|
|
+
|
|
|
+ let inputCreators = {
|
|
|
+ String(key, value, oninput) {
|
|
|
+ let input = document.createElement('input');
|
|
|
+ let label = document.createElement('label');
|
|
|
+ let errorField = document.createElement('div');
|
|
|
+ errorField.className = 'errorField';
|
|
|
+ label.htmlFor = 'input';
|
|
|
+ label.textContent = `Enter ${key}`;
|
|
|
+ if (`${key}` === 'password') {
|
|
|
+ input.type = 'password';
|
|
|
+ } else {
|
|
|
+ input.type = 'text';
|
|
|
+ }
|
|
|
+ input.placeholder = key;
|
|
|
+ input.value = value;
|
|
|
+ input.oninput = (event) => oninput(event.target.value, input, errorField);
|
|
|
+ td.appendChild(label);
|
|
|
+ label.appendChild(input);
|
|
|
+ label.appendChild(errorField);
|
|
|
+ return input;
|
|
|
+ },
|
|
|
+ Boolean(key, checked, onclick) {
|
|
|
+ let input = document.createElement('input');
|
|
|
+ let label = document.createElement('label');
|
|
|
+ label.htmlFor = 'input';
|
|
|
+ label.textContent = 'Are you married?';
|
|
|
+ input.type = 'checkbox';
|
|
|
+ input.checked = checked;
|
|
|
+ input.value = type;
|
|
|
+ input.onclick = (event) => onclick(event.target.checked);
|
|
|
+ label.appendChild(input);
|
|
|
+ td.appendChild(label);
|
|
|
+ return input;
|
|
|
+ },
|
|
|
+ Date(key, value, oninput) {
|
|
|
+ let input = document.createElement('input');
|
|
|
+ let label = document.createElement('label');
|
|
|
+ label.htmlFor = 'input';
|
|
|
+ label.textContent = 'Select your birth date';
|
|
|
+ input.type = 'datetime-local';
|
|
|
+ input.value = (new Date()).toISOString().slice(0, -1);
|
|
|
+ input.oninput = (event) => oninput(event.target.value);
|
|
|
+ label.appendChild(input);
|
|
|
+ td.appendChild(label);
|
|
|
+ return input;
|
|
|
+ },
|
|
|
+ };
|
|
|
+
|
|
|
+ const creatorFunc = inputCreators[type];
|
|
|
+
|
|
|
+ if (type === 'String') {
|
|
|
+ creatorFunc(key, data[key], (value, input, errorField) => {
|
|
|
+ const validationResult = this.validators[key](value);
|
|
|
+ this.data[key] = value;
|
|
|
+ // console.log(this.data);
|
|
|
+ if (validationResult !== true) {
|
|
|
+ errorField.textContent = validationResult;
|
|
|
+ input.style.borderColor = 'red';
|
|
|
+ } else {
|
|
|
+ errorField.textContent = '';
|
|
|
+ input.style.borderColor = 'black';
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else if (type !== 'String') {
|
|
|
+ creatorFunc(key, data[key], (value) => console.log(value));
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ table.appendChild(tr);
|
|
|
+ tr.appendChild(td);
|
|
|
+ }
|
|
|
+
|
|
|
+ formContainer.appendChild(table);
|
|
|
+ let formBody = document.createElement('div');
|
|
|
+ let okButton = document.createElement('button');
|
|
|
+ okButton.innerHTML = 'OK';
|
|
|
+
|
|
|
+ let cancelButton = document.createElement('button');
|
|
|
+ cancelButton.innerHTML = 'Cancel';
|
|
|
+
|
|
|
+ if (typeof okCallback === 'function') {
|
|
|
+ formBody.appendChild(okButton);
|
|
|
+ okButton.onclick = (e) => {
|
|
|
+ let result = false;
|
|
|
+ for (let key in this.validators) {
|
|
|
+ let func = this.validators[key];
|
|
|
+ let value = this.data[key];
|
|
|
+ result = func(value) === true;
|
|
|
+ }
|
|
|
+ console.log(result);
|
|
|
+ if (result) {
|
|
|
+ this.okCallback(e);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ if (typeof cancelCallback === 'function') {
|
|
|
+ formBody.appendChild(cancelButton);
|
|
|
+ cancelButton.onclick = (e) => {
|
|
|
+ console.log(data);
|
|
|
+ cancelCallback(e);
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ el.appendChild(formBody);
|
|
|
+
|
|
|
+ this.okCallback = okCallback;
|
|
|
+ this.cancelCallback = cancelCallback;
|
|
|
+ this.data = {...data};
|
|
|
+ this.validators = {};
|
|
|
+}
|
|
|
+
|
|
|
+let formContainer = document.getElementById('formContainer');
|
|
|
+
|
|
|
+let form = new Form(formContainer, {
|
|
|
+ name: 'Anakin',
|
|
|
+ surname: 'Skywalker',
|
|
|
+ married: true,
|
|
|
+ birthday: new Date((new Date).getTime() - 86400000 * 30 * 365),
|
|
|
+ password: '',
|
|
|
+}, () => console.log('ok'), () => console.log('cancel'));
|
|
|
+form.okCallback = () => console.log('ok2');
|
|
|
+
|
|
|
+form.validators.name = (value) => {
|
|
|
+ const result = value.length > 2
|
|
|
+ && value[0].toUpperCase() === value[0]
|
|
|
+ && !value.includes(' ');
|
|
|
+
|
|
|
+ return result || 'Wrong name';
|
|
|
+};
|
|
|
+
|
|
|
+form.validators.surname = (value) => {
|
|
|
+ const result = value.length > 2
|
|
|
+ && value[0].toUpperCase() === value[0]
|
|
|
+ && !value.includes(' ');
|
|
|
+
|
|
|
+ return result || 'Wrong surname';
|
|
|
+};
|
|
|
+
|
|
|
+form.validators.password = (value) => {
|
|
|
+ const result = value.length > 8
|
|
|
+ && !value.includes(' ');
|
|
|
+
|
|
|
+ return result || 'Wrong password';
|
|
|
+};
|
|
|
+
|
|
|
+
|
