tipper/static/form2.js

/*
Начальный расчет signature делаем после загрузки главной формы.
Как узнать когда загрузилась главная форма? 
- Заводим для формы счетчик loadingCount, 
увеличиваем его при создании элемента с функцией loadFunc, уменьшаем при заврешении 
http-запроса loadFunc (с ошибкой или без). Уменьшив счетчик проверяем - если 0 - форма
загрузилась.
Таким же образом рассчитываем начальный signature после restore / edit.

Как правильно отобразить ошибку, если юзер удалил ошибочные элементы после submit формы 
на сервер но до получения ответа от сервера?
- Перед отправкой на сервер clean объекта, нужно сохранить dirty объект. 
Если сервер вернул ошибку - делаем restore(dirty) и затем showError(err)

Все элементы формы генерируют события когда юзер что-то набирает в текстовом поле либо
выбирает в списке. Обработчик события извлекает 2 значения: clean и dirty. Затем 
обновляет цепочку объектов до топ-уровня (обновляя _clean и _dirty объекты). 
Затем (!) если есть зависимые элементы (fork, chains) - генерирует последующие события. 

_clean - это объект, который будет отправлен на сервер, а также выступает в роли 
текущей signature.

_dirty - это объект который нужен для восстановления (restore) состояния формы. 
Записывается в sessionStorage / localStorage для восстановления формы после перезагрузки
страницы. Снимок состояния в момент submit формы на сервер. Если сервер вернет ошибку - 
можно восстановить форму и корректно показать ошибку несмотря на изменения, внесенные 
юзером во время выполнения http-запроса.

Методы:

fill - заполняет поля формы будто это делает человек, не меняя режим filling. Зачем нужен этот метод? 

// Представим ситуацию: есть кликабельный список модемов, у каждого модема есть список приборов, у каждого прибора есть список метрик. На странице модема 

edit - заполняет поля формы, устанавливает режим в editing, чтобы можно было отключить (disabled=true) нередактируемые поля формы, а также рассчитывает initSignature после заполнения всех полей.

restore - восстанавливает состояние формы из снимка (snapshot)

Snapshot
Снимок формы хранит - dirty объект, initSignature 

*/


/*
Разделение на getObj и cleanObj.
getObj - возвращает объект в том виде, в котором можно вызвать setObj, то есть device вместо
deviceID, queries вместо queryIDs.

Если имеем многоуровневую форму и после setObj вызываем getObj, единственный способ получить
"чистый" объект для отправки на сервер - это сделать clean операцию на уже готовом объекте.


Список объектов для Formobj.

Одноуровневый список. Описываем в schema, создаем под капотом.


Топ-уровень - это модель, а вложенные списки объектов - это ObjectList?

Операции:
- add, с проверкой fingerprint
- replaceSelected
- removeChecked
- removeSelected

События:
- select (если параметр undefined - это unselect)

*/


/*
Модель (многоуровневая) для отображения данных из БД (или сервера).

У каждого объекта должен быть первичный ключ

- updateSelected, когда сервер присылает только некоторые поля объекта, например изменившийся статус
- replaceSelected


///////////////// setObj
заводим state object, который хранит obj и количество загружаемых элементов.
В конце setObj проверяем счетчик - если > 0 блокируем форму.
После загрузки успешной или нет - счетчик уменьшаем. Как только стал в 0 - разблокируем форму.


3 кейса для вложенных форм:
1. раскрывается под списком
2. в отдельном диве (например справа). Нужно передать ID блока
3. кастомная реализация. Нужно объявить 2 метода - showForm и hideForm


Разделить createForm для главной и вложенных. Другие кнопки, другие обработчики


DISABLED в createSchemaObjects


Для вложенных форм isEditable вместо editmode
*/


const filling = 0
const restoring = 1
const editing = 2

var _labelClass = 'omg-form-label' 

function Form(opt) {
    //this.formId = opt.form
    this._mode = filling
    this._loadingCount = 0
    this._version = 0
    
    this._enableSubmit = opt.enableSubmit

    this._api = opt.api
    this._errorClass = opt.errorClass || 'errmsg'

    this._key = opt.key

    this._context = opt.context

    this._btnSubmitText = opt.btnSubmitText || 'Добавить'
    this._btnUpdateText = opt.btnUpdateText || 'Обновить'
    this._btnRemoveText = opt.btnRemoveText || 'Удалить'

    //this._onSubmit = opt.onSubmit
    //this._onSubmitSuccess = opt.onSubmitSuccess
    //this._onUpdateSuccess = opt.onUpdateSuccess
    //this._onRemoveSuccess = opt.onRemoveSuccess
    //this._submitFunc = opt.submitFunc
    //this._updateFunc = opt.updateFunc || this._submitFunc
    //this._removeFunc = opt.removeFunc

    this._validate = opt.validate
    //this._form = document.getElementById(opt.form)
    //if (!this._form) {
    //    throw new Error(`html form '${opt.form}' not found`)
    //}
    //this._schema = {}
    //this._lists = {}

    this.form

    // temp
    this._fields = {}

    if (!opt.formContainer) {
        throw new Error(`formContainer option is required`)
    }

    if (opt.formContainer instanceof Element) {
        this._formContainer = opt.formContainer
    } else {
        let formContainer = document.getElementById(opt.formContainer)
        if (!formContainer) {
            throw new Error(`form container '${opt.formContainer}' not found`)
        }
    
        this._formContainer = formContainer
    }
    

    let form = {
        isEditable: opt.isEditable || false,
        schema: this._schema,
        fields: {}, // для ошибок,
        //loadingCount: 0
        selected: {},
        dirty: {}
    }

    //this._schema = this._buildTree(opt.schema, opt.form)
    this._schema = this._buildTree(opt.schema, form)

    this.form = form
    this.form.schema = this._schema

    //console.log('SCHEMA:', this._schema)
    
    //this._createSchemaObjects(this._schema)
    




    // fix - return ?
    //this._createMainForm(this._schema, formContainer, opt.btnSubmitText)

    // add submit btn to top form

    //console.log(this._schema)
    //this._loadDataForCustomElems(this._schema)
    
    /*
    let str = localStorage.getItem('x')
    if (str) {
        let s
        try {
            s = JSON.parse(str)
        } catch (e) {
            console.log(e)
            console.log(str)
        }
        console.log('localStore:', s.obj)

        this._restore(s)
    }
    */
    //console.log(this)
    //this.init()
}




Form.prototype = Object.create(Emiter.prototype)
Form.prototype.constructor = Form

Form.EDITABLE = 1 // стандартное поле
Form.UNEDITABLE = 2 // активно при добавлении, отключено при редактировании
Form.READONLY = 3 // всегда отключено, например ID, передается на сервер

/*
Form.E = 1 // editable
Form.R = 2 // readonly
Form.D = 3 // disabled

Form.S = 4 // standard
Form.C = 5 // custom
Form.L = 6 // list
*/

Form.prototype.init = function() {
    let loader = new Loader({
        api: this._api,
        t: this.form, // пустой dirty
        context: this._context,
        onError: err => {
            //console.log('Loader.err: ', err)
        },
        onLoaded:() => {
            this._createMainForm()            
        }
    })

    loader.load()
}

Form.prototype.onRemove = function(func) {
    this._onRemove = func
}

Form.prototype.onSubmit = function(func) {
    this._onSubmit = func
}

// ВАЖНО!
// Вложенные коллекции (в chains или tree) рекурсивно искать сложно, поэтому 
// в момент создания объектов нужно сохранить на них ссылки, а в момент reset - удалить.
Form.prototype.showError = function(err) {
    this._showError(this.form.fields, err)
}

/////////////// FIX
// сделать map из форм
Form.prototype._showError = function(fields, err) {
    if (this._error) {
        this._error.remove()
    }

    let path = []
    if (Array.isArray(err.path)) {
        path = err.path
    }

   
    while (true) {
        let step = path.shift()
        if (!step) {
            break
        }

        //if (!schema) {
        //    throw new Error(`wrong path step ${JSON.stringify(step)}, not found`) 
        //}

        let p = fields[step.field]

        /*
        schema.forEach(x => {
            if (x.name == step.field) {
                p = x
            }
        })
        */

        if (!p || p.type != 'list') {
            throw new Error(`wrong path step ${JSON.stringify(step)}`)
        }

        if (p.arr.length <= step.idx) {
            throw new Error(`wrong path step ${JSON.stringify(step)}, idx out of range`)
        }
        
        if (!p.isFormOpened) {
            this._select(p, p.arr[step.idx])
        }

        fields = p.fields
    }

    let anchor; //, found = false

    if (err.field) {
        //schema.forEach(p => {
        //    if (p.name == err.field) {
        let p = fields[err.field]

        //console.log('ERR FIELD:', p)

        if (p) {
            switch (p.type) {
            case '':
                // для скрытых элементов anchor не определяем
                break

            case 'line':
            case 'text':
            case 'select':            
                anchor = p.elem
                break
    
            case 'checkbox':
                anchor = p.labelElem
                break 

            case 'checkboxes':
            case 'radios':
            case 'model':
                anchor = p.cover
                break

            case 'list':
                anchor = p.btnDiv
                break
            }
        } else {  
            throw new Error(`field '${err.field}' not found`)
        }
        
    } else {
        // FIX
        //let p = schema[err.list]

        //anchor = p.elem.getAnchor(err.idx)
    }    

    if (anchor) {
        this._error = insertError({
            after: anchor, 
            err: err,
            class: this._errorClass
        })
    } else {
        // Если якорь не найден (поля field и list пустые) - ошибка относится к форме
        // целиком. Поэтому показываем перед submit кнопкой.
        this._error = insertError({
            before: this._btnSubmit, 
            err: err,
            class: this._errorClass
        })
    }
}


Form.prototype._buildTree = function(schemaConfig, form) {
    let schema = []

    if (Array.isArray(schemaConfig)) {
        schemaConfig.forEach(v => {
            let f;
            if (v.type == 'list') {
                f = this._buildList(v, form)                
            } else {
                f = this._buildField(v, form)                
            }
            schema.push(f)
        })
    }    

    //console.log('returnned tree:', opt, r)
    return schema
}

// Цель build функций - пройтись ко конфигурации схемы на всю глубину, провалидировать
// описание каждого свойства формы, создать внутренние структуры, описывающие свойства
// формы. 
// Никаких манипуляций с DOM данные функции не производят. Для fork случаев создание
// schema элементов с нуля после действий пользователя.
//Form.prototype._buildTree = function(schemaConfig, formId) {
Form.prototype._buildField = function(v, form) {
    let type = v.type
    if (!type) {
        type = ''
    }

    let f = {
        type: type,
        label: v.label,
        comment: v.comment,
        placeholder: v.placeholder,
        dataType: v.dataType || 'str',
        name: v.name,
        key: v.key,
        scalar: v.scalar,
        get: v.get,
        set: v.set,
        data: v.data,
        getData: v.getData,
        getName: v.getName, // fix
        loadFunc: v.loadFunc,
        loadFuncContextParam: v.loadFuncContextParam,
        chains: [],
        virtual: v.virtual, // вирутальное поле, например RadioList, в form.elements не проверять
        manage: true,
        onChange: v.onChange,
        cache: new Map(),
        getLoadFuncArg: v.getLoadFuncArg,
        //requestModifier: v.requestModifier,
        responseModifier: v.responseModifier,
        form: form,
        modelOptions: v.modelOptions,
        modelType: v.modelType,
        modelChangeType: v.modelChangeType,
        modelSelectType: v.modelSelectType,
        contextVar: v.contextVar,
        width: v.width,
        //height: v.height,
        rows: v.rows,
        cols: v.cols,
    }

    if (v.noCache === true) {
        f.caching = false
    } else {
        f.caching = true
    }
    // FIX
    /*
    if (v.key) {
        f.key = v.key
    } else {
        f.scalar = true
    }
    */

    //console.log('build:', f)

    if (v.getName) {
        if (typeof v.getName == 'string') {
            f.getName = obj => {
                return obj[v.getName]
            }
        } else {
            f.getName = v.getName
        }
    } else {
        f.getName = obj => obj
    }

    /*
    if (v.container) {
        f.containerId = v.container
    } else {
        f.containerId = formContainerId
    }
    */

    if (v.editmode) {
        // Если указан editmode - сперва проверяем значение на валидность
        if (v.editmode != Form.UNEDITABLE && v.editmode != Form.EDITABLE && v.editmode != Form.READONLY) {
            throw new Error(`Unknown '${v.name}' editmode: ${v.editmode}`)
        }
        // Если поле readonly - неважно какая форма - поле всегда отключено.
        if (v.editmode == Form.READONLY) {
            f.editmode = Form.READONLY
        } else {
            // Если форма редактируемая - поле может быть 2 видов
            if (form.isEditable) {
                f.editmode = v.editmode // editable / uneditable                
            } else {
                // Если форма нередактируемая - поле только uneditable
                f.editmode = Form.UNEDITABLE
            }
        }        
    } else {
        if (form.isEditable) {
            f.editmode = Form.EDITABLE
        } else {
            f.editmode = Form.UNEDITABLE
        }
    }

    switch (type) {
    case '':
    case 'checkboxes':
    case 'radios':
    case 'select':
    case 'line':
    case 'text':
    case 'checkbox':
    //case 'custom-list':
    case 'model':
        break

    default:
        throw new Error(`unknown type in '${v.name}' schema property`)
    }
    
    if (Array.isArray(v.chains)) {
        v.chains.forEach(x => {
            //console.log('CHAINS: =====>', JSON.stringify(x))
            let field = this._buildField(x, form)

            f.chains.push(field)
            //let y = this._buildField(x)
            //console.log()
        })
    }
    
    if (v.fork) {
        f.fork = this._buildFork(v.fork, form)
    }
    
    return f
}

// c - config item, k - property name (key)
// form - родительская форма - нужня в первую очередь для проверки isEditable
Form.prototype._buildList = function(c, form) {
    //if (!c.btnSubmit) {
      //  throw new Error(`list elem '${c.name}' must have 'btnSubmit' option`)
    //}
    let f = {
        type: 'list',
        label: c.label,
        name: c.name,
        isEditable: c.isEditable || false,
        //containerId: c.container,
        //btnSubmitId: c.btnSubmit,
        //btnHideId: c.btnHide,
        //formOpts: c.form,
        //templateOpts: c.template,
        //view: c.view,
        activeClass: c.activeClass || 'selected',
        //sort: c.sort,
        validate: c.validate,
        //parentFormId: formId,
        //formId: c.form,
        showForm: c.showForm,
        hideForm: c.hideForm,
        formContainerClass: c.formContainerClass,
        //btnAddText: c.btnAddText,
        //btnUpdateText: c.btnUpdateText,
        //formContainer: document.getElementById(c.formContainer),
        emptyListMsg: c.emptyListMsg || '',
        form: form,
        fields: {},
        loadingCount: 0
    }

    // Если родительская форма нередактируемая, то все вложенные тоже
    if (!form.isEditable) {
        f.isEditable = false
    }

    if (!c.getItemName) {
        throw new Error(`getItemName option is required`)
    }

    if (typeof c.getItemName == 'string') {
        f.getItemName = (obj) => {
            return obj[c.getItemName]
        }
    } else {
        f.getItemName = c.getItemName
    }

    // для всех schema элементов и ниже
    // FIX
    //if (!c.formContainer) {
    //    throw new Error(`formContainer option is required for list ${JSON.stringify(c)}`)
    //}
    f.formContainerId = c.formContainer

    f.formContainer = document.getElementById(c.formContainer)

    // Для массива
    //if (!c.itemContainer) {
      //  throw new Error(`itemContainer option is required for list ${JSON.stringify(c)}`)
    //}
    //f.itemContainerId = c.itemContainer

    // для самого поля в родительской форме
    //if (c.container) {
      //  f.containerId = c.container
    //} else {
      //  f.containerId = parentFormContainerId
    //}

/*
    if (c.editmode) {
        f.editmode = c.editmode
        
        if (f.editmode != Form.UNEDITABLE && f.editmode != Form.EDITABLE && f.editmode != Form.READONLY) {
            throw new Error(`Unknown '${c.name}' editmode: ${c.editmode}`)
        }
    } else {
        f.editmode = Form.EDITABLE
    }
    */

    /*
    if (c.showForm) {
        f.showForm = () => {
            if (f.selected) {
                console.log('select')
                this._select(f) // снимаем выделение
            }
            c.showForm()
            f.
        }
    }
*/


    f.schema = this._buildTree(c.schema, f)

    return f
}



Form.prototype._getObjectValue = function(p) {
    let clean, dirty

    switch (p.type) {
    case 'checkboxes':
        clean = [] // массив ID
        dirty = [] // массив объектов

        let key = p.name
        if (p.key) {
            key = p.key
        }

        p.elems.forEach((x, idx) => {
            if (x.checked) {
                let v = p.valueObjects[idx]
                dirty.push(v)

                if (p.scalar) {
                    clean.push(v)
                } else {
                    clean.push(v[key])
                }
            }
        })

        //upd[p.name] = checkedIDs
        break

    case 'radios':
        if (Array.isArray(p.elems)) {
            for (let i=0; i<p.elems.length; i++) {
                if (p.elems[i].checked) {
                    dirty = p.valueObjects[i]
                    if (p.scalar) {
                        clean = dirty
                    } else {
                        clean = dirty[p.name]
                    }                    
                    break
                }
            }
        }

        //upd[p.name] = dirty
        break

    case 'select':
        // отнимаем пустой option
        //console.log('SELECTED INDEX:', p, p.elem.selectedIndex)
        
        // Если элементы еще не загрузились по сети
        if (Array.isArray(p.valueObjects) && p.valueObjects.length > 0) {
            dirty = p.valueObjects[p.elem.selectedIndex - 1]
        }
        if (dirty !== undefined) {
            if (p.scalar) {
                clean = dirty
            } else {
                clean = dirty[p.name]
            }
        }
        break

    case 'checkbox':
        dirty = p.elem.checked
        // fix - объекты вместо скаляра?
        //upd[p.name] = dirty
        clean = dirty
        break

    case '':
        //if (p.contextVar) {
          //  dirty = this._context[p.contextVar]
            //clean = this._context[p.contextVar]
        //} else {
            dirty = p.value
            clean = p.value
        //}
        break

    case 'line':
    case 'text':
        dirty = p.elem.value

        // Обрезаем пробелы
        if (typeof dirty == 'string') {
            dirty = dirty.trim()
        }

        let v;

        // Важно для расчета signature. Ибо до того, как напечатали в поле ввода символ
        // - в signature нет такого property, а когда символ напечатали и удалили, - в
        // signature появится property c пустой строкой или нулем
        if (dirty == '') {
            v = undefined
        } else {
            switch (p.dataType) {
            case 'int':
                v = parseInt(dirty) || 0
                break              
            case 'float':
                v = parseFloat(dirty) || 0
                break

            case 'str':
                v = dirty || ''
                break

            case 'hex':
                try {
                    v = hexToBytes(dirty)
                } catch (e) {
                    v = ''
                }
                break

            default:
                throw new Error(`Unknown type: ${p.dataType}`)
            }
            if (p.get) {
                v = p.get(v)
            }
        }
        
        dirty = v
        clean = v
        break

    //case 'custom-list':
        //return p.custom.getValues()

    case 'model':
        if (p.modelChangeType == 'radio') { 
            dirty = p.model.getSelected(p.modelSelectType)
        } else {
            dirty = p.model.listChecked(p.modelSelectType)
        }

        //console.log('DIRTY model object:', dirty)

        if (dirty !== undefined) {
            if (p.scalar) {
                clean = dirty
            } else {
                clean = dirty[p.name]
            }
        }
        break

    default:
        throw new Error(`bug: unknown property type '${p.type}'`)
    }

    return {
        dirty: dirty,
        clean: clean
    }
}

Form.prototype._disableField = function(p) {
    //console.log('disablefield')
    if (p.type == 'list') {
        p.arr.forEach(item => {
            item.checkbox.disabled = true
        })
        p.btnShow.hidden = true
    } else if (p.type == 'model') {
        p.model.disable()
    } else if (p.elem) {
        p.elem.disabled = true
    } else if (p.elems) {
        p.elems.forEach(elem => {
            elem.disabled = true
        })
    }
}



Form.prototype._createField = function(p, container) {
    //if (p.type == '') {
    //    return
    //}
    //console.log('_createField...', p.name, p.type)
    let control
    let contextValue

    let labelText = p.name
    if (p.label) {
        labelText = p.label
    }
    
    //console.log('_createField: data=', p.data)

    let div = document.createElement('div')
    div.setAttribute('class', 'form-group')

    p.cover = div

    let label = document.createElement('label')
    label.textContent = labelText
    label.classList.add(_labelClass)

    switch (p.type) {
    case '':
        //p.cover = document.createElement('div')

        container.appendChild(p.cover)


        // FIX - генерация события?
        if (p.contextVar) {
            contextValue = this._context[p.contextVar]

            if (contextValue !== undefined) {
                p.value = contextValue

                this.form.selected[p.name] = contextValue
            } else {
                delete this.form.selected[p.name]
            }            
        }

        break

    case 'checkboxes': 
        div.style.display = 'flex'
        div.style.flexDirection = 'column'

        div.appendChild(label)

        p.optionContainer = div
        p.elems = []

        // FIX - генерация события?
        if (p.contextVar) {
            contextValue = this._context[p.contextVar]
            this._fillOptionsField(p, contextValue)
        } else if (p.data) {
            this._fillOptionsField(p, p.data)
        } else if (p.getData) {
            this._fillOptionsField(p, p.getData())
        } else if (p.caching) {
            let cached = p.cache.get()
            if (cached) {
                this._fillOptionsField(p, cached)
            }
        }


        container.appendChild(div)
        break

    case 'radios':
        div.style.display = 'flex'
        div.style.flexDirection = 'column'

        div.appendChild(label)

        p.optionContainer = div        
        p.elems = []

        // FIX - генерация события?
        if (p.contextVar) {
            contextValue = this._context[p.contextVar]
            this._fillOptionsField(p, contextValue)
        } else if (p.data) {
            this._fillOptionsField(p, p.data)
        } else if (p.getData) {
            this._fillOptionsField(p, p.getData())
        } else if (p.caching) {
            let cached = p.cache.get()
            if (cached) {
                this._fillOptionsField(p, cached)
            }
        }

        //console.log('RADIOs CREATED', p.elems)

        

        container.appendChild(div)
        break

    case 'select':
        control = document.createElement('select')
        control.setAttribute('class', 'form-control')

        if (p.width) {
            control.style.width = p.width
        }

        if (p.className) {
            control.classList.add(p.className)
        }

        p.elem = control

        div.appendChild(label)
        div.appendChild(control)

        if (p.comment) {
            // FIX <small class="form-text text-muted">от 15 секунд и выше</small>
            let small = document.createElement('small')
            small.classList.add('form-text', 'text-muted')
            small.textContent = p.comment

            div.appendChild(small)
        }

        // FIX - генерация события?
        if (p.contextVar) {
            contextValue = this._context[p.contextVar]
            this._fillOptionsField(p, contextValue)
        } else if (p.data) {
            this._fillOptionsField(p, p.data)
        } else if (p.getData) {
            this._fillOptionsField(p, p.getData())
        } else if (p.caching) {
            let cached;
            //console.log(p.cache, p.loadFuncContextParam)
            if (p.getLoadFuncArg) {
                let arg = p.getLoadFuncArg(p.form.selected)
                cached = p.cache.get(arg)
            } else {
                cached = p.cache.get()
            }
            //console.log(cached)
            if (cached) {
                this._fillOptionsField(p, cached)
            }
        }

        p.elem.addEventListener('change', () => {            
            this._onElemEvent(p)
        })

        container.appendChild(div)
        break

    case 'line':
        control = document.createElement('input')
        control.setAttribute('type', 'text')
        control.setAttribute('class', 'form-control')

        if (p.width) {
            control.style.width = p.width
        }

        if (p.className) {
            control.classList.add(p.className)
        }

        if (p.placeholder) {
            control.setAttribute('placeholder', p.placeholder)
        }

        control.addEventListener('input', () => {            
            this._onElemEvent(p)
        })
        
        div.appendChild(label)
        div.appendChild(control)

        if (p.comment) {
            // FIX <small class="form-text text-muted">от 15 секунд и выше</small>
            let small = document.createElement('small')
            small.classList.add('form-text', 'text-muted')
            small.textContent = p.comment

            div.appendChild(small)
        }

        container.appendChild(div)

        p.elem = control
        //p.defaultValue = control.value

        // FIX - генерация события?
        if (p.contextVar) {
            contextValue = this._context[p.contextVar]
            p.elem.value = contextValue
        }

        break

    case 'text':
        control = document.createElement('textarea')
        control.setAttribute('class', 'form-control')

        if (p.rows) {
            control.rows = p.rows
        }

        if (p.cols) {
            control.cols = p.cols
        }

        if (p.width) {
            control.style.width = p.width
        }

        if (p.className) {
            control.classList.add(p.className)
        }

        control.addEventListener('input', () => {            
            this._onElemEvent(p)
        })
        
        div.appendChild(label)
        div.appendChild(control)

        if (p.comment) {
            // FIX <small class="form-text text-muted">от 15 секунд и выше</small>
            let small = document.createElement('small')
            small.classList.add('form-text', 'text-muted')
            small.textContent = p.comment
            
            div.appendChild(small)
        }

        container.appendChild(div)

        p.elem = control
        //p.defaultValue = control.value

        // FIX - генерация события?
        if (p.contextVar) {
            contextValue = this._context[p.contextVar]
            p.elem.value = contextValue
        }
        break        

    case 'checkbox':
        control = document.createElement('input')
        control.setAttribute('type', 'checkbox')


        //console.log('CHECKBOX:', control, labelText)

        //label.classList.remove(_labelClass)
        label.innerHTML = ''
        label.appendChild(control)
        label.appendChild(document.createTextNode(` ${labelText}`))

        control.addEventListener('change', () => {            
            this._onElemEvent(p)
        })

        div.appendChild(label)

        container.appendChild(div)

        p.elem = control
        p.labelElem = label

        // FIX - генерация события?
        if (p.contextVar) {
            contextValue = this._context[p.contextVar]
            p.elem.value = contextValue
        }
        break

    //case 'custom-list':
      //  p.custom.create()
        //break

    case 'model':
        //label.style.borderBottom = "1px solid #ddd"
        //label.style.paddingBottom = "5px"
        //p.cover.appendChild(label)

        p.modelOptions.forEach(type => {
            type.container = p.cover
        })
        p.model = new Model(p.modelOptions)


        // FIX - генерация события?
        if (p.contextVar) {
            contextValue = this._context[p.contextVar]
            this._fillOptionsField(p, contextValue)
        } else if (p.data) {
            this._fillOptionsField(p, p.data)
        } else if (p.getData) {
            this._fillOptionsField(p, p.getData())
        } else if (p.caching) {
            let cached;
            //console.log(p.cache, p.loadFuncContextParam)
            if (p.getLoadFuncArg) {
                let arg = p.getLoadFuncArg(p.form.selected)
                cached = p.cache.get(arg)
            } else {
                cached = p.cache.get()
            }
            //console.log(cached)
            if (cached) {
                this._fillOptionsField(p, cached)
            }
        }


        //if (p.changeType == 'few') {
            p.model.onChange = () => {
                this._onElemEvent(p)
            }
        //}
        //p.model

        container.appendChild(p.cover)
        break
    }

    // Отключаем readonly поля при генерации формы (генерация главной формы или 
    // клик по ссылке "добавить")
    if (p.editmode == Form.READONLY && !p.loadFunc) {
        this._disableField(p) 
    }

    p.form.fields[p.name] = p
}

// fix - if initedor not inited
Form.prototype._removeField = function(p) {
    //console.log('_removeField:', p.name)
    let upd = {}

    upd = Object.assign(upd, this._removeDependentFields(p))
    
    if (p.type == 'list') {
        this._removeForm(p)

        // Удаляем элементы связанные со списком items
        p.btnShow = undefined
        p.btnDiv = undefined
        p.btnRemove = undefined
        p.container = undefined
        p.arr = []

        p.cover.remove()
    } else {
        if (p.optionContainer) {
            p.optionContainer = undefined
        }
        // checkbox
        if (p.labelElem) {
            p.labelElem = undefined
        }
       
            //p.custom.reset()
        if (p.model) {
            p.model = undefined
        }
        
        p.elem = undefined

        if (Array.isArray(p.elems)) {
            p.elems = []
        }
        
        if (p.cover) {
            p.cover.remove()
        }

        if (p.selected) {
            p.selected = undefined
        }

        // Срос загружающихся в данный момент
        if (p.loading) {
            p.loading = false
            p.paramSignature = undefined
            p.form.loadingCount--
            this._loadingCount--
        }
    }

    delete p.form.fields[p.name]

    upd[p.name] = undefined

    return upd
}


Form.prototype._buildFork = function(t, form) {
    if (!t) {
        return
    }
    let roads = new Map()

    //console.log('build FORK:', t)

    t.roads.forEach(b => {
        let road = {
            //templateId: b.templateId,
            //templates: b.templates,
            value: b.value,
            values: b.values,
            init: b.init,
            cleanup: b.cleanup,
            //schema: b.schema,
        }

        road.schema = this._buildTree(b.schema, form)
        //branch = Object.assign(branch, tmp)

        if (b.value !== undefined) {
            roads.set(b.value, road)
        } else if (Array.isArray(b.values)) {
            b.values.forEach(value => {
                roads.set(value, road)
            })
        } else {
            throw new Error(`'value' or 'values' option required in road settings`)
        }
    })
    
    return {
        getValue: t.getValue,
        roads: roads,
        //container: t.container,            
    }
}


/*
Form.prototype.getObj = function(schema) {
    let x = this._getObj(schema)
    //console.log('getObj:', x)
    return x
}
*/

Form.prototype._createMainForm = function() {
    //console.log('create main form')
    let schema = this._schema
    let formContainer = this._formContainer

    formContainer.innerHTML = ''

    let divFields = document.createElement('div')
    divFields.setAttribute('class', 'form-group')

    let divButtons = document.createElement('div')
    divButtons.style.marginTop = '1.5rem'
    //divButtons.setAttribute('class', 'buttons-group')
    //divButtons.style.display = 'flex'
    //divButtons.style.justifyContent = 'space-between'

    let btnSubmit = document.createElement('button')
    btnSubmit.setAttribute('class', 'btn btn-outline-success')
    btnSubmit.textContent = this._btnSubmitText
    //btnSubmit.disabled = true fix

    this._btnSubmit = btnSubmit
    this._btnSubmit.addEventListener('click', () => {
        if (this._error) {
            this._error.remove()
        }
        //lett dirty = this.getObj(this._schema)

        //let cleanData = this.cleanObj(dirty)
        //console.log('CLEAN FORM DATA:', this.form.selected)


        if (this._validate) {
            let err = this._validate(this.form.selected)
            if (err) {
                this.showError(err)
            }
        }

        if (this._onSubmit) {
            //this._onSubmit(this._clean)
            this._onSubmit(JSON.parse(JSON.stringify(this.form.selected)))
        }

        /*
        if (this._api) {
            let func, successFunc

            switch (this._mode) {
                case filling:
                    func = this._submitFunc
                    successFunc = this._onSubmitSuccess
                    //console.log('filling: func:', func)
                    break

                case editing:                    
                    func = this._updateFunc
                    successFunc = this._onUpdateSuccess
                    //console.log('editing: func:', func)
                    break
            }
  
            if (func) {
                let snapshotStr = JSON.stringify({
                    version: this._version,
                    clean: this.form.selected,
                    signature: this._signature,
                    mode: this._mode,
                })

                this._api.req({
                    func: func,
                    //data: this._clean,
                    data: this.form.selected,
                    onError: err => {
                        this.restore(snapshotStr)
                        this.showError(err)
                    },
                    onSuccess: resp => {
                        //this.reset()
                        if (successFunc) {
                            successFunc(resp)
                        }                    
                    }
                })
            }
        }
        */
    })

    divButtons.appendChild(btnSubmit)

    let btnRemove = document.createElement('button')
    // ml-5 отступ
    btnRemove.setAttribute('class', 'btn btn-outline-danger ml-5')
    btnRemove.textContent = this._btnRemoveText
    btnRemove.hidden = true

    this._btnRemove = btnRemove

    btnRemove.addEventListener('click', () => {
        if (this._onRemove) {
            this._onRemove()
        }
    })

    divButtons.appendChild(btnRemove)

    this._createSchemaObjects(schema, {append: divFields})

    formContainer.appendChild(divFields)
    formContainer.appendChild(divButtons)



    //console.log('MAIN FORM CREATED!')

    this._signature = JSON.stringify(this.form.selected)
    //this._initSignature =  this._signature
    this._initSnapshot = JSON.stringify({
        version: this._version,
        clean: this.form.selected,
        signature: this._signature,
        mode: this._mode,
    })

    if (!this._enableSubmit) {
        this._btnSubmit.disabled = true
    }

    //console.log("INIT SIGNATURE:", this._signature)
}



Form.prototype._onFormDataChanged = function() {
    this._version++
    // рекурсивно обновляем родительскую коллекцию
    // Считаем подпись
    //let y = this.getObj(this._schema)
    let newSignature = JSON.stringify(this.form.selected)
    /////console.log('SIGNATURE:', newSignature)

    if (this._signature != newSignature) {
        this._btnSubmit.disabled = false
    } else {
        if (!this._enableSubmit) {
            this._btnSubmit.disabled = true
        }
    }
    //let snapshot = 
/*
    localStorage.setItem('x', JSON.stringify({
        signature: this._signature,
        obj: y,
        btnSubmit: this._btnSubmit.disabled,
        mode: this._mode
    }))
    */
}



/*
<div class="form-group">
    <label>ain devices</label>
    <div id="ainDevices"></div>

    // remove + add
    <div class="form-group">
        <button id="add-ain-device" class="btn btn-link">добавить</button>
    </div>
</div>
*/


Form.prototype._createForm = function(schema, formContainer) {
    //console.log('CREATE:', formContainer)
    formContainer.innerHTML = ''

    /*
    let divFields = document.createElement('div')
    divFields.setAttribute('class', 'form-group')

    let divButtons = document.createElement('div')
    divButtons.setAttribute('class', 'buttons-group')

    let btnSubmit = document.createElement('button')
    btnSubmit.setAttribute('class', 'btn')
    btnSubmit.textContent = btnAddText

    let btnClose = document.createElement('button')
    btnClose.setAttribute('class', 'btn btn-link')
    btnClose.textContent = 'close'

    divButtons.appendChild(btnSubmit)
    divButtons.appendChild(btnClose)
    */

    this._createSchemaObjects(schema, {append: formContainer})

    //formContainer.appendChild(divFields)
    //formContainer.appendChild(divButtons)

    return {
        fieldsContainer: formContainer,
        //btnSubmit: btnSubmit,
        //btnClose: btnClose
    }
}

//Form.prototype._createSchemaObjects = function(formId, schema, formContainer) {
Form.prototype._createSchemaObjects = function(schema, anchors) {
    //console.log('_createSchemaObjects...')

    let container;
    if (anchors.append) {
        container = anchors.append
    } else {
        container = document.createDocumentFragment()
    }
    //console.log('create objects:', formId) //, schema)
    schema.forEach(p => {
        //let container = document.getElementById(p.containerId)
        //if (!container) {
          //  throw new Error(`container '${p.containerId}' not found`)
        //}

        if (p.type == 'list') {
            this._createList(p, container)
        } else {
            this._createField(p, container)
        }

        
    })
    
    if (anchors.after) {
        anchors.after.parentNode.insertBefore(container, anchors.after.nextSibling)
    }


    //this._onAnyChange()
    //this._calcSignature()
    

    //console.log('_createSchemaObjects:', opt)
    // Загружаем все AJAX-элементы топ уровня (которые ни от кого не зависят)
    // fix
    /*
    this._chains.forEach(c => {
        if (!c.func) {
            return
        }
        this._loadData(item)
    })
*/
}

// Заполняем поле вариантами на выбор  
Form.prototype._fillOptionsField = function(p, list) {
    switch (p.type) {
    case 'select':
        p.elem.innerHTML = ''
        //console.log('innerHTML')
        // пустой option
        p.elem.appendChild(document.createElement('option'))
        //console.log('append empty option')

        if (Array.isArray(list)) {
            list.forEach(x => {
                let value

                if (p.scalar) {
                    value = x
                } else {
                    value = x[p.name]
                }

                let option = document.createElement('option')
                option.innerHTML = p.getName(x)
                option.value = value

                p.elem.appendChild(option)

                //console.log('append value option')
            })
        }
        break
    
    case 'checkboxes':
        if (Array.isArray(list)) {
            list.forEach(x => {
                let cb = document.createElement('input')
                cb.setAttribute('type', 'checkbox')
        
                let cbLabel = document.createElement('label')
                //cbLabel.style.paddingTop = '5px'
                //cbLabel.style.paddingBottom = '5px'
        
                cbLabel.appendChild(cb)
                cbLabel.appendChild(document.createTextNode(` ${p.getName(x)}`))
        
                p.optionContainer.appendChild(cbLabel)
        
                p.elems.push(cb)
            })
        }

        p.elems.forEach(checkbox => {
            checkbox.addEventListener('change', () => {
                this._onElemEvent(p)
            })
        })

        break

    case 'radios':
        if (Array.isArray(list)) {
            list.forEach(x => {
                let cb = document.createElement('input')
                cb.setAttribute('type', 'radio')
                cb.setAttribute('name', p.name)
        
                //cb.addEventListener('click', () => {
                //  this._onElemEvent(p, x) // fix
                //})
        
                let cbLabel = document.createElement('label')
                //cbLabel.style.paddingTop = '5px'
                //cbLabel.style.paddingBottom = '5px'
        
                cbLabel.appendChild(cb)
                cbLabel.appendChild(document.createTextNode(` ${p.getName(x)}`))
        
                p.optionContainer.appendChild(cbLabel)
        
                p.elems.push(cb)
                //p.selected = undefined
            })
        }

        p.elems.forEach(radio => {
            radio.addEventListener('click', () => {
                //console.log('RADIO CLICKED', p.selected)
                if (p.selected) {
                    if (p.selected == radio) {
                        radio.checked = false
                        p.selected = undefined
                    } else {
                        p.selected.checked = false
                        p.selected = radio
                    }
                } else {
                    radio.checked = true
                    p.selected = radio
                }
                //console.log('RADIOS ON ELEM EVENT')
                this._onElemEvent(p)
            })
        })
        //console.log('RADIO ELEMS:', p.elems)
        break

    //case 'custom-list':
      //  p.custom.setList(list)
// /        break

    case 'model':
        //console.log('FILL OPTION FIELDS', list)
        p.model.add(p.modelType, list)
        //if (Array.isArray(list)) {
          //  list.forEach(x => {
                
            //})
        //}
        break

    default:
        throw new Error(`bug: unknown property type ${p.type}`)
    }

    p.valueObjects = list
}

/*
Form.prototype._fillCheckboxes = function(p, list) {
    
}


Form.prototype._fillRadios = function(p, list) {
    
}

*/




Form.prototype._createList = function(p, fieldsContainer) {
    //console.log('create list')

/*
    let container = document.getElementById(p.containerId)
    if (!container) {
        throw new Error(`container '${p.containerId}' not found`)
    }
    */
    let labelText = p.name
    if (p.label) {
        labelText = p.label
    }

    let div = document.createElement('div')
    div.setAttribute('class', 'form-group')
    //div.style.border = '1px solid #ddd'

    p.cover = div

    let label = document.createElement('label')
    label.setAttribute('class', 'list-header')
    label.textContent = labelText
    label.style.borderBottom = '1px solid #ddd'
    label.style.paddingBottom = '5px'

    label.classList.add(_labelClass)

    let arrContainer = document.createElement('div')
    //arrContainer.setAttribute('class', 'form-group')

    arrContainer.textContent = p.emptyListMsg

    p.container = arrContainer


    let btnWrapper = document.createElement('div')
    btnWrapper.setAttribute('class', 'form-group')

    //let btn = document.createElement('button')
    //btn.textContent = 'добавить...'
    //btn.setAttribute('class', 'btn btn-link')

    let btnDiv = document.createElement('div')
    btnDiv.setAttribute('class', 'show-link')
    btnDiv.style.marginTop = '0.75rem'

    let btn = document.createElement('a')
    btn.textContent = '+ добавить'
    btn.setAttribute('href', '#')
   
    
    let addBtnDiv = document.createElement('div')
    //addBtnDiv.style.marginTop = '0.5rem'
    //addBtnDiv.style.marginBottom = '0.5rem'

    addBtnDiv.appendChild(btn)

    //console.log('btn', btn)

    btnDiv.appendChild(addBtnDiv)

    p.btnShow = btn
    p.btnDiv = btnDiv // для вставки сообщений об ошибке сразу после btnDiv, но внутри form-group


    p.btnRemove = document.createElement('button')
    p.btnRemove.textContent = 'удалить'
    p.btnRemove.style.color = 'white'
    p.btnRemove.style.backgroundColor = '#ff6961'
    p.btnRemove.setAttribute('class', 'btn')
    p.btnRemove.hidden = true

    p.btnRemove.addEventListener('click', () => {
        this._removeCheckedObjects(p)
        p.btnRemove.hidden = true
        //p.btnShow.hidden = false
    })

    //btnWrapper.appendChild(btn)
    btnWrapper.appendChild(btnDiv)
    btnWrapper.appendChild(p.btnRemove)
    
    div.appendChild(label)
    //div.appendChild(document.createElement('hr'))
    div.appendChild(arrContainer)
    div.appendChild(btnWrapper)

    //container.appendChild(div)

    fieldsContainer.appendChild(div)

    //p.btnSubmit = btn
    //p.container = arrContainer

    p.arr = []

    btn.addEventListener('click', (e) => {
        e.preventDefault()

        if (p.selected) {
            this._select(p, p.selected)
        }

        // Одновременный select
        this._createListItem(p)
        

//        console.log('NEEEEEEEEEEEW ITEEEEEEEEM:', item)


        //this._select(p, p.arr[p.arr.length - 1])
        //let item = p.arr[p.arr.length - 1]
        //item.select.classList.add(p.activeClass)
        //p.selected = item
        //console.log('PUSHED:', item)
        //this._openForm(p)
    })

    //if (this._inEditMode) {
    if (this._mode == editing) {
        if (p.isEditable) {
            btn.hidden = false
        } else {
            btn.hidden = true
        }
    }

    p.form.fields[p.name] = p
}

Form.prototype._createNestedForm = function(t, obj) {
    let formContainer;
            
    if (t.formContainerId) {
        formContainer = document.getElementById(t.formContainerId)
        if (!formContainer) {
            throw new Error(`form container '${t.formContainerId}' not found`)
        }
        formContainer.hidden = false
    } else {
        formContainer = document.createElement('div')
        formContainer.setAttribute('class', t.formContainerClass)

        //formContainer.style.borderLeft = '4px solid #72bcd4'
        //formContainer.style.border = '1px solid #eee'
        formContainer.style.padding = '1rem'
        formContainer.style.marginLeft = '-1rem'
        formContainer.style.marginRight = '-1rem'
        formContainer.style.backgroundColor = '#e8f4f8'
        //formContainer.hidden = true
        t.cover.appendChild(formContainer)
    }
    // fix add showForm()

    t.formContainer = formContainer


    t.dirty = {}

    // fix - return ?
    let r = this._createForm(t.schema, formContainer)

    t.isFormOpened = true

    t.schema.forEach(p => {
        this._setFieldValue(p)
    })
}

Form.prototype._openForm = function(t) {
    //console.log('LOADER clean:', JSON.stringify(t.selected.clean))
    let loader = new Loader({
        api: this._api,
        t: t,
        clean: t.selected.clean,
        context: this._context,
        onError: err => {
            //console.log('Loader.err: ', err)
        },
        onLoaded:() => {
            this._createNestedForm(t)            
        }
    })

    loader.load()

    //console.log('OOOOOOOOOOOOOOOOPEN FORM:', p.isFormOpened)
    /*
    if (t.isFormOpened) {
        this._reset(t)
    } else {
        //console.log('show form')

        let formContainer;
            
        if (t.formContainerId) {
            formContainer = document.getElementById(t.formContainerId)
            if (!formContainer) {
                throw new Error(`form container '${t.formContainerId}' not found`)
            }
            formContainer.hidden = false
        } else {
            formContainer = document.createElement('div')
            formContainer.setAttribute('class', t.formContainerClass)
            //formContainer.hidden = true
            t.cover.appendChild(formContainer)
        }
        // fix add showForm()

        t.formContainer = formContainer

        // fix - return ?
        let r = this._createForm(t.schema, formContainer)


        this._loadDataForCustomElems(t.schema)
*/
        ////////////////////////



        ////////////////////////

        //if (p.formContainer) {
        //    p.formContainer.hidden = false
        //} else if (p.showForm) {
        //    p.showForm()
            //p.isFormOpened = true
        //} else {
            // create container

        //}
        //btn.textContent = 'скрыть'
        //p.btnShow.hidden = true
/*

        t.isFormOpened = true
    }

    // Всегда инициатор, ибо если форма уже была открыта и грузилась - _reset все сбросил
    //t.upd = {}
    
    t.schema.forEach(p => {
        this._setFieldValue(p)
    })

    */
    //if (t.loadingCount == 0) {
    //    this._onFormLoaded(t)
    //}

    //console.log('EEEEEEND OF OOOOOOOOOOOOOOOOPEN FORM:', p.isFormOpened)
}

/*
Form.prototype._closeForm = function(t) {
    this._removeForm(t)    
    t.arr = []
}
*/

// FIX разделить на топ и вложенные, топ снимаем выделение со списка, вложенный обнуляем arr
Form.prototype._removeForm = function(t) {
    //console.log('_removeForm')
    //console.log('CLOOOOOOOOOOOOOOOOSE FORM:', p)
    if (!t.isFormOpened) {
        return
    }

    t.schema.forEach(p => {
        this._removeField(p)
    })
    // скрываем если форма открыта    
    if (t.formContainerId) {
        // внешний div, в документе
        t.formContainer.hidden = true
        t.formContainer.innerHTML = ''        
    } else if (t.hideForm) {
        t.hideForm()        
    } else {
        // inline форма - просто удаляем
        t.formContainer.remove()
    }

    t.fields = {}
    t.settingObj = undefined
    t.upd = undefined
    t.selected = undefined
    t.dirty = {}

    if (t.loadingCount > 0) {
        throw new Error(`Bug: form.loadingCount=${t.loadingCount} after remove fields`)
    }


    t.isFormOpened = false
}

Form.prototype._select = function(t, item) {
    let selected = t.selected
    if (t.selected) {
        t.selected.select.classList.remove(t.activeClass)            
    }
    this._removeForm(t)

    if (selected != item) {
        item.select.classList.add(t.activeClass)
        t.selected = item

        this._openForm(t)
    }
}

Form.prototype._check = function(p) {
    if (p.btnRemove) {
        let q = 0
        p.arr.forEach(item => {
            if (item.checkbox && item.checkbox.checked) {
                q++
            }
        })

        //console.log('checked:', q)

        if (q > 0) {
            //p.btnShow.hidden = true
            p.btnRemove.hidden = false
            p.btnShow.hidden = true
        } else {
            p.btnRemove.hidden = true
            p.btnShow.hidden = false
        }
    }
}

Form.prototype._buildItem = function(p, clean) {
    //console.log('buildItem:', p.name, JSON.stringify(clean))

    let item = {
        clean: clean || {},
    }

    if (clean === undefined) {
        // Создаем пустой item
        item.clean.itemName = p.getItemName()
    }

    let row = document.createElement('div')
    row.style.paddingTop = '3px'
    row.style.paddingBottom = '3px'

    let checkbox = document.createElement('input')
    checkbox.setAttribute('type', 'checkbox')

    let select = document.createElement('div')
    select.style.display = 'inline'
    select.style.padding = '7px'
    select.style.marginLeft = '5px'
    //select.textContent = p.getItemName(obj)
    // dirty - object or undefined

    //let itemName = p.getItemName(p.dirty)
    //item.clean.itemName = itemName
    //select.innerHTML = p.getItemName(dirty)

    select.innerHTML = item.clean.itemName

    row.appendChild(checkbox)
    row.appendChild(select)

    item.elem = row
    item.select = select
    item.checkbox = checkbox

    // Область для select кликов
    select.style.cursor = 'pointer'
    select.addEventListener('click', () => {
        //if (this._loadingCount == 0) {
            //console.log('SELECT ITEM:', JSON.stringify(item.clean))
        this._select(p, item)
        //}        
    })
   
    // Чекбоксы
    checkbox.setAttribute('type', 'checkbox')
    checkbox.addEventListener('change', () => this._check(p))
    
    return item
}



Form.prototype._insertItem = function(p, item) {    
    // Удаляем надпись emptyListMsg
    if (p.arr.length == 0) {
        p.container.innerHTML = ''
    }

    // вставляем в массив
    p.arr.push(item)

    if (!p.isEditable) {
        item.checkbox.disabled = true
    }
    // вставляем в DOM  
    p.container.appendChild(item.elem)
}


Form.prototype._up = function(p) {
    let cleanList = [];

    // цикл по items
    p.arr.forEach(x => {
        cleanList.push(x.clean)
    })
    
    let t = p.form

    if (t.type == 'list') {
        let item = t.selected
        if (item === undefined) {
            return // fix bug
        }

        item.clean[p.name] = cleanList

        this._up(t)
    } else {        
        this.form.selected[p.name] = cleanList

        // calc signature
        this._onFormDataChanged()
    }
}

// Для использования в setFieldValue
// Метод создает item, но не запускает уведомление родителя (ибо уже там есть) и 
// не выбирает (select) добавленный элемент
Form.prototype._appendListItem = function(p, clean) {
    //console.log('pushObject into:', p.name, JSON.stringify(clean))

    let item = this._buildItem(p, clean)
    // FIX обновляем имя в списке объектов
    //item.select.textContent = p.getItemName(obj)
    //item.select.innerHTML = p.getItemName(obj)

    // добавляем новый
    this._insertItem(p, item)
}


Form.prototype._createListItem = function(p) {
    //console.log('pushObject into:', p.name)

    // вместо clean and dirty - undefined
    let item = this._buildItem(p)
    // FIX обновляем имя в списке объектов
    //item.select.textContent = p.getItemName(obj)
    //item.select.innerHTML = p.getItemName(obj)

    // добавляем новый
    this._insertItem(p, item)

    this._select(p, item)

    this._up(p)
}

// recursiveUpdateField
// clean и dirty - объекты вида {name: value}
Form.prototype._updateListItem = function(p, upd) {
    if (p.type == 'list') {
        //console.log(p)

        let item = p.selected

        // Обновляем рекурсивно до топ уровня
        if (item === undefined) {
            throw new Error(`Bug: updateListItem of non selected item`)
        }

        for (let k in upd) {
            let v = upd[k]
            if (v === undefined) {
                //console.log('DELETE PROP:', k, ' IN:', obj)
                delete item.clean[k]
            } else {
                item.clean[k] = v
            }
        }

        let itemName = p.getItemName(p.dirty)

        item.clean.itemName = itemName

        //item.select.textContent = p.getItemName(item.obj)
        item.select.innerHTML = itemName

        this._up(p)
    } else {
        for (let k in upd) {
            let v = upd[k]
            if (v === undefined) {
                delete this.form.selected[k]
            } else {
                this.form.selected[k] = v
            }
        }

        this._onFormDataChanged()
    }
}


Form.prototype._removeCheckedObjects = function(p) {
    if (Array.isArray(p.arr)) {
        let filtered = []
    
        p.arr.forEach(item => {
            if (item.checkbox && item.checkbox.checked) {
                // Снимаем выделение
                if (p.selected == item) {
                    this._select(p, p.selected)
                }

                p.container.removeChild(item.elem)
            } else {
                filtered.push(item)
            }
        })

        p.arr = filtered

        if (p.arr.length == 0) {
            p.container.textContent = p.emptyListMsg
        }

        p.btnShow.hidden = false


        this._up(p)
        /*
        if (p.form.type == 'list') {
            //this._pushObject(p.form, this.getObj(p.form.schema))
            let upd = {}, objectList = [];

            p.arr.forEach(item => {
                objectList.push(item.obj)
            })
            upd[p.name] = objectList
            
            this._updateObject(p.form, upd)
        } else {
            //this._onFormLoaded(this.form)
            this._onFormDataChanged()
        }
        */
    }
}


Form.prototype._removeDependentFields = function(p) {
    //console.log('_removeDependentFields')

    let upd = {}
    if (Array.isArray(p.chains)) {
        // d - depends
        p.chains.forEach(d => {
            upd = Object.assign(upd, this._removeField(d))
        })
    }

    let fork = p.fork

    if (fork) {
        //upd = Object.assign(upd, this._resetFork(p.fork))        

            //console.log('RESET ROAD:', schema)
        let cur = fork.current
        if (!cur) {
            return
        }

        cur.schema.forEach(d => {
            upd = Object.assign(upd, this._removeField(d))
        })

        if (cur.cleanup) {
            cur.cleanup()
        }

        fork.current = undefined        
    }
    return upd
}






// c - custom property
Form.prototype._onElemEvent = function(c) {
    let form = c.form;

    if (form.reseting) {
        return
    }

    // Достаем объект и затем ID
    let tmp = this._getObjectValue(c)

    let cleanValue = tmp.clean
    let dirtyValue = tmp.dirty


    form.dirty[c.name] = dirtyValue

    // ?

    //console.log('ON ELEM EVENT:', c.name)
    //console.log('cleanValue:', cleanValue)
    //console.log('dirtyValue:', dirtyValue)

    // bubble update
    let upd = {}
    upd[c.name] = cleanValue
    this._updateListItem(form, upd)

    // Очищаем зависимые цепочки и развилки, а сам объект события не трогаем
    // FIX обновляем цепочки внутри метода или как сейчас?
    //let upd = Object.assign(upd, )
    this._removeDependentFields(c)

    //console.log('SELECTED OBJECT:', form.selected)
    
    if (dirtyValue !== undefined) {
        // Общий контейнер для всех новых полей
        let container = document.createDocumentFragment()
        
        c.chains.forEach(d => {
            // создаем DOM элементы
            this._createField(d, container)

            if (d.loadFunc) {
                this._loadData(d)
            } else if (d.data) {
                this._fillOptionsField(d, d.data)
                this._setFieldValue(d)
            } else {
                this._setFieldValue(d) // FIX ????
            }
        })

        let f = c.fork
        if (f) {
            let cleanId = cleanValue
            if (f.getValue) {
                // ВАЖНО!
                // getValue на вход получает объект целиком
                cleanId = f.getValue(dirtyValue)
            }

            //console.log('fork clean param:', cleanId)

            // затем устанавливаем новую (если есть)
            let road = f.roads.get(cleanId)
            if (road) {
                //console.log('SET CURRENT ROAD:', JSON.stringify(road))

                if (road.init) {
                    road.init()
                }
                //console.log('CONTAINER:', c.cover)
                this._createSchemaObjects(road.schema, {after: c.cover})

                // в цикле для  custom элементов загружаем loadFunc
                road.schema.forEach(x => {
                    if (x.loadFunc) {
                        this._loadData(x)
                    } else {
                        this._setFieldValue(x)
                    }
                })

                f.current = road

                //road.schema.forEach(x => {
                    //this._setFieldValue(x)
                //})
            }
        }        
        // Вставляем все новые поля после поля события
        c.cover.parentNode.insertBefore(container, c.cover.nextSibling)
    }

    if (c.onChange) {
        c.onChange(dirtyValue)
    }
}


// Загружает данные для построения формы (openForm, init, _select)
// Опциональный объект с уже заполненными полями - clean
function Loader(opt) {
    if (!opt.t.selected) {
        throw new Error(`Where is selected?`)
    }
    this._counter = 0
    this._api = opt.api
    // Для отслеживания - переключил юзер item или нет пока загружались данные
    // и для доступа к схеме
    this._t = opt.t
    // Для отслеживания - переключил юзер item или нет пока загружались данные
    this._selected = this._t.selected
    this._clean = opt.clean || {}
    this._context = opt.context
    
    this._onError = opt.onError
    this._onLoaded = opt.onLoaded
}

// Метод загружает данные и добавляем в кэш элементов. Не занимается отображением данных
Loader.prototype._loadElem = function(p, id) {
    // Если значение уже закешировано - запрос не отправляем
    if (p.caching) {
        let v = p.cache.get(id)
        if (v) {
            return
        }
    }

    this._counter++

    //let arg;
    if (p.getLoadFuncArg) {
        // параметр функции - это объект-снимок формы со всеми заполненными полями 
        // на текущий момент. Форма та, которой принадлежит свойство p.
        id = p.getLoadFuncArg(this._selected) // FIX whole form object
    } 
    
    console.log(`_loadElem: ${p.name} = ${JSON.stringify(id)}`)

    this._api.req({
        func: p.loadFunc,
        data: id,
        onError: err => {
            //console.log(err)
            // Прерываем загрузку
            this._onError(err)
        },
        onSuccess: resp => {
            //console.log(resp)
            if (p.responseModifier) {
                resp = p.responseModifier(resp)
            }
            // Добавляем в кэш
            if (p.loadFuncContextParam) {
                p.cache.set(undefined, resp)
            } else {
                p.cache.set(id, resp)
            }

            // resp - это список объектов (например список checboxes или options в select)
            // this._clean - это заполненные поля (ID-шники)
            // нужна функция, которая из списка объектов методом найдет нужный по ID
            // (методом перебора).


            let cleanValue = this._clean[p.name]
            let dirtyValue = this._findSelectedObject(p, resp, cleanValue)

            if (dirtyValue !== undefined) {
                if (Array.isArray(p.chains)) {
                    p.chains.forEach(d => {
                        //
                        if (d.loadFunc) {
                            this._loadElem(d)
                        }
                    })
                }

                let fork = p.fork
                if (fork) {
                    // 
                    let cleanId = cleanValue
                    if (fork.getValue) {
                        // ВАЖНО!
                        // getValue на вход получает объект целиком
                        cleanId = fork.getValue(dirtyValue)
                    }

                    //console.log('fork clean param:', cleanId)

                    // затем устанавливаем новую (если есть)
                    let road = fork.roads.get(cleanId)
                    if (road) {
                        road.schema.forEach(d => {
                            if (d.loadFunc) {
                                this._loadElem(d)
                            }
                        })
                    }
                }
            }

            this._counter--

            if (this._counter == 0) {
                if (this._selected == this._t.selected) {
                    this._onLoaded()
                }
            }
        }
    }) 
}

Loader.prototype._findSelectedObject = function(p, resp, id) {
    if (!Array.isArray(resp)) {
        return
    }
    if (p.scalar) {
        // это список id, а не список объектов
        if (p.type == 'checkboxes') {
            // fix добавить сюда модель с чекбоксами
            if (!Array.isArray(id)) {
                return []
            }
            let result = []

            // временный словарь для удобной фильтрации
            let checkedIDs = new Map()

            id.forEach(checkedID => {
                checkedIDs.set(checkedID, true)
            })

            let key = p.name
            if (p.key) {
                key = p.key
            }
            for (let i=0; i<resp.length; i++) {
                let v = resp[i]
                if (checkedIDs.has(v)) {
                    result.push(v)
                }
            }

            return result
        } else {
            for (let i=0; i<resp.length; i++) {
                if (resp[i] == id) {
                    return id
                }
            }
        }        
    } else {
        // это список объектов
        if (p.type == 'checkboxes') {
            // fix добавить сюда модель с чекбоксами

            // id - это список ID, а нам нужно найти список объектов            
            if (!Array.isArray(id)) {
                return []
            }
            let result = []

            // временный словарь для удобной фильтрации
            let checkedIDs = new Map()

            id.forEach(checkedID => {
                checkedIDs.set(checkedID, true)
            })

            let key = p.name
            if (p.key) {
                key = p.key
            }
            for (let i=0; i<resp.length; i++) {
                let v = resp[i]
                if (checkedIDs.has(v[key])) {
                    result.push(v)
                }
            }

            return result
        } else {
            for (let i=0; i<resp.length; i++) {
                let v = resp[i]
                if (v[p.name] == id) {
                    return v
                }
            }
        }
    }
}

Loader.prototype.load = function() {
    //console.log('LOADER.loading....')
    this._t.schema.forEach(p => {
        if (p.loadFunc) {
            if (p.loadFuncContextParam) {
                let param = this._context[p.loadFuncContextParam]
                this._loadElem(p, param)
            } else {
                this._loadElem(p)
            }
        }
    })

    if (this._counter == 0) {
        if (this._selected == this._t.selected) {
            this._onLoaded()
        }
    }
}


// po - parent object
Form.prototype._loadData = function(p) {
    
    let arg;
    if (p.getLoadFuncArg) {
        // параметр функции - это объект-снимок формы со всеми заполненными полями 
        // на текущий момент. Форма та, которой принадлежит свойство p.
        arg = p.getLoadFuncArg(p.form.selected, this.form.selected)
    }

    console.log(`_loadData: ${p.name} = ${JSON.stringify(arg)}`)

    let paramSignature = JSON.stringify(arg)

    //onsole.log('_LOAD DATA ____________________', p.name, p.caching)

    if (p.caching) {
        let list = p.cache.get(paramSignature)
        if (list) {
            //console.log('_loadData (from cache):', p, arg)

            // Заполняем поля выбора (select, radios, checkboxes) объектами из списка, 
            // который прислал сервер
            this._fillOptionsField(p, list)

            // Выбираем элемент(ы), если форма в режиме редактирования
            // если режим редактирования этой формы
            this._setFieldValue(p)
            // Закешированные данные нашли, поэтому выходим
            return
        }
        
    }

    if (p.loading) {
        if (p.paramSignature === paramSignature) {
            // Запрос уже отправлен, ничего не делаем
            // Пример такой ситуации: юзер кликнул по первому объекту, на сервер ушел запрос,
            // затем кликнул по второму объекту и снова по первому.
            return
        }
        // Обновляем только сигнатуру параметра, loadingCount уже увеличен, флаг loading уже выставлен
        p.paramSignature = paramSignature
    } else {
        p.loading = true
        p.paramSignature = paramSignature
        
        p.form.loadingCount++
        this._loadingCount++
    }
    
    //console.log('_loadData (loading...):', p, arg)

    this._api.req({
        func: p.loadFunc,
        data: arg,
        onError: err => {  
            if (!p.loading) {
                // UI элемент был удален, поэтому сообщение об ошибке не нужно
                // loadingCount уже сброшен при удалении элемента
                return
            }

            if (p.paramSignature !== paramSignature) {
                // Уже отправлен более свежий запрос, поэтому сообщение об ошибке не нужно
                return
            }

            p.loading = false
            p.paramSignature = undefined

            p.form.loadingCount--
            this._loadingCount-- 

            p.divLoadError = insertError({
                //after: item.elem.getAnchor(), 
                after: p.cover, 
                err: err,
                class: this._errorClass
            })
            
            //console.log(`item ${p.name} loaded. Loading count-- (error): ${this._loadingCount}`)

            //if (p.form.loadingCount == 0) {
            //    this._onFormLoaded(p.form)
            //}
        },
        onSuccess: resp => {
            if (!p.loading) {
                // UI элемент был удален, поэтому загруженные данные больше не нужны
                // loadingCount уже сброшен при удалении элемента
                //console.log(`_loadData: prop ${p.name} not loading`)
                return
            }

            if (p.paramSignature !== paramSignature) {
                // Уже отправлен более свежий запрос, поэтому загруженные данные больше не нужны
                //console.log(`_loadData: prop ${p.name} paramSignature changed (has: '${p.paramSignature}', expect: '${paramSignature}')`)
                return
            }

            p.loading = false
            p.paramSignature = undefined

            p.form.loadingCount--
            this._loadingCount-- 

            if (p.responseModifier) {
                resp = p.responseModifier(resp)
            }
            // Добавляем в кэш
            if (p.caching) {
                p.cache.set(paramSignature, resp)
            }

            //console.log(`item ${p.name} loaded. Loading count--: ${this._loadingCount}`)
            
            // Заполняем поля выбора (select, radios, checkboxes) объектами из списка, 
            // который прислал сервер
            this._fillOptionsField(p, resp)

            // Выбираем элемент(ы), если форма в режиме редактирования
            // если режим редактирования этой формы
            this._setFieldValue(p)
        }
    })
}






// FIX сделать метод локальным для формы?
Form.prototype._onFormLoaded = function(loader) {
    //console.log('ON_FORM_LOADED:', form, ' loadingCount:', this._loadingCount)
/*
    let t = loader.t

    
    if (t.selected != loader.selected) {
        return
    }


    // create form
    this._createSchemaObjects(t.schema)

    loader.onFormLoaded()

    t.schema.forEach(p => {
        this._setFieldValue(p, t.selected.clean, t.selected.dirty)
    })
    */

    //let upd = form.upd

    //form.settingObj = undefined
    //form.upd = undefined

    //this._updateObject(form, upd)

    //this.enable()

    // editing mode остается до reset формы
    // FIXXXXX
    /*
    if (this._mode == restoring) {
        this._mode = this._restoringMode
        this._signature = this._restoringSignature
        this._btnSubmit.disabled = this._restoringBtnSubmit

        this._restoringMode = undefined
        this._restoringMode = undefined
        this._restoringBtnSubmit = undefined
    }
    */

    //if (this._mode == editing) {
    //    if (!this.form.isEditable) {
            //this._btnSubmit.disabled = true
            //this._btnReset.disabled = true
     //   }
    //}

    //if (form.type != 'list') {

    //}
}

// Отключает все элементы формы во время загрузки данных с сервера
/*
Form.prototype.disable = function() {
    this._schema.forEach(p => {
        this._disableField2(p)
    })

    this._btnSubmit.disabled = true
    this._btnReset.disabled = true
}

Form.prototype.enable = function() {
    this._schema.forEach(p => {
        this._enableField2(p)
    })

    this._btnSubmit.disabled = false
    this._btnReset.disabled = false
}
*/

// Важный метод сбрасывает все поля главной формы и скрывает все открытые формы
Form.prototype.reset = function(opt) {
    //console.log('RESET')


    try {
        let snapshot = JSON.parse(this._initSnapshot)
        this._signature = JSON.stringify(snapshot.clean)    
        this.form.selected = snapshot.clean
    } catch (e) {
        //console.log(this)
        throw new Error(`form not initialized:`)
        this.form.selected = {}
    }

    

    this._reset(this.form)

    //this._btnSubmit.disabled = true

    this._mode = filling

    if (this._error) {
        this._error.remove()
    }


    //if (opt && opt.ignoreButtons) {
        if (!this._enableSubmit) {
            this._btnSubmit.disabled = true
        }
        this._btnSubmit.textContent = this._btnSubmitText

        this._btnRemove.hidden = true
    //}

    //this._onFormDataChanged()

    //console.log('reset mode:', this._mode)
    //console.log('reset clean:', this.form.selected)
}

// Метод сбрасывает значения всех элементов формы, удаляет зависимые элементы 
// и сбрасывает списки, а именно - очищает список, закрывает (удаляет) форму. 
// Причем форму закрывает рекурсивно, корректно удаляя все элементы вложенных форм.
// Сброс формы важен чтобы правильно очистить loadingCount, поле loading и т.д.
Form.prototype._reset = function(t) {
    //console.log('_RESET', t)

    // Флаг, который позволит в методе onElemEvent игнорировать события при 
    // сбросе формы
    t.reseting = true

    t.schema.forEach(p => {
        if (p.type == 'list') {
            //console.log('RESET LIST FIELD:', p)
            this._removeForm(p)
            
            // Делаем reset, не удаляя элементы ???

            p.arr = []
            p.container.innerHTML = ''
            p.container.textContent = p.emptyListMsg
            p.btnShow.hidden = false
            p.btnRemove.hidden = true
        } else {
            var contextValue

            if (p.contextVar) {
                contextValue = this._context[p.contextVar]                
            }

            switch (p.type) {
            case '':
                if (p.contextVar) {
                    p.value = contextValue
                    //console.log('"" CONTEXT VALUE:', p.value)


                    if (contextValue !== undefined) {
                        this.form.selected[p.name] = contextValue
                    } else {
                        delete this.form.selected[p.name]
                    }

                } else {
                    p.value = undefined
                }                
                break

            case 'line':
            case 'text':
                if (p.contextVar) {
                    p.elem.value = contextValue

                    if (contextValue !== undefined) {
                        this.form.selected[p.name] = contextValue
                    } else {
                        delete this.form.selected[p.name]
                    }
                } else {
                    p.elem.value = ''
                }

                if (p.editmode != Form.READONLY) {
                    p.elem.disabled = false
                }
                // fix dispachevent
                break

            case 'checkbox':
                if (p.contextVar) {
                    p.elem.value = contextValue
                } else {
                    p.elem.checked = false
                }
                
                if (p.editmode != Form.READONLY) {
                    p.elem.disabled = false
                }
                break

            case 'select':
                if (p.contextVar) {
                    this._fillOptionsField(p, contextValue)
                }

                if (p.valueObjects) {
                    if (p.valueObjects.length > 0) {
                        p.elem.selectedIndex = 0
                    } else {
                        p.elem.selectedIndex = -1
                    }
                    if (p.editmode != Form.READONLY) {
                        p.elem.disabled = false
                    }
                    p.elem.dispatchEvent(new Event('change'))
                }
                break

            case 'radios':
                if (p.contextVar) {
                    this._fillOptionsField(p, contextValue)
                }
                // fix context
                // fix dispachevent - if checked changed
                p.elems.forEach(elem => {
                    // fix - if checked
                    if (elem.checked) {
                        //elem.checked = false
                        //console.log('RADIOS reset: before click is checked', elem.checked)
                        elem.dispatchEvent(new Event('click'))
                        //console.log('RADIOS reset: after click is checked', elem.checked)
                    }

                    if (p.editmode != Form.READONLY) {
                        elem.disabled = false
                    }
                })
                break

            case 'checkboxes':
                if (p.contextVar) {
                    this._fillOptionsField(p, contextValue)
                }
                // fix context
                // fix dispachevent - if checked changed
                p.elems.forEach(elem => {
                    // fix - if checked
                    if (elem.checked) {
                        elem.checked = false
                    }

                    if (p.editmode != Form.READONLY) {
                        elem.disabled = false
                    }
                })
                break

            case 'model':
                // FIX - just enable?
                //p.model.enable()
                p.modelOptions.forEach(type => {
                    type.container = p.cover
                })
                p.model = new Model(p.modelOptions)
        
        
                // FIX - генерация события?
                /*
                if (p.contextVar) {
                    this._fillOptionsField(p, contextValue)
                } else if (p.data) {
                    this._fillOptionsField(p, p.data)
                } else if (p.getData) {
                    this._fillOptionsField(p, p.getData())
                } else {
                    let cached = p.cache.get()
                    if (cached) {
                        this._fillOptionsField(p, cached)
                    }
                }
        */
        
                //if (p.changeType == 'few') {
                    p.model.onChange = () => {
                        this._onElemEvent(p)
                    }
                break

            //case 'custom-list':
                // fix custom reset 
            //    break
            }
        }

        if (p.loading) {
            p.loading = false
            p.paramSignature = undefined
            
            t.loadingCount-- // form
            this._loadingCount--
        }

        this._removeDependentFields(p)
    })

    t.settingObj = undefined

    t.reseting = false
    //localStorage.removeItem('x')
}


Form.prototype.hideError = function() {
}




/*
Form.prototype.restore = function(s) {
    console.log('restore:', s)
    
    //if (!obj) {
    //    return
    //}

    if (this._waitingObj) {
        throw new Error(`Can't restoreObj while waiting`)
    }

    // ВАЖНО! 
    // Обнулять _loadingCount нельзя, ибо в данный момент может грузится форма
    this._mode = restoring
    this.form.settingObj = s.obj
    this._restoringSignature = s.signature
    this._restoringMode = s.mode
    this._restoringBtnSubmit = s.btnSubmit
    
    this._schema.forEach(p => {
        this._setFieldValue(p)
    })

    if (this._loadingCount > 0) {
        //console.log('disable while loading')
        //this.disable() // отключаем форму
        // Отключать ли submit?
    } else {
        console.log('restore, no loading elems')
        // fix btnsubmit
        this._onFormDataChanged()
        this._onFormLoaded() // fix
    }        
}
*/


// restore - восстанавливает mode, obj, signature и рассчитывает состояние кнопки
Form.prototype.restore = function(snapshotStr) {
    let snapshot = JSON.parse(snapshotStr)
    if (this._version == snapshot.version) {
        return
    }

    let obj = snapshot.dirty
    
    //console.log('restore:', obj)    

    //if (!obj) {
    //    return
    //}

    // Создаем копию объекта
    //obj = JSON.parse(JSON.stringify(obj))

    this.reset()

    this.form.selected = obj // ? fix что делать с дефолтами

    //this._cleanDirtyObject(this._schema, obj, this._clean)
    //this._cleanDirtyObject(this._schema, obj, this.form.selected.clean)

    //console.log('CLEANED:', this.form.selected.clean)

    //console.log('restoring')
    
    this._mode = snapshot.mode

    let loader = new Loader({
        api: this._api,
        t: this.form,
        clean: this.form.selected,
        context: this._context,
        onError: err => {
            //console.log('Loader.err: ', err)
        },
        onLoaded:() => {
            this._schema.forEach(p => {
                this._setFieldValue(p)
            })

            let newSignature = JSON.stringify(this.form.selected)

            this._signature = snapshot.signature

            if (this._signature != newSignature) {
                this._btnSubmit.disabled = false
            } else {
                if (!this._enableSubmit) {
                    this._btnSubmit.disabled = true
                }
            }

            //console.log('restored signature:', this._signature)
            
        }
    })

    loader.load()
}

// edit
Form.prototype.edit = function(obj, isRemoveAllowed) {
    
    //console.log('EDIT:', obj)    

    if (!obj) {
        return
    }

    obj = JSON.parse(JSON.stringify(obj))

    //this.hide()
    this.reset({
        ignoreButtons: true,
    })

    this.form.selected = obj // ? fix что делать с дефолтами


    //this.form.selected.dirty = obj
    //this.form.selected.clean = {}

    //this._cleanDirtyObject(this._schema, obj, this._clean)
    //this._cleanDirtyObject(this._schema, obj, this.form.selected.clean)

    //console.log('CLEANED:', this.form.selected.clean)

    //console.log('editing')

    this._mode = editing

    let loader = new Loader({
        api: this._api,
        t: this.form,
        clean: this.form.selected,
        context: this._context,
        onError: err => {
            //console.log('Loader.err: ', err)
            //this.show()
        },
        onLoaded:() => {
            this._schema.forEach(p => {
                this._setFieldValue(p)
            })

            this._signature = JSON.stringify(this.form.selected)
            if (!this._enableSubmit) {
                this._btnSubmit.disabled = true
            }
            this._btnSubmit.textContent = this._btnUpdateText

            if (isRemoveAllowed) {
                this._btnRemove.hidden = false
            }

            //console.log('edit.signature:', this._signature)
            //console.log('edit.mode:',  this._mode)

            //this.show()
        }
    })

    loader.load()
}


Form.prototype.fill = function(obj) {
    
    //console.log('fill:', obj)    

    if (!obj) {
        return
    }

    obj = JSON.parse(JSON.stringify(obj))

    this.reset()

    this.form.selected = obj // ? fix что делать с дефолтами

    //this.form.selected.dirty = obj
    //this.form.selected.clean = {}

    //this._cleanDirtyObject(this._schema, obj, this._clean)
    //this._cleanDirtyObject(this._schema, obj, this.form.selected.clean)

    //console.log('CLEANED:', this.form.selected.clean)

    this._mode = filling

    let loader = new Loader({
        api: this._api,
        t: this.form,
        clean: this.form.selected,
        context: this._context,
        onError: err => {
           /// console.log('Loader.err: ', err)
        },
        onLoaded:() => {
            this._schema.forEach(p => {
                this._setFieldValue(p)
            })

//            this._signature = JSON.stringify(this.form.selected.clean)
  //          this._btnSubmit.disabled = true

    //        console.log('edit:', this._signature)
        }
    })

    loader.load()
}


Form.prototype._setFieldValue = function(f) {
    if (f.loading) {
        //console.log(`prop ${f.name} loading`)
        return
    }

    let obj 
    
    if (this.form == f.form) {
        obj = f.form.selected
    } else {
        obj = f.form.selected.clean
    }

    let v = obj[f.name]

    //console.log(`_setFieldValue: ${f.name}=${v}`)

    if (f.type == 'list') {
        //this._openForm(f)

        if (Array.isArray(v)) {
            // fix
            v.forEach((itemObj, idx) => {
                //let cObj = cleanObj[f.name][idx]
                //this._appendListItem(f, cObj, dObj)
                this._appendListItem(f, itemObj)
            })
        }
        
        if (this._mode == editing) {
            if (!f.isEditable) {
                this._disableField(f)
            }
        }

    } else {
        switch (f.type) {  
        case 'checkboxes':
            // fix - event
            let checkedIDs = {}

            if (Array.isArray(v)) {
                v.forEach(x => {
                    checkedIDs[x] = true
                })
    
                if (f.scalar) {
                    f.valueObjects.forEach((item, idx) => {
                        //console.log('CHECK IF:', item, idx, checkedIDs)
                        if (checkedIDs[item]) {
                            f.elems[idx].checked = true
                        }
                    })
                } else {
                    let key = f.name
                    if (f.key) {
                        key = f.key
                    }
                    f.valueObjects.forEach((item, idx) => {
                        //console.log('CHECK IF:', item, idx, checkedIDs)
                        if (checkedIDs[item[key]]) {
                            f.elems[idx].checked = true
                        }
                    })
                }
            }
            break
    
        case 'radios':
            //console.log('RADIOS:', f.valueObjects)
            if (v && Array.isArray(f.valueObjects)) {
                for (let i=0; i<f.valueObjects.length; i++) {
                    let item = f.valueObjects[i]

                    if (f.scalar) {
                        if (item == v) {
                            let radio = f.elems[i]
                            //radio.checked = true
                            // Поле selected важно для снятия отметки при клике 
                            // на уже выделенном radio
                            //f.selected = radio
                            //console.log
                            radio.dispatchEvent(new Event('click'))
                            break
                        }
                    } else {
                        if (item[f.name] == v) {
                            let radio = f.elems[i]
                            //console.log('RADIOS: before click is checked', radio.checked)
                            radio.dispatchEvent(new Event('click'))
                            break
                        }
                    }
                }
            }
            break
        
        case 'select':
            f.elem.value = v
            f.elem.dispatchEvent(new Event('change'))
            break
    
        case '':
            f.value = v
            this._onElemEvent(f)
            break

        case 'line':
        case 'text':
            if (v !== undefined) {                
                if (f.dataType == 'hex') {
                    if (v) {
                        v = base64ToHex(v)
                    }
                } else if (f.dataType == 'int' && v === 0) {
                    v = ''
                }

                if (f.set) {
                    f.elem.value = f.set(v)
                } else {
                    f.elem.value = v
                }
            }
            //f.elem.dispatchEvent(new Event('input'))
            this._onElemEvent(f)
            break

        case 'checkbox':
            f.elem.checked = v
            f.elem.dispatchEvent(new Event('change'))
            break

        case 'model':
            //console.log('modelSelectType:', f.modelSelectType)
            //console.log('modelChangeType:', f.modelChangeType)
            

            if (f.modelChangeType == 'radio') {
                f.model.setSelected(f.modelSelectType, v)
            } else {
                f.model.checkList(f.modelSelectType, v)
            }
            this._onElemEvent(f)
            break
        }

        // Отключать поля можно только если форма в режиме редактирования (именно топ форма)
        if (this._mode == editing) {
            if (f.editmode == Form.UNEDITABLE) {
                this._disableField(f)
            }
        }
    }
}




function insertError(opt) {
    let div = document.createElement('div')
    if (opt.class) {
        div.className = opt.class
    }
    let msg;
    if (typeof opt.err == 'string') {
        msg = opt.err
    } else {
        msg = opt.err.message
    }
    div.textContent = msg

    if (opt.after) {
        opt.after.parentNode.insertBefore(div, opt.after.nextSibling)
    } else if (opt.before) {
        // например перед submit кнопкой
        opt.before.parentNode.insertBefore(div, opt.before)
    }
    return div
}

function base64ToHex(base64Str) {
    let buf = base64Decode(base64Str)
    let hexes = []
    buf.forEach(b => {
        let hex = b.toString(16)
        if (hex.length == 1) {
            hex = '0' + hex
        }
        hexes.push(hex)
    })
    return hexes.join(' ')
}

// принимает строку с опциональными пробелами между байтами
function hexToBytes(str) {
    let bytes = []
    let arr = str.split(' ')
    arr.forEach(elem => {
        if (elem == '') {
            return
        }
        if (elem.length % 2) {
            throw new Error("Wrong hex string")
        }
        // секции вида: 0c, ddff
        //console.log('elem:', elem)
        for (let i=0; i<elem.length; i+=2) {
            let hex = elem.substr(i, 2)
            //console.log('i:', i, 'hex:', hex)
            let num = parseInt(hex, 16)
            if (isNaN(num)) {
                throw new Error("Wrong hex string")
            }
            bytes.push(num)
        }        
    })
    return bytes
}


function base64Decode(text){
    if (!text) {
        return []
    }

    text = text.replace(/\s/g,"");

    if(!(/^[a-z0-9\+\/\s]+\={0,2}$/i.test(text)) || text.length % 4 > 0){
        throw new Error("Not a base64-encoded string.");
    }   

    //local variables
    var digits = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",
        cur, prev, digitNum,
        i=0,
        result = [];

    text = text.replace(/=/g, "");

    while(i < text.length){

        cur = digits.indexOf(text.charAt(i));
        digitNum = i % 4;

        switch(digitNum){

            //case 0: first digit - do nothing, not enough info to work with

            case 1: //second digit
                result.push(prev << 2 | cur >> 4);
                break;

            case 2: //third digit
                result.push((prev & 0x0f) << 4 | cur >> 2);
                break;

            case 3: //fourth digit
                result.push((prev & 3) << 6 | cur);
                break;
        }

        prev = cur;
        i++;
    }

    return result;
}

// fix - hide открытые вложенные формы
Form.prototype.hide = function() {
    this._formContainer.hidden = true
}

// fix - show открытые вложенные формы
Form.prototype.show = function() {
    this._formContainer.hidden = false
}