implemented network map of users and travels

app.js

@@ -13,7 +13,8 @@ angular.module('adminApp', [
   'app.login',
   'app.main',
   'app.user',
-  'app.travel'
+  'app.travel',
+  'app.network'
 ]).
 config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
   $locationProvider.hashPrefix('!');

index.html

@@ -55,18 +55,20 @@
     <script src="bower_components/ui-leaflet/dist/ui-leaflet.js"></script>
     <link rel="stylesheet" href="bower_components/leaflet/dist/leaflet.css" />
 
+    <!-- visjs -->
     <script type="text/javascript" src="bower_components/vis/dist/vis.min.js"></script>
     <link href="bower_components/vis/dist/vis.min.css" rel="stylesheet" type="text/css" />
     <link href="bower_components/vis/dist/vis-network.min.css" rel="stylesheet" type="text/css" />
 
 
-    <!-- your app's js -->
+    <!-- app's js -->
     <script src="app.js"></script>
     <script src="views/navbar.js"></script>
     <script src="views/login/login.js"></script>
     <script src="views/main/main.js"></script>
     <script src="views/user/user.js"></script>
     <script src="views/travel/travel.js"></script>
+    <script src="views/network/network.js"></script>
 </body>
 
 </html>

views/main/main.html

@@ -5,7 +5,7 @@
                 <div class="panel-heading c_deepPurple300">
                     <h3 class="panel-title">All users</h3>
                 </div>
-                <div class="panel-body">
+                <div class="panel-body" style="max-height: 500px;overflow-y: scroll;">
                     <div class="list-group">
                         <a ng-repeat="user in users" ng-href="#!/user/{{user._id}}" class="list-group-item">
                             <div class="row-picture">
@@ -21,17 +21,15 @@
                             <div class="list-group-separator"></div>
                         </a>
                     </div>
-                    <br>
-                    <div class="btn btn-raised c_deepPurple300">See all</div>
                 </div>
             </div>
         </div>
-        <div class="col-sm-5">
+        <div class="col-sm-6">
             <div class="panel">
                 <div class="panel-heading c_deepPurple300">
                     <h3 class="panel-title">All travels</h3>
                 </div>
-                <div class="panel-body">
+                <div class="panel-body" style="max-height: 500px;overflow-y: scroll;">
                     <table class="table table-striped table-hover ">
                         <thead>
                             <tr>
@@ -65,13 +63,15 @@
                 </div>
             </div>
         </div>
-        <div class="col-sm-3">
+        <div class="col-sm-2">
             <div class="panel">
                 <div class="panel-heading c_deepPurple300">
                     <h3 class="panel-title">Actions</h3>
                 </div>
                 <div class="panel-body">
-                    Panel content
+                    <div class="btn btn-block btn-sm c_green300">Create user</div>
+                    <div class="btn btn-block btn-sm c_blue300">Create travel</div>
+                    <a href="#!/network" class="btn btn-block btn-sm c_deepPurple300">View network</a>
                 </div>
             </div>
         </div>

views/network/network.html

@@ -0,0 +1,12 @@
+<div class="container">
+    <div class="row">
+        <div class="col-sm-12">
+            <div class="panel-heading c_deepPurple300">
+                <h3 class="panel-title">Network</h3>
+            </div>
+            <div class="panel-body">
+                <div id="mynetwork" style="height:500px;"></div>
+            </div>
+        </div>
+    </div>
+</div>

views/network/network.js

@@ -0,0 +1,53 @@
+'use strict';
+
+angular.module('app.network', ['ngRoute'])
+
+    .config(['$routeProvider', function($routeProvider) {
+        $routeProvider.when('/network', {
+            templateUrl: 'views/network/network.html',
+            controller: 'NetworkCtrl'
+        });
+    }])
+
+    .controller('NetworkCtrl', function($scope, $http, $routeParams) {
+        $scope.data = [];
+        $scope.nodes = [];
+        $scope.edges = [];
+        var nodes, edges, container;
+        var options = {
+            layout: {
+                improvedLayout: false
+            }
+            /*,
+                physics:{
+                    //stabilization: false,
+                   // enabled: false
+                }*/
+        };
+
+
+        $scope.showMap = function() {
+            var nodes = $scope.nodes;
+            var edges = $scope.edges;
+
+            var container = document.getElementById('mynetwork');
+            var data = {
+                nodes: nodes,
+                edges: edges
+            };
+            var network = new vis.Network(container, data, options);
+        };
+
+        $http.get(urlapi + 'admin/network')
+            .then(function(data, status, headers, config) {
+                console.log('data success');
+                console.log(data);
+
+                $scope.nodes = data.data.nodes;
+                $scope.edges = data.data.edges;
+                $scope.showMap();
+            }, function(data, status, headers, config) {
+                console.log('data error');
+            });
+
+    });