@@ -65,3 +65,8 @@ .o_signupLink{
     text-decoration: none;
     color: #000000;
 }
+.o_badge{
+    border-radius: 8px;
+    margin: 5px;
+    padding: 2px 5px;
+}

@@ -50,7 +50,8 @@ <script src="js/events.js"></script>
     <script src="js/event.js"></script>
     <script src="js/alerts.js"></script>
     <script src="js/savedEvents.js"></script>
-    <script src="js/byCategories.js"></script>
+    <script src="js/categories.js"></script>
+    <script src="js/byCategory.js"></script>
     <script src="js/users.js"></script>
     <script src="js/user.js"></script>
     <script src="js/login.js"></script>

@@ -13,7 +13,8 @@ 'app.events',
     'app.event',
     'app.alerts',
     'app.savedEvents',
-    'app.byCategories',
+    'app.categories',
+    'app.byCategory',
     'app.users',
     'app.user',
     'app.login',
@@ -93,12 +94,21 @@ controller: 'SavedEventsCtrl'
         }
       }
     })
-    .state('app.byCategories', {
-      url: '/byCategories',
+    .state('app.categories', {
+      url: '/categories',
+      views: {
+        'menuContent': {
+          templateUrl: 'templates/categories.html',
+          controller: 'CategoriesCtrl'
+        }
+      }
+    })
+    .state('app.byCategory', {
+      url: '/byCategory/:categoryname',
       views: {
         'menuContent': {
-          templateUrl: 'templates/byCategories.html',
-          controller: 'ByCategoriesCtrl'
+          templateUrl: 'templates/byCategory.html',
+          controller: 'ByCategoryCtrl'
         }
       }
     })

@@ -1,21 +1,18 @@
-angular.module('app.byCategories', ['pascalprecht.translate'])
+angular.module('app.byCategory', ['pascalprecht.translate'])
 
-.controller('ByCategoriesCtrl', function($scope, $http, $ionicModal,
-            $timeout, $ionicLoading, $filter) {
+.controller('ByCategoryCtrl', function($scope, $http, $ionicModal,
+            $timeout, $ionicLoading, $filter, $stateParams) {
 
-
+    $scope.category=$stateParams.categoryname;
     $scope.events=[];
-    $scope.alerts=[];
     $scope.page=0;
     $scope.doRefresh = function() {
       /* events refresh: */
         //$http.get(urlapi + 'events?page=' + $scope.page)
-        $http.get(urlapi + 'events')
+        $http.get(urlapi + 'events/category/'+ $stateParams.categoryname)
         .then(function(data){
-            console.log('data success events');
-            console.log(data); // for browser console
-            //$scope.events = data.data; // for UI
             $scope.events=data.data;
+            console.log($scope.events);
             $scope.$broadcast('scroll.refreshComplete');//refresher stop
 
         }, function(data){
@@ -23,11 +20,6 @@ console.log('data error');
             $scope.$broadcast('scroll.refreshComplete');//refresher stop
             $ionicLoading.show({ template: 'Error connecting server', noBackdrop: true, duration: 2000 });
 
-        });
-        $http.get(urlapi + 'alerts')
-        .then(function(data){
-            $scope.alerts=data.data;
-        }, function(data){
         });
     };
     $scope.doRefresh();
@@ -49,8 +41,6 @@ $scope.savedEvents=[];
     $scope.$on('$ionicView.enter', function(){//per executar-ho cada cop que es carrega el view
         if (localStorage.getItem("events_app_savedEvents")) {
           $scope.savedEvents = JSON.parse(localStorage.getItem("events_app_savedEvents"));
-          console.log("savedEvents");
-          console.log($scope.savedEvents);
         }
     });
     $scope.saveEvent = function(event){

@@ -0,0 +1,17 @@
+angular.module('app.categories', ['pascalprecht.translate'])
+
+.controller('CategoriesCtrl', function($scope, $http, $ionicModal, $timeout, $ionicLoading, $filter) {
+
+
+    $scope.categories;
+    $http.get(urlapi + 'categoriesList')
+    .then(function(data){
+        $scope.categories=data.data;
+        console.log($scope.categories);
+    }, function(data){
+        console.log('data error');
+        console.log(data);
+        $ionicLoading.show({ template: 'Error connecting server', noBackdrop: true, duration: 2000 });
+
+    });
+});

@@ -1,11 +1,7 @@
-<ion-view view-title="Events By Categories">
+<ion-view view-title="category: {{category}}">
   <ion-content class="c_blueGrey100">
     <ion-refresher pulling-text="{{'Pull_to_refresh' | translate}}..." on-refresh="doRefresh()">
     </ion-refresher>
-    <a href="#/app/alerts" class="item item-icon-left c_red400"
-    ng-show="alerts">
-        <i class="icon ion-android-alert"></i> <b>{{alerts.length}}</b> Emergency alerts!
-    </a>
     <div class="card" ng-repeat="event in events">
       <a class="item item-avatar" ng-href="#/app/users/{{event.user._id}}">
         <img ng-src="{{event.user.img}}">
@@ -17,9 +13,14 @@ ng-show="event.img">
           <img ng-src="{{event.img}}">
       </a>
       <a ng-href="#/app/events/{{event._id}}" class="item item-text-wrap">
-            <h2>{{event.title}}</h2>
-            <p>{{event.description}}</p>
-            <p>{{event.date | date: 'HH:mm, dd/MM/yyyy'}}</p>
+        <div class="item-note">{{event.date | date: 'HH:mm, dd/MM/yyyy'}}</div>
+        <h2>{{event.title}}</h2>
+        <p>{{event.description}}</p>
+        <p>
+            <span class="o_badge c_blueGrey300" ng-repeat="category in event.categories">
+                {{category.name}}
+            </span>
+        </p>
       </a>
       <div class="item tabs tabs-icon-only">
         <a class="tab-item" ng-click="share(event)">

@@ -0,0 +1,9 @@
+<ion-view view-title="Categories">
+    <ion-content>
+        <ion-list>
+            <a class="item" ng-href="#/app/byCategory/{{category.name}}" ng-repeat="category in categories">
+                {{category.name}}
+            </a>
+        </ion-list>
+    </ion-content>
+</ion-view>

@@ -9,13 +9,18 @@ <div class="item item-image" ng-show="event.img">
       <img ng-src="{{event.img}}">
     </div>
     <div class="item">
-      <h2>{{event.title}}</h2>
-      <p>{{event.description}}</p>
-      <p>{{event.date | date: 'HH:mm, dd/MM/yyyy'}}</p>
+        <div class="item-note">{{event.date | date: 'HH:mm, dd/MM/yyyy'}}</div>
+        <h2>{{event.title}}</h2>
+        <p>{{event.description}}</p>
+        <p>
+            <span class="o_badge c_blueGrey300" ng-repeat="category in event.categories">
+                {{category.name}}
+            </span>
+        </p>
   </div>
 
     <div class="item" ng-show="markers[0]">
-      <h2>Map</h2>
+      <h2>Place: {{event.location.direction}}</h2>
     </div>
     <leaflet ng-show="markers[0]"
     width="100%" height="40%" markers="markers" center="center" tiles="tiles" id="map-simple-map"></leaflet>

@@ -17,9 +17,14 @@ ng-show="event.img">
           <img ng-src="{{event.img}}">
       </a>
       <a ng-href="#/app/events/{{event._id}}" class="item item-text-wrap">
-            <h2>{{event.title}}</h2>
-            <p>{{event.description}}</p>
-            <p>{{event.date | date: 'HH:mm, dd/MM/yyyy'}}</p>
+          <div class="item-note">{{event.date | date: 'HH:mm, dd/MM/yyyy'}}</div>
+          <h2>{{event.title}}</h2>
+          <p>{{event.description}}</p>
+          <p>
+              <span class="o_badge c_blueGrey300" ng-repeat="category in event.categories">
+                  {{category.name}}
+              </span>
+          </p>
       </a>
       <div class="item tabs tabs-icon-only">
         <a class="tab-item" ng-click="share(event)">

@@ -20,7 +20,7 @@ <div class="row o_mainOptionRow">
         <a class="col c_deepPurple400" ng-href="#/app/search">
           <i class="icon ion-search"></i>
         </a>
-        <a class="col c_cyan400" ng-href="#/app/byCategories">
+        <a class="col c_cyan400" ng-href="#/app/categories">
           <i class="icon ion-pound"></i><!--by categories-->
         </a>
     </div>

@@ -30,7 +30,7 @@ </a>
         <a class="item item-icon-left" menu-close href="#/app/savedEvents">
           <i class="icon ion-heart"></i> Saved Events
         </a>
-        <a class="item item-icon-left" menu-close href="#/app/byCategories">
+        <a class="item item-icon-left" menu-close href="#/app/categories">
           <i class="icon ion-pound"></i> By Categories
         </a>
         <a class="item item-icon-left" menu-close href="#/app/events">