se/SE/static/procesEditor.js

var changes = false;

$(document).ready(function() {
    $("#main").after('<div class="col-xs-1 col-xs-offset-7" id="buttons"></div>');
    $("#buttons").after("<button type=button id=saveBtn class='btn btn-primary text-center' style=margin-left:5px;>Opublikuj zmiany</button>");
    $("#buttons").after("<button type=button id=clearBtn style=display:none; class='btn btn-danger text-center' >Cofnij zmiany</button>");
    var deletedId = new Array();
    var generatedId = new Array();
    var deletedRes = new Array();
    var dialog = 0;
    $("#SE-menu").hide();
    $("#SE-menu-sub").hide();
    var menuShow = false
    var zasobTree = new Array();

    var perms = [
        [1, "Kto wykonuje", "X"],
        [2, "Tylko do odczytu", "R"],
        [3, "Odczyt, zapis, wykonanie", "R,W,X"],
        [4, "Odczyt, zapis, wykonanie, tworzenie", "R,W,X,C"],
        [5, "Odczyt i wykonanie", "R,X"],
        [6, "Tylko do odczytu", "R"],
        [7, "MAPA PROCESU  - opis mapy procesu", ""],
        [9, "Tylko do tworzenia rekordu", "C"],
        [10, "Tylko tworzenie i czytanie rekordów bez edycji", "R,X,C"],
        [11, "Tylko edycja rekordu - ustalanie nowej wartosci", "W"],
        [12, "Tylko edycja i dodanie rekordu - ustalanie nowej wartosci", "W,C"],
        [13, "Nowy rekord i edycja z pominieciem A_ADM_COMPANY", "R,W,X,C,S"],
        [14, "Widok tylko swoich danych z rekordu", "W,O"],
        [15, "Edycja rekordów dla super admina", "R,W,C,S"],
        [16, "Widok i dodawanie rekordów tylko dla swojego ADM_COMPANY", "C,O"],
        [17, "Super widok wszystkich rekordow niezaleznie od uprawnien rekordu", "R,V"],
        [18, "Administracja Edycja i widok wszystkich rekordow z pominieciem A", "R,W,X,S,V"],
        [19, "Administracja Edycja Tworzenie i widok wszystkich rekordow z pom", "R,W,X,C,S,V"],
        [20, "Export", "R,X,E"],
        [21, "Widzenie tylko swoich rekordów", "O"]
    ];

    var gotoType = [
        ["GOTO", "Przejdź do procesu"],
        ["GOTO_AND_RETURN", "Przejdź do procesu i wróć"],
        ["FORK", "FORK"]
    ];

    var state = [];


    var loaded = true;
    var tab = new Array(); //tablica kolejnosci
    //var mainProces_id = 1; //id procesu glownego. Potem bedzie przypisywane z linku
    var actSite = "none";
    showPreview();

    var filtr = 0;
    var selectedArea = false;
    var sZasoby;
    var sProcesy;
    var lastSearch = "";
    var newSteps = 0;
    var newRes = 0;

    $(document).on('click', '#toggleMenu' ,function(e){
      e.preventDefault();
      if(!menuShow){
      $("#SE-menu").show();
      $("#SE-menu-sub").show();
      menuShow = true;
    }else{
      menuShow = false;
      $("#SE-menu").hide();
      $("#SE-menu-sub").hide();
    }
    });

    function loadResources() {
        $("#main").html("<center>Pobieranie danych o zasobach.</center>");
        var sFiltr = "";
        sFiltr += `
          <GetFeature xmlns="http://www.opengis.net/wfs/2.0"
          xmlns:p5_default_db="` + BASE_URL + `wfs/default_db"
          xmlns:ogc="http://www.opengis.net/ogc"
          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          service="WFS"
          version="2.0.2"
          xsi:schemaLocation="http://www.opengis.net/wfs/2.0 http://schemas.opengis.net/wfs/2.0/wfs.xsd">`;
        sFiltr += '  <ogc:Filter>';
        sFiltr += '    <ogc:And>';
        sFiltr += '      <ogc:Or>';
        $.each(state, function(idx, procesItem) {
          sFiltr += '        <ogc:PropertyIsEqualTo><ogc:PropertyName>ID_PROCES</ogc:PropertyName><ogc:Literal>' + procesItem["id"] + '</ogc:Literal></ogc:PropertyIsEqualTo>';
        });
        sFiltr += '      </ogc:Or>';
        sFiltr += '      <ogc:Not>';
        sFiltr += '        <ogc:PropertyIsEqualTo><ogc:PropertyName>A_STATUS</ogc:PropertyName><ogc:Literal>DELETED</ogc:Literal></ogc:PropertyIsEqualTo>';
        sFiltr += '      </ogc:Not>';
        sFiltr += '    </ogc:And>';
        sFiltr += '  </ogc:Filter>';
        sFiltr += '</GetFeature>';

        var link = BASE_URL + 'wfs-data.php/default_db/?SERVICE=WFS&VERSION=1.0.0&SRSNAME=EPSG:3003';
        link += '&REQUEST=GetFeature';
        link += '&TYPENAME=p5_default_db:CRM_WSKAZNIK';
        link += '&sortBy=SORT_PRIO+A,ID';

        var wskazniki = new Array();
        $.ajax({
            url: link,
            data: sFiltr,
            type: 'POST',
            contentType: "text/xml",
            dataType: "xml",
            success: function(data) {
                //console.log(data);
                $.each($(data).find("featureMember"), function() {
                    if ($(this).find("ID").text() == 0) return;
                    var wsk = new Array();
                    wsk["ID"] = $(this).find("ID").text();
                    wsk["ID_ZASOB"] = $(this).find("ID_ZASOB").text();
                    wsk["ID_PROCES"] = $(this).find("ID_PROCES").text();
                    wsk["SORT_PRIO"] = $(this).find("SORT_PRIO").text();
                    wsk["ID_PRZYPADEK"] = $(this).find("ID_PRZYPADEK").text();
                    wsk["OPIS_ZASOB"] = $(this).find("OPIS_ZASOB").text();
                    wskazniki.push(wsk);
                });
                //console.log(res);
                var idsZasobyToFetch = [];
                $.each(wskazniki, function(index, wsk) {
                    idsZasobyToFetch.push(wsk["ID_ZASOB"]);
                });
                if (idsZasobyToFetch.length > 0) {
                  //idsZasobyToFetch = JSON.stringify(idsZasobyToFetch);
                  //console.log(idsZasobyToFetch);
                  var zasobInfo = new Array();
                  $.ajax({
                    type: 'POST',
                    url: BASE_URL+"index.php?_route=UrlAction_ProcesEditor&_task=getSingleResAjax",
                    data: {data: idsZasobyToFetch},
                    dataType: 'json'
                  })
                  .done(function(jsonZasobyTree) {
                    $.each(jsonZasobyTree, function(idx, zasob) {
                      zasobInfo[zasob["ID"]] = new Array();
                      zasobInfo[zasob["ID"]]["DESC"] = zasob["DESC"];
                      zasobInfo[zasob["ID"]]["OPIS"] = zasob["OPIS"];
                      zasobInfo[zasob["ID"]]["TYPE"] = zasob["TYPE"];
                      zasobInfo[zasob["ID"]]["TREE"] = [];
                      for (var i = 3; i > 0; i--) {
                        if (zasob["p"+i+"_ID"] != null) {
                          var temp = {};
                          temp["ID"] = zasob["p"+i+"_ID"];
                          temp["DESC"] = zasob["p"+i+"_DESC"];
                          zasobInfo[zasob["ID"]]["TREE"].push(temp);
                        }
                      }
                    });

                    $.each(wskazniki, function(index, wsk) {
                      var type,
                        idZasob = wsk["ID_ZASOB"];
                      if (!zasobInfo[idZasob]) {
                        $("#main").html("<center>Generowanie widoku.</center>");
                        render(state, $("#main"));
                        return;
                      }
                      if (zasobInfo[idZasob]["TYPE"] == "DZIAL" || zasobInfo[idZasob]["TYPE"] == "STANOWISKO" || zasobInfo[idZasob]["TYPE"] == "PODMIOT") {
                        type = "prof";
                      } else {
                        type = "res";
                      }
                      var id = wsk["ID_PROCES"];

                      var temp = {};
                      temp["id_zasob"] = idZasob
                      temp["id"] = wsk["ID"];
                      temp["id_przypadek"] = wsk["ID_PRZYPADEK"];
                      temp["komentarz"] = wsk["OPIS_ZASOB"];
                      temp["desc"] = zasobInfo[idZasob]["DESC"];
                      temp["opis"] = zasobInfo[idZasob]["OPIS"];
                      temp["tree"] = zasobInfo[idZasob]["TREE"];
                      //console.log(temp);
                      state[getIndexById(id)][type].push(temp);
                    });

                    $("#main").html("<center>Generowanie widoku.</center>");
                    render(state, $("#main"));
                  })
                  .fail(function(xhr) {
                    if (xhr.responseJSON && xhr.responseJSON.msg && xhr.responseJSON.type) jQuery.notify(xhr.responseJSON.msg, xhr.responseJSON.type);
                    else jQuery.notify("Wystąpił nieznany błąd", 'error');
                  });
                } else {
                  $("#main").html("<center>Generowanie widoku.</center>");
                  render(state, $("#main"));
                }
            }
        });
    }

    $(document).ajaxStop(function() {
        if (loaded)
            return;
        //alert("OK");
        loaded = true;
        //$(".drop").find("dl").hide();
        loadResources();

    });
    $(document).on('click', '#clearBtn', function() {
        swal({
            title: 'Cofnij zmiany',
            text: "Czy chcesz cofnąć wszystkie niezapisane zmiany?",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            cancelButtonText: "Anuluj",
            confirmButtonText: 'Cofnij zmiany'
        }).then(function() {
            localStorage.removeItem("state" + mainProces_id);
            $.notify("Niezapisane zmiany zostały wycofane.", "success");
            showPreview();

            //Parent_id = -1,
        }).catch(function(e) {})
    });
    //Saveaction
    $(document).on('click', '#saveBtn', function() {
        $("#saveBtn").prop('disabled', true);
        $.notify("Rozpoczęto zapisywanie. Nie zamykaj tego okna", "info");
        //console.log("Saving has been started");
        var genReq = `
  <Transaction
    xmlns="http://www.opengis.net/wfs"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    version="1.0.0"
    service="WFS"
    xmlns:p5_default_db="` + BASE_URL + `wfs/default_db/CRM_PROCES"
    xsi:schemaLocation="` + BASE_URL + `wfs/default_db/CRM_PROCES ` + BASE_URL + `dev-pl/se-feature-api/wfs.php/xml/wfs/default_db/CRM_PROCES/?SERVICE=WFS&amp;VERSION=1.0.0&amp;REQUEST=DescribeFeatureType&amp;TYPENAME=p5_default_db:CRM_PROCES&amp;SRSNAME=EPSG:4326&amp;"
    xmlns:gml="http://www.opengis.net/gml">
    `;

        $.each(state, function(i, e) {
            if (e['id'] < 0) {
                genReq += `
            <Insert xmlns="http://www.opengis.net/wfs">
            <CRM_PROCES xmlns="` + BASE_URL + `wfs/default_db/CRM_PROCES">
            <PARENT_ID xmlns="` + BASE_URL + `wfs/default_db/CRM_PROCES">-1</PARENT_ID>
            </CRM_PROCES>
            </Insert>`;
            }
        });
        genReq += '</Transaction>';
        //console.log("genReq: " + genReq)
        var link = BASE_URL + 'wfs-data.php/default_db/?SERVICE=WFS&VERSION=1.0.0&SRSNAME=EPSG:3003&';
        //console.log(link);
        $.ajax({
            url: link,
            data: genReq,
            type: 'POST',
            contentType: "text/xml",
            dataType: "text",
            success: function(data) {
                //console.log("x: " + data);
                $(data).find("[fid]").each(function(i, e) {
                    var newId = $(e).attr("fid").substr($(e).attr("fid").indexOf('.') + 1);
                    generatedId.push(newId);
                });

                var i = 0;
                var newIdTab = Array();
                //console.log(generatedId);
                $.each(state, function(z, e) {

                    if (e["id"] < 0) {
                        newIdTab[e["id"]] = generatedId[i];
                        //console.log("he:" + generatedId[i]);
                        i++;
                    }
                });
                //console.log(newIdTab);

                var request = `
            <Transaction
            xmlns="http://www.opengis.net/wfs"
            xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
            version="1.0.0"
            service="WFS"
            xmlns:p5_default_db="` + BASE_URL + `wfs/default_db/CRM_PROCES"
            xsi:schemaLocation="` + BASE_URL + `wfs/default_db/CRM_PROCES ` + BASE_URL + `dev-pl/se-feature-api/wfs.php/xml/wfs/default_db/CRM_PROCES/?SERVICE=WFS&amp;VERSION=1.0.0&amp;REQUEST=DescribeFeatureType&amp;TYPENAME=p5_default_db:CRM_PROCES&amp;SRSNAME=EPSG:4326&amp;"
            xmlns:gml="http://www.opengis.net/gml">
            `;

                $.each(state, function(i, e) {
                    request += `
    <Insert xmlns="http://www.opengis.net/wfs">
      <CRM_PROCES xmlns="` + BASE_URL + `wfs/default_db/CRM_PROCES">
    `;
                    if (e["id"] >= 0)
                        request += '<ID xmlns="' + BASE_URL + 'wfs/default_db/CRM_PROCES">' + e["id"] + '</ID>';
                    else
                        request += '<ID xmlns="' + BASE_URL + 'wfs/default_db/CRM_PROCES">' + newIdTab[e["id"]] + '</ID>';


                    if (e["parent_id"] != false) {
                        if (e["parent_id"] >= 0)
                            request += '<PARENT_ID xmlns="' + BASE_URL + 'wfs/default_db/CRM_PROCES">' + e["parent_id"] + '</PARENT_ID>';
                        else
                            request += '<PARENT_ID xmlns="' + BASE_URL + 'wfs/default_db/CRM_PROCES">' + newIdTab[e["parent_id"]] + '</PARENT_ID>';

                        request += '<SORT_PRIO xmlns="' + BASE_URL + 'wfs/default_db/CRM_PROCES">' + e["SORT_PRIO"] + '</SORT_PRIO>';
                    }
                    if (typeof e["goto"] !== typeof undefined && e["goto"]["id"] !== null && e["goto"]["id"] !== 0 && e["goto"]["id"] !== "") {
                        request += '<IF_TRUE_GOTO xmlns="' + BASE_URL + 'wfs/default_db/CRM_PROCES">' + e["goto"]["id"] + '</IF_TRUE_GOTO>';
                        request += '<IF_TRUE_GOTO_FLAG xmlns="' + BASE_URL + 'wfs/default_db/CRM_PROCES">' + e["goto"]["flag"] + '</IF_TRUE_GOTO_FLAG>';
                    } else {
                        request += '<IF_TRUE_GOTO xmlns="' + BASE_URL + 'wfs/default_db/CRM_PROCES">0</IF_TRUE_GOTO>';
                        request += '<IF_TRUE_GOTO_FLAG xmlns="' + BASE_URL + 'wfs/default_db/CRM_PROCES"></IF_TRUE_GOTO_FLAG>';
                    }

                    request += '<DESC xmlns="' + BASE_URL + 'wfs/default_db/CRM_PROCES">' + e["desc"] + '</DESC>';
                    request += '<OPIS xmlns="' + BASE_URL + 'wfs/default_db/CRM_PROCES">' + e["opis"] + '</OPIS>';
                    request += `
    </CRM_PROCES>
  </Insert>
    `;
                    var id;
                    if (e["id"] >= 0)
                        id = e["id"];
                    else
                        id = newIdTab[e["id"]];
                    var sort_prio = 0;
                    $.each(e["prof"].concat(e["res"]), function(iR, eR) {
                        sort_prio++;
                        request += `
  <Insert xmlns="http://www.opengis.net/wfs">
    <CRM_WSKAZNIK xmlns="` + BASE_URL + `wfs/default_db/CRM_WSKAZNIK">
  `;
                        if (eR["id"] >= 0) {
                            request += '<ID xmlns="' + BASE_URL + 'wfs/default_db/CRM_WSKAZNIK">' + eR["id"] + '</ID>';
                        }
                        request += '<ID_ZASOB xmlns="' + BASE_URL + 'wfs/default_db/CRM_WSKAZNIK">' + eR["id_zasob"] + '</ID_ZASOB>';
                        request += '<ID_PROCES xmlns="' + BASE_URL + 'wfs/default_db/CRM_WSKAZNIK">' + id + '</ID_PROCES>';
                        request += '<ID_PRZYPADEK xmlns="' + BASE_URL + 'wfs/default_db/CRM_WSKAZNIK">' + eR["id_przypadek"] + '</ID_PRZYPADEK>';

                        var opis = eR["komentarz"];
                        opis = opis.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&apos;');
                        request += '<SORT_PRIO xmlns="' + BASE_URL + 'wfs/default_db/CRM_WSKAZNIK">' + sort_prio + '</SORT_PRIO>';
                        request += '<OPIS_ZASOB xmlns="' + BASE_URL + 'wfs/default_db/CRM_WSKAZNIK">' + opis + '</OPIS_ZASOB>';
                        request += `
</CRM_WSKAZNIK>
</Insert>
`;
                    });
                });
                $.each(deletedId, function(key, value) {
                    request += `
    <Insert xmlns="http://www.opengis.net/wfs">
      <CRM_PROCES xmlns="` + BASE_URL + `wfs/default_db/CRM_PROCES">
    `;

                    request += '<ID xmlns="' + BASE_URL + 'wfs/default_db/CRM_PROCES">' + value + '</ID>';
                    request += '<PARENT_ID xmlns="' + BASE_URL + 'wfs/default_db/CRM_PROCES">-1</PARENT_ID>';
                    request += '<A_STATUS xmlns="' + BASE_URL + 'wfs/default_db/CRM_PROCES">DELETED</A_STATUS>';
                    request += `
    </CRM_PROCES>
  </Insert>
    `;
                });

                $.each(deletedRes, function(key, value) {
                    request += `
    <Insert xmlns="http://www.opengis.net/wfs">
      <CRM_WSKAZNIK xmlns="` + BASE_URL + `wfs/default_db/CRM_WSKAZNIK">
    `;

                    request += '<ID xmlns="' + BASE_URL + 'wfs/default_db/CRM_WSKAZNIK">' + value + '</ID>';
                    request += '<A_STATUS xmlns="' + BASE_URL + 'wfs/default_db/CRM_WSKAZNIK">DELETED</A_STATUS>';
                    request += `
    </CRM_WSKAZNIK>
  </Insert>
    `;
                });

                request += '</Transaction>';

                //console.log(request);
                $.ajax({
                    url: link,
                    data: request,
                    type: 'POST',
                    contentType: "text/xml",
                    dataType: "text",
                    success: function(data) {
                        //console.log(data);
                        deletedRes = [];
                        deletedId = [];

                        //console.log(data);
                        localStorage.removeItem("state" + mainProces_id);
                        showPreview();
                        $.notify("Zmiany zostały zapisane na serwerze.", "success");
                        $("#saveBtn").prop('disabled', false);
                    },
                    error: function(xhr, ajaxOptions, thrownError) {
                        $.notify("Brak połączenia z bazą danych", "error");
                    }

                });
            },
            error: function(xhr, ajaxOptions, thrownError) {
                $.notify("Brak połączenia z bazą danych", "error");
            }
        });
    });

    $(document).on('click', '.btnEdit', function() {
        var parentIndex = getIndexById($(this).parents(".drop").data("id"));
        var type;
        if ($(this).parents("li").closest(".professions").length > 0)
            type = "prof";
        else
            type = "res";
        var zasobIndex = getResById(parentIndex, $(this).parents("li").data("id"), type);
        //console.log(zasobIndex);
        var permsOpt = "";
        $.each(perms, function(key, value) {
            if (state[parentIndex][type][zasobIndex]["id_przypadek"] == value[0])
                permsOpt = permsOpt + "<option value=" + value[0] + " selected=selected>[" + value[2] + "] " + value[1] + "</option>";
            else
                permsOpt = permsOpt + "<option value=" + value[0] + ">[" + value[2] + "] " + value[1] + "</option>";
        });
        swal({
            showCancelButton: true,
            title: 'Uprawnienia',
            html: 'Uprawnienia<br><select class=form-control id="swal-input1">' + permsOpt + '</select>' +
                'Komentarz<br><input class=form-control id="swal-input2" class="swal2-input" value="' + state[parentIndex][type][zasobIndex]["komentarz"] + '">',
            preConfirm: function() {
                return new Promise(function(resolve) {

                    resolve([
                        $('#swal-input1').val(),
                        $('#swal-input2').val()
                    ]);

                });
            }
        }).then(function(result) {
            state[parentIndex][type][zasobIndex]["id_przypadek"] = result[0];
            state[parentIndex][type][zasobIndex]["komentarz"] = result[1];
            state[parentIndex][type][zasobIndex]["changed"] = true;
            updateAll();
        }).catch(function(e) {})

    });

    //Buttony i ich zadania
    $(document).on('click', '.step', function() {
        newSteps--;
        var main = false;
        var temp = {};
        if ($(this).parents(".drop").data("id") === mainProces_id)
            main = true;

        $(this).parents(".drop").after("<div class='drop container-fluid' id='proc" + newSteps + "'></div>");

        temp["id"] = newSteps;
        temp["desc"] = "";
        temp["opis"] = "";
        var index = getIndexById($(this).parents(".drop").data("id"));
        //console.log(state[index]["depth"]);

        temp["step"] = 0;
        temp["prof"] = new Array();
        temp["res"] = new Array();
        temp["C-desc"] = true;
        temp["C-opis"] = true;
        temp["stepDesc"] = "";
        if (!main) {
            temp["parent_id"] = state[index]["parent_id"];
            temp["depth"] = state[index]["depth"];
        } else {
            temp["parent_id"] = mainProces_id;
            temp["depth"] = 1;
        }



        state.splice(index + 1, 0, temp);

        stepsGenerator();



        updateAll();

    });

    $(document).on('keyup', '#sProcesy', function() {

        if ($(this).val() != lastSearch) {
            lastSearch = $(this).val();
            clearTimeout(sProcesy);
            sProcesy = setTimeout(function() {
                if (lastSearch == "")
                    procesy();
                else
                    searchProc();
            }, 300);


        }
    });

    $(document).on('keyup', '#sZasoby', function() {

        if ($(this).val() != lastSearch) {
            lastSearch = $(this).val();
            clearTimeout(sZasoby);
            sZasoby = setTimeout(function() {
                if (filtr === 0 && lastSearch == "")
                    zasoby();
                else
                    searchRes();
            }, 300);


        }
    });


    function arraymove(arr, fromIndex, toIndex) {
        //console.log("move " + fromIndex + " " + toIndex);
        var element = [];
        var element = arr[fromIndex];
        arr.splice(fromIndex, 1);
        arr.splice(toIndex, 0, element);

    }

    $(document).on('click', '.uArrowRes', function() {
        var parent = getIndexById(($(this).parents(".drop").data("id")));
        //alert(parent);
        if ($(this).closest(".professions").length > 0)
            type = "prof";
        else
            type = "res";


        var id = getResById(parent, $(this).closest("li").data("id"), type);
        //alert(id);
        //console.log(state);
        arraymove(state[parent][type], id, id - 1);
        updateAll();
    });

    $(document).on('click', '.dArrowRes', function() {
        var parent = getIndexById(($(this).parents(".drop").data("id")));
        //alert(parent);
        if ($(this).closest(".professions").length > 0)
            type = "prof";
        else
            type = "res";


        var id = getResById(parent, $(this).closest("li").data("id"), type);
        //alert(id);
        arraymove(state[parent][type], id, id + 1);
        updateAll();

    });

    $(document).on('click', '.uArrow', function() {
        var id = $(this).parents(".drop").data("id");
        var index = getIndexById(id);

        arraymove(state, index, index - 1);


        updateAll();
    });

    $(document).on('click', '.dArrow', function() {
        var id = $(this).parents(".drop").data("id");
        var index = getIndexById(id);
        //console.log("id " + id + " index" + index);
        arraymove(state, index, index + 1);


        updateAll();
    });

    $(document).on('click', '.rArrow', function() {
        var id = $(this).parents(".drop").data("id");
        state[getIndexById(id)]["depth"]++;
        //var depthWidth = 20 * $(node).data("depth");
        // $(node).css("padding-left", depthWidth + "px");
        updateAll();
    });

    $(document).on('click', '.lArrow', function() {
        var id = $(this).parents(".drop").data("id");
        state[getIndexById(id)]["depth"]--;
        //var depthWidth = 20 * $(node).data("depth");
        // $(node).css("padding-left", depthWidth + "px");
        updateAll();
    });



    $(document).on('click', '#btnZasoby', function(e) {
        e.preventDefault();
        $(".lButton").removeClass("btn-primary");
        if (dialog == 0) {
            zasoby();
            $(this).addClass("btn-primary");
            $("#wrapper").removeClass("toggled");
            dialog = 1;
        } else if (dialog == 1) {
            $("#wrapper").addClass("toggled");
            dialog = 0;
        } else {
            $("#wrapper").addClass("toggled");
            $(this).addClass("btn-primary");
            setTimeout(function() {
                zasoby();
                $("#wrapper").removeClass("toggled");

            }, 500);
            dialog = 1;
        }


    });

    $(document).on('click', '#btnPhotos', function(e) {
        e.preventDefault();
        $(".lButton").removeClass("btn-primary");
        if (dialog == 0) {
            photos();
            $(this).addClass("btn-primary");
            $("#wrapper").removeClass("toggled");
            dialog = 3;
        } else if (dialog == 3) {
            $("#wrapper").addClass("toggled");
            dialog = 0;
        } else {
            $("#wrapper").addClass("toggled");
            $(this).addClass("btn-primary");
            setTimeout(function() {
                photos();
                $("#wrapper").removeClass("toggled");

            }, 500);
            dialog = 3;
        }


    });

    $(document).on('click', '#btnProcesy', function(e) {
        e.preventDefault();
        $(".lButton").removeClass("btn-primary");
        if (dialog == 0) {
            procesy();
            $("#wrapper").removeClass("toggled");
            $(this).addClass("btn-primary");

            dialog = 2;
        } else if (dialog == 2) {
            $("#wrapper").addClass("toggled");
            dialog = 0;
        } else {
            $("#wrapper").addClass("toggled");
            $(this).addClass("btn-primary");
            setTimeout(function() {
                procesy();
                $("#wrapper").removeClass("toggled");
            }, 500);

            dialog = 2;
        }


    });




    $(document).on('click', 'body', function() {
        if (selectedArea != false) {
            var content = $(selectedArea).val();



            var id = (selectedArea).parents(".drop").data("id");
            if ($(selectedArea).parent().hasClass("hdesc")) {
                state[getIndexById(id)]["desc"] = content;
                state[getIndexById(id)]["C-desc"] = true;
            }
            if ($(selectedArea).parent().hasClass("sdesc")) {
                state[getIndexById(id)]["opis"] = content;
                state[getIndexById(id)]["C-opis"] = true;
            }

            selectedArea = false;
            updateAll();

        }
    });




    $(document).on('click', '.hdesc', function() {
        if ($(this).find("textarea").is(selectedArea))
            return false;

    });

    $(document).on('click', '.sdesc', function() {
        if ($(this).find("textarea").is(selectedArea))
            return false;

    });


    $(document).on('dblclick', '.sdesc', function() {
        if (selectedArea)
            return;

        if ($(this).find("textarea").length == 0) {

            var content = $(this).html();

            $(this).empty();
            $(this).append("<textarea>" + content + "</textarea>");

            selectedArea = $(this).find("textarea");

        }

    });

    $(document).on('click', '.sDescAdd', function() {
        if (selectedArea)
            return;

        var action = $(this).parents(".drop").find(".sdesc");

        if ($(action).find("textarea").length == 0) {

            //alert($(action).text());
            $(action).html("<textarea placeholder='Opis kroku'>" + $(action).text() + "</textarea>");

            selectedArea = $(action).find("textarea");
            return false;
        }

    });

    $(document).on('click', '.hDescAdd', function() {
        if (selectedArea)
            return;

        var action = $(this).parents(".drop").find(".hdesc");
        //console.log(action);
        if ($(action).find("textarea").length == 0) {

            //alert($(action).text());

            $(action).html("<textarea placeholder='Tytuł kroku'>" + $(action).text() + "</textarea>");

            selectedArea = $(action).find("textarea");
            return false;
        }

    });

    $(document).on('dblclick', '.hdesc', function() {
        if ($(this).find("textarea").length == 0) {


            var content = $(this).html();

            $(this).empty();
            $(this).append("<textarea>" + content + "</textarea>");
            selectedArea = $(this).find("textarea");

        }

    });

    $(document).on('click', '.del', function() {
        var id = $(this).parents(".drop").data("id");
        var index = getIndexById(id);
        swal({
            title: 'Usuwanie kroku',
            text: "Czy napewno chcesz usunąć ten krok?",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            cancelButtonText: "Anuluj",
            confirmButtonText: 'Tak, usuń ten krok'
        }).then(function() {
            state.splice(index, 1);
            deletedId.push(id);
            updateAll();

            //Parent_id = -1,
        }).catch(function(e) {})


    });

    $(document).on('click', '.delGoto', function() {
        //var parent = $(this).parents(".drop");
        var id = $(this).parents("li").data("id");
        var parent = getIndexById($(this).parents(".drop").data("id"));



        swal({
            title: 'Usuwanie bramki',
            text: "Czy napewno chcesz usunąć tę bramkę?",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            cancelButtonText: "Anuluj",
            confirmButtonText: 'Tak, usuń tę bramkę'
        }).then(function() {
            state[parent]["goto"] = {
                id: "",
                flag: ""
            };



            updateAll();

            //Parent_id = -1,
        }).catch(function(e) {})


    });

    $(document).on('click', '.delRes', function() {
        //var parent = $(this).parents(".drop");
        var id = $(this).parents("li").data("id");
        var parent = getIndexById($(this).parents(".drop").data("id"));
        var type;
        if ($(this).closest(".professions").length > 0)
            type = "prof";
        else
            type = "res";


        var index = getResById(parent, id, type);


        swal({
            title: 'Usuwanie wskaźnika',
            text: "Czy napewno chcesz usunąć ten wskaźnik?",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            cancelButtonText: "Anuluj",
            confirmButtonText: 'Tak, usuń ten wskaźnik'
        }).then(function() {
            deletedRes.push(id);
            state[parent][type].splice(index, 1);



            updateAll();

            //Parent_id = -1,
        }).catch(function(e) {})


    });

    //
    $(document).on('click', '.fbutton', function(e) {
        e.preventDefault();
        $(".fbutton").removeClass("btn-success");

        if ($(this).data("type") == filtr) {
            filtr = 0;
            //console.log("Odznaczono");
        } else {
            filtr = $(this).data("type");
            $(this).addClass("btn-success");
        }
        if (filtr === 0)
            $("#xBtn").prop("disabled", true);
        else
            $("#xBtn").prop("disabled", false);
        if (filtr === 0) {
            zasoby();
        } else
            searchRes();

    });



    $(document).on('click', '.showMore', function() {
        var target = $(this).parent().find(".more");
        var id = $(this).data("id");
        if ($(target).parent().hasClass("resSelected")) {
            $(".more").empty();
            $(target).parent().removeClass("resSelected");
            $(target).parent().find(".gIco").addClass("glyphicon-chevron-down");
            $(target).parent().find(".gIco").removeClass("glyphicon-chevron-up");
        } else {
            $(".more").parent().removeClass("resSelected");
            $(".more").parent().find(".gIco").addClass("glyphicon-chevron-down");
            $(".more").parent().find(".gIco").removeClass("glyphicon-chevron-up");
            $(".more").empty();
            $(target).parent().addClass("resSelected");
            $(target).parent().find(".gIco").removeClass("glyphicon-chevron-down");
            $(target).parent().find(".gIco").addClass("glyphicon-chevron-up");

            var link = BASE_URL + "index.php?_route=UrlAction_ProcesEditor&_task=getResByParentAjax&parent_id=" + id;
            //console.log(link);
            $.get(link, function(data) {
                $.each(data, function(i, e) {
                    if (e["ID"] != 0) {
                        var type = 0;
                        $(target).append("<div class='dragStyle drag dragStyle hov' data-id=" + e["ID"] + " data-type=" + type + " data-desc='" + e["DESC"] + "' data-opis='" + e["OPIS"] + "'>" + e["DESC"] + " [" + e["ID"] + "]</div>");
                        for (var i = 3; i > 0; i--) {
                            if (e["p" + i + "_ID"] != null) {
                                var temp = {};
                                temp["ID"] = e["p" + i + "_ID"];
                                temp["DESC"] = e["p" + i + "_DESC"];
                                zasobTree[e["ID"]] = [];
                                zasobTree[e["ID"]].push(temp);
                            }
                        }
                        $('.drag').draggable({
                            appendTo: 'body',
                            helper: 'clone',
                            stack: "div",
                            distance: 0,
                            cursor: "copy"
                        });
                    }
                });
            });
        }
    });

    function searchProc() {
        var id = lastSearch;
        var link;
        //console.log("Szukam");

        link = BASE_URL + 'wfs-data.php/default_db/?SERVICE=WFS&VERSION=1.0.0&REQUEST=GetFeature&TYPENAME=p5_default_db:CRM_PROCES&SRSNAME=EPSG:3003&Filter=<ogc:Filter><ogc:Or><ogc:PropertyIsLike wildCard="*" singleChar="^" escapeChar="!"><ogc:PropertyName>ID</ogc:PropertyName><ogc:Literal>*' + id + '*</ogc:Literal></ogc:PropertyIsLike><ogc:PropertyIsLike wildCard="*" singleChar="%23" escapeChar="!"><ogc:PropertyName>DESC</ogc:PropertyName><ogc:Literal>*' + id + '*</ogc:Literal></ogc:PropertyIsLike></ogc:Or></ogc:Filter>&maxFeatures=100';

        $.get(link, function(data) {
            var side = $("#side");
            //console.log(data);
            $(side).find("#ulproc").empty();

            $.each($(data).find("featureMember"), function() {
                if ($(this).find("ID").text() * 1 == 0) {
                    $(side).find("#ulcon").append("<div><center>Brak wyników wyszukiwania</center></div>");
                    return;
                }

                $(side).find("#ulproc").append("<div class='dragStyle drag dragStyle hov' data-droptype=1 data-id=" + $(this).find("ID").text() + " > " + $(this).find("DESC").text() + " [" + $(this).find("ID").text() + "]</div>");
                $('.drag').draggable({
                    appendTo: 'body',
                    helper: 'clone',
                    stack: "div",
                    distance: 0,
                    cursor: "copy"
                });




            });

        });
    }

    function searchRes() {
        var id = lastSearch;
        var link;
        link = BASE_URL + "index.php?_route=UrlAction_ProcesEditor&_task=getResAjax&word=" + id + "&filter=" + filtr;
        // console.log(link);


        $.get(link, function(data) {
            var side = $("#side");
            //console.log(data);
            $(side).find("#ulcon").empty();
            if (data.length == 0)
                $(side).find("#ulcon").append("<div><center>Brak wyników wyszukiwania</center></div>");
            $.each(data, function(i, e) {
                var tree = "";
                for (var i = 3; i > 0; i--) {
                    if (e["p" + i + "_ID"] != null) {
                        var temp = {};
                        temp["ID"] = e["p" + i + "_ID"];
                        temp["DESC"] = e["p" + i + "_DESC"];
                        zasobTree[e["ID"]] = [];
                        zasobTree[e["ID"]].push(temp);
                        tree += e["p" + i + "_DESC"] + (i > 1 ? " <span class='glyphicon glyphicon-triangle-right'></span>" : "");
                    }
                }
                // console.log(e["TYPE"]);
                var type = 0;
                if (e["TYPE"] == "DZIAL" || e["TYPE"] == "PODMIOT" || e["TYPE"] == "STANOWISKO")
                    type = 1;
                if (filtr != 2 || e["TYPE"] != "TABELA")
                    $(side).find("#ulcon").append("<div class='drag dragStyle hov' data-id=" + e["ID"] + " data-type=" + type + " data-desc='" + e["DESC"] + "' data-opis='" + e["OPIS"] + "'><span class=treeInfo ><div>" + tree + "</div></span><br>" + e["DESC"] + " [" + e["ID"] + "]</div>");
                else {
                    $(side).find("#ulcon").append("<div ><span  class='drag dragStyle click' data-id=" + e["ID"] + " data-type=" + type + " data-desc='" + e["DESC"] + "' data-opis='" + e["OPIS"] + "'> # </span>  <div style=width:80%;float:left; data-id=" + e["ID"] + " class=showMore><span class=tabelaName><span class=treeInfo ><div>" + tree + "</div></span><br>" + e["DESC"] + "</span> [" + e["ID"] + "]</div><span class='gIco glyphicon glyphicon-chevron-down' style:float:left;></span><div style=clear:both;></div><div class=more ></div></div>");
                }
            });
            $('.drag').draggable({
                appendTo: 'body',
                helper: 'clone',
                stack: "div",
                distance: 0,
                cursor: "copy"
            });
            $(".drop").droppable({
                tolerance: 'pointer',
                accept: '.drag',
                hoverClass: "activeDrop",
                drop: function(event, ui) {
                    if (ui.draggable.data("dropType") == 1)
                        addProces(ui, this);
                    else
                        addResource(ui, this);
                }
            });
        });



    }

    $(document).on('click', '.liProc', function() {
        $(this).parents(".singleAdv").nextAll(".singleAdv").remove();
        $(this).parents(".singleAdv").find(".active").removeClass("active");
        $(this).find(".glyphicon").removeClass("glyphicon-triangle-right");
        $(this).find(".glyphicon").addClass("glyphicon-refresh");
        $(this).find(".glyphicon").addClass("anim-refresh");
        $(this).addClass("active");
        var parent = this;
        var parent_id = $(this).data("id");
        var link = BASE_URL + 'wfs-data.php/default_db/?SERVICE=WFS&VERSION=1.0.0&REQUEST=GetFeature&TYPENAME=p5_default_db:CRM_PROCES&SRSNAME=EPSG:3003&Filter=<ogc:Filter><ogc:PropertyIsEqualTo><ogc:PropertyName>PARENT_ID</ogc:PropertyName><ogc:Literal>' + parent_id + '</ogc:Literal></ogc:PropertyIsEqualTo></ogc:Filter>';
        var result = "";
        var depth = $(this).parents(".singleAdv").data("depth") + 1;
        $("#procCon").css("width", depth * 290 + 290);
        $(this).parents(".singleAdv").after("<div class='singleAdv list-group' data-depth=" + depth + " id=depth" + depth + "></div>");
        //console.log(link);
        var childs = true;
        $.get(link, function(data) {
            $(data).find("featureMember").each(function() {
                if ($(this).find("ID").text() == 0) {
                    childs = false;
                    return;
                }
                var type = 0;

                result += "<div class='list-group-item drag liProc' data-opis='" + $(this).find("OPIS").text() + "' data-desc='" + $(this).find("DESC").text() + "' data-droptype=1 data-id=" + $(this).find("ID").text() + " ><div class=textTable><span class=handle> # </span>" + $(this).find("DESC").text() + "</div><div class=detailsTable>[" + $(this).find("ID").text() + "]</div><div class='glyphicon glyphicon-triangle-right' style=opacity:0.4;float:right;></div><div class=clearfix></div></div>";
            });
            if (!childs) {
                result += '<div class="panel panel-primary">';
                result += '<div class="panel-heading"><h3 class="panel-title">[' + $(parent).data('id') + '] ' + $(parent).data("desc") + '</h3></div>';
                result += '<div class="panel-body pbody">';
                result += '<b>Opis: </b>' + $(parent).data("opis");

                result += '</div>';
                result += '</div>'
            }
            $("#depth" + depth).html(result);
            $('.drag').draggable({
                appendTo: 'body',
                handle: '.handle',
                helper: 'clone',
                stack: "div",
                distance: 0,
                cursor: "copy"
            });
            $(parent).find(".glyphicon").addClass("glyphicon-triangle-right");
            $(parent).find(".glyphicon").removeClass("glyphicon-refresh");
            $(parent).find(".glyphicon").removeClass("anim-refresh");
            $("#ulproc").scrollLeft(depth * 290 + 290);
            $("#ulproc").scrollTop(0);

        });
    });


    function procesy() {
        var side = $("#side");
        $(side).empty();

        //$(side).append("<h3>Zarządzaj zasobami<h3>");


        $(side).append("<div class='form-group' ><input type='text' class=form-control id=sProcesy placeholder='Szukaj procesów'></div>");

        $(side).append("<div id=ulproc><div id=procCon></div></div>");
        $(side).find("#procCon").append("<div class='singleAdv list-group' data-depth=0 id=depth0></div>");
        $(side).find("#procCon").append("<div class=clearfix></div>");
        var link = BASE_URL + 'wfs-data.php/default_db/?SERVICE=WFS&VERSION=1.0.0&REQUEST=GetFeature&TYPENAME=p5_default_db:CRM_PROCES&SRSNAME=EPSG:3003&Filter=<ogc:Filter><ogc:PropertyIsEqualTo><ogc:PropertyName>PARENT_ID</ogc:PropertyName><ogc:Literal>0</ogc:Literal></ogc:PropertyIsEqualTo></ogc:Filter>&sortBy=SORT_PRIO+A,ID';
        var result = "";
        $.get(link, function(data) {
            //console.log(data);

            $(data).find("featureMember").each(function() {
                var type = 0;
                result += "<div class='drag list-group-item liProc' data-droptype=1 data-opis='" + $(this).find("OPIS").text() + "' data-desc='" + $(this).find("DESC").text() + "' data-id=" + $(this).find("ID").text() + " >";
                result += "<div class=textTable><span class=handle> # </span>";
                result += $(this).find("DESC").text()
                result += "</div><div class=detailsTable> [" + $(this).find("ID").text() + "]</div>";
                result += "<div class='glyphicon glyphicon-triangle-right' style=opacity:0.4;float:right;></div><div class=clearfix></div></div>";


            });
            $("#depth0").html(result);
            $('.drag').draggable({
                appendTo: 'body',
                handle: '.handle',
                helper: 'clone',
                stack: "div",
                distance: 0,
                cursor: "copy"
            });
        });



    }

    $(document).on('click', '.liAdv', function() {
        $(this).find(".glyphicon").removeClass("glyphicon-triangle-right");
        $(this).find(".glyphicon").addClass("glyphicon-refresh");
        $(this).parents(".singleAdv").nextAll(".singleAdv").remove();
        $(this).parents(".singleAdv").find(".active").removeClass("active");
        $(this).addClass("active");
        var parent = this;
        var parent_id = $(this).data("id");
        var link = BASE_URL + 'wfs-data.php/default_db/?SERVICE=WFS&VERSION=1.0.0&REQUEST=GetFeature&TYPENAME=p5_default_db:CRM_LISTA_ZASOBOW&SRSNAME=EPSG:3003&Filter=<ogc:Filter><ogc:PropertyIsEqualTo><ogc:PropertyName>PARENT_ID</ogc:PropertyName><ogc:Literal>' + parent_id + '</ogc:Literal></ogc:PropertyIsEqualTo></ogc:Filter>&sortBy=SORT_PRIO+A,ID';
        var result = "";
        var depth = $(this).parents(".singleAdv").data("depth") + 1;
        $("#advCon").css("width", depth * 290 + 290);
        $(this).parents(".singleAdv").after("<div class='singleAdv list-group' data-depth=" + depth + " id=depth" + depth + "></div>");
        //console.log(link);
        var childs = true;
        $.get(link, function(data) {
            $(data).find("featureMember").each(function() {
                if ($(this).find("ID").text() == 0) {
                    childs = false;
                    return;
                }
                var type = 0;
                if ($(this).find("TYPE").text() == "DZIAL" || $(this).find("TYPE").text() == "PODMIOT" || $(this).find("TYPE").text() == "STANOWISKO")
                    type = 1;
                result += "<div class='list-group-item drag liAdv' data-typename='" + $(this).find("TYPE").text() + "' data-id=" + $(this).find("ID").text() + " data-type=" + type + " data-desc='" + $(this).find("DESC").text() + "' data-opis='" + $(this).find("OPIS").text() + "'  title='" + $(this).find("DESC").text() + "'><div class=textTable2><span class=handle> # </span>" + $(this).find("DESC").text() + "</div>";
                result += "<div class='glyphicon glyphicon-triangle-right' style=opacity:0.4;float:right;></div>";
                result += "<div class=clearfix></div><div class=detailsTable2>[" + $(this).find("ID").text() + "] " + $(this).find("TYPE").text() + "</div></div>";
            });
            if (!childs) {
                result += '<div class="panel panel-primary">';
                result += '<div class="panel-heading"><h3 class="panel-title">[' + $(parent).data('id') + '] ' + $(parent).data("desc") + '</h3></div>';
                result += '<div class="panel-body pbody">';
                result += '<b>Opis: </b>' + $(parent).data("opis");
                result += '<br><b>Typ: </b>' + $(parent).data("typename");
                result += '</div>';
                result += '</div>'
            }
            $("#depth" + depth).html(result);
            $('.drag').draggable({
                appendTo: 'body',
                handle: '.handle',
                helper: 'clone',
                stack: "div",
                distance: 0,
                cursor: "copy"
            });
            $(parent).find(".glyphicon").addClass("glyphicon-triangle-right");
            $(parent).find(".glyphicon").removeClass("glyphicon-refresh");
            $("#ulcon").scrollLeft(depth * 290 + 290);
            $("#ulcon").scrollTop(0);

        });
    });


    $(document).on('change', '#inp', function() {
      if (this.files && this.files[0]) {
        var link = BASE_URL + "wfs-data.php/default_db/?SERVICE=WFS&VERSION=1.0.0&SRSNAME=EPSG:3003";

        var name = this.files[0].name;
        var FR = new FileReader();
        FR.onload = function(e) {
          var contentBase64 = e.target.result;
          var xml = `<Transaction
    xmlns="http://www.opengis.net/wfs"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    version="1.0.0"
    service="WFS"
    xmlns:p5_objects="https://biuro.biall-net.pl/wfs/objects"
    xmlns:gml="http://www.opengis.net/gml">
    <Insert xmlns="http://www.opengis.net/wfs">
      <File xmlns="https://biuro.biall-net.pl/wfs/objects">
        <name xmlns="https://biuro.biall-net.pl/wfs/objects">`+name+`</name>
        <content xmlns="https://biuro.biall-net.pl/wfs/objects">`+contentBase64+`</content>
      </File>
    </Insert>
  </Transaction>`;


          $.ajax({
              url: link,
              data: xml,
              type: 'POST',
              contentType: "text/xml",
              dataType: "xml",
              success: function(data) {
                console.log(data);
              }
          });
        };
        FR.readAsDataURL( this.files[0] );
      }
    });

    function photos() {
        var side = $("#side");
        $(side).empty();

        var form = `
          <h4>Wrzuć pliki do swojego schowka</h4>
          <input id="inp" type='file'>

          <h4>Pliki w schowku</h4>`;
          console.log("test");
          $(side).append(form);
          var schowek = '<ul class="list-group" id=clipboard>';
          schowek += '<li class="list-group-item">';
          schowek += 'Test';
          schowek += '</li>';

          schowek += '</ul>';
          console.log(schowek);
          console.log("test");

          $(side).append(schowek);
      }

    function zasoby() {
        var side = $("#side");
        $(side).empty();
        //$(side).append("<h3>Zarządzaj zasobami<h3>");


        $(side).append("<div class='form-group' ><input type='text' class=form-control id=sZasoby placeholder='Szukaj zasobów'></div>");

        $(side).append("<div class='btn-group' style=width:100% id=filtry></div>");
        $("#filtry").append("<button type='button' data-type=1 class='fbutton btn btn-default input-block-level ' style=width:40%>Stanowiska</button>");
        $("#filtry").append("<button type='button' data-type=2 class='fbutton btn btn-default input-block-level ' style=width:40%>Komórki</button>");
        $("#filtry").append("<button type='button' data-type=0 class='fbutton btn btn-danger input-block-level' id=xBtn  style=width:20% disabled>X</button>");

        $(side).append("<div id=ulcon><div id=advCon></div></div>");
        $(side).find("#advCon").append("<div class='singleAdv list-group' data-depth=0 id=depth0></div>");
        $(side).find("#advCon").append("<div class=clearfix></div>");
        var link = BASE_URL + 'wfs-data.php/default_db/?SERVICE=WFS&VERSION=1.0.0&REQUEST=GetFeature&TYPENAME=p5_default_db:CRM_LISTA_ZASOBOW&SRSNAME=EPSG:3003&Filter=<ogc:Filter><ogc:PropertyIsEqualTo><ogc:PropertyName>PARENT_ID</ogc:PropertyName><ogc:Literal>0</ogc:Literal></ogc:PropertyIsEqualTo></ogc:Filter>&sortBy=SORT_PRIO+A,ID';
        var result = "";
        $.get(link, function(data) {
            //console.log(data);

            $(data).find("featureMember").each(function() {
                var type = 0;
                if ($(this).find("TYPE").text() == "DZIAL" || $(this).find("TYPE").text() == "PODMIOT" || $(this).find("TYPE").text() == "STANOWISKO")
                    type = 1;
                result += "<div class='drag list-group-item liAdv'";
                result += "data-typename='" + $(this).find("TYPE").text() + "' data-id=" + $(this).find("ID").text() + " data-type=" + type + " data-desc='" + $(this).find("DESC").text() + "' data-opis='" + $(this).find("OPIS").text() + "'"
                result += "title='" + $(this).find("DESC").text() + "'>"
                result += "<div class=textTable2>"
                result += "<span class=handle> # </span>" + $(this).find("DESC").text() + "</div>"
                result += "<div class='glyphicon glyphicon-triangle-right' style=opacity:0.4;float:right; style=float:left;></div>"
                result += "<div class=clearfix></div>"
                result += "<div class=detailsTable2>[" + $(this).find("ID").text() + "] " + $(this).find("TYPE").text() + "</div>"
                result += "</div>";


            });
            $("#depth0").html(result);
            $('.drag').draggable({
                appendTo: 'body',
                handle: '.handle',
                helper: 'clone',
                stack: "div",
                distance: 0,
                cursor: "copy"
            });
        });
        //$(side).find("#ulcon").append("<div class='drag' data-id=1 data-type=1 >[STANOWISKO] Ulotkarz</div>");
        //$(side).find("#ulcon").append("<div class='drag' data-id=2 data-type=1 >[STANOWISKO] Programista PHP</div>");
        //$(side).find("#ulcon").append("<div class='drag' data-id=3 data-type=2 >[ZASÓB] Komputer</div>");



    }

    function addProces(ui, target) {
        var id = $(target).data("id");
        var gotoOpt = "";
        $.each(gotoType, function(key, value) {
            gotoOpt += "<option value=" + value[0] + ">" + value[1] + "</option>";



        })
        swal({
            showCancelButton: true,
            cancelButtonText: "Anuluj",
            title: 'Typ łącza',
            html: (typeof state[getIndexById(id)]["goto"] !== typeof undefined && state[getIndexById(id)]["goto"]["id"] != null && state[getIndexById(id)]["goto"]["id"] != 0 ? '<span class=class="alert alert-warning"><strong>Uwaga!</strong> Nowe łącze nadpisze już istniejące łącze.</span><br>' : "") + '<br><select class=form-control id="swal-input1">' + gotoOpt + '</select>',
            preConfirm: function() {
                return new Promise(function(resolve) {

                    resolve([
                        $('#swal-input1').val()
                    ]);


                });
            }
        }).then(function(result) {
            //console.log("Dodaj zasob " + ui.draggable.data("id") + " do " + $(target).data("id") + " i uprawnienia id " + result[0] + " komentarz: " + result[1]); //
            newRes--;
            var temp = {};
            temp["flag"] = result[0];
            temp["id"] = ui.draggable.data("id");

            //console.log(temp);
            //console.log(state[getIndexById(id)]);
            state[getIndexById(id)]["goto"] = temp;

            updateAll();
        }).catch(function(e) {})




    }

    function addResource(ui, target) {
        var permsOpt = "";
        $.each(perms, function(key, value) {
            permsOpt = permsOpt + "<option value=" + value[0] + ">[" + value[2] + "] " + value[1] + "</option>";



        })
        swal({
            showCancelButton: true,
            cancelButtonText: "Anuluj",
            title: 'Uprawnienia',
            html: 'Uprawnienia<br><select class=form-control id="swal-input1">' + permsOpt + '</select>' +
                'Komentarz<br><input class=form-control id="swal-input2" class="swal2-input">',
            preConfirm: function() {
                return new Promise(function(resolve) {

                    resolve([
                        $('#swal-input1').val(),
                        $('#swal-input2').val()
                    ]);


                });
            }
        }).then(function(result) {
            // console.log(zasobTree);
            //console.log("Dodaj zasob " + ui.draggable.data("id") + " do " + $(target).data("id") + " i uprawnienia id " + result[0] + " komentarz: " + result[1]); //
            newRes--;
            var temp = {};
            temp["id_zasob"] = ui.draggable.data("id");
            temp["id"] = newRes;
            temp["id_przypadek"] = result[0];
            temp["komentarz"] = result[1];
            temp["changed"] = true;
            temp["opis"] = ui.draggable.data("opis");
            temp["desc"] = ui.draggable.data("desc");
            temp["tree"] = zasobTree[temp["id_zasob"]];
            var id = $(target).data("id");
            if (ui.draggable.data("type") == 1) {
                state[getIndexById(id)]["prof"].push(temp);
            } else {
                state[getIndexById(id)]["res"].push(temp);
            }
            updateAll();
        }).catch(function(e) {})




    }




    //Najwazniejsza funkcja odpalana po kazdej zmianie. Sprawdza, czy wszystkie funkcje maja rodzica,
    //jezeli nie to przesuwa w lewo obiekt
    //Odpowiada tez za ukrywanie guzikow i wywowalanie funkcji generacji krokow
    function updateAll() {


        $.each(state, function(i, e) {
            var pid = getParentNode(e["id"]);
            if (pid != "NONE" && pid != false && pid != e["parent_id"]) {
                e["parent_id"] = pid;
                //console.log("Ustawiono nowe parent_id na " + e["parent_id"] + " dla " + e["id"]); //
            } else if (pid === false) {
                e["depth"]--;
                //var depthWidth = 20 * $(node).data("depth");
                //$(node).css("padding-left", depthWidth + "px");
                updateAll();
                return;
            }
            if (checkParentNode(e["id"], "right") === false) {
                $(this).find(".rArrow").hide();
            } else {
                $(this).find(".rArrow").show();
            }
            if (checkParentNode(e["id"], "left") === false) {
                $(this).find(".lArrow").hide();
            } else {
                $(this).find(".lArrow").show();
            }

            if (i == 1)
                $(this).find(".uArrow").hide();
            else
                $(this).find(".uArrow").show();

            if (i == state.length - 1) {
                $(this).find(".dArrow").hide();
            } else {
                $(this).find(".dArrow").show();
            }

        });
        //console.log(JSON.stringify(state));
        changes = true;
        $("#clearBtn").show();

        localStorage.setItem("state" + mainProces_id, JSON.stringify(state));
        localStorage.setItem("newStep" + mainProces_id, newSteps);
        localStorage.setItem("newRes" + mainProces_id, newRes);
        localStorage.setItem("deletedId" + mainProces_id, JSON.stringify(deletedId));
        localStorage.setItem("deletedRes" + mainProces_id, JSON.stringify(deletedRes));
        localStorage.setItem("date" + mainProces_id, moment().format("YYYY-MM-DD HH:mm:ss"));
        render(state, $("#main"));

    }

    //Generuje kroki, sprawdza tez czy kolejnosc krokow w danym rodzicow zostala zmieniona
    //Jezeli tak to mozna wyslac ajaxem zmiane kolejnosci dla sort_prio
    function stepsGenerator() {


        $.each(state, function(i, e) {
            e["step"] = 0;
            if (i == 0)
                e["stepDesc"] = "";
            else {
                var iParent = getIndexById(e["parent_id"]);
                //console.log("Generowanie step dla "+e["id"]);
                //console.log("iParent "+iParent);
                state[iParent]["step"] += 1;
                //console.log(state[iParent]["step"]);
                e["SORT_PRIO"] = state[iParent]["step"];
                e["stepDesc"] = state[iParent]["stepDesc"] + state[iParent]["step"] + ". ";
            }
        });
    }



    //Na potrzeby guzikow dorobilem funkcje sprawdzajaca id rodzica po przesunieciu (przewidywanie).
    //Jezeli nie znajdzie zwraca false, a wtedy blokuje sie odpowiednia strzalka
    function checkParentNode(id, check) {
        var x = getIndexById(id);
        var y = x;
        //console.log(tab);
        var result = false;
        while (x > 0) {
            x--;

            if (check == "right")
                if (state[x]["depth"] == state[y]["depth"]) {
                    result = state[x]["id"];

                    break;
                }
            if (check == "left")
                if (state[x]["depth"] == state[y]["depth"] - 2) {
                    result = state[x]["id"];
                    break;
                }

            if (check == "right" && state[x]["depth"] < state[y]["depth"])
                break;


        }
        return result;
    }

    //Zwraca id rodzica, jezeli nie ma zwraca false
    function getParentNode(id) {
        var x = getIndexById(id);
        var y = x;
        if (x == 0)
            return "NONE";

        var result = false;
        while (x > 0) {
            x--;

            if (state[x]["depth"] == state[y]["depth"] - 1) {
                result = state[x]["id"];
                break;
            }

            if (state[x]["depth"] - state[y]["depth"] == -2)
                break;
        }
        return result;
    }

    function getResById(index, id, type) {
        var result = state[index][type].length - 1;
        $.each(state[index][type], function(i, e) {
            //console.log(e["id"]);
            //console.log(id);
            if (e["id"] == id) {
                //console.log("Zwraca "+i);
                result = i;
                return false;
            }
        });
        return result;
    }

    function getIndexById(id) {
        //console.log("Szuka"+id);
        var result = state.length - 1;
        $.each(state, function(i, e) {
            //console.log(e["id"]);
            //console.log(id);
            if (e["id"] == id) {
                //console.log("Zwraca "+i);
                result = i;
                return false;
            }
        });
        return result;
    }

    /*function logState() {
        //console.log("########");
        $.each(state, function(i, e) {
            //console.log(i + ": " + e["id"]);

        });
        //console.log("########");
    }*/
    $(document).on('click', '.stateOff', function() {
        $(this).closest(".mx").prev(".tree").show();
        $(this).closest(".mx").remove();


    });

    $(document).on('click', '.tree', function() {
        var type;
        if ($(this).closest("ul").hasClass("resources")) {
            type = "res";
        } else {
            type = "prof"
        }
        var id = getIndexById($(this).closest(".drop").data("id"));
        var resId = getResById(id, $(this).closest(".liRes").data("id"), type);
        $(this).hide();
        showTree( state[id][type][resId]["tree"], $(this) );
    });

    function showTree(arr, target) {
        result = "";
        $.each(arr, function(i, x) {
            result += "<li style=padding-left:" + i * 16 + "px;><span class='glyphicon glyphicon-arrow-right'></span> " + x["DESC"] + "</li>";
        });
        $(target).after("<div class=mx><div class=stateOff><span class='glyphicon glyphicon-chevron-up'></span></div> <ul style=padding-left:0px;>" + result + "</ul></div>");
    }

    function render(arr, target) {
        stepsGenerator();
        var result = "";
        // console.log(arr);
        $.each(arr, function(i, e) {
            result += "<div class='drop container-fluid' data-id=" + e["id"] + " id='proc" + e["id"] + "'>";
            result += "<div class='col-xs-1 options' style=text-align:right;padding-top:2px; id=opt" + e["id"] + ">";
            if (i > 0) {
                result += "<span class='glyphicon glyphicon-remove-sign ico del' title='Usuń krok' aria-hidden='true'></span>";
                //Arrows
                if (checkParentNode(e["id"], "right") !== false)
                    result += "<span class='glyphicon glyphicon-arrow-right ico rArrow' aria-hidden='true' title='Przesuń krok w prawo'></span>";
                if (checkParentNode(e["id"], "left") !== false)
                    result += "<span class='glyphicon glyphicon-arrow-left ico lArrow' aria-hidden='true' title='Przesuń krok w lewo'></span>";

                if (i != 1)
                    result += "<span class='glyphicon glyphicon-arrow-up ico uArrow'  aria-hidden='true' title='Przesuń krok w górę'></span>";


                if (i != state.length - 1)
                    result += "<span class='glyphicon glyphicon-arrow-down ico dArrow' aria-hidden='true' title='Przesuń krok w dół'></span>";
            } else {

            }
            result += "<span class='hDescAdd glyphicon glyphicon-edit ico' title='Edytuj tytuł'></span>";
            result += "<div class='clearfix'></div>";

            if (e["opis"] == "")
                result += "<span class=sDescAdd>Dodaj opis</span>";
            else
                result += "<span class=sDescAdd>Edytuj opis</span>";
            result += "</div>";
            result += "<div class='col-xs-11 desc' id='desc" + e["id"] + "' ><h4 class='changable " + (e["C-desc"] ? "changed" : "") + "'><span class='stepDesc'>" + e["stepDesc"] + "</span><span class=hdesc>" + e["desc"] + "</span> <span class=ids>{" + (e["id"] >= 0 ? e["id"] : "?") + "}</span></h4><span  class='sdesc changable " + (e["C-opis"] ? "changed" : "") + "'>" + e["opis"] + "</span>";

            // }
            // if ($(this).find("OPIS").text() == "") {
            //     $("#proc" + $(this).find("ID").text()).find(".sdesc").after("<span class=sDescAdd>Dodaj opis</span>");
            // }
            result += "<div class='clearfix'></div>";
            var anyProf = false;
            $.each(e["prof"], function(i2, e2) {
                if (!anyProf) {
                    result += "<div class=row><div class=col-sm-2 style=font-size:1.2em;text-align:right;opacity:1>Stanowiska</div></div><ul class=professions style=padding:0;>";
                    anyProf = true;
                }

                result += "<li style=padding-top:5px;padding-bottom:5px; class='liRes' data-zasob=" + e2["id_zasob"] + " data-id=" + e2["id"] + " data-przypadek=" + e2["id_przypadek"] + " data-komentarz='" + e2["komentarz"] + "'><div class=row>";
                result += "<div class=col-sm-2 style=text-align:right;>";
                if (i2 != 0)
                    result += "<span class='glyphicon glyphicon-arrow-up uArrowRes' title='Przesuń wskaźnik w górę' aria-hidden='true'></span>";
                if (i2 != e["prof"].length - 1)
                    result += "<span class='glyphicon glyphicon-arrow-down dArrowRes' title='Przesuń wskaźnik w dół' aria-hidden='true'></span>";
                result += "<span aria-hidden='true' class='glyphicon glyphicon-edit btnEdit' title='Edytuj wskaźnik' style=font-size:12px;></span><span class='glyphicon glyphicon-remove-sign delRes' title='Usuń wskaźnik' style=font-size:12px; aria-hidden='true' ></span>";
                result += "</div>";
                result += "<div class='col-sm-10 changable " + (e2["changed"] ? "changed" : "") + " '><b>" + e2["desc"] + "</b> " + e2["opis"] + " [" + e2["id_zasob"] + "] <br><span class=tree>";
                result += "<span class=state><span class='glyphicon glyphicon-chevron-down'></span></span> ";
                $.each(e2["tree"], function(i, x) {
                    result += x["DESC"] + (i < e2["tree"].length - 1 ? " <span class='glyphicon glyphicon-triangle-right'></span>" : "");
                });
                result += "<div class=moreInfo></div></span></div>";


                result += "</div></li>";

            });
            if (anyProf) {
                result += "</ul>";
            }
            var anyRes = false;
            $.each(e["res"], function(i2, e2) {
                if (!anyRes) {
                    result += "<div class=row><div class=col-sm-2 style=font-size:1.2em;text-align:right;opacity:1>Użyte zasoby</div></div><ul class=resources style=padding:0;>";
                    anyRes = true;
                }
                result += "<li style=padding-top:5px;padding-bottom:5px; class='liRes' data-zasob=" + e2["id_zasob"] + " data-id=" + e2["id"] + " data-przypadek=" + e2["id_przypadek"] + " data-komentarz='" + e2["komentarz"] + "'><div class=row>";
                result += "<div class=col-sm-2 style=text-align:right;>";
                if (i2 != 0)
                    result += "<span class='glyphicon glyphicon-arrow-up uArrowRes' title='Przesuń wskaźnik w górę' aria-hidden='true'></span>";
                if (i2 != e["prof"].length - 1)
                    result += "<span class='glyphicon glyphicon-arrow-down dArrowRes' title='Przesuń wskaźnik w dół' aria-hidden='true'></span>";
                result += "<span aria-hidden='true' class='glyphicon glyphicon-edit btnEdit' title='Edytuj wskaźnik' style=font-size:12px;></span><span class='glyphicon glyphicon-remove-sign delRes' title='Usuń wskaźnik' style=font-size:12px; aria-hidden='true' ></span>";
                result += "</div>";
                result += "<div class='col-sm-10 changable " + (e2["changed"] ? "changed" : "") + " '><b>" + e2["desc"] + "</b> " + e2["opis"] + " [" + e2["id_zasob"] + "] <br><span class=tree>";
                result += "<span class=state><span class='glyphicon glyphicon-chevron-down'></span></span> ";
                $.each(e2["tree"], function(i, x) {
                    result += x["DESC"] + (i < e2["tree"].length - 1 ? "<span class='glyphicon glyphicon-triangle-right'></span> " : "");
                });
                result += "</span></div>";

                result += "</div></li>";
            });
            if (anyRes) {
                result += "</ul>";
            }
            if (typeof e["goto"] !== typeof undefined && e["goto"]["id"] != null && e["goto"]["id"] != 0) {
                var name;
                switch (e["goto"]["flag"]) {
                    case "GOTO":
                        name = "Przejdź do procesu " + e["goto"]["id"] + ".";
                        break;
                    case "GOTO_AND_RETURN":
                        name = "Przejdź do procesu " + e["goto"]["id"] + ", a następnie wróć.";
                        break;
                    case "FORK":
                        name = "&mdash; FORK" + e["goto"]["id"];
                        break;
                    default:
                        name = e["goto"]["id"];
                }

                result += "<span style=color:grey; class=goto>&mdash; " + name + "</span> <span class='glyphicon glyphicon-remove-sign delGoto' title='Usuń GOTO' style=font-size:12px; aria-hidden='true' ></span>";
            }



            result += "<br><span class=step>Dodaj nowy krok</span>";
            result += "</div>"
            result += "</div>";


        });
        //console.log(result);
        $(target).html(result);

        $('.drag').draggable({
            appendTo: 'body',
            helper: 'clone',
            stack: "div",
            distance: 0,
            cursor: "copy"
        });
        $(".drop").droppable({
            tolerance: 'pointer',
            accept: '.drag',
            zIndex: 0,
            hoverClass: "activeDrop",
            drop: function(event, ui) {
                if (ui.draggable.data("droptype") == 1)
                    addProces(ui, this);
                else
                    addResource(ui, this);


            }
        });


    }

    function genTree(parent_id) {
        //logState();
        var link = BASE_URL + '/wfs-data.php/default_db/?SERVICE=WFS&VERSION=1.0.0&REQUEST=GetFeature&TYPENAME=p5_default_db:CRM_PROCES&SRSNAME=EPSG:3003&Filter=<ogc:Filter><ogc:Or><ogc:PropertyIsEqualTo><ogc:PropertyName>PARENT_ID</ogc:PropertyName><ogc:Literal>' + parent_id + '</ogc:Literal></ogc:PropertyIsEqualTo></ogc:Or></ogc:Filter>&sortBy=SORT_PRIO+A,ID';
        //console.log(link);
        $.ajax({
            url: link,
            success: function(data) {
                //console.log(data);
                var i = 0;
                $.each($(data).find("featureMember"), function() {
                    var temp = {};
                    if ($(this).find("ID").text() == "0")
                        return;
                    var parentIndex = getIndexById(parent_id);
                    temp["id"] = $(this).find("ID").text();
                    temp["desc"] = $(this).find("DESC").text();
                    temp["opis"] = $(this).find("OPIS").text();
                    temp["parent_id"] = $(this).find("PARENT_ID").text();
                    temp["depth"] = state[parentIndex]["depth"] + 1;
                    temp["step"] = 0;
                    temp["changes"] = {};
                    temp["prof"] = new Array();
                    temp["res"] = new Array();
                    temp["goto"] = {};
                    temp["goto"]["id"] = $(this).find("IF_TRUE_GOTO").text();
                    temp["goto"]["flag"] = $(this).find("IF_TRUE_GOTO_FLAG").text();
                    temp["stepDesc"] = "";
                    i++;
                    state.splice(parentIndex + i, 0, temp);
                    genTree($(this).find("ID").text());
                });
            }
        });



    }

    //Pierwszy render, tworzy potrzebna strukture
    function showPreview() {
        changes = false;
        $("#clearBtn").hide();
        lastSearch = "";
        filtr = 0;
        selectedArea = false;
        state = [];
        newSteps = 0;
        newRes = 0;
        deletedId = [];
        deletedRes = [];
        generatedId = [];

        if (false && localStorage.getItem("state" + mainProces_id) !== null) {
            state = JSON.parse(localStorage.getItem("state" + mainProces_id));
            newSteps = localStorage.getItem("newStep" + mainProces_id);
            newRes = localStorage.getItem("newRes" + mainProces_id);
            deletedId = JSON.parse(localStorage.getItem("deletedId" + mainProces_id));
            deletedRes = JSON.parse(localStorage.getItem("deletedRes" + mainProces_id));
            //console.log("z");
            //console.log(localStorage.getItem("state" + mainProces_id));
            $.notify("Wczytano niezapisany stan z " + localStorage.getItem("date" + mainProces_id), "info");
            //console.log(state);
            render(state, $("#main"));
            loaded = true;

        } else {
            $("#main").html("<center>Synchronizowanie danych z serwerem.</center>");

            var id = mainProces_id;
            var link = BASE_URL + '/wfs-data.php/default_db/?SERVICE=WFS&VERSION=1.0.0&REQUEST=GetFeature&TYPENAME=p5_default_db:CRM_PROCES&SRSNAME=EPSG:3003&Filter=<ogc:Filter><ogc:Or><ogc:PropertyIsEqualTo><ogc:PropertyName>ID</ogc:PropertyName><ogc:Literal>' + id + '</ogc:Literal></ogc:PropertyIsEqualTo></ogc:Or></ogc:Filter>';
            //console.log(link);
            $.get(link, function(data) {
                var temp = {};
                loaded = false;
                temp["id"] = mainProces_id;
                temp["depth"] = 0;
                temp["parent_id"] = false;
                temp["step"] = 0;
                temp["goto"] = {};
                temp["goto"]["id"] = $(data).find("featureMember").find("IF_TRUE_GOTO").text();
                temp["goto"]["flag"] = $(data).find("featureMember").find("IF_TRUE_GOTO_FLAG").text();
                temp["changes"] = {};
                temp["stepDesc"] = "";
                temp["prof"] = new Array();
                temp["res"] = new Array();
                temp["desc"] = $(data).find("featureMember").find("DESC").text();
                temp["opis"] = $(data).find("featureMember").find("OPIS").text()
                tab.push(mainProces_id);
                state[0] = temp;
                genTree(mainProces_id);
            });
            actSite = "preview";
        }
    }
});

function unloadPage() {
    if (changes)
        return "";
}

window.onbeforeunload = unloadPage;