123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115 |
- let date = new Date();
- function dataToDataTimeLocal(date) {
- let timeStamp = date.getTime();
- let timeZoneoffset = -date.getTimezoneOffset() * 60 * 1000;
- let localTime = timeStamp + timeZoneoffset;
- return new Date(localTime).toISOString().slice(0, -1);
- }
- /***********************************************/
- 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'
- let inputCreators = {
- String(key, value, oninput) {
- let input = document.createElement('input')
- input.placeholder = key
- input.value = value
- input.oninput = () => {
- if(value == '*****'){
- input.type = 'password'
- } else input.type = 'text';
- if (!value.trim()){
- return value;
- } oninput(input.value)
- }
- return input
- },
- Boolean(key, value, oninput) {
- let input = document.createElement('input')
- input.type = 'checkbox'
- input.placeholder = key
- input.checked = value
- input.oninput = () => oninput(input.checked)
- return input
- },
- Date(key, value, oninput) {
- let input = document.createElement('input')
- 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)
- } else {
- errorSpan.style.backgroundColor = 'red';
- errorSpan.innerText = `Error ${newValue}`;
- }
- oninput(new Date(input.value))
- }
- }
- return input
- },
- }
- for (let [key, value] of Object.entries(data)) {
- let errorSpan = document.createElement('span');
- let input = inputCreators[value.constructor.name](key, value, newValue => {
- data[key] = newValue;
- });
- input.placeholder = key;
- formBody.append(input);
- formBody.append(errorSpan);
- //disabled for ok button and cancel
- }
- if (typeof okCallback === 'function') {
- formBody.appendChild(okButton);
- okButton.onclick = (e) => {
- console.log(this)
- this.okCallback(e)
- }
- }
- if (typeof cancelCallback === 'function') {
- formBody.appendChild(cancelButton);
- cancelButton.onclick = cancelCallback
- }
- el.appendChild(formBody)
- this.okCallback = okCallback
- this.cancelCallback = cancelCallback
- this.data = data
- this.validators = {
- }
- }
- 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'
- //if key[0] == '*' it is requred field
|