working on adding event cards to markers on map

jugaltheshah · Dec 4, 2015 · df7c77c · df7c77c
1 parent e792807
commit df7c77c
Show file tree

Hide file tree

Showing 7 changed files with 137 additions and 73 deletions.
diff --git a/browser/js/common/directives/event-card/event-card.html b/browser/js/common/directives/event-card/event-card.html
@@ -0,0 +1,22 @@
+<h1>{{eventdata.sport}}</h1>
+<div class="row ">
+	<div class="col-md-2">
+		<a href="#">
+			<img class="img-responsive" style="width:100px; height:100px" src="{{getImage()}}">
+		</a>
+	</div>
+	<div class="col-md-4">
+		<h5>{{eventdata.name}}</h5>
+		<span>{{eventdata.host}}</span>
+		<div>
+			<span>{{eventdata.date}}</span><span>{{eventdata.time}}</span>
+		</div>
+		<div>
+			<span>{{eventdata.location.name}}</span>
+		</div>
+	</div>
+	<div class="col-md-2">
+		<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-card/event-card.js b/browser/js/common/directives/event-card/event-card.js
@@ -0,0 +1,17 @@
+app.directive('eventCard', function(Utils) {
+	return {
+		restrict: 'E',
+		scope: {
+			eventdata: '='
+		},
+		templateUrl: '/js/common/directives/event-card/event-card.html', 
+		link: function(scope, element, attrs){
+			var defaultImages = Utils.defaultImages;
+			scope.getImage = function() {
+				// type = type.toLowerCase();
+				// console.log(type);
+				return defaultImages[scope.eventdata.sport.toLowerCase()];
+			}
+		}
+	}
+});
diff --git a/browser/js/common/directives/event-detail/event-detail.html b/browser/js/common/directives/event-detail/event-detail.html
@@ -1,4 +1,4 @@
-<div class="well" style="color: black;">
+<div style="border: dotted 1px">
 	<h1>{{eventdata.sport}}</h1>
 	<div class="row ">
 		<div class="col-md-2">
@@ -7,7 +7,7 @@ <h1>{{eventdata.sport}}</h1>
 			</a>
 		</div>
 		<div class="col-md-4">
-			<h5>{{eventdata.title}}</h5>
+			<h5>{{eventdata.name}}</h5>
 			<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>

diff --git a/browser/js/common/directives/search-filters/search-filters.html b/browser/js/common/directives/search-filters/search-filters.html
@@ -1,4 +1,4 @@
-<div class="well">
+<div style="border: dotted 1px">
 <form ng-submit="search()">
 	<div class="input-group">
 	  <span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-search"></span></span>

diff --git a/browser/js/event/list.html b/browser/js/event/list.html
@@ -1,13 +1,21 @@
-<div class="row-fluid">
-    <div class="col-md-6">
-        <ui-gmap-google-map center='map.center' zoom='map.zoom'></ui-gmap-google-map>
+<div class="row-fluid" style="margin-bottom: 0">
+    <div class="col-md-6" style="margin: 0; padding: 0">
+        <ui-gmap-google-map center='map.center' zoom='map.zoom'>
+        <ui-gmap-marker ng-repeat="event in events" coords="event.location.coords" options="{title: event.name}" mouseover="showEventDetails(event)" idkey="event._id">
+        	<ui-gmap-window isIconVisibleOnClick="true">
+        		<event-card eventdata="event"></event-card>
+        	</ui-gmap-window>
+        </ui-gmap-marker>
+        </ui-gmap-google-map>
     </div>
-    <div class="col-md-6">
-        <search-filters></search-filters>
-        <div id="eventsList" overflow-y="scroll">
-	        <div ng-repeat="event in events">
-	        	<event-detail eventdata="event"></event-detail>
+	<div class="col-md-6" style="margin: 0; padding: 0">
+	     <div class="well" style="background-color: #404040">
+	        <search-filters></search-filters>
+	        <div id="eventsList" style="overflow-y: scroll; height: 690px">
+		        <div ng-repeat="event in events">
+		        	<event-detail eventdata="event"></event-detail>
+		        </div>
 	        </div>
-        </div>
+	    </div>
     </div>
 </div>
diff --git a/public/main.js b/public/main.js
diff --git a/seed.js b/seed.js
@@ -30,12 +30,12 @@ moment().format();
 
 var getRandomLocation = function() { //change this later to take a sport and return a location that makes sense for the sport input.
     var locations = [
-    {name: 'Central Park', location: {latitude: 40.771606, longitude: -73.974819}},
-    {name: 'Chelsea Piers Sports Center', location: {latitude: 40.746617, longitude: -74.010184}},
-    {name: 'Hudson River Park', location: {latitude: 40.727127, longitude: -74.011334}},
-    {name: 'Central Park Great Lawn', location: {latitude: 40.781389, longitude: -73.966553}},
-    {name: 'Nelson Rockefeller Park', location: {latitude: 40.716920, longitude: -74.016867}},
-    {name: '"The Cage" W4 St Basketball Courts', location: {latitude: 40.731041, longitude: -74.001244}}, 
+    {name: 'Central Park', coords: {latitude: 40.771606, longitude: -73.974819}},
+    {name: 'Chelsea Piers Sports Center', coords: {latitude: 40.746617, longitude: -74.010184}},
+    {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}}, 
     ]
 
     return locations[Math.floor(Math.random()*locations.length)];
@@ -106,7 +106,7 @@ var seedEvents = function () {
         sport: 'Soccer',
         date: moment('MMM Do YYYY').toString(), 
         time: moment('3:30', 'h:mm A').toString(), 
-        location: {name: 'Central Park', location: {latitude: 40.771606, longitude: -73.974819}},
+        location: {name: 'Central Park', coords: {latitude: 40.771606, longitude: -73.974819}},
         tags: ['Soccer', 'Fun', 'Central Park', 'Easy'],
         level: 'Beginner (1-2)',
         minAttendees: 10,
@@ -120,7 +120,7 @@ var seedEvents = function () {
         sport: 'Basketball',
         date: moment('MMM Do YYYY').toString(), 
         time: moment('6:00', 'h:mm A').toString(),
-        location: {name: 'Chelsea Piers Sports Center', location: {latitude: 40.746617, longitude: -74.010184}},
+        location: {name: 'Chelsea Piers Sports Center', coords: {latitude: 40.746617, longitude: -74.010184}},
         tags: ['Basketball', 'Tournament', 'Chelsea Piers'],
         level: 'Intermediate (5-6)',
         fee: 25.00,
@@ -135,7 +135,7 @@ var seedEvents = function () {
         sport: 'Tennis', 
         date: moment('MMM Do YYYY').toString(), 
         time: moment('2:15', 'h:mm A').toString(),
-        location: {name: 'Hudson River Park Tennis Courts', location: {latitude: 40.727127, longitude: -74.011334}}, 
+        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,