{% extends 'main/base.html' %}
{% load bootstrap3 %}
{% load staticfiles %}

{% block title %}
    Compare data
{% endblock %}

{% block content %}
    <script type="text/javascript">
        {% autoescape off %}
            $(document).ready(function () {
                $("#selectAllSwitcher").change(function () {
                    $(".toBeSwitched").prop('checked', $(this).prop("checked"));
                    rbpmUpdateActivity();
                });
                $(".toBeSwitched").change(function () {
                    console.log("Change");
                    console.log(this);
                    console.log($(this).val())
                    rbpmUpdateActivity();
                });
                $("#selectEnvironment").change(function () {
                            console.log("Env changed");
                            environment = $('#selectEnvironment').val();
                            console.log(environment);
                            $.ajax({
                                url: "/api/configuration/set/environment/" + environment,
                                success: function (result) {
                                    $.ajax({
                                        url: "/api/configuration/get/environment",
                                        success: function (result) {
                                            console.log(result);
                                            $("#currentEnvironment").html("<strong>" + result.configs.environment + "</strong>");
                                        }
                                    });
                                }
                            });
                        }
                );
                rbpmUpdateActivity();
            });

            function rbpmUpdateActivity() {
                collectedActivities = {}
                deleteActive = $('#deleteAllSwitcher').prop('checked');
                $(".toBeSwitched").each(function (e) {
                    mainClass = $(this).val();
                    isChecked = $(this).prop('checked');
                    searchClass = '.' + mainClass;
                    if (isChecked) {
                        $(searchClass).removeClass('hidden');
                        collectedActivities[mainClass] = true;
                    } else {
                        $(searchClass).addClass('hidden');
                    }
                    if (deleteActive) {
                        $(searchClass + '_delete').removeClass('hidden');
                        collectedActivities[mainClass + '_delete'] = true;
                    } else {
                        $(searchClass + '_delete').addClass('hidden');
                    }
                });
                return collectedActivities;
            }

            function rbpmAjaxCall(urlArray) {
                elem = urlArray.shift();
                url = elem[0];
                task = '#rbpmCompareResults';
                pendingText = elem[2];
                doneText = elem[3];
                //$(task).removeClass('text-muted').addClass('text-primary');
                $(task).append(pendingText + "<br/>");
                console.log("URL");
                console.log(url);

                $.ajax({
                    url: url,
                    cache: false,
                    type: "GET",
                    complete: function () {
                        $('#rbpmRefreshButton').prop('disabled', false);
                        $('#rbpmCompareButton').prop('disabled', false);
                    },
                    success: function (result) {
                        //$(task).removeClass('text-muted').removeClass('text-primary').addClass('text-success');
                        console.log("SUCCESS")
                        console.log(result.detail);
                        $(task).append(result.detail);
                        window.rbpmAjaxOperationStatus = 200;
                        if (urlArray.length > 0) {
                            rbpmAjaxCall(urlArray);
                        } else {
                            $('#rbpmRefreshButton').prop('disabled', false);
                            $('#rbpmCompareButton').prop('disabled', false);
                            stopUpdatingStatus();
                        }
                    },
                    error: function () {
                        $(task).removeClass('text-muted').removeClass('text-primary').addClass('text-danger');
                        window.rbpmAjaxOperationStatus = 500;
                    }
                });
            }

            function rbpmCompare() {
                $('#rbpmRefreshButton').prop('disabled', true);
                $('#rbpmCompareButton').prop('disabled', true);
                $('#rbpmCompareResults').empty();
                startUpdatingStatus();
                collectedActivities = rbpmUpdateActivity();
                environment = $('#selectEnvironment').val();
                console.log("ENVIRONMENT");
                console.log(environment);

                urlsArray = [];
                /**
                 *
                 */
                if (collectedActivities.hasOwnProperty('activity_schema')) {
                    urlsArray.push(['/api/rbpm/compare/schema/' + environment, '.activity_schema', 'Comparing Schema...']);
                }
                if (collectedActivities.hasOwnProperty('activity_containers')) {
                    urlsArray.push(['/api/rbpm/compare/containers/' + environment, '.activity_containers', 'Comparing Containers...']);
                }
                if (collectedActivities.hasOwnProperty('activity_groups')) {
                    urlsArray.push(['/api/rbpm/compare/groups/' + environment, '.activity_groups', 'Comparing Groups...']);
                }
                if (collectedActivities.hasOwnProperty('activity_users')) {
                    urlsArray.push(['/api/rbpm/compare/users/' + environment, '.activity_users', 'Comparing Users']);
                }
                if (collectedActivities.hasOwnProperty('activity_group2users')) {
                    urlsArray.push(['/api/rbpm/compare/groups2users/' + environment, '.activity_groups2users', 'Comparing Group to User Bindings', 'Done']);
                }
                if (collectedActivities.hasOwnProperty('activity_rolecategories')) {
                    urlsArray.push(['/api/rbpm/compare/rolecategories/' + environment, '.activity_rolecategories', 'Comparing Role Categories', 'Pending']);
                }
                if (collectedActivities.hasOwnProperty('activity_resourcecategories')) {
                    urlsArray.push(['/api/rbpm/compare/resourcecategories/' + environment, '.activity_rolecategories', 'Comparing Resource Categories', 'Pending']);
                }
                if (collectedActivities.hasOwnProperty('activity_roles')) {
                    urlsArray.push(['/api/rbpm/compare/roles/' + environment, '.activity_roles', 'Comparing Roles', 'Pending']);
                    //urlsArray.push(['/api/rbpm/compare/roles2resources/' + environment, '.activity_roles', 'Comparing Roles to Resources Bindings', 'Done']);
                }
                if (collectedActivities.hasOwnProperty('activity_resources')) {
                    urlsArray.push(['/api/rbpm/compare/resources/' + environment, '.activity_roles', 'Comparing Resources', 'Pending']);
                }
                if (collectedActivities.hasOwnProperty('activity_project')) {
                    urlsArray.push(['/api/rbpm/compare/project/' + environment, '.activity_project', 'Comparing Project...']);
                }
                /*
                 if (collectedActivities.hasOwnProperty('activity_users') &&
                 collectedActivities.hasOwnProperty('activity_groups') &&
                 collectedActivities.hasOwnProperty('activity_containers') &&
                 collectedActivities.hasOwnProperty('activity_roles')) {
                 urlsArray.push(['/api/rbpm/compare/roles2objects/' + environment, '.activity_roles', 'Comparing Roles to Objects Bindings', 'Done']);
                 }*/
                rbpmAjaxCall(urlsArray);
            }
        {% endautoescape %}
    </script>
    <div class="form-group disable-if-running">
        <label for="sel1">Select environment:</label>
        <select id='selectEnvironment' class="form-control disable-if-running" id="environment">
            <option value="source">Source</option>
            <option value="destination">Destination</option>
        </select>
        <hr/>
        <label>Settings:</label>
        <div class="checkbox">
            <label class="checkbox-inline"><input id='selectAllSwitcher' type="checkbox" value="selectAll" checked>
                Select all
            </label>
        </div>
        <div class="container">
            <div class="checkbox">
                <label>
                    <input class='toBeSwitched' type="checkbox" value="activity_schema" checked>Compare schema
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input class='toBeSwitched' type="checkbox" value="activity_containers" checked>Compare containers
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input class='toBeSwitched' type="checkbox" value="activity_groups" checked>Compare groups
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input class='toBeSwitched' type="checkbox" value="activity_users" checked>Compare users
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input class='toBeSwitched' type="checkbox" value="activity_groups2users" checked>Compare user-group
                    bindings
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input class='toBeSwitched' type="checkbox" value="activity_rolecategories" checked>Compare role
                    categories
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input class='toBeSwitched' type="checkbox" value="activity_resourcecategories" checked>Compare
                    resource categories
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input class='toBeSwitched' type="checkbox" value="activity_roles" checked>Compare roles
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input class='toBeSwitched' type="checkbox" value="activity_resources" checked>Compare resources
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input class='toBeSwitched' type="checkbox" value="activity_roles2resources" checked>Compare
                    role-resource bindings
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input class='toBeSwitched' type="checkbox" value="activity_project" checked>Compare project
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input class='toBeSwitched' type="checkbox" value="activity_roleassignments" checked>Compare role
                    assignments
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input class='toBeSwitched' type="checkbox" value="activity_resourceassignments" checked>Compare
                    resource assignments
                </label>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-lg-6 col-sm-6 col-xs-6">
        <button id="rbpmCompareButton" type="button" class="btn btn-primary disable-if-running"
                onclick="rbpmCompare();">
            Compare
        </button>
    </div>
    <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
        <hr/>
    </div>
    <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
        Results:
        <div id="rbpmCompareResults">
        </div>
    </div>
    <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
        <hr/>
    </div>
{% endblock %}