HW9FuncOOP done

homeWork9FuncOOP/index.js

@@ -81,128 +81,175 @@ function Login(parent) {
     this.parent = parent;
     this.html = `<div>
     <input type="text" id="login" placeholder="Enter Username" name="uname" required>
-    <button type='submit' id='btn'>SUBMIT</button>
+    <button type='submit' id='btn' disabled>SUBMIT</button>
     </div>`;
     this.parent.insertAdjacentHTML('beforebegin', this.html);
     this.password = new Password(this.parent, true);
     const login = document.getElementById('login');
 
-    this.active;
+    this.activateBtn = () => {
+        let loginValue = this.loginValue;
+        let passwordValue = this.password.getValue();
 
-    this.setActive = (value) => {
-        if (value === true) {
-            this.active = btn.setAttribute('disabled', true);
-        } else {
-            this.active = btn.setAttribute('disabled', false);
+        if (loginValue !== undefined && passwordValue !== undefined) {
+            btn.disabled = false;
         }
     }
 
-    this.getPassword = () => {
-        return this.password
+    this.loginValue;
+
+    this.getValue = () => {
+        return this.loginValue;
     }
 
-    login.oninput = () => {
-        login.innerHTML = login.value;
+    this.setLoginValue = (value) => {
+        this.loginValue = value;
     }
 
-    login.onchange = () => {
-        if(login.value === '') {
-            this.setActive(true)
-        } else {
-            this.setActive(false)
-        }
+    this.password.onChange = (data) => {
+        console.log(data)
+        this.password.setValue(data);
+        this.activateBtn();
+    }
+
+    login.oninput = () => {
+        this.setLoginValue(login.value);
+        this.activateBtn();
     }
 }
 let createLogin = new Login(container)
 
-createLogin.getPassword().onChange = data => console.log(data);
-createLogin.getPassword().onOpenChange = open => console.log(open);
+// createLogin.getPassword().onChange = data => console.log(data);
+// createLogin.getPassword().onOpenChange = open => console.log(open);
 
 //////////////////////////////////////////////////////////////
+
 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>'
+    const table = document.createElement('table')
+    formBody.append(table)
+
 
-    formBody.innerHTML = '<h1>тут будет форма после перервы</h1>'
-    const table = document.createElement('table');
-    formBody.append(table);
-    
-    for (let [key,value] of Object.entries(data)) {
-        let tr = document.createElement('tr');
-        let th = document.createElement('th');
-        let td = document.createElement('td');
-        let input = inputCreators[data[key].constructor.name](key, data[key], (value) => data[key] = value);
-
-        tr.append(th);
-        tr.append(td);
-        td.append(input);
-        
-        table.append(tr);
-        th.innerHTML = key;
-
-        // if(key in this.validators) {
-            
-        // }
-    }
-    
     if (typeof okCallback === 'function'){
-        formBody.appendChild(okButton);
-        okButton.onclick = (e) => {
-            console.log(this)
-            this.okCallback(e)
+       formBody.appendChild(okButton);
+       okButton.onclick = (e) => {
+          console.log(this)
+          this.okCallback(data)
         }
     }
-
+ 
     if (typeof cancelCallback === 'function'){
-        formBody.appendChild(cancelButton);
-        cancelButton.onclick = cancelCallback
+       formBody.appendChild(cancelButton);
+       cancelButton.onclick = cancelCallback
     }
+          
+    let inputCreators = {
+       String(key, value, oninput){
+          let input = document.createElement('input')
+          if (value.match(/\**/)[0] === value) {
+             input.type = 'password'
+             input.value       = ''
+             input.oninput     = () => oninput(input.value)
+          } else {
+             input.type = 'text'
+             input.placeholder = key
+             input.value       = value
+             input.oninput     = () => oninput(input.value)
+          }
+          return input
+       },
+       Boolean(key, value, oninput){
+          let input = document.createElement('input')
+          input.type = 'checkbox'
+          input.checked     = value
+          input.oninput     = () => oninput(input.checked)
+          return input
+       },
+       Date(key, value, oninput){
+          let input = document.createElement('input')
+          input.type = 'datetime-local'
+          // при преобразовании объекта к строке смещается часовой пояс на нулевой, выражение ниже восстанавливает текущий
+          input.value       = new Date(value - (new Date()).getTimezoneOffset() * 60 * 1000).toISOString().slice(0,-1)
+          input.oninput     = () => oninput(new Date(input.value))
+          return input
+       },
+       Number(key, value, oninput){
+          let input = document.createElement('input')
+          input.type = 'text'
+          input.placeholder = key
+          input.value       = value
+          input.oninput     = () => oninput(input.value)
+          return input
+       },
+    }
+
 
     el.appendChild(formBody)
+    for (const [key, value] of Object.entries(data)) {
+       const tr = document.createElement('tr')
+       table.append(tr)
 
+       let rowMandatory = false
+       const th = document.createElement('th')
+       if (key[0] === '*') {
+          const thPre = document.createElement('span')
+          thPre.innerText = '* '
+          thPre.style.color = 'red'
+          th.append(thPre)
+          const thCont = document.createElement('span')
+          thCont.innerText = key.slice(1)
+          th.append(thCont)
+          rowMandatory = true
+       } else {
+          th.innerText = key
+       }
+       tr.append(th)
 
-    this.okCallback     = okCallback
-    this.cancelCallback = cancelCallback
-    
-    this.data           = data
-    this.validators     = {}
-}
+       const td = document.createElement('td')
+       tr.append(td)  
+       
+       const input = inputCreators[value.constructor.name](key, value, (valueOfInput) => {
+          if (key in this.validators) {
+             let valid = this.validators[key](valueOfInput,key,data,input)
+             if (valid === true) {
+                data[key] = valueOfInput
+                tdErr.innerText = ''
+                input.style.backgroundColor = 'white'
+             } else if (typeof valid === 'string') {
+                tdErr.innerText = valid
+                input.style.backgroundColor = 'red'
+                input.style.color = 'white'
+             }
+          } else {
+             data[key] = valueOfInput
+          }
+          if (rowMandatory && !valueOfInput) {
+            input.style.border = '4px solid red'
+         } else {
+            input.style.border = '1px solid rgb(118, 118, 118)'
+         }
+      })
+      td.append(input)
 
+      const tdErr = document.createElement('td')
+      tr.append(tdErr)
+   }
 
 
+   this.okCallback     = okCallback
+   this.cancelCallback = cancelCallback
 
-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){
-        let input = document.createElement('input')
-        input.type = 'checkbox'
-        input.oninput     = () => oninput(input.checked)
-        return input
-    },
-    Date(key, value, oninput){
-        let offset = value.getTimezoneOffset();
-        let now = value.getTime();
-        let nowPlusOffset = new Date(now - offset * 60 * 1000)
-        let input = document.createElement('input')
-        
-        input.type = 'datetime-local'
-        input.value = nowPlusOffset.toISOString().slice(0, -1);
-        input.oninput = () => oninput(new Date(input.value))
-        return input
-    },
-    //и др. по вкусу, например textarea для длинных строк
+   this.data           = data
+   this.validators     = {}
 }
+
 let form = new Form(formContainer, {
     name: 'Anakin',
     surname: 'Skywalker',