se/SE/static/procesView.js

$(document).ready(function(){
  var state = {};
  var panels = true;
  var menuShow = false;
  var sTimeout = false;
  $("#SE-menu").hide();
  $("#SE-menu-sub").hide();

  function translate(objId){
    var data = [];
      $.each(state[objId]["childs"], function(indexChilds, childs){
        var temp = {};
        var id = childs["ID"];
        var style = "";
        switch(state[id]["TYPE"]){
          case "PROCES_INIT":    style = 'style="background-color:#ffe5e5;color:#333"';break;
          case "PROCES":         style = 'style="background-color:#ededed;color:#333"';break;
          case "PROCES_GROUP_1": style = 'style="background-color:#9999cc;color:#fff"';break;
          case "PROCES_GROUP_2": style = 'style="background-color:#d8d8b2;color:#fff"';break;
          default:               style = 'style="background-color:#ededed;color:#333"';break;
        }
        temp["id"] = id;
        temp["text"] = "<span class=detailsTable2 "+style+" >"+id+"</span> "+state[id]["DESC"];
        temp["parent"] = state[id]["PARENT_ID"];
        data.push(temp);
        //console.log(data);
        $.merge(data, translate(id));
      });
      return data;
  }


    $(document).on('keyup', '#search', function(e) {
      if(sTimeout) { clearTimeout(sTimeout); }
      sTimeout = setTimeout(function () {
        var val = $('#search').val();
        $('#tree').jstree(true).search(val, false);

      }, 250);
    });

  function renderTree(){
    // jQuery.jstree.defaults.core.themes.responsive = true;
    $('#view').empty();
    $("#view").append("<input id=search type=next class=form-control>")
    $('#view').append("<div id=tree></div>");
    $('#tree').jstree({
  "core" : {
    "animation" : 0,
    "check_callback" : true,
    "themes" : { "stripes" : false, "dots": false },
    'data' : translate(0)
  },
  "types" : {
    "root" : {
      "icon" : "/static/3.3.2/assets/images/tree_icon.png",
      "valid_children" : ["default"]
    },
    "default" : {
      "valid_children" : ["default","file"]
    },
    "file" : {
      "icon" : "glyphicon glyphicon-file",
      "valid_children" : []
    }
  },
  "plugins" : [
    "contextmenu", "dnd", "search",
   "types"
  ],
  "search": {
        // search config
        "show_only_matches": true,
        },
  "contextmenu":{
    "items": function(node) {
        var tree = $("#tree").jstree(true);
        var id = node.id;
        return {
            "ProcesEditor": {
                "separator_before": false,
                "separator_after": false,
                "label": "Edytor procesów",
                "action": function (obj) {
                  window.location = BASE_URL+'index.php?_route=UrlAction_procesEditor&id='+id;
                }
            },
            "EditProces": {
                "separator_before": false,
                "separator_after": false,
                "label": "Edytuj proces",
                "action": function (obj) {
                  window.location = BASE_URL+'index.php?_route=ViewTableAjax&typeName=p5_default_db:CRM_PROCES#EDIT/'+id;
                }
            },
            "AddPytania": {
                "separator_before": false,
                "separator_after": true,
                "label": "Edytuj pytania",
                "action": function (obj) {
                  window.location = BASE_URL+'procesy5.php?task=CRM_TESTY_ADD_PYTANIA&id_proces='+id;
                }
            },

            "ProcesMap": {
                "separator_before": false,
                "separator_after": false,
                "label": "Mapa procesu",
                "action": function (obj) {
                  window.location = BASE_URL+'index.php?FUNCTION_INIT=GRAPH_VIEW_PROCES&PROCES_INIT_SCAN=1&id_proces='+id;
                }
            },
            "ListView": {
                "separator_before": false,
                "separator_after": false,
                "label": "Widok listy",
                "action": function (obj) {
                  window.location = BASE_URL+'procesy5.php?task=PROCES_VIEW_LIST&HIDE_PANEL=0&show_big_img=1&group_stanowiska=1&id_proces='+id;
                }
            },
            "AddResource": {
                "separator_before": true,
                "separator_after": false,
                "label": "Dodaj zasób",
                "action": function (obj) {
                  window.location = BASE_URL+'index.php?MENU_INIT=PROCES_ADD_ZASOB&task=CRM_PROCES&procesID='+id;
                }
            },
            "AddChild": {
                "separator_before": false,
                "separator_after": false,
                "label": "Dodaj dziecko",
                "action": function (obj) {
                  window.location = BASE_URL+'index.php?_route=ViewTableAjax&typeName=p5_default_db:CRM_PROCES&ff_PARENT_ID='+id+'#CREATE';
                }
            },



        };
    }
}
});

  }

  function renderPanels(){

    $("#view").empty();

    var next = 0;
    var result = "";
    var depth = 0;
    var previous = false;
    result += "<div id=ulproc><div id=procCon>";
    while(next !== false){
      depth++;

      //console.log(next);
      result += "<div class=singleAdv data-depth=0 id=depth0 data-parent="+next+" ><ul  class='singleAdvList list-group' list-group'  style=margin-bottom:0px;>";
      var details = false;
      //console.log("next: ", next);
      //console.log("prev: ", previous);
      if(previous !== false)
      //console.log("x", state[previous]["details"]);
      if(previous !== false && state[previous]["details"] == true){
        //console.log("ok");
        result += getDetails(state[next]);
        details = true;
        next = false;
      }

      if(!details ){
          if(state[next]["childs"].length > 0){
          $.each(state[next]["childs"], function(i, e){
              if(state[next]["active"] == e["ID"])
                result += getView(state[e["ID"]], true);
              else
                result += getView(state[e["ID"]], false);
          });
          previous = next;
          next = state[next]["active"];
        } else {
          result += getDetails(state[next]);
          next = false;

        }
    }

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


    }
    result += "<div class=clearfix></div></div></div>";
    $("#ulproc").scrollTop(0);
    $("#view").html(result);
    $("#procCon").css("width", depth * 460);
    $("#ulproc").scrollLeft(depth * 460);
    $(".singleAdv").css("height", $( window ).height()-100 + "px");


    //console.log(result);

  }

  function render(){
    if(panels){
      console.log("panels");
      renderPanels();
    }else{
      console.log("drzewo");
      renderTree();
    }
  }

  function updateParent(id, parent, item){
    var link = BASE_URL + 'wfs-data.php/default_db/?SERVICE=WFS&VERSION=1.0.0&SRSNAME=EPSG:3003&';

    var req = `
<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">
<Insert xmlns="http://www.opengis.net/wfs">
<CRM_PROCES xmlns="` + BASE_URL + `wfs/default_db/CRM_PROCES">
<ID xmlns="` + BASE_URL + `wfs/default_db/CRM_PROCES">`+id+`</ID>
<PARENT_ID xmlns="` + BASE_URL + `wfs/default_db/CRM_PROCES">`+parent+`</PARENT_ID>
</CRM_PROCES>
</Insert>
</Transaction>`;
console.log(req);
$.ajax({
    url: link,
    data: req,
    type: 'POST',
    contentType: "text/xml",
    dataType: "text",
    success: function(data) {
      return true;
    },
    error: function(xhr, ajaxOptions, thrownError) {
        $(item).sortable('cancel');
        $.notify("Brak połączenia z bazą danych", "error");
    }
  });

  }

  function getDetails(e){
    console.log("test", e);
    var result = "";
    result += '<div class="panel panel-primary">';
    result += '<div class="panel-heading"><h3 class="panel-title">[' + e["ID"] + '] ' + e["DESC"] + '</h3></div>';
    result += '<div class="panel-body pbody">';
    result += '<b>Opis: </b>' + e["OPIS"];

    result += '</div>';
    result += '</div>';
    return result;
  }

  function getView(data, active){
    var result = "";
    var childs = true;
    var type = 0;
    var style = "";
    switch(data["TYPE"]){
      case "PROCES_INIT":    style = 'style="background-color:#ffe5e5;color:#333"';break;
      case "PROCES":         style = 'style="background-color:#ededed;color:#333"';break;
      case "PROCES_GROUP_1": style = 'style="background-color:#9999cc;color:#fff"';break;
      case "PROCES_GROUP_2": style = 'style="background-color:#d8d8b2;color:#fff"';break;
      default:               style = 'style="background-color:#ededed;color:#333"';break;
    }

    result += "<li class='list-group-item liProc "+(active ? "active" : "")+"'; ";
    result += "data-opis='" + data["OPIS"] + "' data-desc='" + data["DESC"] + "'  data-id=" + data["ID"] + " >";
    result += '<div class="textTable">'
    result += "<span class=detailsTable "+style+">" + data["ID"] + "</span> "
    result += data["DESC"] + "</div>"
    result += "<div style=float:right;><span class='glyph glyphicon gl glyphicon-triangle-right'></span>";
    result += "<div class='dropdown '>";
    result += "<span class='glyph glyphicon glyphicon glyphicon-menu-hamburger dropdown-toggle' data-toggle='dropdown' aria-haspopup='true' aria-expanded='true' id='dropdownMenu"+data["ID"]+"'></span>";
    result += '<ul class="dropdown-menu dropdown-menu-right" style=z-index:100 aria-labelledby="dropdownMenu'+data["ID"]+'">';
    result += '<li><a href="'+BASE_URL+'index.php?_route=UrlAction_procesEditor&id='+data["ID"]+'">Edytor procesu</a></li>';
    result += '<li><a href="'+BASE_URL+'index.php?_route=ViewTableAjax&typeName=p5_default_db:CRM_PROCES#EDIT/'+data["ID"]+'">Edytuj proces</a></li>';
    result += '<li><a href="'+BASE_URL+'index.php?MENU_INIT=PROCES_ADD_ZASOB&task=CRM_PROCES&procesID='+data["ID"]+'">Dodaj zasób</a></li>';
    result += '<li><a href="'+BASE_URL+'procesy5.php?task=CRM_TESTY_ADD_PYTANIA&id_proces='+data["ID"]+'">Edytuj Pytania</a></li>';
    result += '<li><a href="'+BASE_URL+'index.php?FUNCTION_INIT=GRAPH_VIEW_PROCES&PROCES_INIT_SCAN=1&id_proces='+data["ID"]+'">Mapa procesu</a></li>';
    result += '<li><a href="'+BASE_URL+'procesy5.php?task=PROCES_VIEW_LIST&HIDE_PANEL=0&show_big_img=1&group_stanowiska=1&id_proces='+data["ID"]+'">Widok listy</a></li>';
    result += '<li><a href="'+BASE_URL+'index.php?_route=ViewTableAjax&typeName=p5_default_db:CRM_PROCES&ff_PARENT_ID='+data["ID"]+'#CREATE">Dodaj dziecko</a></li>';
    //result += '<li><a href="'+BASE_URL+''+$(this).find("ID").text()+'">Widok listy</a></li>';
    result += '<li><a href="" class=details>Szczegóły</a></li>';
    result += '</ul>';
    result += "</div>";
    result += '</div><div class=clearfix></div></li>';

    if (!childs) {
        result += getDetails(parent);
    }
    return result;
  }

  $(document).on('click', '.details', function(e) {
    e.preventDefault();
    $(this).parents(".singleAdv").nextAll(".singleAdv").remove();
    $(this).parents(".singleAdv").find(".active").removeClass("active");
    $(this).find(".gl").removeClass("glyphicon-triangle-right");
    $(this).find(".gl").addClass("glyphicon-refresh");
    $(this).find(".gl").addClass("anim-refresh");
    $('.dropdown.open .dropdown-toggle').dropdown('toggle');
    var parent = $(this).closest(".liProc");
    var parent_id = $(parent).data("id");
    var parentOfParent_id = $(this).closest(".singleAdv").data("parent");
    state[parentOfParent_id]["active"] = parent_id;
    state[parentOfParent_id]["details"] = true;

    render();
    initSortable();
  });

  $(document).on('click', '.dropdown-toggle', function(e) {
    e.stopPropagation();
  });

  $(document).on('click', '.dropdown', function(e) {
    e.stopPropagation();
  });

  $(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();
  }
  });

  $(document).on('click', '#toggleView' ,function(e){
    e.preventDefault();
    if(!panels){
    panels = true;
    render();
  }else{
    panels = false;
    render();
  }
  });

  $(document).on('click', '.liProc', function() {
      $(this).parents(".singleAdv").nextAll(".singleAdv").remove();
      $(this).parents(".singleAdv").find(".active").removeClass("active");
      $(this).find(".gl").removeClass("glyphicon-triangle-right");
      $(this).find(".gl").addClass("glyphicon-refresh");
      $(this).find(".gl").addClass("anim-refresh");
      $(this).addClass("active");
      var parent = this;
      var parent_id = $(this).data("id");
      var parentOfParent_id = $(this).closest(".singleAdv").data("parent");
      //console.log(link);
      var childs = true;
      state[parentOfParent_id]["active"] = parent_id;
      state[parentOfParent_id]["details"] = false;
      render();
      initSortable();
  });

function initSortable(){
  $( ".singleAdvList" ).sortable({
  items: "li",
  connectWith: ".singleAdvList",
  beforeStop: function(ev, ui) {
      if($(ui.item).data("id") == $(ui.placeholder).closest(".singleAdv").data("parent") || $(ui.item).hasClass("active")){
        $(this).sortable('cancel');
        $.notify("Nielogiczny ruch.", "error");
      }

    },
    stop: function(ev, ui) {
      updateParent($(ui.item).data("id"),$(ui.item).closest(".singleAdv").data("parent"), this);
      },
  }).disableSelection();

}

function start(){
  var link = BASE_URL + 'index.php?_route=UrlAction_ProcesView&_task=getAllAjax';
  var result = "";
  var side = $("#view");
  var tempF = {};
  tempF["active"] = false;
  tempF["details"] = false;
  tempF["childs"] = [];
  state[0] = tempF;

  $.get(link, function(data) {
      //console.log("x");
      //console.log(data);
      state = data;
      render();
    });
}
start();


});