event page improvement

jugaltheshah · Dec 5, 2015 · efd7daa · efd7daa
1 parent 805ae5e
commit efd7daa
Show file tree

Hide file tree

Showing 15 changed files with 153 additions and 65 deletions.
diff --git a/browser/js/common/directives/event-card/event-card.html b/browser/js/common/directives/event-card/event-card.html
@@ -6,7 +6,7 @@ <h1>{{eventdata.sport}}</h1>
 		</a>
 	</div>
 	<div class="col-md-4">
-		<h5>{{eventdata.name}}</h5>
+		<h5><a ui-sref="eventDetail({id: eventdata._id})">{{eventdata.name}}</a></h5>
 		<span>{{eventdata.host}}</span>
 		<div>
 			<span>{{eventdata.date}}</span><span>{{eventdata.time}}</span>
@@ -19,4 +19,3 @@ <h5>{{eventdata.name}}</h5>
 		<a class="btn btn-success" ui-sref="eventDetail({id: eventdata._id})">Check it Out</a>
 	</div>
 </div>
-
diff --git a/browser/js/common/directives/event-detail/event-detail.html b/browser/js/common/directives/event-detail/event-detail.html
@@ -7,7 +7,7 @@ <h1>{{eventdata.sport}}</h1>
 			</a>
 		</div>
 		<div class="col-md-4">
-			<h5>{{eventdata.name}}</h5>
+			<a href ui-sref="eventDetail({id: eventdata._id})"><h5>{{eventdata.name}}</h5></a>
 			<div>
 			<img class="img-circle" style="width: 15%; height: 15%" src="http://posting.indyweek.com/images/icons/user_generic.gif"><span>{{eventdata.host}}</span>
 			</div>
@@ -23,6 +23,7 @@ <h5>{{eventdata.name}}</h5>
 		</div>
 		<div class="col-md-2">
 			<a class="btn btn-success" ui-sref="eventDetail({id: eventdata._id})">Join!</a>
+			<a class="btn btn-warning" ui-sref="eventUpdate({id: eventdata._id})">Edit</a>
 		</div>
 	</div>
-</div>
+</div>
diff --git a/browser/js/common/directives/event-form/event-form.html b/browser/js/common/directives/event-form/event-form.html
@@ -2,7 +2,6 @@
 <div class="container-fluid">
     <form novalidation action="">
         <div class="form-group">
-        {{event}}
             <h1 class="text-center"> {{type}} An Event</h1>
             <br>
             <br>

diff --git 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,13 +34,16 @@ app.factory('EventFactory', function($http){
         });
     }
 
+
+
 	return {
 		getUrl: function(type) {
 			return defaultImages[type];
 		},
         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
@@ -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
@@ -1,3 +1,4 @@
+
 <div class="container">
     <div class="row">
         <div class="col-md-9">
@@ -8,18 +9,18 @@ <h4>{{event.name}}</h4>
                         <div class="row">
                             <div class="col-md-2"><i class="fa fa-map-marker fa-3x"></i></div>
                             <div class="col-md-10">
-                                <p>{{event.location}}</p>
-                                <!--<p>231 dsdf klafjiwe NY 12313</p>-->
+                                <p>{{event.location.name}}</p>
+                                <p>{{event.location.address}}</p>
                             </div>
                         </div>
                     </div>
                     <div class="well">
                         <div class="row">
                             <div class="col-md-2"><i class="fa fa-calendar-check-o fa-3x"></i></div>
                             <div class="col-md-10">
-                                <p>{{event.timeBegin |date }}</p>
-                                <p>{{event.timeBegin }}</p>
-                                <p>{{event.timeEnd }}</p>
+                                <p>{{event.timeBegin | timestamp | date:'longDate'}}</p>
+                                <p>{{event.timeBegin | timestamp | date:'shortTime' }}</p>
+                                <p>{{event.timeEnd | timestamp | date:'shortTime'  }}</p>
                             </div>
                         </div>
                     </div>
@@ -30,7 +31,8 @@ <h4>{{event.name}}</h4>
                                 <p>{{feePerPerson || 'Free!'}}</p>
                             </div>
                             <div class="col-md-3">
-                                <a class="btn btn-danger">RSVP</a>
+                                <a ng-show="!reserved" class="btn btn-success" ng-click="join()">RSVP</a>
+                                <a ng-show="reserved" class="btn btn-danger" ng-click="cancel()">Cancel</a>
                             </div>
                         </div>
                     </div>
@@ -47,39 +49,29 @@ <h3>Interested? Sport up?</h3>
             <div style="margin-bottom:50px;" class="row">
                 <div class="col-md-6">
                     <i class="fa fa-users fa-2x"></i>
-                    <a class="label label-success">8 seats</a>
+                    <a class="label label-success">{{event.maxAttendees - event.attendees.length}} seats</a>
                 </div>
                 <div class="col-md-6">
                     <i class="fa fa-users fa-2x"></i>
-                    <a class="label label-info">5 going</a>
+                    <a class="label label-info">{{event.attendees.length}} going</a>
                 </div>
             </div>
-            <div style="margin-bottom:20px;">
-                <img style="width:100px;height:100px" class="img-circle" src="http://www.partypacks.co.uk/images/products/product_93558_1_orig.jpg">
+            <div>
+                <label>Host</label>
+                <span>{{event.host}}</span>
+                <img class="img-circle" style="width: 15%; height: 15%" src="http://posting.indyweek.com/images/icons/user_generic.gif">
             </div>
-            <div style="margin-bottom:20px;">
-                <img style="width:100px;height:100px" class="img-circle" src="http://www.partypacks.co.uk/images/products/product_93558_1_orig.jpg">
-            </div>
-            <div style="margin-bottom:20px;">
-                <img style="width:100px;height:100px" class="img-circle" src="http://www.partypacks.co.uk/images/products/product_93558_1_orig.jpg">
-            </div>
-            <div style="margin-bottom:20px;">
-                <img style="width:100px;height:100px" class="img-circle" src="http://www.partypacks.co.uk/images/products/product_93558_1_orig.jpg">
-            </div>
-            <div style="margin-bottom:20px;">
-                <img style="width:100px;height:100px" class="img-circle" src="http://www.partypacks.co.uk/images/products/product_93558_1_orig.jpg">
-            </div>
-            <div style="margin-bottom:20px;">
-                <img style="width:100px;height:100px" class="img-circle" src="http://www.partypacks.co.uk/images/products/product_93558_1_orig.jpg">
-            </div>
-            <div style="margin-bottom:20px;">
-                <img style="width:100px;height:100px" class="img-circle" src="http://www.partypacks.co.uk/images/products/product_93558_1_orig.jpg">
-            </div>
-            <div style="margin-bottom:20px;">
-                <img style="width:100px;height:100px" class="img-circle" src="http://www.partypacks.co.uk/images/products/product_93558_1_orig.jpg">
-            </div>
-            <div style="margin-bottom:20px;">
-                <img style="width:100px;height:100px" class="img-circle" src="http://www.partypacks.co.uk/images/products/product_93558_1_orig.jpg">
+            <div>
+                <label>Players</label>
+                <div ng-show="event.attendees.length === 0" class="alert alert-warning">
+                    No Player Yet! 囧
+                </div>
+                <ul ng-show="event.attendees.length > 0" class="list-group">
+                    <li style="margin-bottom:20px;" ng-repeat="attendee in event.attendees">
+                        <span>{{attentee.userName}}</span>
+                        <img class="img-circle" style="width: 15%; height: 15%" src="http://posting.indyweek.com/images/icons/user_generic.gif">
+                    </li>
+                </ul>
             </div>
         </div>
     </div>

diff --git 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
@@ -1 +1,6 @@
-<event-form event="event" type="Update" fn="update(p)"></event-form>
+<div class="container">
+    <event-form event="event" type="Update" fn="update(p)"></event-form>
+    <div class="text-center row">
+        <a class="btn btn-info" ng-click="updateEvent()">You got it</a>
+    </div>
+</div>
diff --git 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
@@ -1,4 +1,4 @@
-
+<div id="userlist">
     <div class="container">
         <div class="row">
             <div class="col-md-3" ng-repeat="user in users">
@@ -21,3 +21,5 @@
             </div>
         </div>
     </div>
+
+</div>
diff --git a/browser/js/user/profile.html b/browser/js/user/profile.html
@@ -1,3 +1,4 @@
+{{user}}
 <div class="container">
     <div class="jumbotron">
         <div class="row">

diff --git 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
@@ -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 {