add jstree for device structure

html/admin/devices/index-tree-simple.php

@@ -0,0 +1,54 @@
+<?php
+require_once ($_SERVER['DOCUMENT_ROOT']."/inc/auth.php");
+require_once ($_SERVER['DOCUMENT_ROOT']."/inc/languages/" . $language . ".php");
+unset($_POST);
+require_once ($_SERVER['DOCUMENT_ROOT']."/inc/header.php");
+print_device_submenu($page_url);
+?>
+<div id="cont">
+<br>
+<?php
+
+function print_child($device_id,$hash) 
+{
+foreach ($hash as $device) {
+    if (!isset($device['parent_id'])) { continue; }
+    if ($device['parent_id'] !== $device_id) { continue; }
+    print '<ul><li>';
+    print_url($device['name'],'/admin/devices/editdevice.php?id='.$device['id']);
+    print_child($device['id'],$hash);
+    print '</li></ul>';
+    }
+}
+
+$dSQL = 'SELECT * FROM devices WHERE deleted=0 '.$filter.' '.$sort_sql;
+$switches = get_records_sql($db_link,$dSQL);
+$dev_hash = NULL;
+foreach ($switches as $row) {
+$dev_id=$row['id'];
+$dev_hash[$dev_id]['id']=$dev_id;
+$dev_hash[$dev_id]['name']=$row['device_name'];
+$pSQL = 'SELECT * FROM device_ports WHERE uplink = 1 and device_id='.$dev_id;
+$uplink = get_record_sql($db_link,$pSQL);
+if (empty($uplink)) { continue; }
+if (empty($uplink['target_port_id'])) { continue; }
+$dev_hash[$dev_id]['uplink']=$uplink['port_name'];
+$parentSQL='SELECT * FROM device_ports WHERE device_ports.id='.$uplink['target_port_id'];
+$parent=get_record_sql($db_link,$parentSQL);
+$dev_hash[$dev_id]['parent_id']=$parent['device_id'];
+$dev_hash[$dev_id]['parent_port']=$parent['port_name'];
+}
+
+print '<div id="html">';
+foreach ($dev_hash as $device) {
+if (isset($device['parent_id'])) { continue; }
+print '<ul><li>';
+print_url($device['name'],'/admin/devices/editdevice.php?id='.$device['id']);
+print_child($device['id'],$dev_hash);
+print '</li>';
+print '</ul>';
+}
+print '</div>';
+
+require_once ($_SERVER['DOCUMENT_ROOT']."/inc/footer.php");
+?>

html/admin/devices/index-tree.php

@@ -5,6 +5,14 @@ unset($_POST);
 require_once ($_SERVER['DOCUMENT_ROOT']."/inc/header.php");
 print_device_submenu($page_url);
 ?>
+
+<script>
+$.getScript("/js/jstree/jstree.min.js")
+.fail(function(jqxhr, settings, exception) {
+        window.location.href = '/admin/devices/index-tree-simple.php';
+        });
+</script>
+
 <div id="cont">
 <br>
 <?php
@@ -14,11 +22,13 @@ function print_child($device_id,$hash)
 foreach ($hash as $device) {
     if (!isset($device['parent_id'])) { continue; }
     if ($device['parent_id'] !== $device_id) { continue; }
-    print '<ul><li class="jstree-node" id="'.$device['id'].'">';
-//    print $device['parent_port'].'->'.$device['uplink'].'&nbsp';
-    print_url($device['name'],'/admin/devices/editdevice.php?id='.$device['id']);
-    print_child($device['id'],$hash);
-    print '</li></ul>';
+    $dev_icon = '/img/server.png';
+    if ($device['type'] == 1) { $dev_icon = '/img/switch16.png'; }
+    if ($device['type'] == 2) { $dev_icon = '/img/router.png'; }
+    if ($device['type'] == 3) { $dev_icon = '/img/gateway.png'; }
+    print '{ "text" : "'; print $device['parent_port'].'->'.$device['uplink'].'&nbsp'.$device['name']; print '", "icon" : "'.$dev_icon.'", "id" : "'.$device['id'].'","state" : { "opened" : true },';
+    print '"a_attr" : { "href": "'.reencodeurl('/admin/devices/editdevice.php?id='.$device['id']).'"},';
+    print '"children" : ['; print_child($device['id'],$hash); print ']';print "},\n";
     }
 }
 
@@ -29,27 +39,52 @@ foreach ($switches as $row) {
 $dev_id=$row['id'];
 $dev_hash[$dev_id]['id']=$dev_id;
 $dev_hash[$dev_id]['name']=$row['device_name'];
+$dev_hash[$dev_id]['type']=$row['device_type'];
+//gateway
+if ($row['user_acl'] and $row['device_type'] == 2) { $dev_hash[$dev_id]['type']=3; }
 $pSQL = 'SELECT * FROM device_ports WHERE uplink = 1 and device_id='.$dev_id;
 $uplink = get_record_sql($db_link,$pSQL);
 if (empty($uplink)) { continue; }
 if (empty($uplink['target_port_id'])) { continue; }
+//$dev_hash[$dev_id]['uplink']=$uplink['ifName'];
 $dev_hash[$dev_id]['uplink']=$uplink['port_name'];
 $parentSQL='SELECT * FROM device_ports WHERE device_ports.id='.$uplink['target_port_id'];
 $parent=get_record_sql($db_link,$parentSQL);
 $dev_hash[$dev_id]['parent_id']=$parent['device_id'];
+//$dev_hash[$dev_id]['parent_port']=$parent['ifName'];
 $dev_hash[$dev_id]['parent_port']=$parent['port_name'];
 }
 
-print '<div id="html1">';
+print '<div id="frmt" class="tree"></div>';
+print "\n";
+print '<script>';
+print "$('#frmt').jstree({";
+print '"themes" : { "theme" : "default", "dots" : false, "icons" : false }, "plugins" : [ "themes", "html_data", "ui", "sort", "state" ],';
+print "'core' : { 'data' : [";
+print "\n";
 foreach ($dev_hash as $device) {
 if (isset($device['parent_id'])) { continue; }
-print '<ul><li>';
-print_url($device['name'],'/admin/devices/editdevice.php?id='.$device['id']);
-print_child($device['id'],$dev_hash);
-print '</li>';
-print '</ul>';
+$dev_icon = '/img/server.png';
+if ($device['type'] == 1) { $dev_icon = '/img/switch16.png'; }
+if ($device['type'] == 2) { $dev_icon = '/img/router.png'; }
+if ($device['type'] == 3) { $dev_icon = '/img/gateway.png'; }
+print '{ "text" : "'; print_url($device['name'],'/admin/devices/editdevice.php?id='.$device['id']); print '","icon" : "'.$dev_icon.'", "id" : "'.$device['id'].'" ,"state" : { "opened" : true },';
+print '"a_attr" : { "href": "'.reencodeurl('/admin/devices/editdevice.php?id='.$device['id']).'"},';
+print '"children" : ['; print_child($device['id'],$dev_hash); print "]";
+print "},\n";
 }
-print '</div>';
+?>
+]}
+}).on('changed.jstree', function (e, data) {
+    if (data == null) return '';
+    if (data.node == null) return '';
+    var href = data.node.a_attr.href;
+    var parentId = data.node.a_attr.parent_id;
+    if(href == '#') return '';
+    var win = window.open(href, "_blank");
+});
+</script>
 
+<?php
 require_once ($_SERVER['DOCUMENT_ROOT']."/inc/footer.php");
 ?>

html/admin/devices/index-tree1.php

@@ -0,0 +1,55 @@
+<?php
+require_once ($_SERVER['DOCUMENT_ROOT']."/inc/auth.php");
+require_once ($_SERVER['DOCUMENT_ROOT']."/inc/languages/" . $language . ".php");
+unset($_POST);
+require_once ($_SERVER['DOCUMENT_ROOT']."/inc/header.php");
+print_device_submenu($page_url);
+?>
+<div id="cont">
+<br>
+<?php
+
+function print_child($device_id,$hash) 
+{
+foreach ($hash as $device) {
+    if (!isset($device['parent_id'])) { continue; }
+    if ($device['parent_id'] !== $device_id) { continue; }
+    print '<ul><li class="jstree-node" id="'.$device['id'].'">';
+//    print $device['parent_port'].'->'.$device['uplink'].'&nbsp';
+    print_url($device['name'],'/admin/devices/editdevice.php?id='.$device['id']);
+    print_child($device['id'],$hash);
+    print '</li></ul>';
+    }
+}
+
+$dSQL = 'SELECT * FROM devices WHERE deleted=0 '.$filter.' '.$sort_sql;
+$switches = get_records_sql($db_link,$dSQL);
+$dev_hash = NULL;
+foreach ($switches as $row) {
+$dev_id=$row['id'];
+$dev_hash[$dev_id]['id']=$dev_id;
+$dev_hash[$dev_id]['name']=$row['device_name'];
+$pSQL = 'SELECT * FROM device_ports WHERE uplink = 1 and device_id='.$dev_id;
+$uplink = get_record_sql($db_link,$pSQL);
+if (empty($uplink)) { continue; }
+if (empty($uplink['target_port_id'])) { continue; }
+$dev_hash[$dev_id]['uplink']=$uplink['port_name'];
+$parentSQL='SELECT * FROM device_ports WHERE device_ports.id='.$uplink['target_port_id'];
+$parent=get_record_sql($db_link,$parentSQL);
+$dev_hash[$dev_id]['parent_id']=$parent['device_id'];
+$dev_hash[$dev_id]['parent_port']=$parent['port_name'];
+}
+
+print '<div id="html1">';
+foreach ($dev_hash as $device) {
+if (isset($device['parent_id'])) { continue; }
+print '<ul><li>';
+print_url($device['name'],'/admin/devices/editdevice.php?id='.$device['id']);
+print_child($device['id'],$dev_hash);
+print '</li>';
+print '</ul>';
+}
+print '</div>';
+
+require_once ($_SERVER['DOCUMENT_ROOT']."/inc/footer.php");
+?>

html/inc/header.php

@@ -6,6 +6,8 @@
 <script src="/js/jq/jquery.min.js"></script>
 <link href="/js/select2/css/select2.min.css" rel="stylesheet"/>
 <script src="/js/select2/js/select2.min.js"></script>
+<link rel="stylesheet" href="/js/jstree/themes/default/style.min.css" />
+<script src="/js/jstree/jstree.min.js"></script>
 <meta http-equiv="content-type" content="application/xhtml+xml" />
 <meta charset="UTF-8" />
 

html/white.css

@@ -43,3 +43,7 @@ a:hover                         { color: #ed8b0d; text-decoration: none; }
 #cont                           { position: absolute; top: 70px; left: 15px; background-color: url('img/vr.gif'); background-repeat: repeat-y; background-position: right; }
 #copyright                      { margin-top: 10px; margin-bottom: 10px; }
 #msg                            { font-size: 18pt; font-color: black; color: red; }
+
+html                            { margin:0; padding:0; font-size:62.5%; }
+h1                              { font-size:1.8em; }
+.tree                           { overflow:auto; border:1px solid silver; min-height:100px; }