savedEvents system implemented
arnaucode idoctnef@openmailbox.org
Mon, 20 Feb 2017 15:35:57 +0100
11 files changed,
270 insertions(+),
32 deletions(-)
M
www/css/colors.css
→
www/css/colors.css
@@ -1,3 +1,55 @@
+/* red */ +.c_red50{ + background: #FFEBEE; + color: #000000; +} +.c_red100{ + background: #FFCDD2; + color: #000000; +} +.c_red200{ + background: #EF9A9A; + color: #000000; +} +.c_red300{ + background: #E57373; + color: #ffffff; +} +.c_red400{ + background: #EF5350; + color: #ffffff; +} +.c_red500{ + background: #F44336; + color: #ffffff; +} +.c_red600{ + background: #E53935; + color: #ffffff; +} +.c_red700{ + background: #D32F2F; + color: #ffffff; +} +.c_red800{ + background: #C62828; + color: #ffffff; +} +.c_red900{ + background: #B71C1C; + color: #ffffff; +} + +.ctext_red400{ + color: #EF5350; +} +.ctext_red500{ + color: #F44336; +} +.ctext_red600{ + color: #E53935; +} + /* pink */ .c_pink50{ background: #FCE4EC;@@ -125,7 +177,7 @@ background:#1A237E;
color: #ffffff; } -.ct_indigo500{ +.ctext_indigo500{ color: #3F51B5!important; }@@ -339,6 +391,49 @@ .c_orange900{
background: #E65100; color: #ffffff; } + +/* grey */ +.c_grey50{ + background: #FAFAFA; + color: #000000; +} +.c_grey100{ + background: #F5F5F5; + color: #000000; +} +.c_grey200{ + background: #EEEEEE; + color: #000000; +} +.c_grey300{ + background: #E0E0E0; + color: #ffffff; +} +.c_grey400{ + background: #BDBDBD; + color: #ffffff; +} +.c_grey500{ + background: #9E9E9E; + color: #ffffff; +} +.c_grey600{ + background: #757575; + color: #ffffff; +} +.c_grey700{ + background: #616161; + color: #ffffff; +} +.c_grey800{ + background: #424242; + color: #ffffff; +} +.c_grey900{ + background: #212121; + color: #ffffff; +} + /* blue grey */
M
www/index.html
→
www/index.html
@@ -48,6 +48,7 @@ <script src="js/menu.js"></script>
<script src="js/main.js"></script> <script src="js/events.js"></script> <script src="js/event.js"></script> + <script src="js/savedEvents.js"></script> <script src="js/users.js"></script> <script src="js/user.js"></script>
M
www/js/app.js
→
www/js/app.js
@@ -1,5 +1,5 @@
-var urlapi = "http://localhost:3000/api/"; -//var urlapi = "http://192.168.1.35:3000/api/"; +//var urlapi = "http://localhost:3000/api/"; +var urlapi = "http://192.168.1.34:3000/api/";@@ -11,6 +11,7 @@ 'app.menu',
'app.main', 'app.events', 'app.event', + 'app.savedEvents', 'app.users', 'app.user' ])@@ -66,6 +67,15 @@ views: {
'menuContent': { templateUrl: 'templates/event.html', controller: 'EventCtrl' + } + } + }) + .state('app.savedEvents', { + url: '/savedEvents', + views: { + 'menuContent': { + templateUrl: 'templates/savedEvents.html', + controller: 'SavedEventsCtrl' } } })
M
www/js/event.js
→
www/js/event.js
@@ -55,9 +55,9 @@ };
$scope.doRefresh(); - $scope.share = function(){ - var message = "hola, això ho comparteixo"; - var subject = 'compartició'; + $scope.share = function(event){ + var message = event.description; + var subject = event.title; var file= ['','']; var link = "http://duckduckgo.com"; $cordovaSocialSharing
M
www/js/events.js
→
www/js/events.js
@@ -24,4 +24,47 @@ });
}; $scope.doRefresh(); + $scope.share = function(event){ + var message = event.description; + var subject = event.title; + var file= ['','']; + var link = "http://duckduckgo.com"; + $cordovaSocialSharing + .share(message, subject, file, 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")); + console.log("savedEvents"); + console.log($scope.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/savedEvents.js
@@ -0,0 +1,49 @@
+angular.module('app.savedEvents', ['pascalprecht.translate']) + +.controller('SavedEventsCtrl', function($scope, $http, $ionicModal, $timeout, $ionicLoading, $filter) { + + $scope.share = function(event){ + var message = event.description; + var subject = event.title; + var file= ['','']; + var link = "http://duckduckgo.com"; + $cordovaSocialSharing + .share(message, subject, file, link) // Share via native share sheet + .then(function(result) { + // Success! + }, function(err) { + // An error occured. Show a message to the user + }); + }; + $scope.$on('$ionicView.enter', function(){//per executar-ho cada cop que es carrega el view + $scope.savedEvents=[]; + if (localStorage.getItem("events_app_savedEvents")) { + $scope.savedEvents = JSON.parse(localStorage.getItem("events_app_savedEvents")); + console.log("savedEvents"); + console.log($scope.savedEvents); + } + $scope.events=$scope.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; + }; +});
M
www/templates/event.html
→
www/templates/event.html
@@ -19,7 +19,7 @@ <h2>Map</h2>
</div> <leaflet width="100%" height="40%" markers="markers" center="center" tiles="tiles" id="map-simple-map"></leaflet> - <a class="item item-icon-left ct_indigo500" ng-click="share()"> + <a class="item item-icon-left ctext_indigo500" ng-click="share(event)"> <i class="icon ion-android-share-alt"></i> Share </a> </ion-content>
M
www/templates/events.html
→
www/templates/events.html
@@ -1,35 +1,37 @@
<ion-view view-title="Events"> - <ion-content> + <ion-content class="c_blueGrey100"> <ion-refresher pulling-text="{{'Pull_to_refresh' | translate}}..." on-refresh="doRefresh()"> </ion-refresher> - - <!--<a class="item item-thumbnail-left" href="#/app/events/{{event._id}}" - ng-repeat="event in events"> - <img ng-src="{{event.img}}"> - <div class="badge item-note">{{event.user.username}}</div> - <h2>{{event.title}}</h2> - <p>{{event.description}}</p> - <p>{{event.date | date: 'HH:mm, dd/MM/yyyy'}}</p> - </a>--> - <div ng-repeat="event in events"> - + <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"> - <img ng-src="{{event.img}}"> + <div style="text-align: left; padding: 20px;"> <h2>{{event.title}}</h2> <p>{{event.description}}</p> <p>{{event.date | date: 'HH:mm, dd/MM/yyyy'}}</p> + </div> + </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 class="item item-icon-left ct_indigo500" ng-click="share()"> - <i class="icon ion-android-share-alt"></i> Share </a> - <div class="item"></div> - </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
@@ -4,17 +4,17 @@ <div class="row o_mainOptionRow">
<a class="col c_pink400" ng-href="#/app/events"> <i class="icon ion-clipboard"></i><!--events--> </a> - <a class="col c_indigo400" ng-href="#/app/users"> + <a class="col c_indigo500" ng-href="#/app/users"> <i class="icon ion-person-stalker"></i> </a> </div> <div class="row o_mainOptionRow"> + <a class="col c_indigo300" ng-href="#/app/savedEvents"> + <i class="icon ion-heart"></i> + </a> <a class="col c_green400" ng-href="#/app/byplace"> <i class="icon ion-ios-location"></i><!--by place--> </a> - <a class="col c_orange400" ng-href="#/app/bydate"> - <i class="icon ion-calendar"></i><!--by date--> - </a> </div> <div class="row o_mainOptionRow"> <a class="col c_yellow600" ng-href="#/app/search">@@ -25,11 +25,11 @@ <i class="icon ion-pound"></i><!--by categories-->
</a> </div> <div class="row o_mainOptionRow"> - <a class="col c_deepPurple400" ng-href="#/app/settings"> + <a class="col c_deepPurple400" ng-href="#/app/bydate"> + <i class="icon ion-calendar"></i><!--by date--> + </a> + <a class="col c_orange400" ng-href="#/app/settings"> <i class="icon ion-ios-gear"></i> - </a> - <a class="col c_blueGrey300" ng-href="#/app/settings"> - <i class="icon ion-code"></i> </a> </div> </ion-content>
A
www/templates/savedEvents.html
@@ -0,0 +1,35 @@
+<ion-view view-title="Saved Events"> + <ion-content class="c_blueGrey100"> + <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"> + <img ng-src="{{event.img}}"> + <div style="text-align: left; padding: 20px;"> + <h2>{{event.title}}</h2> + <p>{{event.description}}</p> + <p>{{event.date | date: 'HH:mm, dd/MM/yyyy'}}</p> + </div> + </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>