HW_Js/HW_js_10(OOp+Form)/scriptOop.js

// function Password(parent, open) {
//     let input = document.createElement('input');
//     input.placeholder = 'password';    
//     let checkbox = document.createElement('input');
//     checkbox.type = 'checkbox';
//     let param = document.createElement('label');
//     param.innerText = 'увидеть пароль :';



//     if ( open === true) {
//         input.type = 'text';
//     } else {
//         input.type = 'password';
//     }
            
//     this.setValue = function(value) {
//         input.value = value ;
//     }

//     this.getValue = function() {
//         console.log(input.value);
//         return input.value;
//     };
//     this.setOpen = function (value) {
//         if (value === true) {
//             input.type = 'text';
//             open = value;
//         }else {
//             input.type = 'password';
//             open = value;
//         }
//     };
//     this.getOpen = function () {
//         console.log(open);
//         return open;
//     }

//     input.oninput = (e) => {
//         if(typeof this.onChange === 'function') {
//             this.onChange(e.target.value);
//         }
//     }

//     checkbox.onclick = (e) => {
//         if(input.type === 'text') {
//             input.type = 'password';
//             open = false;
//         }else if (input.type === 'password') {
//             input.type = 'text';
//             open = true;
//         }
//         if (typeof this.onOpenChange === 'function') {
//             this.onOpenChange(open);
//         }
//     };


//     parent.appendChild(param);
//     parent.appendChild(input);    
//     param.appendChild(checkbox);

//     }
    
    // let formP = new Password(containerPassword, true);
    // formP.onOpenChange = (open) => console.log(open);
    // formP.onChange = (password) => {
    //     console.log(password);
    //   };
    // formP.setValue('Введите ваш пароль');
    // formP.setOpen(false);   
    // formP.getValue();
    
  


// function Login(parent, open) {
//     let input = document.createElement('input');
//     input.placeholder = 'login';    
//     let checkbox = document.createElement('input');
//     checkbox.type = 'checkbox';
//     let param = document.createElement('label');
//     param.innerText = 'увидеть пароль :';
//     let btn = document.createElement('button');
//     btn.innerText = 'Введите Логин';
//     btn.setAttribute('disabled', 'disabled');
//     let check = document.createElement('input');
//     check.type = 'checkbox';



//     if ( open === true) {
//         input.type = 'text';
//     } else {
//         input.type = 'password';
//     }

//     let value = new Password(containerPassword, false);
//     value.onChange = () => {
//         if(pass.getValue() !=='' && input.value !== ''){
//             button.removeAttribute('disabled');
//         }else {
//             button.setAttribute('disabled', 'disabled');
//         }
//     };

//     input.oninput = (e) => {
//         if(pass.getValue() !== '' && input.value !== '') {
//             button.removeAttribute('disabled');
//         }else {
//             button.setAttribute('disabled', 'disabled');
//         }
//     };

//     check.onclick = (e) => {
//         if(input.type === 'text') {
//             input.type = 'password';
//             open = false;
//         }else if (input.type === 'password') {
//             input.type = 'text';
//             open = true;
//         }
//     };

//     parent.appendChild(input);
//     parent.appendChild(label);
//     label.appendChild(check);
//     parent.appendChild(br);
//     parent.appendChild(button);
// }            

// let Log = new Login(containerLogin, false);

//LoginForm
// function Login(parent, open) {
//     let input = document.createElement('input');
//     input.placeholder = 'login';
//     let param = document.createElement('label');
//     param.innerText = 'Введите логин';
//     let br = document.createElement('br');
//     let button = document.createElement('button');
//     button.innerText = 'Push';
//     button.setAttribute('disabled', 'disabled');
//     let check = document.createElement('input');
//     check.type = 'checkbox';

//     if (open === true) {
//         input.type = 'text';
//     } else {
//         input.type = 'password';
//     }

//     let pass = new Password(containerPassword, false);

//     pass.onChange = () => {
//         if (pass.getValue() !== '' && input.value !== '') {
//             button.removeAttribute('disabled');
//         } else {
//             button.setAttribute('disabled', 'disabled');
//         }
//     };

//     input.oninput = (e) => {
//         if (pass.getValue() !== '' && input.value !== '') {
//             button.removeAttribute('disabled');
//         } else {
//             button.setAttribute('disabled', 'disabled');
//         }
//     };

//     check.onclick = (e) => {
//         if (input.type === 'text') {
//             input.type = 'password';
//             open = false;
//         } else if (input.type === 'password') {
//             input.type = 'text';
//             open = true;
//         }
//     };
//     parent.appendChild(input);
//     parent.appendChild(param);
//     param.appendChild(check);
//     parent.appendChild(br);
//     parent.appendChild(button);
// }

// let log = new Login(containerLogin, false);


// LoginForm Constructor_____________________________________

// function Passw(parent, open) {
//     let checkbox = document.createElement("input");
//     checkbox.type = "checkbox";
//     checkbox.checked = open;
//     let br = document.createElement('br');
//     let password = document.createElement("input");    
//     let button = document.createElement("button");
//     let login = document.createElement("input");

  
//     button.innerText = "Push";
//     button.disabled = true;
  
//     this.sP = (paramValue) => (login.value = paramValue);
//     this.gP = () => login.value;
  
//     this.sP2 = (paramValue) => (password.value = paramValue);
//     this.gP2 = () => password.value;
  
//     this.sO = () => {
//       checkbox.checked ? (password.type = "text") : (password.type = "password");
//     };
//     this.gO = () => {
//       checkbox.checked ? (password.type = "text") : (password.type = "password");
//     };
//     checkbox.onchange = () => {
//       checkbox.checked ? this.sO() : this.gO();
//     };
  
//     login.oninput = () => this.onChange(login.value);
//     password.oninput = () => this.onChange(password.value);
//     this.sA = (openCheck) => (button.disabled = openCheck);
//     this.gA = () => button.disabled;
//     const letsCheck = () =>
//       this.gP () !== "" && this.gP2() !== ""
//         ? this.sA(false)
//         : this.sA(true);
  
//     this.onChange = () => letsCheck();
  
//     parent.append(login);      
//     parent.append(br);      
//     parent.append(password);
//     parent.append(checkbox);
//     parent.append(button);
//   }
//   let p = new Passw(wrapper, true);



// Password Verify__________________________
// function Password(parent, open) {
//   const password = document.createElement("input");
//   const checkbox = document.createElement("input");
//   checkbox.type = "checkbox";
//   checkbox.checked = open;
//   const login = document.createElement("input");
//   const button = document.createElement("button");
//   button.innerText = "Push";
//   button.disabled = true;

//   this.sP = (paramValue) => (login.value = paramValue);
//   this.gP = () => login.value;

//   this.sP2 = (paramValue) => (password.value = paramValue);
//   this.gP2 = () => password.value;

//   checkbox.onchange = () => {
//     if(checkbox.checked) { 
//         login.type = "text"; 
//         login.remove();
//     button.remove() }
//     else {
//         login.type = "password";
//     parent.append(login,button);
//     }
//   };

//   this.setLogin = () => {
//     password.type = "password" ? (login.style.display = "none") : (login.style.display = "");
//   };
//   this.activeButton = (password, login) => {
//     password.value == login.value ? (button.disabled = false) : (button.disabled = true);
//   };
//   password.oninput = () => {
//     this.activeButton(password, login);
//   };
//   login.oninput = () => {
//     this.activeButton(password, login);
//   };

//   parent.append(password);
//   parent.append(checkbox);
//   parent.append(login);
//   parent.append(button);
// }
// let p = new Password(wrapper, true);


// Form_________________________________________


function Form(el, data, okCallback, cancelCallback) {
  let inputCreators = {String(key, value, oninput) {
      let input = document.createElement("input");
      input.type = "text";
      input.placeholder = key[0] === "*" ? key.slice(1, key.length) : key;
      input.id = `${key}`;

      if (value.charAt(0) === "*") {
        data[key] = "";
        input.type = "password";
        input.placeholder = "password";
        input.id = `${key}`;
        input.oninput = () => oninput(input.value);
        return input;
      }
      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.onchange = () => oninput(input.checked);
      input.id = `${key}`;
      return input;
    },
    Date: function (key, value, oninput) {
      let input = document.createElement("input");
      input.type = "datetime-local";
      input.placeholder = key;
      input.id = `${key}`;
      input.value = value.toISOString().slice(0, -1);
      input.oninput = () => oninput(Date(input.value));
      return input;
    },
  };

  this.validators = {};

  let table = document.createElement("table");
  formContainer.appendChild(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 tdError = document.createElement("td");
    const span = document.createElement("span");
    const spanValue = document.createElement("span");

    let input = inputCreators[data[key].constructor.name](
      key,
      data[key],
      (value) => {
        data[key] = value;
      }
    );
    input.onchange = () => {
      let valueInput = input.value;
      let valueVal = true;

      if (value.constructor.name === Boolean) {
          valueInput = input.checked;
      }

      if (typeof this.validators[key] === "function") {
          valueVal = this.validators[key](valueInput,key,data,input);

        if (typeof valueVal === "string") {
          valueVal = false;
          input.style.backgroundColor = "#95adab";
          tdError.innerHTML = ` ${this.validators[key](valueInput,key,data,input)}`;
        }
        if (valueVal) {
          input.style.backgroundColor = "white";
          tdError.innerHTML = ` `;
        }
      }
      valueInput === "" ? (input.style.border = "1px solid rgb(255, 13, 0)") : (input.style.border = null);

      if (key[0] == "*") {
        if (data[key] == "") {
          input.style.backgroundColor = "#95adab";
        } else {
          input.style.backgroundColor = "white";
        }
      }
    };
    if (key[0] === "*") {
      const start = key.charAt(0);
      spanValue.innerHTML = `${key.slice(1, key.length)}`;
      span.innerText = `${start} `;
    } else {
      spanValue.innerHTML = key;
    }
    table.append(tr);
    tr.append(th);
    tr.append(td);
    tr.append(tdError);
    td.appendChild(input);
    th.appendChild(span);
    th.append(spanValue);
    
  }

  this.copyData = { ...data };

  this.checkInput = function () {
    let input = document.querySelector(input);
    input.value;
  };

  let formBody = document.createElement("div");
  let okButton = document.createElement("button");
  okButton.innerHTML = "OK";

  if (typeof okCallback === "function") {
    formBody.appendChild(okButton);
    okButton.onclick = (e) => {
      let keyValue = 0;
      let countVal = 0;

      for (let [key, value] of Object.entries(data)) {
        let valueInput = value;
        let valueVal = true;
        if (valueVal && valueInput) {
            countVal++;
          }
          keyValue++;
      }

      if (keyValue === countVal) {
        console.log(this);
        this.okCallback(this.data);
      }
    };
  }

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

  cancelButton.addEventListener("click", () => {
    console.log(this.copyData);

    for (let [key, value] of Object.entries(this.copyData)) {
      let input = document.getElementById(key);

      if (value.constructor.name === "String") {
        input.value = `${value}`;
      }

      if (value.constructor.name === "Boolean") {
        input.checked = `${value}`;
      }

      if (value.constructor.name === "Date") {
        input.value = value.toISOString().slice(0, -1);
      }
    }
  });

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

  el.appendChild(formBody);

  this.okCallback;
  this.cancelCallback = cancelCallback;
  this.data = data;
}

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

form.okCallback = (data) => console.log(data);

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