added search (users and travels), added user network, added all travels visualization
arnaucode idoctnef@openmailbox.org
Fri, 28 Jul 2017 22:28:19 +0200
12 files changed,
436 insertions(+),
36 deletions(-)
M
app.js
→
app.js
@@ -12,9 +12,12 @@ 'angularBootstrapMaterial',
'app.navbar', 'app.login', 'app.main', + 'app.search', + 'app.travels', 'app.user', 'app.travel', - 'app.network' + 'app.network', + 'app.userNetwork' ]). config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) { $locationProvider.hashPrefix('!');
M
index.html
→
index.html
@@ -66,9 +66,12 @@ <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/search/search.js"></script> + <script src="views/travels/travels.js"></script> <script src="views/user/user.js"></script> <script src="views/travel/travel.js"></script> <script src="views/network/network.js"></script> + <script src="views/userNetwork/userNetwork.js"></script> </body> </html>
M
views/main/main.js
→
views/main/main.js
@@ -2,34 +2,35 @@ 'use strict';
angular.module('app.main', ['ngRoute']) -.config(['$routeProvider', function($routeProvider) { - $routeProvider.when('/main', { - templateUrl: 'views/main/main.html', - controller: 'MainCtrl' - }); -}]) + .config(['$routeProvider', function($routeProvider) { + $routeProvider.when('/main', { + templateUrl: 'views/main/main.html', + controller: 'MainCtrl' + }); + }]) -.controller('MainCtrl', function($scope, $http) { - $scope.users = []; - $scope.loadMorePagination = true; - $scope.page = 0; + .controller('MainCtrl', function($scope, $http) { + $scope.users = []; + $scope.travels = []; + $scope.loadMorePagination = true; + $scope.page = 0; - $http.get(urlapi + 'users?page=' + $scope.page) - .then(function(data) { - console.log('data success'); - console.log(data); - $scope.users=data.data; + $http.get(urlapi + 'users?page=' + $scope.page) + .then(function(data) { + console.log('data success'); + console.log(data); + $scope.users = data.data; - }, function(data) { - console.log('data error'); - }); - $http.get(urlapi + 'travels?page=' + $scope.page) - .then(function(data) { - console.log('data success'); - console.log(data); - $scope.travels=data.data; + }, function(data) { + console.log('data error'); + }); + $http.get(urlapi + 'travels?page=' + $scope.page) + .then(function(data) { + console.log('data success'); + console.log(data); + $scope.travels = data.data; - }, function(data) { - console.log('data error'); - }); -}); + }, function(data) { + console.log('data error'); + }); + });
M
views/network/network.js
→
views/network/network.js
@@ -17,12 +17,14 @@ var nodes, edges, container;
var options = { layout: { improvedLayout: false + }, + interaction: { + hover: true + }, + physics: { + stabilization: false, + //enabled: false } - /*, - physics:{ - //stabilization: false, - // enabled: false - }*/ };@@ -36,6 +38,26 @@ nodes: nodes,
edges: edges }; var network = new vis.Network(container, data, options); + network.on("click", function(params) { + params.event = "[original event]"; + //$scope.selectedNode = JSON.stringify(params, null, 4); + $scope.selectedNode = params; + console.log($scope.selectedNode); + console.log($scope.selectedNode.nodes); + var options = { + // position: {x:positionx,y:positiony}, // this is not relevant when focusing on nodes + scale: 1, + offset: { + x: 0, + y: 0 + }, + animation: { + duration: 500, + easingFunction: "easeInOutQuad" + } + }; + network.focus($scope.selectedNode.nodes[0], options); + }); }; $http.get(urlapi + 'admin/network')
A
views/search/search.html
@@ -0,0 +1,74 @@
+<div class="container"> + <div class="row"> + <div class="col-sm-12"> + <h2> + Search: {{searchString}} + </h2> + </div> + </div> + <div class="row"> + <div class="col-sm-6"> + <div class="panel"> + <div class="panel-heading c_deepPurple300"> + <h3 class="panel-title">Users</h3> + </div> + <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"> + <img class="circle" ng-src="{{user.avatar}}" alt="icon"> + </div> + <div class="row-content"> + <h4 class="list-group-item-heading">{{user.username}}</h4> + + <p class="list-group-item-text">{{user.description}}</p> + <p class="list-group-item-text">{{user.travels.length}} published travels</p> + <p class="list-group-item-text">{{user.likes.length}} likes</p> + </div> + <div class="list-group-separator"></div> + </a> + </div> + </div> + </div> + </div> + <div class="col-sm-6"> + <div class="panel"> + <div class="panel-heading c_deepPurple300"> + <h3 class="panel-title">Travels</h3> + </div> + <div class="panel-body" style="max-height: 500px;overflow-y: scroll;"> + <table class="table table-striped table-hover "> + <thead> + <tr> + <th>Type</th> + <th>Title</th> + <th>Date</th> + <th>User</th> + <th>nºJoins</th> + <th></th> + </tr> + </thead> + <tbody> + <tr ng-repeat="travel in travels"> + <td> + <i ng-show="travel.type=='offering'" class="fa fa-car fa-2x"></i> + <i ng-show="travel.type=='asking'" class="fa fa-question fa-2x"></i> + <i ng-show="travel.type=='package'" class="fa fa-archive fa-2x"></i> + </td> + <td>{{travel.title}}</td> + <td>{{travel.date | date}}</td> + <td> + <a ng-href="#!/user/{{travel.user._id}}"> + {{travel.user.username}} + </a> + </td> + <td>{{travel.joins.length}}</td> + <td><a ng-href="#!/travel/{{travel._id}}">View</a></td> + </tr> + </tbody> + </table> + </div> + </div> + </div> + </div> +</div>
A
views/search/search.js
@@ -0,0 +1,28 @@
+'use strict'; + +angular.module('app.search', ['ngRoute']) + + .config(['$routeProvider', function($routeProvider) { + $routeProvider.when('/search/:searchstring', { + templateUrl: 'views/search/search.html', + controller: 'SearchCtrl' + }); + }]) + + .controller('SearchCtrl', function($scope, $http, $routeParams) { + $scope.users = []; + $scope.travels = []; + $scope.loadMorePagination = true; + $scope.page = 0; + $scope.searchString = $routeParams.searchstring; + $http.get(urlapi + 'search/' + $routeParams.searchstring) + .then(function(data) { + console.log('data success travels'); + console.log(data); + $scope.users = data.data.users; + $scope.travels = data.data.travels; + + }, function(data) { + console.log('data error'); + }); + });
A
views/travels/travels.html
@@ -0,0 +1,54 @@
+<div class="container"> + <div class="row"> + <div class="col-sm-4"> + <div class="panel"> + <div class="panel-heading c_deepPurple300"> + <h3 class="panel-title">All travels</h3> + </div> + <div class="panel-body" style="max-height: 500px;overflow-y: scroll;"> + <table class="table table-striped table-hover "> + <thead> + <tr> + <th>Type</th> + <th>Title</th> + <th>Date</th> + <th>User</th> + <th>nºJoins</th> + <th></th> + </tr> + </thead> + <tbody> + <tr ng-repeat="travel in travels"> + <td> + <i ng-show="travel.type=='offering'" class="fa fa-car fa-2x"></i> + <i ng-show="travel.type=='asking'" class="fa fa-question fa-2x"></i> + <i ng-show="travel.type=='package'" class="fa fa-archive fa-2x"></i> + </td> + <td>{{travel.title}}</td> + <td>{{travel.date | date}}</td> + <td> + <a ng-href="#!/user/{{travel.user._id}}"> + {{travel.user.username}} + </a> + </td> + <td>{{travel.joins.length}}</td> + <td><a ng-href="#!/travel/{{travel._id}}">View</a></td> + </tr> + </tbody> + </table> + </div> + </div> + </div> + <div class="col-sm-8"> + <div class="panel"> + <div class="panel-heading c_deepPurple300"> + <h3 class="panel-title">Map</h3> + </div> + <div class="panel-body"> + <leaflet width="100%" height="600px" markers="markers" paths="paths" center="center" + tiles="tiles" id="map-simple-map"></leaflet> + </div> + </div> + </div> + </div> +</div>
A
views/travels/travels.js
@@ -0,0 +1,73 @@
+'use strict'; + +angular.module('app.travels', ['ngRoute', 'ui-leaflet']) + + .config(['$routeProvider', function($routeProvider) { + $routeProvider.when('/travels', { + templateUrl: 'views/travels/travels.html', + controller: 'TravelsCtrl' + }); + }]) + + .controller('TravelsCtrl', function($scope, $http) { + $scope.travels = []; + $scope.loadMorePagination = true; + $scope.page = 0; + + //map + $scope.center = {}; + $scope.bounds = {}; + $scope.markers = []; + $scope.paths = []; + $scope.tiles = { + url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", + options: { + attribution: '<a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' + } + }; + + $http.get(urlapi + 'travels?page=' + $scope.page) + .then(function(data) { + console.log('data success'); + console.log(data); + $scope.travels = data.data; + //draw markers on map + $scope.markers = []; + for (var i = 0; i < $scope.travels.length; i++) { + $scope.markers.push({ + lat: Number($scope.travels[i].from.lat), + lng: Number($scope.travels[i].from.long), + message: $scope.travels[i].from.name + }); + $scope.markers.push({ + lat: Number($scope.travels[i].to.lat), + lng: Number($scope.travels[i].to.long), + message: $scope.travels[i].to.name + }); + } + //draw lines between markers on map + $scope.paths = {}; + var paths = []; + for (var i = 0; i < $scope.markers.length; i++) { + var x = $scope.markers[i].lat; + var y = $scope.markers[i].lng; + paths.push([x, y]); + } + $scope.paths = { + p1: { + color: '#9575CD', + weight: 8, + latlngs: paths + } + }; + //var maplines = L.polyline(lines).addTo(map) + + $scope.center = { + lat: (Number($scope.travels[0].from.lat) + Number($scope.travels[0].to.lat)) / 2, + lng: (Number($scope.travels[0].from.long) + Number($scope.travels[0].to.long)) / 2, + zoom: 4 + }; + }, function(data) { + console.log('data error'); + }); + });
A
views/userNetwork/userNetwork.html
@@ -0,0 +1,36 @@
+<div class="container"> + <div class="row"> + <div class="col-sm-3"> + <div class="panel"> + <div class="panel-heading c_deepPurple300"> + <h3 class="panel-title">All users</h3> + </div> + <div class="panel-body" style="max-height: 500px;overflow-y: scroll;"> + <div class="list-group"> + <a ng-repeat="user in users" ng-click="getUserNetwork(user)" class="list-group-item"> + <div class="row-picture"> + <img class="circle" ng-src="{{user.avatar}}" alt="icon"> + </div> + <div class="row-content"> + <h4 class="list-group-item-heading">{{user.username}}</h4> + + <p class="list-group-item-text">{{user.description}}</p> + <p class="list-group-item-text">{{user.travels.length}} published travels</p> + <p class="list-group-item-text">{{user.likes.length}} likes</p> + </div> + <div class="list-group-separator"></div> + </a> + </div> + </div> + </div> + </div> + <div class="col-sm-9"> + <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/userNetwork/userNetwork.js
@@ -0,0 +1,98 @@
+'use strict'; + +angular.module('app.userNetwork', ['ngRoute']) + + .config(['$routeProvider', function($routeProvider) { + $routeProvider.when('/userNetwork', { + templateUrl: 'views/userNetwork/userNetwork.html', + controller: 'UserNetworkCtrl' + }); + }]) + + .controller('UserNetworkCtrl', function($scope, $http, $routeParams) { + $scope.data = []; + $scope.nodes = []; + $scope.edges = []; + var nodes, edges, container; + var options = { + layout: { + improvedLayout: false + }, + interaction: { + hover: true + }, + 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); + network.on("click", function(params) { + params.event = "[original event]"; + //$scope.selectedNode = JSON.stringify(params, null, 4); + $scope.selectedNode = params; + console.log($scope.selectedNode); + console.log($scope.selectedNode.nodes); + var options = { + // position: {x:positionx,y:positiony}, // this is not relevant when focusing on nodes + scale: 1, + offset: { + x: 0, + y: 0 + }, + animation: { + duration: 500, + easingFunction: "easeInOutQuad" + } + }; + network.focus($scope.selectedNode.nodes[0], 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'); + }); + $http.get(urlapi + 'users?page=' + $scope.page) + .then(function(data) { + console.log('data success'); + console.log(data); + $scope.users=data.data; + + }, function(data) { + console.log('data error'); + }); + + $scope.getUserNetwork = function(user) { + console.log(user); + $http.get(urlapi + 'admin/user/network/' + user._id) + .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'); + }); + }; + + });