Dev

.bowerrc

@@ -0,0 +1,3 @@
+{
+	"directory" : "client/bower_components"
+}

Gruntfile.js

@@ -12,7 +12,7 @@ module.exports = function (grunt) {
 			bower: {
 				dest: 'client/dist/bower.js',
 				src: ['client/bower_components/jquery/jquery.js',
-					'client/bower_components/lodash/lodash.compat.js',
+					'client/bower_components/lodash/dist/lodash.compat.js',
 					'client/bower_components/eventEmitter/EventEmitter.js',
 					'client/bower_components/get-style-property/get-style-property.js',
 					'client/bower_components/get-size/get-size.js',
@@ -24,7 +24,7 @@ module.exports = function (grunt) {
 					'client/bower_components/masonry/masonry.js',
 					'client/bower_components/imagesloaded/imagesloaded.js',
 					'client/bower_components/angular/angular.js',
-					'client/bower_components/angular-ui-router/angular-ui-router.js',
+					'client/bower_components/angular-ui-router/release/angular-ui-router.min.js',
 					'client/bower_components/angular-masonry/angular-masonry.js',
 					'client/bower_components/angular-strap/dist/angular-strap.min.js',
 					'client/bower_components/angular-strap/dist/angular-strap.tpl.min.js',
@@ -118,10 +118,10 @@ module.exports = function (grunt) {
 		nodemon.stdout.pipe(process.stdout);
 		nodemon.stderr.pipe(process.stderr);
 
-		grunt.task.run(['clean', 'concat:bower', 'concat:client', 'stylus', 'uglify:dev', 'watch']);
+		grunt.task.run(['clean', 'concat:bower', 'concat:client', 'stylus', 'uglify:dev' , 'watch']);
 	});
 
-	grunt.registerTask('build', ['clean', 'bower', 'concat:bower', 'concat:client', 'stylus', 'uglify:build']);
+	grunt.registerTask('build', ['clean', 'bower', 'concat:bower', 'concat:client', 'stylus','uglify:build']);
 
 	grunt.registerTask('test', ['mochaTest']);
 };

bower.json

@@ -18,11 +18,15 @@
     "tests"
   ],
   "dependencies": {
+    "angular": "~1.3",
     "angular-masonry": "~0.9.0",
-    "angular": "~1.2.22",
     "jquery": "~2.1.1",
     "lodash": "~2.4.1",
     "angular-ui-router": "~0.2.10",
-    "angular-strap": "~2.1.1"
+    "angular-strap": "~2.1.1",
+    "angular-socket-io": "~0.6.0"
+  },
+  "resolutions": {
+    "angular": "~1.3"
   }
 }

client/app/app.js

@@ -1,7 +1,11 @@
+// The applcations states are created using ui-router . 
+//Here the controller,templateURL that each state uses are specified too.
+
 (function(){
-'use strict';
 
+'use strict';
 var WaddleConfig = function ($stateProvider, $urlRouterProvider) {
+  //creates an application state 
   $stateProvider
     .state('frontpage', {
       url: '/',
@@ -36,8 +40,31 @@ var WaddleConfig = function ($stateProvider, $urlRouterProvider) {
     })
     .state('map.feed', {
       url: '/feed',
-      templateUrl: '../app/modules/pages/map/feed.html', 
-      controller: 'FeedController as mapFeed'
+      views: {
+        '': {
+          templateUrl: '../app/modules/pages/map/feed.html', 
+          controller: 'FeedController as mapFeed'
+        },
+        'profile': {
+          templateUrl: '../app/modules/pages/map/profile.html',
+          controller: 'ProfileController'
+        }
+      },
+    })
+    .state('map.feed.checkin', {
+      url: '/checkin',
+      templateUrl: '../app/modules/pages/map/checkin.html',
+      controller: 'CheckinController'
+    })
+    .state('map.feed.checkin.post', {
+      url: '/:venue',
+      templateUrl: '../app/modules/pages/map/checkinpost.html',
+      controller: 'CheckinController'
+    })
+    .state('map.feed.checkin.post.photoupload', {
+      url: '/photoupload',
+      templateUrl: '../app/modules/pages/map/photoupload.html',
+      controller: 'CheckinController'
     })
     .state('map.feed.footprint', {
       url: '/:footprint',
@@ -46,12 +73,13 @@ var WaddleConfig = function ($stateProvider, $urlRouterProvider) {
     .state('map.footprints', {
       url: '/footprints',
       templateUrl: '../app/modules/pages/map/footprints.html',
-      controller: 'FeedController as mapFootprints'
+      controller: 'FeedController as mapFeed'
     })
-
+//when  none of the above state match the URL then redirect the page to state represented by '/' 
   $urlRouterProvider.otherwise('/');
 };
 
+//All the depenedent modules in the app are registered . Through config method application states are configired .
 angular.module('waddle', [
   'waddle.controllers',
   'waddle.directives',
@@ -61,7 +89,8 @@ angular.module('waddle', [
   'mgcrea.ngStrap.helpers.dimensions',
   'mgcrea.ngStrap.tooltip',
   'mgcrea.ngStrap.dropdown',
-  'ngSanitize'
+  'ngSanitize',
+  'btford.socket-io'
 ]).config(['$stateProvider', '$urlRouterProvider', WaddleConfig]);
 
 //   angular.module('mgcrea.ngStrap')

client/app/modules/controllers.js

@@ -1,3 +1,3 @@
 (function() {
-angular.module('waddle.controllers', ['waddle.frontpage', 'waddle.map', 'waddle.feed', 'waddle.friends', 'waddle.navbar']);
+angular.module('waddle.controllers', ['waddle.frontpage', 'waddle.map', 'waddle.feed', 'waddle.profile', 'waddle.friends', 'waddle.navbar', 'waddle.checkin']);
 })();

client/app/modules/pages/frontpage/frontpage.html

@@ -9,6 +9,7 @@
     <img src="https://s3-us-west-2.amazonaws.com/waddle/WaddlePenguinLogo.png" class="logo" />
     <h1>Waddle</h1>
     <h2 class="waddlewaddle">Your world. Your footprints.</h2>
+
     <a href="#openModal"><button class="makemap" ng-click="login()"><h2 class="waddlewaddle">Let's Waddle</h2></button></a>
     </div><br />
 </div>

client/app/modules/pages/frontpage/frontpage.js

@@ -1,3 +1,4 @@
+
 (function(){
 
 var FrontpageController = function (UserRequests, $scope, $state) {
@@ -11,6 +12,7 @@ var FrontpageController = function (UserRequests, $scope, $state) {
     });
   };
 
+
   var sendUserDataToServer = function(fbToken, fbData){
     window.sessionStorage.userFbID = fbData.id;
 
@@ -19,16 +21,18 @@ var FrontpageController = function (UserRequests, $scope, $state) {
       name: fbData.name,
       fbToken: fbToken
     };
-
+//when sucessfully connected to fb account , loading screen is made active 
     $state.go('loading');
 
     UserRequests.sendUserData(userData)
     .then(function(storedUserData){
       UserRequests.allData = storedUserData.data
+      //Here map state is set to active
       $state.go('map');
     });
   };
 
+//gets login status of the facebook account
   openFB.getLoginStatus(function (response){
     if (response.status === 'connected'){
       console.log('connected');
@@ -38,6 +42,7 @@ var FrontpageController = function (UserRequests, $scope, $state) {
     }
   });
 
+//when user clicks lets waddle this function is invoked which calls facebook login function in return
   $scope.login = function(){
     openFB.login(function (response) {
       if(response.status === 'connected') {
@@ -47,11 +52,13 @@ var FrontpageController = function (UserRequests, $scope, $state) {
         alert('Facebook login failed: ' + response.error);
       }
     }, {
+      //to tell fb that these information of the user will be accessed
       scope: 'user_friends, user_tagged_places, user_photos, read_stream'
     });
   };
 };
 
+//Injects the services needed by the controller
 FrontpageController.$inject = ['UserRequests', '$scope', '$state']
 
 //Start creating Angular module

client/app/modules/pages/map/checkin-post.html

@@ -0,0 +1,5 @@
+<!--  <div id='account_connect_bg'>
+ 	<div class='centered'> -->
+ 		<h1 class='aboveerrything'>HOOBITY HOOBIty HOO</h1>
+<!--  	</div>
+ </div> -->

client/app/modules/pages/map/checkin.html

@@ -0,0 +1,21 @@
+<div ui-view></div>
+<div class="footprintitem col-lg-12">
+  <span ng-click="closeFootprintWindow()" class="closefootprint"><span class="glyphicon glyphicon-remove"></span></span>
+  <form class="navbar-form navbar-left" role="search">
+      <div class="form-group block">
+        <input ng-model="venueQuery" type="text" class="form-control" placeholder="Type in the name of a place">
+        <input ng-model="locationQuery" type="text" class="form-control" placeholder="Enter a city name">
+      </div>
+      <button type="submit" class="btn btn-default" ng-click="getAndParseUserInput()">Submit</button>
+  </form><br><br><br><br>
+  <div id="venuelist">
+    <div ng-repeat='venue in venues'>
+      <div class="venueitem">
+        <h3 ng-click='passSelectedVenueInfoToPostModal(venue)' ui-sref="map.feed.checkin.post({venue: venue.id})">{{venue.name}}</h3> 
+        <br/>
+        <h4>{{venue.location.formattedAddress[0]}} {{venue.location.formattedAddress[1]}}</h4>
+      </div>
+    </div>
+  </div>
+</div>
+

client/app/modules/pages/map/checkin.js

@@ -0,0 +1,46 @@
+(function(){
+
+var CheckinController = function ($scope, NativeCheckin){
+	$scope.venues = null;
+
+
+	$scope.venueData = {};
+
+	$scope.s3Upload = NativeCheckin.s3_upload;
+
+	$scope.passSelectedVenueInfoToPostModal = function (venueInfo) {
+		$scope.venue = venueInfo;
+	}
+
+	$scope.sendCheckinDataToServer = function(venueInfo) {
+		venueInfo.facebookID = window.sessionStorage.userFbID;
+		venueInfo.footprintCaption = $scope.footprintCaption;
+		NativeCheckin.s3_upload()
+		.then(function (public_url) {
+		  venueInfo.photo = public_url;
+		  console.log('venueInfo: ' + JSON.stringify(venueInfo));
+		  NativeCheckin.sendCheckinDataToServer(venueInfo)
+		})
+		.then(function (data) {
+			console.log(data);
+		})
+	}
+
+	$scope.getAndParseUserInput = function () {
+		var venueQuery = $scope.venueQuery.replace(" ", "%20");
+		var locationQuery = $scope.locationQuery.replace(" ", "%20");
+		NativeCheckin.searchFoursquareVenues({near: locationQuery, query: venueQuery})
+		.then(function (results) {
+			console.log(results);
+			$scope.venues = results.data.response.venues;
+		})
+	}
+}
+// Inject all the depependent services needed by the controller
+CheckinController.$inject = ['$scope', 'NativeCheckin'];
+
+//Start creating Angular module
+angular.module('waddle.checkin', [])
+  .controller('CheckinController', CheckinController);
+
+})();

client/app/modules/pages/map/checkinpost.html

@@ -0,0 +1,18 @@
+<!--  <div id='account_connect_bg'> -->
+<div id="account_connect_bg">
+  <div class="postcheckin centered">
+      <span class="closefootprint" ui-sref='map.feed.checkin'><span class="glyphicon glyphicon-remove"></span></span>
+  		<h3 style="margin-left: 15px;">{{venue.name}}</h3>
+  	<form class="navbar-form navbar-left" role="search">
+  		<textarea  ng-model="footprintCaption" type="text" class="form-control fullwidth" style="width: 100%;" placeholder="What did you think of this place?">
+  		</textarea>
+      <input type="file" id="files"/><p id="status">Please select a file</p>
+      <div style="text-align: center;" id="preview">
+      <!-- <button type="submit" class="btn btn-default" ui-sref="map.feed.checkin.post.photoupload">Upload Photo</button> -->
+  	  <button type="submit" class="btn btn-default" ng-click="sendCheckinDataToServer(venue)" ui-sref="map.feed">Post</button>
+    </form>
+  </div>
+</div>
+</div>
+<!-- </div> -->
+<div ui-view></div>

client/app/modules/pages/map/feed.html

@@ -1,22 +1,46 @@
 <div ui-view></div>
 <div ng-if="inBoundsObject.datapoints" class='waddlefeed'>
-  <div class='waddlefeeditem' ng-repeat="footprint in inBoundsObject.datapoints | orderBy:'-checkin.checkinTime' | limitTo:20 ">
-    <h4 class='feeditemname'ng-click="getFootprint(footprint)" ui-sref="map.feed.footprint({footprint: footprint.place.foursquareID})">
-      {{footprint.place.name}}
-    </h4>
-    <img ng-if="!footprint.checkin.bucketed" class='addbucket feedactions' title="Add to Bucket List" ng-click="addCheckinToBucketlist(footprint)"/>
-    <img ng-if="footprint.checkin.bucketed" class='addbucketactive feedactions' title="Add to Bucket List"/>
+  <br>
+  <h4 class="feedtitle">Feed</h4>
+  <input class="navbar-form form-control inline nomargin" ng-model="search.query" ng-keyup="filterMap()" placeholder="Search footprints">
+  <div class='waddlefeeditem' ng-repeat="footprint in inBoundsObject.datapoints | orderBy:'-checkin.checkinTime' | filter:search.query | limitTo:50">
+    <div class="footprintprofpicframe"><img class='footprintprofpic' ng-src='{{footprint.user.fbProfilePicture}}'></div>
+    <h4>{{footprint.user.name}}</h4>
+      <img ng-if="!footprint.checkin.bucketed" class='addbucket feedactions' title="Add to Bucket List" ng-click="addCheckinToBucketList(footprint)"/>
+      <img ng-if="footprint.checkin.bucketed" class='addbucketactive feedactions' title="Add to Bucket List" ng-click="removeCheckinFromBucketList(footprint)"/>
+      <h8 class="checkindate">{{footprint.checkin.checkinTime | date : shortDate}}</h8>
     <br/>
-    <h8>{{footprint.checkin.checkinTime | date : shortDate}}</h8>
-    <div class='feedphoto' ng-click="getFootprint(footprint)" ui-sref="map.feed.footprint({footprint: footprint.place.foursquareID})">
-      <img ng-if="footprint.checkin.photoSmall !== 'null'" ng-src="{{footprint.checkin.photoSmall}}">
+    <h3 class='feeditemname' ng-click="getFootprint(footprint)" ui-sref="map.feed.footprint({footprint: footprint.checkin.checkinID})">
+      {{footprint.place.name}}
+    </h3>
+    <div ng-if="feedDisplay(footprint.checkin.photoLarge, footprint.checkin.caption) === 'bothTrue'" ng-click="getFootprint(footprint)" ui-sref="map.feed.footprint({footprint: footprint.checkin.checkinID})">
+      <img class='feedphoto' ng-src="{{footprint.checkin.photoLarge}}">
+      <h4>{{footprint.checkin.caption}}</h4>
+    </div>
+    <div  ng-if="feedDisplay(footprint.checkin.photoLarge, footprint.checkin.caption) === 'photoTrue'" ng-click="getFootprint(footprint)" ui-sref="map.feed.footprint({footprint: footprint.checkin.checkinID})">
+      <img class='feedphoto'  ng-src="{{footprint.checkin.photoLarge}}">
+    </div>
+    <div ng-if="feedDisplay(footprint.checkin.photoLarge, footprint.checkin.caption) === 'bothNull'" class='captioncontainer'>
+      <img class="defaultpeng" ng-click="getFootprint(footprint)" ui-sref="map.feed.footprint({footprint: footprint.checkin.checkinID})" ng-src="https://s3-us-west-2.amazonaws.com/waddle/WaddlePenguinLogo.png"/>
     </div>
-    <div ng-if="footprint.checkin.caption === 'null' && footprint.checkin.photoSmall === 'null'" class='captioncontainer'>
-      <img class="defaultpeng" ng-click="getFootprint(footprint)" ui-sref="map.feed.footprint({footprint: footprint.place.foursquareID})" ng-if="footprint.checkin.photoSmall === 'null' && footprint.checkin.caption === 'null'" ng-src="https://s3-us-west-2.amazonaws.com/waddle/WaddlePenguinLogo.png"/>
+    <div ng-if="feedDisplay(footprint.checkin.photoLarge, footprint.checkin.caption) === 'captionTrue'" class='captioncontainer'>
+      <h4>"{{footprint.checkin.caption}}"</h4>
     </div>
-    <div ng-if="footprint.checkin.caption !== 'null' && footprint.checkin.photoSmall === 'null'" class='captioncontainer'>
-      <h4 ng-if="footprint.checkin.caption !== 'null' && footprint.checkin.photoSmall === 'null'">"{{footprint.checkin.caption}}"</h4>
+    <div class="feedcomment" ng-repeat="comment in footprint.comments | orderBy:'comment.time'">
+    <img class='footprintprofpic' ng-src='{{comment.commenter.fbProfilePicture}}'>
+    <h4>{{comment.commenter.name}}</h4>
+    <h8 class="checkindate">{{comment.comment.time | date : shortDate}}</h8><br>
+    <p>{{comment.comment.text}}</p>
     </div>
+<!--     <div class='footprintcomments' ng-repeat="comment in selectedFootprintInteractions.comments">
+        <div class='footprintcommentpiccontainer'>
+          <img class='footprintprofpic' ng-src='{{comment.commenter.fbProfilePicture}}'>
+        </div>
+        <h4 class="commentername">{{comment.commenter.name}}</h4>
+        <h7>{{comment.comment.time | date : shortDate}}</h7>
+        <p>{{comment.comment.text}}</p>
+        <button ng-click='removeComment()'>Delete</button>
+      </div> -->
     <form name="customSubmit" data-custom-submit info='someinfo' class='comment_form' novalidate>
       <input ng-model='comment' name='comment' placeholder='Leave a comment' class="comment" data-ng-minlength="1" data-ng-maxlength="120" required>
       <span class="help-inline" ng-show="customSubmit.comment.$error.maxlength">120 Character Max</span>