function openAddProperty() {
    pageselect('device-add-field-page');
    createSelectAddProperty(listPropertyAll);
    resetForm();
}

function createSelectAddProperty(propertyAllList) {
    let select = $('.selectAddProperty');
    select.empty();
    propertyAllList.forEach((item, index, array) => {
        if (!DevPropTable.columns(0).data()[0].find(elm => elm.devicePropertyKey === item.devicePropertyKey)) select.append(new Option(item.devicePropertyDescription, item.devicePropertyKey));
    });
    select.append(new Option("ПОЛЬЗОВАТЕЛЬСКОЕ ПОЛЕ", ""));
}

function resetForm() {
    $("#input10").val('');
    $("#input20").val('');
    $('#input10').prop('disabled', false);
    $(".selectAddProperty option").last().prop('selected',true);
    $('#input20').parent().find('.addProperty').remove();
    $('#input20').show();
}

function saveDevicePropertyField() {
    console.log("START saveDevicePropertyField");
    let keyField = document.getElementById("input10").value;
    let valueField = document.getElementById("input20").value;
    let descriptionField = $(".selectAddProperty option:selected").text();
    let item = listPropertyAll.find((item, index, arr)=>{return item.devicePropertyKey === keyField;})
    let typeFiled = "string"
    let enumsField = ''
    if (item) {
        typeFiled = item.devicePropertyType;
        enumsField = item.devicePropertyEnums;
    }
    DevPropTable.row.add( {
        "devicePropertyKey": keyField,
        "devicePropertyValue": valueField,
        "devicePropertyDescription": descriptionField,
        "devicePropertyType": typeFiled,
        "devicePropertyEnums": enumsField
    } ).draw();
    resetForm();
    customHistory.back();
}

function changeSelectAddProperty(data) {
    let value = data.value;
    $('#input10').val(data.value);
    $('#input20').parent().find('.addProperty').remove();
    $('#input20').show();
    $('#input20').val('');
    if (value === '' || value === 'events.USER_EVENT_') $('#input10').prop('disabled', false);
    else $('#input10').prop('disabled', true);
    let item = listPropertyAll.find((item, index, arr)=>{return item.devicePropertyKey === value;})
    if (item) {
        $('#input20').val(item.devicePropertyValue);
        $('#input20').hide()
        let dropDownList = $('<select class="addProperty" onchange="$(\'#input20\').val(this.value)"/>');
        if (item.devicePropertyType === "boolean") {
            $('<option />', {'value': 'true', 'text':  'TRUE'}).appendTo(dropDownList);
            $('<option />', {'value': 'false', 'text':  'FALSE'}).appendTo(dropDownList);
            dropDownList.val(item.devicePropertyValue);
            $('#input20').parent().append(dropDownList);
        }
        else if (item.devicePropertyType === "enum") {
            let arr = item.devicePropertyEnums.split(',');
            for (let i = 0; i < arr.length; i++) {
                $('<option />', {'value': arr[i], 'text':  arr[i]}).appendTo(dropDownList);
            }
            dropDownList.val(item.devicePropertyValue);
            $('#input20').parent().append(dropDownList);
        }
        else if (item.devicePropertyType === "date") {
            let elm =  $(`<input class="addProperty" type="datetime-local" value="${item.devicePropertyValue}" onchange="$(\'#input20\').val(this.value)"/>`)
            $('#input20').parent().append(elm);
        }
        else {
            $('#input20').parent().find('.addProperty').remove();
            $('#input20').show();
        }
    }
}