map of events implemented

www/index.html

@@ -47,11 +47,14 @@
     <script src="js/menu.js"></script>
     <script src="js/main.js"></script>
     <script src="js/events.js"></script>
+    <script src="js/mapEvents.js"></script>
     <script src="js/event.js"></script>
     <script src="js/alerts.js"></script>
     <script src="js/savedEvents.js"></script>
     <script src="js/categories.js"></script>
     <script src="js/byCategory.js"></script>
+    <script src="js/place.js"></script>
+    <script src="js/byPlace.js"></script>
     <script src="js/users.js"></script>
     <script src="js/user.js"></script>
     <script src="js/login.js"></script>

www/js/app.js

@@ -10,11 +10,14 @@ angular.module('app', [
     'app.menu',
     'app.main',
     'app.events',
+    'app.mapEvents',
     'app.event',
     'app.alerts',
     'app.savedEvents',
     'app.categories',
     'app.byCategory',
+    'app.place',
+    'app.byPlace',
     'app.users',
     'app.user',
     'app.login',
@@ -67,6 +70,15 @@ angular.module('app', [
         }
       }
     })
+    .state('app.mapEvents', {
+      url: '/mapEvents',
+      views: {
+        'menuContent': {
+          templateUrl: 'templates/mapEvents.html',
+          controller: 'MapEventsCtrl'
+        }
+      }
+    })
     .state('app.event', {
       url: '/events/:eventid',
       views: {
@@ -112,6 +124,24 @@ angular.module('app', [
         }
       }
     })
+    .state('app.place', {
+      url: '/place',
+      views: {
+        'menuContent': {
+          templateUrl: 'templates/place.html',
+          controller: 'PlaceCtrl'
+        }
+      }
+    })
+    .state('app.byPlace', {
+      url: '/byPlace/:place',
+      views: {
+        'menuContent': {
+          templateUrl: 'templates/byPlace.html',
+          controller: 'ByPlaceCtrl'
+        }
+      }
+    })
     .state('app.users', {
       url: '/users',
       views: {

www/js/byPlace.js

@@ -0,0 +1,68 @@
+angular.module('app.byPlace', ['pascalprecht.translate'])
+
+.controller('ByPlaceCtrl', function($scope, $http, $ionicModal,
+            $timeout, $ionicLoading, $filter, $stateParams) {
+
+    $scope.category=$stateParams.categoryname;
+    $scope.events=[];
+    $scope.page=0;
+    $scope.doRefresh = function() {
+      /* events refresh: */
+        //$http.get(urlapi + 'events?page=' + $scope.page)
+        $http.get(urlapi + 'events/category/'+ $stateParams.categoryname)
+        .then(function(data){
+            $scope.events=data.data;
+            console.log($scope.events);
+            $scope.$broadcast('scroll.refreshComplete');//refresher stop
+
+        }, function(data){
+            console.log('data error');
+            $scope.$broadcast('scroll.refreshComplete');//refresher stop
+            $ionicLoading.show({ template: 'Error connecting server', noBackdrop: true, duration: 2000 });
+
+        });
+    };
+    $scope.doRefresh();
+
+    $scope.share = function(event){
+        var message = "[" + event.title + "]" + event.description;
+        /*var subject = event.title;
+        var file= ['',''];*/
+        var link = "http://duckduckgo.com";
+        $cordovaSocialSharing
+        .share(message, link) // Share via native share sheet
+        .then(function(result) {
+          // Success!
+        }, function(err) {
+          // An error occured. Show a message to the user
+      });
+    };
+    $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"));
+        }
+    });
+    $scope.saveEvent = function(event){
+        $scope.savedEvents.push(event);
+        localStorage.setItem("events_app_savedEvents", JSON.stringify($scope.savedEvents));
+        $ionicLoading.show({ template: 'Event saved', noBackdrop: true, duration: 1000 });
+    };
+    $scope.unsaveEvent = function(event){
+        for(var i=0; i<$scope.savedEvents.length; i++) {
+            if ($scope.savedEvents[i]._id === event._id){
+                $scope.savedEvents.splice(i, 1);
+            }
+        }
+        localStorage.setItem("events_app_savedEvents", JSON.stringify($scope.savedEvents));
+        $ionicLoading.show({ template: 'Event unsaved', noBackdrop: true, duration: 1000 });
+    };
+    $scope.isEventSaved = function(event) {
+        for(var i=0; i<$scope.savedEvents.length; i++) {
+            if ($scope.savedEvents[i]._id === event._id){
+                return true;
+            }
+        }
+        return false;
+    };
+});

www/js/mapEvents.js

@@ -0,0 +1,59 @@
+angular.module('app.mapEvents', ['pascalprecht.translate', 'ui-leaflet'])
+
+.controller('MapEventsCtrl', function($scope, $http, $ionicModal,
+            $timeout, $ionicLoading, $filter,
+            leafletBoundsHelpers, $cordovaSocialSharing) {
+
+    //map
+    $scope.center= {
+        lat: 0,
+        lng: 0,
+        zoom: 1
+    };
+    $scope.markers=[];
+    $scope.tiles= {
+        url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+        options: {
+            attribution: '<a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+        }
+    };
+
+    $scope.events=[];
+    $scope.page=0;
+    $http.get(urlapi + 'events')
+    .then(function(data){
+        console.log('data success events');
+        console.log(data); // for browser console
+        //$scope.events = data.data; // for UI
+        $scope.events=data.data;
+        $scope.$broadcast('scroll.refreshComplete');//refresher stop
+        for(var i=0; i<$scope.events.length; i++)
+        {
+            if($scope.events[i].location)
+            {
+                var msg="<a href='#/app/events/"+$scope.events[i]._id+"'>"
+                +"<h4>"+$scope.events[i].title + "</h4>"
+                +"<img src='"+$scope.events[i].img+"' style='width:100%;'>"
+                +$scope.events[i].description+"</a>";
+
+                $scope.markers.push({
+                    lat: Number($scope.events[i].location.geo.lat),
+                    lng: Number($scope.events[i].location.geo.long),
+                    message: msg
+                });
+                $scope.center= {
+                    lat: Number($scope.events[i].location.geo.lat),
+                    lng: Number($scope.events[i].location.geo.long),
+                    zoom: 12
+                };
+            }
+        }
+    }, function(data){
+        console.log('data error');
+        $scope.$broadcast('scroll.refreshComplete');//refresher stop
+        $ionicLoading.show({ template: 'Error connecting server', noBackdrop: true, duration: 2000 });
+
+    });
+
+
+});

www/js/place.js

@@ -0,0 +1,51 @@
+angular.module('app.place', ['pascalprecht.translate', 'ui-leaflet'])
+
+.controller('PlaceCtrl', function($scope, $http, $ionicModal, $timeout,
+        $ionicLoading, $filter, leafletData, leafletBoundsHelpers) {
+
+    $scope.center= {
+        lat: 0,
+        lng: 0,
+        zoom: 1
+    };
+    $scope.markers=new Array();
+    $scope.tiles= {
+        url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+        options: {
+            attribution: '<a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+        }
+    };
+    $scope.place={
+        location:{
+            direction:"",
+            geo:{
+                lat:"",
+                long:""
+            }
+        }
+    };
+    $scope.getGeo = function(){
+        $scope.markers=[];
+        console.log($scope.place.location.direction);
+        $http.get('http://nominatim.openstreetmap.org/search?q=' + $scope.place.location.direction + '&format=json&limit=1')
+        .then(function(data) {
+            console.log(data);
+            if(data.data[0])
+            {
+                $scope.place.location.geo.lat=data.data[0].lat;
+                $scope.place.location.geo.long=data.data[0].lon;
+                //$scope.newtravel.from.name=data.data[0].display_name;
+                $scope.markers.push({
+                    lat: Number(data.data[0].lat),
+                    lng: Number(data.data[0].lon),
+                    message: $scope.place.location.direction
+                });
+                $scope.center= {
+                    lat: Number(data.data[0].lat),
+                    lng: Number(data.data[0].lon),
+                    zoom: 16
+                };
+            }
+        });
+    };
+});

www/templates/byPlace.html

@@ -0,0 +1,43 @@
+<ion-view view-title="category: {{category}}">
+  <ion-content class="c_blueGrey100">
+    <ion-refresher pulling-text="{{'Pull_to_refresh' | translate}}..." on-refresh="doRefresh()">
+    </ion-refresher>
+    <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}}">
+        <h2>{{event.user.username}}</h2>
+        <p>{{event.user.shortDescription}}</p>
+      </a>
+      <a ng-href="#/app/events/{{event._id}}" class="item item-image"
+      ng-show="event.img">
+          <img ng-src="{{event.img}}">
+      </a>
+      <a ng-href="#/app/events/{{event._id}}" class="item item-text-wrap">
+        <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)">
+          <i class="icon ion-android-share-alt"></i>
+        </a>
+        <a class="tab-item">
+
+        </a>
+        <a class="tab-item" ng-click="unsaveEvent(event)"
+        ng-show="isEventSaved(event)">
+            <i class="icon ion-heart ctext_red600"></i>
+        </a>
+        <a class="tab-item" ng-click="saveEvent(event)"
+        ng-hide="isEventSaved(event)">
+            <i class="icon ion-heart"></i>
+        </a>
+      </div>
+    </div>
+  </ion-content>
+</ion-view>

www/templates/main.html

@@ -12,7 +12,7 @@
     <a class="col 0 c_yellow600" ng-href="#/app/savedEvents">
       <i class="icon ion-heart"></i>
     </a>
-      <a class="col c_green400" ng-href="#/app/byplace">
+      <a class="col c_green400" ng-href="#/app/mapEvents">
         <i class="icon ion-ios-location"></i><!--by place-->
       </a>
     </div>

www/templates/mapEvents.html

@@ -0,0 +1,7 @@
+<ion-view view-title="Map of Events">
+  <ion-content class="c_blueGrey100">
+      <leaflet
+      width="100%" height="100%" markers="markers"
+      center="center" tiles="tiles" id="map-simple-map"></leaflet>
+  </ion-content>
+</ion-view>

www/templates/menu.html

@@ -24,6 +24,9 @@
         <a class="item item-icon-left" menu-close href="#/app/events">
           <i class="icon ion-clipboard"></i> Events
         </a>
+        <a class="item item-icon-left" menu-close href="#/app/mapEvents">
+          <i class="icon ion-ios-location"></i> Map of Events
+        </a>
         <a class="item item-icon-left" menu-close href="#/app/users">
           <i class="icon ion-person-stalker"></i> Users
         </a>
@@ -33,9 +36,9 @@
         <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">
+        <!--<a class="item item-icon-left" menu-close href="#/app/place">
           <i class="icon ion-ios-location"></i> By Place
-        </a>
+      </a>-->
         <a class="item item-icon-left" menu-close href="#/app/events">
           <i class="icon ion-calendar"></i> By Date
         </a>

www/templates/place.html

@@ -0,0 +1,25 @@
+<ion-view view-title="Define a place">
+    <ion-content>
+        <label class="item item-input">
+            <input type="text" ng-model="place.location.direction" placeholder="Direction">
+        </label>
+        <div ng-click="getGeo()" class="button button-small c_indigo400 item-note"
+        ng-show="place.location.direction">
+            Get geolocation
+        </div>
+        <leaflet ng-show="markers[0]"
+        width="100%" height="40%" markers="markers" center="center"
+        tiles="tiles" id="map-simple-map"></leaflet>
+
+        <label class="item item-input">
+            <span class="input-label">Radius</span>
+            <input type="number">
+        </label>
+
+        <div class="item">
+            <div ng-click="postEvent()" class="button c_indigo400 item-note" ng-show="place.location.geo.lat">
+                Post new event!
+            </div>
+        </div>
+    </ion-content>
+</ion-view>