|
|
@@ -198,10 +198,12 @@ function loginFormConstructorWrapp() {
|
|
|
let btnState = true
|
|
|
this.setBtn = (newValue=btnState) => {
|
|
|
btnState = newValue
|
|
|
- button.disabled = btnState
|
|
|
if (this.getLoginValue() && this.getPassValue()) {
|
|
|
- button.disabled = false
|
|
|
+ btnState = false
|
|
|
+ } else {
|
|
|
+ btnState = true
|
|
|
}
|
|
|
+ button.disabled = btnState
|
|
|
}
|
|
|
this.setBtn()
|
|
|
this.getBtn = () => button.disabled
|
|
|
@@ -305,11 +307,13 @@ function passwordVerifyWrapp() {
|
|
|
let btnState = true
|
|
|
this.setBtn = (newValue=btnState) => {
|
|
|
btnState = newValue
|
|
|
- button.disabled = btnState
|
|
|
if (this.getOpen() ? this.getLoginValue() && this.getPassValue() :
|
|
|
this.getLoginValue() && this.getPassValue() && this.getPassValue() === this.getPassValue2()) {
|
|
|
- button.disabled = false
|
|
|
+ btnState = false
|
|
|
+ } else {
|
|
|
+ btnState = true
|
|
|
}
|
|
|
+ button.disabled = btnState
|
|
|
}
|
|
|
this.setBtn()
|
|
|
this.getBtn = () => button.disabled
|
|
|
@@ -354,4 +358,143 @@ function passwordVerifyWrapp() {
|
|
|
}
|
|
|
|
|
|
let loginForm = new LoginForm()
|
|
|
-}
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+formWrapp()
|
|
|
+function formWrapp() {
|
|
|
+ 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)
|
|
|
+
|
|
|
+ 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
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ 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.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)
|
|
|
+
|
|
|
+ const th = document.createElement('th')
|
|
|
+ th.innerText = key
|
|
|
+ tr.append(th)
|
|
|
+
|
|
|
+ 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)
|
|
|
+ console.log(valid)
|
|
|
+ if (valid === true) {
|
|
|
+ data[key] = valueOfInput
|
|
|
+ tdErr.innerText = ''
|
|
|
+ input.style.color = 'black'
|
|
|
+ } else if (typeof valid === 'string') {
|
|
|
+ tdErr.innerText = valid
|
|
|
+ input.style.color = 'red'
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ data[key] = valueOfInput
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // input.value = value
|
|
|
+ tr.append(input)
|
|
|
+ // input.oninput = () => {
|
|
|
+ // data[key] = input.value
|
|
|
+ // }
|
|
|
+
|
|
|
+ const tdErr = document.createElement('td')
|
|
|
+ tr.append(tdErr)
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ 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'
|
|
|
+ console.log(form)
|
|
|
+
|
|
|
+
|
|
|
+ // fetch('https://open.er-api.com/v6/latest/USD')
|
|
|
+ // .then(res => res.json())
|
|
|
+ // .then(data => {
|
|
|
+ // currencyRates = data.rates
|
|
|
+ // let rates = new Form(formContainer, currencyRates, () => console.log('ok'),() => console.log('cancel') )
|
|
|
+ // rates.okCallback = () => console.log('ok2')
|
|
|
+ // })
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
ivar_n