|
@@ -1,95 +0,0 @@
|
|
|
-function dateToDateTimeLocal(date) {
|
|
|
- let myDate = new Date(date.getTime() - date.getTimezoneOffset() * 60000);
|
|
|
- console.log(myDate.toISOString().slice(0, -1));
|
|
|
-return myDate.toISOString().slice(0, -1)
|
|
|
-}
|
|
|
-
|
|
|
-dateToDateTimeLocal(new Date);
|
|
|
-
|
|
|
-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.type = 'text'
|
|
|
- input.placeholder = key
|
|
|
- input.value = value
|
|
|
- input.oninput = () => oninput(input.value)
|
|
|
- return input
|
|
|
- },
|
|
|
- Boolean(key, value, oninput) {
|
|
|
-
|
|
|
- //label for с input type='checkbox'
|
|
|
- let input = document.createElement('input')
|
|
|
- input.type = 'checkbox'
|
|
|
- input.placeholder = key
|
|
|
- input.checked = value
|
|
|
- input.onchange = () => oninput(input.checked)
|
|
|
- return input
|
|
|
- },
|
|
|
- Date(key, value, oninput) {
|
|
|
- let input = document.createElement('input')
|
|
|
- input.type = 'datetime-local'
|
|
|
- input.placeholder = key
|
|
|
- input.value = dateToDateTimeLocal(value);
|
|
|
- input.oninput = () => oninput(new Date(input.value))
|
|
|
- return input
|
|
|
- //используйте datetime-local
|
|
|
-
|
|
|
- },
|
|
|
- //и др. по вкусу, например textarea для длинных строк
|
|
|
-}
|
|
|
- formBody.innerHTML = '<h1>тут будет форма после перервы</h1>'
|
|
|
- for (const [key, value] of Object.entries(data)) {
|
|
|
- let input = inputCreators[value.constructor.name](key, value, newValue => { data[key] = newValue });
|
|
|
-
|
|
|
- // let input = document.createElement('input');
|
|
|
- formBody.append(input);
|
|
|
- input.placeholder = key;
|
|
|
-
|
|
|
- // input.oninput = () => {
|
|
|
- // data[key] = input.value;
|
|
|
- // }
|
|
|
- }
|
|
|
-
|
|
|
- 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'
|
|
|
-console.log(form)
|