implemented network map of users and travels
arnaucode idoctnef@openmailbox.org
Wed, 26 Jul 2017 15:08:16 +0200
8 files changed,
77 insertions(+),
9 deletions(-)
M
index.html
→
index.html
@@ -55,18 +55,20 @@ <script src="bower_components/angular-simple-logger/dist/angular-simple-logger.js"></script>
<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>
M
views/main/main.html
→
views/main/main.html
@@ -5,7 +5,7 @@ <div class="panel">
<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>
<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 @@ </table>
</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>
A
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>
A
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'); + }); + + });