<link href="includes/js/fancytree/skin-bootstrap/ui.fancytree.css" rel="stylesheet" class="skinswitcher">
<script src="includes/js/fancytree/jquery.fancytree-all-deps.min.js" type="text/JavaScript" ></script>
<script src="includes/js/fancytree/fcs_glyphoptions.js" type="text/JavaScript" ></script>
<script type="text/javascript" src="includes/js/xtree.js"></script>
<script type="text/javascript" src="includes/js/xmlextras.js"></script>
<script type="text/javascript" src="includes/js/xloadtree.js"></script>
<script language="JavaScript">
            <!--//

			
                var id = 0;
                var childs = 0;
                
                [% if $AssetDesk != true %]
                	[% if $user->hasRight(1) %]
                	function removeEntry(entryID, hasChild) {
                    	if (entryID != 0) {
                    
                        	result = true;
                        
                        	if (hasChild > 0) {
                            	result = confirm("[% $user->gettext('Eintrag hat Unterelemente trotzdem entfernen?') %]");
                        	} else {
                            	result = confirm("[% $user->gettext('Eintrag wirklich entfernen?') %]");
                        	}
                        
                        	if (result == true) {
                            	window.location.href = "index.php?module=structure&event=remove&id="+entryID;
                        	}
                    	}
                	}
	
	                function editEntry(entryID) {
    	                if (entryID != 0) {
                           $('#structureModal').modal('show');
        	                	$('.modalContent').load('index.php?module=structure&event=edit&id='+entryID);
            	        }
	                }
                
    	            function moveNode(direction, entryID) {
                      
        	            if (entryID != 0) {
            	            if (direction == "up") {
                	            window.location.href = "index.php?module=structure&event=edit&action=mvup&id="+entryID;
                    	    } else {
                        	    window.location.href = "index.php?module=structure&event=edit&action=mvdown&id="+entryID;
                        	}
                    	}
                	}
                	[% /if %]
                [% /if %]
                

                function setStructureValue(val, nchilds) {
                    id = val;
                    childs = nchilds;
                }
                
            //-->
            </script>
            
<!-- Component Structure begin -->
<!-- Component Structure begin -->


  <div class="card panel-fcs-border shadow-sm">
	<div class="card-header">
		<span class="fcs-card-title h2">[% $user->gettext('Struktur') %]</span>
	</div>
  <div class="card-body">
    <div class="card panel-info shadow-sm rounded">
      <div class="card-body text-center">
        <input type="button" class="btn btn-outline-primary" value=[% $user->gettext('Neu') %]  onclick="loadForm();">
      </div>
    </div>
    <div class="card panel-info shadow-sm rounded">
      <div class="card-header">
        
            <span class="fcs-card-title h3">[% $user->gettext('Liste')%]</span>
         
      </div>
      <div class="card-body">
        <div class="table-responsive">
          <table id="treetable" class="table table-striped text-center">
            <thead>
              <tr> <th></th> <th style="text-align: center;">#</th> <th style="text-align: center;">[% $user->gettext('Name')%]</th> <th style="text-align: center;">[% $user->gettext('Aktion')%]</th> </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  </div>
  <div class="modal fade" id="structureModal" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
	
				<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
				  <span aria-hidden="true">&times;</span>
				</button>
		
        
      </div>
      <div class="modal-body modalContent">
       
      </div>
    </div>
  </div>
</div>
  <script>
    /*
	$("#ftree").fancytree({
	source: {
		url: "index.php?module=structure&event=JSONStructureTree&id=0"
	},
	extensions: ["glyph"],
	activeVisible: true,
	glyph: glyph_opts,        
	checkbox: false,
  clickFolderMode: 1,
	autoActivate: true, // Automatically activate a node when it is focused (using keys).
	selectMode: 1, // 1:single, 2:multi, 3:multi-hier
	 tooltip: function(event, data) {
    // Create dynamic tooltips
		return data.node.title + " (" + data.node.key + ")";
	},
	activate: function(event, data){
      // A node is about to be selected: prevent this, for folder-nodes:
     
      setStructureValue(data.node.key, data.node);
    },
    
  click: function(event, data) {
    //console.log(simpleStringify(event));
    $('#structureModal').modal('show');

    // we could return false to prevent default handling, i.e. generating
    // activate, expand, or select events
  },
	lazyLoad: function(event, data){
		var node = data.node;
		data.result = {
			url: node.data.src,
			//url: "index.php?module=category&event=json&type=ticket",
			data: {mode: "children", parent: node.key},
			cache: false
		};  
	}    
}).show();*/
    
    $("#treetable").fancytree({
			extensions: ["table", "glyph"],
			checkbox: false,
      glyph: glyph_opts,        
    checkbox: false,
    clickFolderMode: 1,
			table: {
				indentation: 20,      // indent 20px per node level
				nodeColumnIdx: 2,     // render the node title into the 2nd column
				checkboxColumnIdx: 0  // render the checkboxes into the 1st column
			},
			source: {
				url: "index.php?module=structure&event=JSONStructureTree&id=0"
			},
      activate: function(event, data){
      // A node is about to be selected: prevent this, for folder-nodes:
          if(data.node.data.src !=""){
            setStructureValue(data.node.key, 1);

        }
        setStructureValue(data.node.key, 0);
    },
		lazyLoad: function(event, data){
		var node = data.node;
		data.result = {
			url: node.data.src,
			//url: "index.php?module=category&event=json&type=ticket",
			data: {mode: "children", parent: node.key},
			cache: false
		};  
	},    
			renderColumns: function(event, data) {
				var node = data.node,
					$tdList = $(node.tr).find(">td");
        var hasChild = 0;
        if (node.data.src != ""){
          hasChild = 1;
        }
        
				$tdList.eq(1).text(node.getIndexHier());
        if(node.key != 0){
          $tdList.eq(3).html("<div class=\"btn-group \"><a href=\"#\" id=\"moveDown\" onclick=\"moveNode('down', '"+node.key+"');\" class=\"btn btn-outline-secondary\"><span class=\"fa fa-chevron-down\"></span></a><a href=\"#\" onclick=\"moveNode('up', '"+node.key+"');\" class=\"btn btn-outline-secondary\"><span class=\"fa fa-chevron-up\"></span></a><a href=\"#\" onclick=\"removeEntry('"+node.key+"', "+ hasChild+");\" class=\"btn btn-outline-secondary\"><span class=\"fa fa-trash\"></span></a><a href=\"#\" onclick=\"editEntry('"+ node.key+"');\" class=\"btn btn-outline-secondary\"><span class=\"fa fa-pencil\"></span></a></div>  ");
        }
			}
		});
		/* Handle custom checkbox clicks */
	
  
  function loadForm(){
      $('#structureModal').modal('show');
			$('.modalContent').load('index.php?module=structure&event=create');
  }
  

  

  function simpleStringify (object){
    var simpleObject = {};
    for (var prop in object ){
        if (!object.hasOwnProperty(prop)){
            continue;
        }
        if (typeof(object[prop]) == 'object'){
            continue;
        }
        if (typeof(object[prop]) == 'function'){
            continue;
        }
        simpleObject[prop] = object[prop];
    }
    return JSON.stringify(simpleObject); // returns cleaned up JSON
};

  </script>

<!-- Component Structure end -->

