OOP

HW10 Closures and scopes/form OOP/script.js

@@ -7,7 +7,6 @@ function dataToDataTimeLocal(date) {
     return new Date(localTime).toISOString().slice(0, -1);
 }
 
-/***********************************************/
 
 function Form(el, data, okCallback, cancelCallback) {
     let formBody = document.createElement('div')
@@ -15,25 +14,55 @@ function Form(el, data, okCallback, cancelCallback) {
     okButton.innerHTML = 'OK'
 
     let cancelButton = document.createElement('button')
-    cancelButton.innerHTML = 'Cancel'
-
+    cancelButton.innerHTML = 'Cancel';
+    
     let inputCreators = {
         String(key, value, oninput) {
             let input = document.createElement('input')
-            input.placeholder = key
+            if (key[0] == '*'){
+                let reqSpan = document.createElement('span');
+                reqSpan.style.color = 'red';
+                reqSpan.style.display ='none';
+                reqSpan.innerText = ` ${key[0]}    `;
+                formBody.append(reqSpan);
+                key = key.slice(1);
+                input.setAttribute("required", "");  
+            }
+            input.placeholder = key; 
             input.value = value
             input.oninput = () => {
+              /* 
+                if(this.validators[key] && this.validators[key] == [key]){
+                   value = this.validators[key](value, key, data, input) ? input.value: value;
+                } else if (this.validators) {
+                    errorSpan.style.backgroundColor = 'red';
+                    errorSpan.innerText =  `Error ${newValue}`;
+                } */
                 if(value == '*****'){
                     input.type = 'password'
                 } else input.type = 'text';
                 if (!value.trim()){
                     return value;
-                }                oninput(input.value)
+                } 
+                if (input.value.length == 0){
+                    input.style.border = '1px solid red';
+                    okButton.setAttribute('disabled','disabled') 
+                } else if (value.trim() !== '') {
+                   /*  if (this.validators[key](value, key, data, input)){
+                        console.log('test')
+                    } */
+                    console.log('ok')
+                    input.style.border = '1px solid black'
+                    okButton.removeAttribute('disabled','') 
+                }
+                oninput(input.value)                 
+
             }
             return input
         },
         Boolean(key, value, oninput) {
             let input = document.createElement('input')
+            if (key[0] == '*')input.setAttribute("required", "");  
             input.type = 'checkbox'
             input.placeholder = key
             input.checked = value
@@ -41,24 +70,24 @@ function Form(el, data, okCallback, cancelCallback) {
             return input
         },
         Date(key, value, oninput) {
+            console.log(this.validators);
             let input = document.createElement('input')
+            console.log(key[0])
+            if (key[0] == '*')input.setAttribute("required", "");  
             input.type = 'datetime-local'
             input.placeholder = key
             input.value = dataToDataTimeLocal(value)
             input.onchange = () => {
-             
-             if (typeof this.validators === 'function') {
-                if(this.validators[key](value, key, data, input) === true){ 
-                    //validator use oninput or onchnge
-                    data[key] = newValue;
-                    console.log(key)
+         /*     if (typeof this.validators === 'function') {
+                if(this.validators == [key]){
+                    this.validators[key](value, key, data, input)? data[key] = newValue: data[key];
                 } else {
                     errorSpan.style.backgroundColor = 'red';
                     errorSpan.innerText =  `Error ${newValue}`;
-                }
+                } */
                 oninput(new Date(input.value))
             }   
-            }
+           // }
             return input
         },
     }
@@ -70,14 +99,13 @@ function Form(el, data, okCallback, cancelCallback) {
         input.placeholder = key;
         formBody.append(input);
         formBody.append(errorSpan);
-        //disabled for ok button and cancel
 
     }
 
     if (typeof okCallback === 'function') {
+        okButton.setAttribute('disabled','') 
         formBody.appendChild(okButton);
         okButton.onclick = (e) => {
-            console.log(this)
             this.okCallback(e)
         }
     }
@@ -90,7 +118,10 @@ function Form(el, data, okCallback, cancelCallback) {
     el.appendChild(formBody)
 
     this.okCallback = okCallback
-    this.cancelCallback = cancelCallback
+    this.cancelCallback = cancelCallback;
+
+    let initialState = Object.assign({}, {el, data, okCallback, cancelCallback});
+    this.initialState = initialState;
 
     this.data = data
     this.validators = {
@@ -99,17 +130,24 @@ function Form(el, data, okCallback, cancelCallback) {
 }
 
 let form = new Form(formContainer, {
-    name: 'Anakin',
-    surname: 'Skywalker',
+    '*name': 'Anakin',
+    '*surname': 'Skywalker',
     married: true,
     birthday: new Date((new Date).getTime() - 86400000 * 30 * 365)
-}, () => console.log('ok'), () => console.log('cancel'))
+}, () => console.log('ok'), () =>{
+    let {el, data, okCallback, cancelCallback} = form.initialState;
+   console.log(el, data, okCallback, cancelCallback);
+}  )
 form.okCallback = () => console.log('ok2')
 
+form.cancelCallback = () => {
+    console.log('datainit')
+   // form = new Form(data);
+}
+
 form.validators.surname = (value, key, data, input) => value.length > 2 &&
     value[0].toUpperCase() == value[0] &&
     !value.includes(' ') ? true : 'Wrong name'
 
 
-    //if key[0] == '*' it is requred field
-
+console.log(form);