Browse Source

savedEvents system implemented

master
arnaucode 7 years ago
parent
commit
3013dc962b
11 changed files with 270 additions and 32 deletions
  1. +96
    -1
      www/css/colors.css
  2. +1
    -0
      www/index.html
  3. +12
    -2
      www/js/app.js
  4. +3
    -3
      www/js/event.js
  5. +43
    -0
      www/js/events.js
  6. +49
    -0
      www/js/savedEvents.js
  7. +1
    -1
      www/templates/event.html
  8. +19
    -17
      www/templates/events.html
  9. +8
    -8
      www/templates/main.html
  10. +3
    -0
      www/templates/menu.html
  11. +35
    -0
      www/templates/savedEvents.html

+ 96
- 1
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 */ /* pink */
.c_pink50{ .c_pink50{
background: #FCE4EC; background: #FCE4EC;
@ -125,7 +177,7 @@
color: #ffffff; color: #ffffff;
} }
.ct_indigo500{
.ctext_indigo500{
color: #3F51B5!important; color: #3F51B5!important;
} }
@ -340,6 +392,49 @@
color: #ffffff; 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 */ /* blue grey */
.c_blueGrey50{ .c_blueGrey50{

+ 1
- 0
www/index.html

@ -48,6 +48,7 @@
<script src="js/main.js"></script> <script src="js/main.js"></script>
<script src="js/events.js"></script> <script src="js/events.js"></script>
<script src="js/event.js"></script> <script src="js/event.js"></script>
<script src="js/savedEvents.js"></script>
<script src="js/users.js"></script> <script src="js/users.js"></script>
<script src="js/user.js"></script> <script src="js/user.js"></script>

+ 12
- 2
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 @@ angular.module('app', [
'app.main', 'app.main',
'app.events', 'app.events',
'app.event', 'app.event',
'app.savedEvents',
'app.users', 'app.users',
'app.user' 'app.user'
]) ])
@ -69,6 +70,15 @@ angular.module('app', [
} }
} }
}) })
.state('app.savedEvents', {
url: '/savedEvents',
views: {
'menuContent': {
templateUrl: 'templates/savedEvents.html',
controller: 'SavedEventsCtrl'
}
}
})
.state('app.users', { .state('app.users', {
url: '/users', url: '/users',
views: { views: {

+ 3
- 3
www/js/event.js

@ -55,9 +55,9 @@ angular.module('app.event', ['pascalprecht.translate', 'ui-leaflet'])
$scope.doRefresh(); $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 file= ['',''];
var link = "http://duckduckgo.com"; var link = "http://duckduckgo.com";
$cordovaSocialSharing $cordovaSocialSharing

+ 43
- 0
www/js/events.js

@ -24,4 +24,47 @@ angular.module('app.events', ['pascalprecht.translate'])
}; };
$scope.doRefresh(); $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;
};
}); });

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

+ 1
- 1
www/templates/event.html

@ -19,7 +19,7 @@
</div> </div>
<leaflet width="100%" height="40%" markers="markers" center="center" tiles="tiles" id="map-simple-map"></leaflet> <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 <i class="icon ion-android-share-alt"></i> Share
</a> </a>
</ion-content> </ion-content>

+ 19
- 17
www/templates/events.html

@ -1,35 +1,37 @@
<ion-view view-title="Events"> <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 pulling-text="{{'Pull_to_refresh' | translate}}..." on-refresh="doRefresh()">
</ion-refresher> </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}}"> <a class="item item-avatar" ng-href="#/app/users/{{event.user._id}}">
<img ng-src="{{event.user.img}}"> <img ng-src="{{event.user.img}}">
<h2>{{event.user.username}}</h2> <h2>{{event.user.username}}</h2>
<p>{{event.user.shortDescription}}</p> <p>{{event.user.shortDescription}}</p>
</a> </a>
<a ng-href="#/app/events/{{event._id}}" class="item item-image"> <a ng-href="#/app/events/{{event._id}}" class="item item-image">
<img ng-src="{{event.img}}"> <img ng-src="{{event.img}}">
<div style="text-align: left; padding: 20px;">
<h2>{{event.title}}</h2> <h2>{{event.title}}</h2>
<p>{{event.description}}</p> <p>{{event.description}}</p>
<p>{{event.date | date: 'HH:mm, dd/MM/yyyy'}}</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> </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> </div>
</ion-content> </ion-content>
</ion-view> </ion-view>

+ 8
- 8
www/templates/main.html

@ -4,17 +4,17 @@
<a class="col c_pink400" ng-href="#/app/events"> <a class="col c_pink400" ng-href="#/app/events">
<i class="icon ion-clipboard"></i><!--events--> <i class="icon ion-clipboard"></i><!--events-->
</a> </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> <i class="icon ion-person-stalker"></i>
</a> </a>
</div> </div>
<div class="row o_mainOptionRow"> <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"> <a class="col c_green400" ng-href="#/app/byplace">
<i class="icon ion-ios-location"></i><!--by place--> <i class="icon ion-ios-location"></i><!--by place-->
</a> </a>
<a class="col c_orange400" ng-href="#/app/bydate">
<i class="icon ion-calendar"></i><!--by date-->
</a>
</div> </div>
<div class="row o_mainOptionRow"> <div class="row o_mainOptionRow">
<a class="col c_yellow600" ng-href="#/app/search"> <a class="col c_yellow600" ng-href="#/app/search">
@ -25,12 +25,12 @@
</a> </a>
</div> </div>
<div class="row o_mainOptionRow"> <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> <i class="icon ion-ios-gear"></i>
</a> </a>
<a class="col c_blueGrey300" ng-href="#/app/settings">
<i class="icon ion-code"></i>
</a>
</div> </div>
</ion-content> </ion-content>
</ion-view> </ion-view>

+ 3
- 0
www/templates/menu.html

@ -27,6 +27,9 @@
<a class="item item-icon-left" menu-close href="#/app/users"> <a class="item item-icon-left" menu-close href="#/app/users">
<i class="icon ion-person-stalker"></i> Users <i class="icon ion-person-stalker"></i> Users
</a> </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/events"> <a class="item item-icon-left" menu-close href="#/app/events">
<i class="icon ion-pound"></i> By Categories <i class="icon ion-pound"></i> By Categories
</a> </a>

+ 35
- 0
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>

Loading…
Cancel
Save