aswi2020vldc-gitlab/src/main/webapp/js/assemblyScripts.js @ fb86dc6a

let ROW = 'row';
let COLUMN = 'column';
let VALUE = 'value';

$(document).ready(function() {

    // reaction for add/delete parameters from selected fields (row, column, value)
    $('.select-action-button').on('click', function () {
        // if input has headlight class (parameter is already added -> remove)
        if ($(this).hasClass('select-action-headlight'))
        {
            // remove headlight class from type
            $(this).removeClass('select-action-headlight');

            // remove parameter from selected inputs
            removeParameter(getParameterTitle($(this)), getParameterType($(this)));
        }
        else
        {
            // remove headlight from other types for parameter if exists
            $(this).closest('.select-action-buttons').find('.select-action-button').removeClass('select-action-headlight');

            // remove element from selected inputs if exists
            removeFromAll(getParameterTitle($(this)));

            // headlight selected input
            $(this).addClass('select-action-headlight');

            // add selected parameter to selected parameters by type
            addParameter(getParameterIndex($(this)),
                getParameterTitle($(this)),
                getParameterType($(this)),
                getParameterHiddenValue($(this)));

            // reinitialize actions for new parameter
            initParameters();
        }

        validateCombination();
    });

    // init actions
    initParameters();

    // spinner init
    initSpinnerToButtons();

    // generation init
    initTableGenerationButtons();

    // sort selected parameters
    initSelectedParameters();

    // set up tooltips
    initTooltips();

});

/**
 * Remove value from all selected fields
 * @param title
 */
function removeFromAll(title) {
    $rows = $('.selected-input-container');

    $rows.each(function () {
        $(this).find('.parameter-name').each(function () {
            if ($(this).text() == title)
            {
                $(this).closest('.parameter').remove();
            }
        })
    });
}

/**
 * Returns parameter index
 * @param button
 * @returns {*|jQuery|string|undefined}
 */
function getParameterIndex(button) {
    return $(button).closest('.parameter-row').find('.parameterIndex').val();
}

/**
 * Adds new parameter to selected fields
 * @param index
 * @param parameterName
 * @param type
 * @param hiddenValue
 */
function addParameter(index, parameterName, type, hiddenValue) {
    var row = document.createElement('tr');
    row.classList.add(type + '-parameter', 'parameter');

    let hiddenInput = document.createElement('input');
    hiddenInput.type = 'hidden';
    hiddenInput.id = `parametersInConfiguration${index}.location.id`;
    hiddenInput.name = `parametersInConfiguration[${index}].location.id`;
    hiddenInput.setAttribute('value', hiddenValue);

    let hiddenInputOrder = document.createElement('input');
    hiddenInputOrder.type = 'hidden';
    hiddenInputOrder.id = `parametersInConfiguration${index}.parameterOrder`;
    hiddenInputOrder.name = `parametersInConfiguration[${index}].parameterOrder`;
    hiddenInputOrder.classList.add('parametr-order');

    row.appendChild(hiddenInput);
    row.appendChild(hiddenInputOrder);

    var firstTd = document.createElement('td');

    var firstTdBody = document.createElement('span');
    firstTdBody.classList.add('parameter-name');
    firstTdBody.innerHTML = parameterName;

    firstTd.appendChild(firstTdBody);

    row.appendChild(firstTd);

    var thirdTd = document.createElement('td');

    var thirdTdBody;


    if (type == VALUE)
    {
        thirdTdBody = $('#function-select-' + index).clone()[0];
        thirdTdBody.selectedIndex = 0;

        $(thirdTdBody).removeClass('hidden');
    }
    else
    {
        var secondTd = document.createElement('td');

        var secondTdBody = document.createElement('input');
        secondTdBody.type = 'text';
        secondTdBody.classList.add('form-control', 'select-filter-input-name');
        secondTdBody.name = `parametersInConfiguration[${index}].columnName`;

        secondTd.appendChild(secondTdBody);

        row.appendChild(secondTd);

        thirdTdBody = document.createElement('span');
        thirdTdBody.innerHTML = "<i class=\"fas fa-sort\"></i>";
    }

    thirdTd.appendChild(thirdTdBody);

    row.appendChild(thirdTd);

    $('#' + type + '-wrapper').append($(row));

    reindexOrder();

}

/**
 * Remove specific parameter from fields by name and container
 * @param title
 * @param parameterClass
 */
function removeParameter(title, parameterClass) {
    $rows = $('.' + parameterClass + '-parameter');

    $rows.each(function () {
        $(this).find('.parameter-name').each(function () {
            if ($(this).text() == title)
            {
                $(this).closest('.' + parameterClass + '-parameter').remove();
            }
        })
    });
}

/**
 * Base on class returns type
 * @param context
 * @returns {string}
 */
function getParameterType(context) {
    if ($(context).hasClass('column-button'))
    {
        return COLUMN;
    }
    else if ($(context).hasClass('row-button'))
    {
        return ROW;
    }
    else if ($(context).hasClass('value-button'))
    {
        return VALUE;
    }
}

/**
 * Base on type return integer value
 * @param context
 * @returns {number}
 */
function getParameterHiddenValue(context) {
    if ($(context).hasClass('column-button'))
    {
        return 1;
    }
    else if ($(context).hasClass('row-button'))
    {
        return 2;
    }
    else if ($(context).hasClass('value-button'))
    {
        return 3;
    }
}

/**
 * Returns parameter name
 * @param context
 * @returns {*|jQuery}
 */
function getParameterTitle(context) {
    return $(context).closest('.parameter-row').find('.parameter-name').text();
}

/**
 * Init base actions
 */
function initParameters()
{
    $('.sortable').sortable({
       stop: function () {
           reindexOrder();
       }
    });
    $("select").selectpicker('refresh');
}

/**
 * Update parametr order
 */
function reindexOrder() {
    var rowValues = $('.row-parameter');
    var columnValues = $('.column-parameter');
    var valueValues = $('.value-parameter');

    var index = 0;

    rowValues.each(function () {
        $(this).find('.parametr-order').attr('value', index);
        index++;
    });

    columnValues.each(function () {
        $(this).find('.parametr-order').attr('value', index);
        index++;
    });

    valueValues.each(function () {
        $(this).find('.parametr-order').attr('value', index);
        index++;
    });
}

function checkIfConfigurationNameIsNull() {
    var configurationName = document.getElementById('configurationName');

    if (configurationName.value == null || configurationName.value == "") {
        alert("Není vyplněn název šablony !");
    }
}

/**
 * Set up listener to export buttons to show spinner
 */
function initSpinnerToButtons() {
    hideSpinner();

    document.querySelectorAll('.show-spinner').forEach(button => {
        button.addEventListener('click', showSpinner);
    });

    // check for form response to hide spinner
    $('#assembly-form').on('submit',function(e){

        // csfr protection
        var token = $("meta[name='_csrf']").attr("content");

        $.ajax({
            url: $('#form').attr('action'),
            headers: {"X-CSRF-TOKEN": token},
            type: 'POST',
            contentType: "application/json; charset=utf-8",
            data : $('#assembly-form').serialize(),
            complete: function () {
                hideSpinner();
            }
        });
    });
}

/**
 * Shows spinner with overlay
 */
function showSpinner() {
    let spinner = document.getElementById('spinner-overlay');

    spinner.style.display = 'block';
}

/**
 * Hides spinner with overlay
 */
function hideSpinner() {
    let spinner = document.getElementById('spinner-overlay');

    spinner.style.display = 'none';
}

/**
 * Table generation button validator
 * If row is selected allow to generate
 * if column is selected, value and row must be also selected
 */
function initTableGenerationButtons() {
    validateCombination();
}

/**
 * Check action buttons combination
 */
function validateCombination() {
    let selectedActionButtons = $('.select-action-headlight');

    var rowSelected = false;
    var columnSelected = false;
    var valueSelected = false;

    // check selected buttons
    selectedActionButtons.each(function () {
        let type = getParameterType($(this));

        switch (type) {
            case VALUE:
                valueSelected = true;
                break;
            case ROW:
                rowSelected = true;
                break;
            case COLUMN:
                columnSelected = true;
                break;
        }
    });

    // possible combinations with allowed export
    if (rowSelected && columnSelected && valueSelected)
    {
        allowExport();
    }
    else if (columnSelected && !rowSelected && !valueSelected)
    {
        allowExport();
    }
    else
    {
        disableExportButtons();
    }


}

/**
 * Disables buttons for export
 */
function disableExportButtons() {
    $('.show-spinner').attr('disabled','disabled');
}

/**
 * Allow buttons for export
 */
function allowExport() {
    $('.show-spinner').removeAttr('disabled');
}

/**
 * Sort selected parameters by order
 */
function initSelectedParameters() {

    sortSelectedParameters('.column-parameter', '#column-wrapper');
    sortSelectedParameters('.row-parameter', '#row-wrapper');

}

/**
 * Checks and sort specific parameters
 * @param parameterName
 * @param parameterWrapper
 */
function sortSelectedParameters(parameterName, parameterWrapper) {

    var tmpArray = [];

    var parameters = $(parameterName);

    // load specific parameters to array orderIndex => parameter
    parameters.each(function () {
        var orderIndex = $(this).find('.parametr-order').val();

        tmpArray[orderIndex] = $(this);

    });

    // sort parameters by key (order index)
    tmpArray.sort((a, b) => a - b);

    let wrapper = $(parameterWrapper);

    // clear wrapper
    wrapper.empty();

    // append sorted elements
    wrapper.append(tmpArray);
}

/**
 * Set up tooltips
 */
function initTooltips() {
    $('[data-toggle="tooltip"]').tooltip();
}