map of events implemented
arnaucode idoctnef@openmailbox.org
Fri, 24 Feb 2017 01:15:56 +0100
10 files changed,
292 insertions(+),
3 deletions(-)
M
www/index.html
→
www/index.html
@@ -47,11 +47,14 @@ <script src="js/app.js"></script>
<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>
M
www/js/app.js
→
www/js/app.js
@@ -10,11 +10,14 @@ 'ngCordova',
'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 @@ controller: 'EventsCtrl'
} } }) + .state('app.mapEvents', { + url: '/mapEvents', + views: { + 'menuContent': { + templateUrl: 'templates/mapEvents.html', + controller: 'MapEventsCtrl' + } + } + }) .state('app.event', { url: '/events/:eventid', views: {@@ -109,6 +121,24 @@ views: {
'menuContent': { templateUrl: 'templates/byCategory.html', controller: 'ByCategoryCtrl' + } + } + }) + .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' } } })
A
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; + }; +});
A
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 }); + + }); + + +});
A
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 + }; + } + }); + }; +});
A
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>
M
www/templates/main.html
→
www/templates/main.html
@@ -12,7 +12,7 @@ <div class="row o_mainOptionRow">
<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>
A
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>
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>