added search (users and travels), added user network, added all travels visualization

views/main/main.js

@@ -2,34 +2,35 @@
 
 angular.module('app.main', ['ngRoute'])
 
-.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;
-
-    $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');
+    .config(['$routeProvider', function($routeProvider) {
+        $routeProvider.when('/main', {
+            templateUrl: 'views/main/main.html',
+            controller: 'MainCtrl'
         });
-});
+    }])
+
+    .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;
+
+            }, 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');
+            });
+    });

views/navbar.html

@@ -12,11 +12,13 @@
         <div class="navbar-collapse collapse navbar-responsive-collapse">
             <ul class="nav navbar-nav">
                 <li class="active"><a href="javascript:void(0)">Users</a></li>
-                <li><a href="javascript:void(0)">Travels</a></li>
+                <li><a href="#!/travels">Travels</a></li>
+                <li><a href="#!/network">Network</a></li>
+                <li><a href="#!/userNetwork">User network</a></li>
             </ul>
-            <form class="navbar-form navbar-left">
+            <form ng-submit="search()" class="navbar-form navbar-left">
                 <div class="form-group">
-                    <input class="form-control col-md-8" placeholder="Search" type="text">
+                    <input ng-model="searchString" class="form-control col-md-8" placeholder="Search" type="text">
                 </div>
             </form>
             <ul class="nav navbar-nav navbar-right">

views/navbar.js

@@ -10,10 +10,16 @@ angular.module('app.navbar', ['ngRoute'])
     }])
 
     .controller('NavbarCtrl', function($scope, $http, $routeParams, $location) {
+        $scope.searchString="";
         $scope.locationHash = $location.path();
         console.log($scope.locationHash);
         $scope.goBack = function() {
             console.log("goBack");
             window.history.back();
         };
+
+        $scope.search = function() {
+            console.log($scope.searchString);
+            window.location.href="#!/search/" + $scope.searchString;
+        };
     });

views/network/network.js

@@ -17,12 +17,14 @@ angular.module('app.network', ['ngRoute'])
         var options = {
             layout: {
                 improvedLayout: false
+            },
+            interaction: {
+                hover: true
+            },
+            physics: {
+                stabilization: false,
+                //enabled: false
             }
-            /*,
-                physics:{
-                    //stabilization: false,
-                   // enabled: false
-                }*/
         };
 
 
@@ -36,6 +38,26 @@ angular.module('app.network', ['ngRoute'])
                 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')

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>

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');
+            });
+    });

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>

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');
+            });
+    });

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>

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');
+                  });
+          };
+
+    });