From efd7daa3542622e8010a063813606e5307c4eeeb Mon Sep 17 00:00:00 2001 From: MSun Date: Sat, 5 Dec 2015 16:44:01 -0500 Subject: [PATCH] event page improvement --- .../directives/event-card/event-card.html | 3 +- .../directives/event-detail/event-detail.html | 5 +- .../directives/event-form/event-form.html | 1 - browser/js/common/factories/EventFactory.js | 11 ++- browser/js/common/filters/time.js | 8 +++ browser/js/event/detail.html | 58 +++++++--------- browser/js/event/event.js | 69 ++++++++++++++++--- browser/js/event/update.html | 7 +- browser/js/fsa/fsa-pre-built.js | 1 - browser/js/user/list.html | 4 +- browser/js/user/profile.html | 1 + browser/scss/main.scss | 14 +++- public/style.css | 7 ++ seed.js | 20 +++--- server/db/models/event.js | 9 +-- 15 files changed, 153 insertions(+), 65 deletions(-) create mode 100644 browser/js/common/filters/time.js diff --git a/browser/js/common/directives/event-card/event-card.html b/browser/js/common/directives/event-card/event-card.html index 7d10722..522e47a 100644 --- a/browser/js/common/directives/event-card/event-card.html +++ b/browser/js/common/directives/event-card/event-card.html @@ -6,7 +6,7 @@

{{eventdata.sport}}

-
{{eventdata.name}}
+
{{eventdata.name}}
{{eventdata.host}}
{{eventdata.date}}{{eventdata.time}} @@ -19,4 +19,3 @@
{{eventdata.name}}
Check it Out
- \ No newline at end of file diff --git a/browser/js/common/directives/event-detail/event-detail.html b/browser/js/common/directives/event-detail/event-detail.html index 433853d..76e1229 100644 --- a/browser/js/common/directives/event-detail/event-detail.html +++ b/browser/js/common/directives/event-detail/event-detail.html @@ -7,7 +7,7 @@

{{eventdata.sport}}

-
{{eventdata.name}}
+
{{eventdata.name}}
{{eventdata.host}}
@@ -23,6 +23,7 @@
{{eventdata.name}}
Join! + Edit
- \ No newline at end of file + diff --git a/browser/js/common/directives/event-form/event-form.html b/browser/js/common/directives/event-form/event-form.html index 7e088f6..3b56a58 100644 --- a/browser/js/common/directives/event-form/event-form.html +++ b/browser/js/common/directives/event-form/event-form.html @@ -2,7 +2,6 @@
- {{event}}

{{type}} An Event



diff --git a/browser/js/common/factories/EventFactory.js b/browser/js/common/factories/EventFactory.js index 80eeb99..d0b77f0 100644 --- a/browser/js/common/factories/EventFactory.js +++ b/browser/js/common/factories/EventFactory.js @@ -16,11 +16,15 @@ app.factory('EventFactory', function($http){ var sportsList = ["Basketball", "Climbing", "Soccer", "Baseball", "Football", "Lifting", "Skiing", "Mountain Biking", "Surfing", "Cycling", 'Tennis']; function createEvent(event){ - return $http.post('/api/event/', event); + return $http.post('/api/events/', event); + } + + function updateEvent(event){ + return $http.put('/api/events/', event); } function getEventById(id){ - return $http.get('/api/event/'+id); + return $http.get('/api/events/'+id); } function getEvents() { @@ -30,6 +34,8 @@ app.factory('EventFactory', function($http){ }); } + + return { getUrl: function(type) { return defaultImages[type]; @@ -37,6 +43,7 @@ app.factory('EventFactory', function($http){ createEvent: createEvent, getEventById: getEventById, getEvents: getEvents, + updateEvent: updateEvent, sportsList: sportsList } }); diff --git a/browser/js/common/filters/time.js b/browser/js/common/filters/time.js new file mode 100644 index 0000000..7549661 --- /dev/null +++ b/browser/js/common/filters/time.js @@ -0,0 +1,8 @@ + +app.filter('timestamp', function(){ + return function(input){ + var t = new Date(input); + return t.getTime(); + } +}); + diff --git a/browser/js/event/detail.html b/browser/js/event/detail.html index 713f1a7..1d7be2f 100644 --- a/browser/js/event/detail.html +++ b/browser/js/event/detail.html @@ -1,3 +1,4 @@ +
@@ -8,8 +9,8 @@

{{event.name}}

-

{{event.location}}

- +

{{event.location.name}}

+

{{event.location.address}}

@@ -17,9 +18,9 @@

{{event.name}}

-

{{event.timeBegin |date }}

-

{{event.timeBegin }}

-

{{event.timeEnd }}

+

{{event.timeBegin | timestamp | date:'longDate'}}

+

{{event.timeBegin | timestamp | date:'shortTime' }}

+

{{event.timeEnd | timestamp | date:'shortTime' }}

@@ -30,7 +31,8 @@

{{event.name}}

{{feePerPerson || 'Free!'}}

- RSVP + RSVP + Cancel
@@ -47,39 +49,29 @@

Interested? Sport up?

- 8 seats + {{event.maxAttendees - event.attendees.length}} seats
- 5 going + {{event.attendees.length}} going
-
- +
+ + {{event.host}} +
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- +
+ +
+ No Player Yet! 囧 +
+
    +
  • + {{attentee.userName}} + +
    • +
diff --git a/browser/js/event/event.js b/browser/js/event/event.js index d40b8e9..18cda53 100644 --- a/browser/js/event/event.js +++ b/browser/js/event/event.js @@ -7,7 +7,7 @@ app.config(function($stateProvider){ events: function(EventFactory) { return EventFactory.getEvents(); } - }, + }, controller: function($scope, uiGmapGoogleMapApi, Utils, events){ console.log(events); $scope.events = events; @@ -25,13 +25,52 @@ app.config(function($stateProvider){ .then(function(res){ return res.data; }) + }, + user: function(AuthService){ + return AuthService.getLoggedInUser() + .then(function(res){ + return res; + }) } }, - controller: function($scope, event){ - $scope.page="detail"; - console.log(event) + controller: function($scope, event, user, EventFactory, $state) { $scope.event = event; -; } + $scope.reserved = false; + angular.forEach($scope.event.attendees, function (val, key) { + if (val === user._id) { + $scope.reserved = true; + } + }); + $scope.join = function () { + if (user === null) { + alert('Please Login to Join the Sport.'); + } + else { + $scope.event.attendees.push(user); + } + EventFactory.updateEvent($scope.event) + .then(function (res) { + $scope.reserved = true; + $scope.event = res.data; + $state.go('eventDetail', {id: res.data._id}); + }); + }; + + $scope.cancel = function () { + angular.forEach($scope.event.attendees, function (val, key) { + if (val === user._id) { + $scope.event.attendees.splice(key, 1); + } + }); + EventFactory.updateEvent($scope.event) + .then(function (res) { + $scope.reserved = false; + $scope.event = res.data; + $state.go('eventDetail', {id: res.data._id}); + }); + }; + } + }) .state('eventCreate', { url:'/events/create', @@ -48,10 +87,22 @@ app.config(function($stateProvider){ .state('eventUpdate', { url:'/events/update/:id', templateUrl: 'js/event/update.html', - controller: function($scope){ - $scope.update = function(para) { - alert(para); - } + resolve: { + event: function(EventFactory, $stateParams){ + return EventFactory.getEventById($stateParams.id) + .then(function(res){ + return res.data; + }) + } + }, + controller: function($scope, event, EventFactory, $state){ + $scope.event = event; + $scope.updateEvent = function() { + EventFactory.updateEvent($scope.event) + .then(function(res){ + $state.go('eventDetail', {id: res.data._id}); + }); + } } }); }); diff --git a/browser/js/event/update.html b/browser/js/event/update.html index 1f322b7..c3dd0d9 100644 --- a/browser/js/event/update.html +++ b/browser/js/event/update.html @@ -1 +1,6 @@ - +
+ +
+ You got it +
+
diff --git a/browser/js/fsa/fsa-pre-built.js b/browser/js/fsa/fsa-pre-built.js index 02f5799..daa26ca 100644 --- a/browser/js/fsa/fsa-pre-built.js +++ b/browser/js/fsa/fsa-pre-built.js @@ -64,7 +64,6 @@ }; this.getLoggedInUser = function (fromServer) { - // If an authenticated session exists, we // return the user attached to that session // with a promise. This ensures that we can diff --git a/browser/js/user/list.html b/browser/js/user/list.html index c97a7b6..3f725cf 100644 --- a/browser/js/user/list.html +++ b/browser/js/user/list.html @@ -1,4 +1,4 @@ - +
@@ -21,3 +21,5 @@
+ +
diff --git a/browser/js/user/profile.html b/browser/js/user/profile.html index 3c3e355..0d45e9c 100644 --- a/browser/js/user/profile.html +++ b/browser/js/user/profile.html @@ -1,3 +1,4 @@ +{{user}}
diff --git a/browser/scss/main.scss b/browser/scss/main.scss index 5e96ad5..6a0141b 100644 --- a/browser/scss/main.scss +++ b/browser/scss/main.scss @@ -5,7 +5,6 @@ body { //background: #fdfdfd; color: #c0c0c0; - //background: url("http://i.stack.imgur.com/W6Fuk.png"); background-color: #808080; background-size: 100% 100%; height: 100%; @@ -80,6 +79,19 @@ body { } } +.container-padding { + padding: 100px; +} + +#userlist{ + padding: 100px; + background-image: url("http://coolblackppt.com/wp-content/uploads/2013/06/High-resolution-background-patterns-damask-wallpaper-black.jpg"); +} + +//.body-container{ +// background: url("https://secure.static.tumblr.com/34e3d249609e9e477489115ceaffd0d3/jyvnuzu/Vrzn04jt0/tumblr_static_colorful_abstract_background_.jpg"); +//} + @import 'directives/main'; @import 'directives/flip-card'; @import 'home/main'; diff --git a/public/style.css b/public/style.css index 911d634..f6ad5a7 100644 --- a/public/style.css +++ b/public/style.css @@ -49,6 +49,13 @@ body { -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; } +.container-padding { + padding: 100px; } + +#userlist { + padding: 100px; + background-image: url("http://coolblackppt.com/wp-content/uploads/2013/06/High-resolution-background-patterns-damask-wallpaper-black.jpg"); } + fullstack-logo { display: block; } fullstack-logo img { diff --git a/seed.js b/seed.js index c8951da..ff3a04d 100644 --- a/seed.js +++ b/seed.js @@ -35,7 +35,7 @@ var getRandomLocation = function() { //change this later to take a sport and ret {name: 'Hudson River Park', coords: {latitude: 40.727127, longitude: -74.011334}}, {name: 'Central Park Great Lawn', coords: {latitude: 40.781389, longitude: -73.966553}}, {name: 'Nelson Rockefeller Park', coords: {latitude: 40.716920, longitude: -74.016867}}, - {name: '"The Cage" W4 St Basketball Courts', coords: {latitude: 40.731041, longitude: -74.001244}}, + {name: '"The Cage" W4 St Basketball Courts', coords: {latitude: 40.731041, longitude: -74.001244}}, ] return locations[Math.floor(Math.random()*locations.length)]; @@ -59,6 +59,7 @@ var genRandomEvents = function(num) { host: chance.first(), sport: getRandomSport(), timeBegin: moment(chance.date({string: true, year: 2015, month: 11})+'T'+chance.hour()+':'+chance.minute()+':00.000Z', 'h:mm A'), + timeEnd: moment(chance.date({string: true, year: 2015, month: 11})+'T'+chance.hour()+':'+chance.minute()+':00.000Z', 'h:mm A'), location: getRandomLocation(), level: getRandomLevel(), description: chance.paragraph({sentences: 1}) @@ -98,10 +99,11 @@ var seedEvents = function () { var events = genRandomEvents(12); var staticEvents = [ { - name: 'The best soccer game ever', + name: 'The best soccer game ever', host: 'bryce', sport: 'Soccer', timeBegin: '2015-12-08T14:30:00.000Z', + timeEnd: '2015-12-08T14:30:00.000Z', location: {name: 'Central Park', coords: {latitude: 40.771606, longitude: -73.974819}}, tags: ['Soccer', 'Fun', 'Central Park', 'Easy'], level: 'Beginner (1-2)', @@ -111,10 +113,11 @@ var seedEvents = function () { description: 'A soccer game for beginners. Not intense at all. Basically we\'ll just be kicking around a ball and having fun.' }, { - name: 'Chelsea Piers Basketball Tournament', + name: 'Chelsea Piers Basketball Tournament', host: 'mingjie', sport: 'Basketball', timeBegin: '2015-12-10T18:30:00.000Z', + timeEnd: '2015-12-08T14:30:00.000Z', location: {name: 'Chelsea Piers Sports Center', coords: {latitude: 40.746617, longitude: -74.010184}}, tags: ['Basketball', 'Tournament', 'Chelsea Piers'], level: 'Intermediate (5-6)', @@ -125,11 +128,12 @@ var seedEvents = function () { description: 'Basketball tournament at Chelsea Piers! Be good. No scrubs allowed. Teams randomly assigned. Winning team gets $100 each!' }, { - name: 'Intense Tennis Match', + name: 'Intense Tennis Match', host: 'jugal', - sport: 'Tennis', + sport: 'Tennis', timeBegin: '2015-12-09T17:30:00.000Z', - location: {name: 'Hudson River Park Tennis Courts', coords: {latitude: 40.727127, longitude: -74.011334}}, + timeEnd: '2015-12-08T14:30:00.000Z', + location: {name: 'Hudson River Park Tennis Courts', coords: {latitude: 40.727127, longitude: -74.011334}}, tags: ['Tennis', 'Practice', 'Challenging', 'Match'], level: 'Pro (9-10)', minAttendees: 2, @@ -148,8 +152,8 @@ var seedEvents = function () { connectToDb.then(function () { User.findAsync({}).then(function (users) { - if (users.length === 0) { - return seedUsers(); + if (users.length !== 0) { + //return seedUsers(); } else { console.log(chalk.magenta('Seems to already be user data, exiting!')); process.kill(0); diff --git a/server/db/models/event.js b/server/db/models/event.js index 23d7bea..c73b0fc 100644 --- a/server/db/models/event.js +++ b/server/db/models/event.js @@ -5,13 +5,13 @@ var schema = new mongoose.Schema({ name: { type: String, required: true - }, + }, sport: { type: String, required: true }, host: { - type: String, + type: String, required: true }, timeBegin: { @@ -27,7 +27,7 @@ var schema = new mongoose.Schema({ }, tags: { type: [String] - }, + }, level: { type: String }, @@ -43,6 +43,7 @@ var schema = new mongoose.Schema({ image: { type: String }, + attendees: [{type: mongoose.Schema.Types.ObjectId, ref: 'User'}], video: { type: String }, @@ -52,4 +53,4 @@ var schema = new mongoose.Schema({ }) -module.exports = mongoose.model('Event', schema) \ No newline at end of file +module.exports = mongoose.model('Event', schema)