aswi2020vldc-gitlab/src/main/webapp/js/assemblyManageScripts.js @ a9e9c158

/**
 * Default action
 */
$(document).ready(function() {

    // init sorting
    $(".panel-wrapper").sortable({
        stop: function(event, ui) {
            // after switch place reindex parameters
            reindexParametrOrder();
        }
    }).disableSelection();

    // denny action with buttons with thrash icon
    $('.fa-trash-alt').click(function(event){
        event.preventDefault();
    });

    // add new collapse after click on button add-param-button
    $('#add-param-button').on('click', function () {
        addCollapse();
    });

    $('#permission-button').on('click', function () {
        addPermission();
    });

    // index parameters order
    reindexParametrOrder();

    // init actions for panel body
    initPanelBody();

});

/**
 * Get value from permission input and create new input
 */
function addPermission()
{
    var selectedRoleId = $('select[name=permission-select] option').filter(':selected').val();
    var selectedRoleValue = $('select[name=permission-select] option').filter(':selected').text();

    var addedRoles = $('.permission-role');

    var roles = [];

    // get assigned roles
    addedRoles.each(function () {
        roles.push($(this).val())
    });

    if (roles.includes(selectedRoleId))
    {
        return;
    }

    addPermissionRow(selectedRoleId, selectedRoleValue);
}


/**
 * Add new permission input
 * @param id
 * @param value
 */
function addPermissionRow(id, value){

    let row = document.createElement('div');
    row.classList.add('input-action-box', 'input-border-bottom', 'permission-row');

    let input = document.createElement('input');
    input.type = 'text';
    input.classList.add('form-control-plaintext', 'permission-title');
    input.id = id;
    input.value = value;
    input.setAttribute('readonly', "true");

    let hiddenInput = document.createElement('input');
    hiddenInput.type = 'hidden';
    hiddenInput.classList.add('permission-role');
    hiddenInput.value = id;


    row.appendChild(input);
    row.appendChild(hiddenInput);

    let actionButton = document.createElement('span');
    actionButton.classList.add('action-padding', 'action-button', 'input-action-margin');

    let deleteButton = document.createElement('span');
    deleteButton.classList.add('action-link', 'far', 'fa-trash-alt');
    deleteButton.setAttribute('onclick', 'removeRole(this);');
    deleteButton.setAttribute('role', 'button');

    actionButton.appendChild(deleteButton);
    row.appendChild(actionButton);

    document.getElementById('permission-wrapper').appendChild(row);

    var permissionRoles = $('.permission-row');
    var permissionIndex = 0;

    permissionRoles.each(function () {
        var hiddenInput = $(this).find('.permission-role');

        hiddenInput.attr("id",`roles${permissionIndex}.id`);

        hiddenInput.attr("name",`roles[${permissionIndex}].id`);

        var input = $(this).find('.permission-title');
        input.attr("name", `roles[${permissionIndex}].name`);
        input.attr("id", `roles${permissionIndex}.name`);
        permissionIndex++;
    });

}


/**
 * Add new enum value for type "Výčet"
 * @param context
 * @param value
 */
function addEnumRow(context, value)
{
    let enumIndex = $(context).closest('.enum_box').find('.enum-index').val();
    let countIndex = $(context).closest('.enum_box').find('.enum-row').length;

    let row = document.createElement('div');
    row.classList.add('input-action-box', 'input-border-bottom', 'enum-row');


    let input = document.createElement('input');
    input.type = 'text';
    input.classList.add('form-control-plaintext');
    input.value = value;
    input.setAttribute('readonly', "true");
    input.setAttribute('id', `parameters${enumIndex}.parameterValues${countIndex}.value`);
    input.setAttribute('name', `parameters[${enumIndex}].parameterValues[${countIndex}].value`);

    row.appendChild(input);

    let sortSpan = document.createElement('span');
    sortSpan.classList.add('action-padding', 'input-action-margin', 'sort-icon');
    sortSpan.innerHTML = "<i class=\"fas fa-sort\"></i>";

    row.appendChild(sortSpan);

    let deleteSpan = document.createElement('span');
    deleteSpan.classList.add('action-padding', 'input-action-margin', 'action-button');

    let deleteButton = document.createElement('span');
    deleteButton.classList.add('action-link', 'far', 'fa-trash-alt');
    deleteButton.setAttribute('onclick', 'removeEnum(this)');

    deleteSpan.appendChild(deleteButton);

    row.appendChild(deleteSpan);

    $(context).closest(".enum_box").find(".enum-wrapper").append($(row));

}

/**
 * Remove permission role
 * @param selectedField
 */
function removeRole (selectedField) {
    selectedField.closest('.permission-row').remove();
}

/**
 * Show enum box for parameter
 * @param select
 */
function showEnum(select) {
    var enumBox = $(select).closest(".panel-collapse").find(".enum_box");
    enumBox.removeClass("hidden");
}

/**
 * Hide enum box for parameter
 * @param select
 */
function hideEnum(select) {
    var enumBox = $(select).closest(".panel-collapse").find(".enum_box");
    enumBox.addClass("hidden");
}

/**
 * Remove enum value
 * @param select
 */
function removeEnum(select) {
    $(select).closest(".enum-row").remove();
}

/**
 * Remove parameter
 * @param panel
 */
function removePanel(panel) {
    var r = confirm("Opravdu si přejete odstranit parametr?");
    if (r == true) {
        $(panel).closest(".parameter").remove();
    }

}

/**
 * Add new parameter
 */
function addCollapse() {

    var index = 0;

    // find largest parameter index
    $(".parameter").each(function ()
    {
        var tmpIndex = Number($(this).find('.enum-index').val());

        if (tmpIndex >= index)
        {
            index = tmpIndex + 1;
        }
    });

    var typeSelectValues = $("#allParametersHiddenSelect").html();
    var functionSelectValues = $("#allFunctionsHiddenSelect").html();
    var operatorSelectValues = $("#allOperatorsHiddenSelect").html();

    // parameter body
    $(".panel-wrapper").append('\n' +
        '      <div class="panel-group parameter">\n' +
        `      <input type="hidden" class="parametr-order" value="0" id="parameters${index}.parameterOrder" name="parameters[${index}].parameterOrder">\n` +
        '        <div class="panel panel-default">\n' +
        '          <div class="panel-heading">\n' +
        '            <span class="panel-title">\n' +
        `              <a data-toggle="collapse" data-parent="#accordion" href=#collapse${index}>\n` +
        `                <i class="fas fa-angle-right"></i> Nový parametr\n` +
        '              </a>\n' +
        '              <span class="align-right collapse-actions">\n' +
        '                <span class="action-padding input-action-margin-collapse sort-icon">\n' +
        '                  <i class="fas fa-sort"></i>\n' +
        '                </span>\n' +
        '                <span class="action-padding action-button input-action-margin-collapse">\n' +
        '                  <span href=# class="action-link far fa-trash-alt" onclick="removePanel(this);"></span>\n' +
        '                </span>\n' +
        '              </span>\n' +
        '            </span>\n' +
        '          </div>\n' +
        `          <div id="collapse${index}" class="panel-collapse collapse">\n` +
        '            <div class="panel-body">\n' +
        '              <div class="form-group row">\n' +
        '                <label for="name" class="col-sm-2 col-form-label">Název:</label>\n' +
        '                <div class="col-sm-10">\n' +
        `                  <input type="text" class="form-control" name="parameters[${index}].name" id="parameterName${index}" value="Nový parametr" required>\n` +
        '                </div>\n' +
        '              </div>\n' +
        '              <div class="form-group row">\n' +
        '                <label for="name" class="col-sm-2 col-form-label">V&nbsp;SQL:</label>\n' +
        '                <div class="col-sm-10">\n' +
        `                  <input type="text" class="form-control" name="parameters[${index}].nameOfSelect" id="parameterSQLName${index}" required>\n` +
        '                </div>\n' +
        '              </div>\n' +
        '              <div class="form-group row">\n' +
        '                <label for="exampleFormControlSelect1" class="col-sm-2">Typ:</label>\n' +
        '                <div class="col-sm-10">\n' +
        `                  <select name="parameters[${index}].parameterType" class="form-control type-select">\n` +
        typeSelectValues+
        '                  </select>\n' +
        '                </div>\n' +
        '              </div>\n' +
        '\n' +
        '              <div class="enum_box">\n' +
        '                Hodnoty:\n' +
        '                <div class="enum_values col-md-8">\n' +
        '                  <div class="enum-wrapper">\n' +
        `                     <input type="hidden" class="enum-index" value="${index}">\n` +
        '                  </div>\n' +
        '\n' +
        '                  <div class="form-group row form-add-item">\n' +
        '                    <div class="col-md-9">\n' +
        '                      <input type="text" class="form-control enum-add-input">\n' +
        '                    </div>\n' +
        '                    <span class="btn btn-primary mb-2 enum-add-button">Přidat</span>\n' +
        '                  </div>\n' +
        '                </div>\n' +
        '              </div>\n' +
        '\n' +
        `              <div class="form-group row">\n` +
        '                <label for="exampleFormControlSelect1" class="col-sm-2">Umístění:</label>\n' +
        '                <div class="col-sm-10">\n' +
        '                  <div class="form-check form-check-inline">\n' +
        `                    <input type="hidden" name="_parameters[${index}].locations" value="on">\n` +
        `                    <input class="form-check-input" name="parameters[${index}].locations" id="parameters${index}.locations1" type="checkbox" value="1">\n` +
        `                    <label class="form-check-label" for="parameters[${index}].locations" >Sloupec</label>\n` +
        '                  </div>\n' +
        '                  <div class="form-check form-check-inline">\n' +
        `                    <input type="hidden" name="_parameters[${index}].locations" value="on">\n` +
        `                    <input class="form-check-input" name="parameters[${index}].locations" id="parameters${index}.locations2" type="checkbox" value="2">\n` +
        '                    <label class="form-check-label" for="parameters[${index}].locations">Řádek</label>\n' +
        '                  </div>\n' +
        '                  <div class="form-check form-check-inline">\n' +
        `                    <input type="hidden" name="_parameters[${index}].locations" value="on">\n` +
        `                    <input class="form-check-input" name="parameters[${index}].locations" id="parameters${index}.locations3" type="checkbox" value="3">\n` +
        '                    <label class="form-check-label" for="parameters[${index}].locations" >Hodnota</label>\n' +
        '                  </div>\n' +
        '                </div>\n' +
        '              </div>\n' +
        '              <div class="form-group row">\n' +
        '                  <label for="exampleFormControlSelect1" class="col-sm-2">Funkce:</label>\n' +
        '                  <div class="col-sm-10">\n' +
        `                    <select name="parameters[${index}].functions" id="parameters${index}.functions" class="mbSelect selectpicker" multiple data-live-search="true">\n` +
        functionSelectValues +
        '                    </select>\n' +
        '                  </div>\n' +
        '              </div>\n' +
        '              <div class="form-group row">\n' +
        '                  <label for="exampleFormControlSelect1" class="col-sm-2">Operátory:</label>\n' +
        '                  <div class="col-sm-10">\n' +
        `                    <select name="parameters[${index}].operators" id="parameters${index}.operators" class="mbSelect selectpicker" multiple data-live-search="true">\n` +
        operatorSelectValues +
        '                    </select>\n' +
        '                  </div>\n' +
        '              </div>\n' +
        '            </div>\n' +
        '          </div>\n' +
        '        </div>\n' +
        '      </div>\n' +
        '    ');

    this.reindexParametrOrder();
    this.initPanelBody();

}

/**
 * Init scripts for parameters body
 */
function initPanelBody() {
    $('.enum-add-button').on('click', function () {
        var input = $(this).closest(".row").find('.enum-add-input');
        addEnumRow(this, input.val());

        input.val("");
    });

    $('.enum-wrapper').sortable().disableSelection();

    $('.type-select').on('change', function () {
        if (this.value == 1)
        {
            showEnum(this);
        }
        else
        {
            hideEnum(this);
        }
    });

    $(".selectpicker").selectpicker('refresh');

    $('.fa-trash-alt').click(function(event){
        event.preventDefault();
    });
}

/**
 * Reindex parameter body order
 */
function reindexParametrOrder() {
    var data = $(".parametr-order");

    let index = 0;
    $(data).each(function () {
        $(this).attr('value', index);
        index++;
    });
}