Added trip elements into Canvas

tanykim · Apr 17, 2016 · d4ddea2 · d4ddea2
1 parent 2b84a94
commit d4ddea2
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 18 deletions.
diff --git a/client/scripts/controllers/trips.js b/client/scripts/controllers/trips.js
@@ -31,8 +31,6 @@ angular.module('365daysApp').controller('TripsCtrl', [
  $scope.tripList = _.map(angular.copy(tracedTrips), function (d) {
  return {
  date: moment(d.date, 'YYYYMMDD'),
- from: d.from,
- to: d.to,
  name: {}
  };
  });
@@ -86,7 +84,6 @@ angular.module('365daysApp').controller('TripsCtrl', [
  };
  $scope.newTrip = { searched: false, newName: {} };
  socket.on('newTripLocation', function (loc) {
- console.log(loc);
  newLocation.name[loc.type] = loc.name;
  //change to new suggested name
  if (newLocation.name.from && newLocation.name.to) {
@@ -119,15 +116,9 @@ angular.module('365daysApp').controller('TripsCtrl', [
  };
 
  //finalize
- $scope.userSetTrips = [];
-
- //test
- // $scope.loaded = true;
- // $scope.selectedList =
- // $scope.tripList = [{"date":"20150106","from":{"lat":37.3401848315,"lon":-122.010942795},"to":{"lat":36.1182471261,"lon":-115.1543239001},"name":{"from":"Sunnyvale, United States","to":"Las Vegas, United States"}},{"date":"20150110","from":{"lat":36.1182471261,"lon":-115.1543239001},"to":{"lat":37.3401848315,"lon":-122.010942795},"name":{"from":"Las Vegas, United States","to":"Sunnyvale, United States"}},{"date":"20150829","from":{"lat":37.3401848315,"lon":-122.010942795},"to":{"lat":50.0498463566,"lon":8.5814561002},"name":{"from":"Sunnyvale, United States","to":"Frankfurt am Main, Germany"}},{"date":"20150829","from":{"lat":50.0498463566,"lon":8.5814561002},"to":{"lat":60.3160300648,"lon":24.9716455031},"name":{"to":"Vantaa, Finland","from":"Frankfurt am Main, Germany"}},{"date":"20150913","from":{"lat":60.3160300648,"lon":24.9716455031},"to":{"lat":40.6472252762,"lon":-73.7932215488},"name":{"from":"Vantaa, Finland","to":"United States"}},{"date":"20150914","from":{"lat":40.6472252762,"lon":-73.7932215488},"to":{"lat":37.6186123465,"lon":-122.3815549568},"name":{"to":"San Francisco, United States","from":"United States"}},{"date":"20151012","from":{"lat":37.6186123465,"lon":-122.3815549568},"to":{"lat":37.4563964834,"lon":126.4466473998},"name":{"from":"San Francisco, United States","to":"Incheon, South Korea"}},{"date":"20151101","from":{"lat":37.4563964834,"lon":126.4466473998},"to":{"lat":37.6176510517,"lon":-122.3897675034},"name":{"to":"San Francisco, United States","from":"Incheon, South Korea"}},{"date":"20151219","from":{"lat":37.6176510517,"lon":-122.3897675034},"to":{"lat":40.7656199059,"lon":-115.9202142037},"name":{"to":"United States","from":"San Francisco, United States"}},{"date":"20151220","from":{"lat":40.7656199059,"lon":-115.9202142037},"to":{"lat":40.4862048754,"lon":-106.8260737653},"name":{"from":"United States","to":"Steamboat Springs, United States"}}];
- // $scope.selected = _.map(_.range($scope.tripList.length), function () {
- // return true;
- // });
-
+ $scope.setUserSelectedTrips = function () {
+ analyzer.setUserSelectedTrips($scope.tripList);
+ $location.path('/canvas');
+ };
  }
 ]);
diff --git a/client/scripts/services/analyzer.js b/client/scripts/services/analyzer.js
@@ -271,7 +271,15 @@ angular.module('365daysApp').factory('analyzer', [
  };
  this.getDateRanges = function () {
  return period;
- }
+ };
+ this.setUserSelectedTrips = function (tripList) {
+ userSetTrips = _.map(angular.copy(tripList), function (trip) {
+ return {
+ dateIndex: toDayIndex(trip.date.format('YYYYMMDD')),
+ itinerary: trip.name
+ };
+ });
+ };
 
  /***
  **** from vis.js
@@ -289,7 +297,8 @@ angular.module('365daysApp').factory('analyzer', [
 
  return {
  period: period,
- places: places
+ places: places,
+ trips: userSetTrips
  };
  };
 

diff --git a/client/scripts/services/visualizer.js b/client/scripts/services/visualizer.js
@@ -34,12 +34,12 @@ angular.module('365daysApp').factory('visualizer', [
  margin.left = 50;
  margin.right = 20;
  //gap includes travel indications and title of bar charts
- margin.gap = 100;
+ margin.gap = 60;
  //bottom includes bar charts area and type title and gap
  margin.bottom = placeCountMax * barH + margin.gap;
  } else {
  margin.left = 200;
- margin.gap = 30;
+ margin.gap = 200;
  margin.right = barW * 2 + maxTitleWidth + 20; //400 is temporary, width of place name
  margin.bottom = 20;
  }
@@ -120,6 +120,36 @@ angular.module('365daysApp').factory('visualizer', [
  });
  }
 
+ function drawTrips(g, trip, startDate, dayUnit) {
+
+ var x1, x2, y1, y2;
+ if (options.orientation === 'landscape') {
+ x1 = dayUnit * trip.dateIndex;
+ x2 = dayUnit * trip.dateIndex;
+ y1 = dim.h;
+ y2 = dim.h + margin.gap;
+ } else {
+ x1 = dim.w;
+ x2 = dim.w + margin.gap;
+ y1 = dayUnit * trip.dateIndex;
+ y2 = dayUnit * trip.dateIndex;
+ }
+ var currentDate = startDate.clone().add(trip.dateIndex, 'days');
+
+ //TODO: tailor the poisition depending on departure/arrival
+ g.append('line')
+ .attr('x1', x1)
+ .attr('x2', x2)
+ .attr('y1', y1)
+ .attr('y2', y2)
+ .attr('class', 'stroke-1 stroke-black');
+ g.append('text')
+ .attr('x', x1)
+ .attr('y', y1)
+ .text(trip.itinerary.from + ' >> ' + trip.itinerary.to)
+ .attr('class', 'size-small fill-black');
+ }
+
  function drawElements(g, data) {
 
  function getUnits() {
@@ -202,6 +232,11 @@ angular.module('365daysApp').factory('visualizer', [
  .attr('class', 'pos-end');
  }
  });
+
+ //draw trips
+ _.each(data.trips, function (d) {
+ drawTrips(g, d, data.period.startDate, dayUnit);
+ });
  }
 
  function drawBarCharts(svg, data) {

diff --git a/client/views/trips.html b/client/views/trips.html
@@ -44,5 +44,5 @@ <h2> Add Trips </h2>
  </div>
 
  <!-- Finish Button -->
- <p><a class="btn btn-lg btn-success" ng-href="#/canvas">Next <span class="glyphicon glyphicon-ok"></span></a></p>
+ <p><a class="btn btn-lg btn-success" ng-click="setUserSelectedTrips()">Next <span class="glyphicon glyphicon-ok"></span></a></p>
 </div>