Editor

// ==UserScript==
// @name         Dependency editor
// @namespace    http://www.blog-badwolf.eu/
// @version      0.1
// @description  Shows UI for editing dependency between product's attributes
// @author       OS
// @match        http://www.blog-badwolf.eu/zarzadzanie/produkty/produkty_edytuj.php*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    var addNewDependencyButtonTemplate = '<span class="dodaj dependency-button" style="cursor:pointer">Dodaj zależność</span>';
    var dependencyMenuTemplate =
    '<div class="dependency-menu">\
        <div style="display: inline;">\
            <div style="display: inline;">Jeśli cecha:</div>\
            <div style="display: inline;">\
                <select class="attribute-select">\
                </select>\
            </div>\
        </div>\
        <div style="display: inline;">\
            <div style="display: inline;">ma wartość:</div>\
            <div style="display: inline;">\
                <select class="attribute-option-select">\
                </select>\
            </div>\
        </div>\
        <div style="display: inline;">\
            <div style="display: inline;">to:</div>\
            <div style="display: inline;">\
                <select class="action-select">\
                    <option value="show">Pokaż</option>\
                    <option value="hide">Schowaj</option>\
                    <option value="lock">Zablokuj</option>\
                    <option value="unlock">Odblokuj</option>\
                </select>\
            </div>\
        </div>\
        <div style="display: inline;">\
            <div style="display: inline;">i ustaw na:</div>\
            <div style="display: inline;">\
                <select class="default-value-select">\
                </select>\
            </div>\
        </div>\
        <div style="display: inline;">\
            <img class="remove-dependency" src="obrazki/kasuj.png" style="cursor:pointer">\
        </div>\
    </div>';

    var groupBy = function(xs, key) {
        return xs.reduce(function(rv, x) {
          (rv[key(x)] = rv[key(x)] || []).push(x);
          return rv;
        }, {});
    };
    var getAllAttributeHeaders = () => $('.NazwaCechy');
    var getAllNewDependencyButtons = () => $('.dependency-button');
    var getIdOfAttributeByName = (name) => $('#id_cecha option').filter((x,y) => y.text == name).val();

    var setupNewEmptyDependencyMenu = function (attributeHeader, attributeHeaderName) {
        attributeHeader.append(dependencyMenuTemplate);
        var newDependencyMenu = attributeHeader.find('.dependency-menu:last');
        newDependencyMenu.attr('attribute-id', getIdOfAttributeByName(attributeHeaderName));

        newDependencyMenu.find('.remove-dependency').click(function () {
            newDependencyMenu.remove();
            saveDependencyConfig();
        });

        return newDependencyMenu;
    }

    var setupNewAttributeSelect = function (newDependencyMenu, attributeHeaderName) {
        var otherAttributeNames = getAllAttributeHeaders()
            .map((x,y) => y.firstChild.wholeText)
            .filter((x,y) => y != attributeHeaderName);

        var attributeSelect = newDependencyMenu.find('.attribute-select');
        attributeSelect.change(function() {
            onAttributeSelectChanged($(this), newDependencyMenu);
        });
        for (let index = 0; index < otherAttributeNames.length; index++) {
            const otherAttributeName = otherAttributeNames[index];
            attributeSelect.append(
                '<option value="'+getIdOfAttributeByName(otherAttributeName)+'">'
                    + otherAttributeName +
                '</option>');
        }
        attributeSelect.change();
    }

    var getAllAttributeValues = function (selectedAttributeId) {
        var selectedProductId = $('#id_unikalne').val();
        var attributeOptionsPrefix = 'td_prefix_'+selectedProductId+'_'+selectedAttributeId+'_';
        var allAttributeValues = $('.TabelaCechy td')
        return allAttributeValues
            .filter((_,x) => x.id.indexOf(attributeOptionsPrefix) != -1)
            .map((_,x) => { return { name: x.previousSibling.innerText, id: x.id.split('_')[4] }});
    };

    var onAttributeSelectChanged = function (attributeSelect, newDependencyMenu) {
        var selectedAttributeId = attributeSelect.val();
        var attributeOptions = getAllAttributeValues(selectedAttributeId);
        var attributeOptionSelect = newDependencyMenu.find('.attribute-option-select');
        attributeOptionSelect.find('option').remove();
        for (let index = 0; index < attributeOptions.length; index++) {
            const attributeOption = attributeOptions[index];
            attributeOptionSelect.append(
                '<option value="'+attributeOption.id+'">'
                    + attributeOption.name +
                '</option>');
        }
        attributeOptionSelect.append('<option value="*">-pozostałe opcje-</option>');
    }

    var setupNewAttributeOptionSelect = function (newDependencyMenu, attributeHeaderName) {
        var selectedProductId = $('#id_unikalne').val();
        var selectedAttributeId = getIdOfAttributeByName(attributeHeaderName);
        var attributeOptionsPrefix = 'td_prefix_'+selectedProductId+'_'+selectedAttributeId+'_';
        var allAttributeValues = $('.TabelaCechy td')
        var attributeOptions = allAttributeValues
            .filter((_,x) => x.id.indexOf(attributeOptionsPrefix) != -1)
            .map((_,x) => { return { name: x.previousSibling.innerText, id: x.id.split('_')[4] }});
        var defaultOptionSelect = newDependencyMenu.find('.default-value-select');
        for (let index = 0; index < attributeOptions.length; index++) {
            const attributeOption = attributeOptions[index];
            defaultOptionSelect.append(
                '<option value="'+attributeOption.id+'">'
                    + attributeOption.name +
                '</option>');
        }
        defaultOptionSelect.append('<option value="">-nie zmieniaj-</option>');
    }

    var setupNewDependencyMenu = function (attributeHeader, attributeHeaderName) {
        var newDependencyMenu = setupNewEmptyDependencyMenu(attributeHeader, attributeHeaderName);
        setupNewAttributeSelect(newDependencyMenu, attributeHeaderName);
        setupNewAttributeOptionSelect(newDependencyMenu, attributeHeaderName);
        newDependencyMenu.find('select').change(saveDependencyConfig);
        return newDependencyMenu;
    }

    var onNewDependencyButtonClicked = function () {
        var attributeHeader = $(this.parentElement);
        var attributeHeaderName = this.parentElement.firstChild.wholeText;
        setupNewDependencyMenu(attributeHeader, attributeHeaderName);
        saveDependencyConfig();
    }

    var selectHasOption = function (select, value) {
        return select.find('option').map((_,x) => $(x).val()).toArray().indexOf(value) != -1;
    }

    var buildDependencyControls = function (dependencyConfig) {
        var attributeHeaders = getAllAttributeHeaders()
            .map((_,x) => {
                return {
                    element: x,
                    id: getIdOfAttributeByName(x.firstChild.wholeText),
                    name: x.firstChild.wholeText
                }
            });

        for (let index = 0; index < dependencyConfig.length; index++) {
            let dependency = dependencyConfig[index];
            if (attributeHeaders.map((_,x) => x.id).toArray().indexOf(dependency.attributeId) != -1) {
                var attributeHeader = attributeHeaders.filter((_, x) => x.id == dependency.attributeId)[0];
                let dependencyMenu = setupNewDependencyMenu($(attributeHeader.element), attributeHeader.name);


                var attributeSelect = dependencyMenu.find('.attribute-select');
                if (selectHasOption(attributeSelect, dependency.dependentAttributeId)) {
                    attributeSelect.val(dependency.dependentAttributeId);
                    attributeSelect.change();
                }

                var attributeOptionSelect = dependencyMenu.find('.attribute-option-select');
                if (selectHasOption(attributeOptionSelect, dependency.dependentAttributeValue)) {
                    attributeOptionSelect.val(dependency.dependentAttributeValue);
                    attributeOptionSelect.change();
                }

                var defaultValueSelect = dependencyMenu.find('.default-value-select');
                if (selectHasOption(defaultValueSelect, dependency.attributeValue)) {
                    defaultValueSelect.val(dependency.attributeValue);
                    defaultValueSelect.change();
                }

                var actionSelect = dependencyMenu.find('.action-select');
                actionSelect.val(dependency.action);
                actionSelect.change();
            }
        }
    }

    var buildDependencyUI = function () {
        getAllAttributeHeaders().append(addNewDependencyButtonTemplate);
        getAllNewDependencyButtons().click(onNewDependencyButtonClicked);
        buildDependencyControls(restoreDependencyConfig());
        saveDependencyConfig();
    };

    var getDependencyConfig = function () {
        return $('.dependency-menu')
            .map(function (_, x) {
                return {
                    attributeId: $(x).attr('attribute-id'),
                    attributeValue: $(x).find('.default-value-select').val(),
                    dependentAttributeId: $(x).find('.attribute-select').val(),
                    dependentAttributeValue: $(x).find('.attribute-option-select').val(),
                    action: $(x).find('.action-select').val()
                }
            })
            .toArray();
    };

    var expandFillerDependencies = function (dependencies) {
        var dependencies = getDependencyConfig();
        var allDefinedDependencies = dependencies.filter((x) => x.dependentAttributeValue != '*');
        var groupedByAttributePairs = groupBy(dependencies, (x) => x.attributeId + '-' + x.dependentAttributeId);

        for (let key in groupedByAttributePairs) {
            var group = groupedByAttributePairs[key];
            var definedValues = group.map((x) => x.dependentAttributeValue);
            if (definedValues.indexOf('*') != -1) {
                var fillerDependency = group.filter((x) => x.dependentAttributeValue == '*')[0];
                var notDefinedDependencies = getAllAttributeValues(fillerDependency.dependentAttributeId)
                                        .map((_, x) => x.id)
                                        .filter((_, x) => definedValues.indexOf(x) == -1)
                                        .map((_, x) => {
                                            return {
                                                attributeId: fillerDependency.attributeId,
                                                attributeValue: fillerDependency.attributeValue,
                                                dependentAttributeId: fillerDependency.dependentAttributeId,
                                                dependentAttributeValue: x,
                                                action: fillerDependency.action
                                            }
                                        })
                                        .toArray();
                allDefinedDependencies = allDefinedDependencies.concat(notDefinedDependencies);
            }
        }

        return allDefinedDependencies;
    }
    var saveDependencyConfigForViewer = function () {
        var key = 'DependencyConfigViewer-' + $('#id_unikalne').val();
        var value = JSON.stringify(expandFillerDependencies(getDependencyConfig()));
        window.localStorage.setItem(key, value);
    }
    var saveDependencyConfigForEditor = function () {
        var key = 'DependencyConfigEditor-' + $('#id_unikalne').val();
        var value = JSON.stringify(getDependencyConfig());
        window.localStorage.setItem(key, value);
    }
    var saveDependencyConfig = function () {
        saveDependencyConfigForViewer();
        saveDependencyConfigForEditor();
    }
    var restoreDependencyConfig = function () {
        var key = 'DependencyConfigEditor-' + $('#id_unikalne').val();
        var config = JSON.parse(window.localStorage.getItem(key)) || [];
        console.log(config);
        return config;
    }

    var initialized = false;

    $('#zakl_link_5').click(function() {
        if (!initialized){
            initialized = true;
            $('#ListaCechProduktu').on('DOMNodeInserted', (e) => {
                if ($(e.target).attr('id') == 'ListaCechProduktu') {
                    buildDependencyUI();
                }
            });
            buildDependencyUI();
        }
    })
})();