|
|
@@ -66,14 +66,152 @@ function Password(parent, open) {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-let createPassword = new Password(container, true);
|
|
|
-createPassword.onChange = data => console.log(data);
|
|
|
-createPassword.onOpenChange = open => console.log(open);
|
|
|
+// let createPassword = new Password(container, true);
|
|
|
+// createPassword.onChange = data => console.log(data);
|
|
|
+// createPassword.onOpenChange = open => console.log(open);
|
|
|
|
|
|
-createPassword.setValue('qwerty');
|
|
|
-console.log(createPassword.getValue());
|
|
|
+// createPassword.setValue('qwerty');
|
|
|
+// console.log(createPassword.getValue());
|
|
|
|
|
|
-createPassword.setOpen(false);
|
|
|
-console.log(createPassword.getOpen());
|
|
|
+// createPassword.setOpen(false);
|
|
|
+// console.log(createPassword.getOpen());
|
|
|
|
|
|
+function Login(parent) {
|
|
|
+ this.onChange;
|
|
|
+ this.parent = parent;
|
|
|
+ this.html = `<div>
|
|
|
+ <input type="text" id="login" placeholder="Enter Username" name="uname" required>
|
|
|
+ <button type='submit' id='btn'>SUBMIT</button>
|
|
|
+ </div>`;
|
|
|
+ this.parent.insertAdjacentHTML('beforebegin', this.html);
|
|
|
+ this.password = new Password(this.parent, true);
|
|
|
+ const login = document.getElementById('login');
|
|
|
+
|
|
|
+ this.active;
|
|
|
+
|
|
|
+ this.setActive = (value) => {
|
|
|
+ if (value === true) {
|
|
|
+ this.active = btn.setAttribute('disabled', true);
|
|
|
+ } else {
|
|
|
+ this.active = btn.setAttribute('disabled', false);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ this.getPassword = () => {
|
|
|
+ return this.password
|
|
|
+ }
|
|
|
+
|
|
|
+ login.oninput = () => {
|
|
|
+ login.innerHTML = login.value;
|
|
|
+ }
|
|
|
+
|
|
|
+ login.onchange = () => {
|
|
|
+ if(login.value === '') {
|
|
|
+ this.setActive(true)
|
|
|
+ } else {
|
|
|
+ this.setActive(false)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+let createLogin = new Login(container)
|
|
|
+
|
|
|
+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);
|
|
|
+
|
|
|
+ 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)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ 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 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 для длинных строк
|
|
|
+}
|
|
|
+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)
|
