Added location maps on map

README.md

@@ -8,7 +8,7 @@ version 0.14.0.
 ## Prepare for data
 The data source is acquired through a smart phone app, Moves. You need to export yoru data first from your app.
 
-Go to `settings > Account > Export Data`
+Sign in with your Moves account at [https://account.moves-app.com](https://account.moves-app.com)
 
 Once you download your data, extract json.zip. Copy folder `json/yearly/places` folder under `app/data` ('places' folder is locates at the same level of placeholder.txt.) 
 

app/index.html

@@ -11,6 +11,7 @@
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <!-- bower:css -->
  <link rel="stylesheet" href="bower_components/leaflet/dist/leaflet.css" />
+ <link rel="stylesheet" href="bower_components/Leaflet.extra-markers/src/leaflet.extra-markers.css" />
  <!-- endbower -->
  <!-- endbuild -->
  <!-- build:css(.tmp) styles/main.css -->
@@ -40,6 +41,7 @@
  <script src="bower_components/underscore/underscore.js"></script>
  <script src="bower_components/angular-underscore-module/angular-underscore-module.js"></script>
  <script src="bower_components/d3/d3.js"></script>
+ <script src="bower_components/Leaflet.extra-markers/src/leaflet.extra-markers.js"></script>
  <!-- endbower -->
  <!-- endbuild -->
 

app/scripts/app.js

@@ -16,7 +16,7 @@ angular
  'underscore',
  'angularMoment',
  'leaflet-directive'
- ])
+])
 .config(function ($routeProvider) {
  $routeProvider
  .when('/', {
@@ -33,3 +33,4 @@ angular
  redirectTo: '/'
  });
 });
+

app/scripts/controllers/setup.js

@@ -6,23 +6,24 @@ angular.module('365daysApp').controller('SetupCtrl', [
  'moment', '_', '$scope', '$http', 'analyzer',
  function (moment, _, $scope, $http, analyzer) {
 
+ //set up process variables
  $scope.completedStepIndex = 0;
- // $scope.steps = [ 'year', 'home', 'work', 'others'];
- // $scope.done = ['', 'inactive', 'inactive', 'inactive'];
  $scope.steps = [
- { title : 'year', style: '', result: '' },
- { title : 'home', style: 'inactive', result: '' },
- { title : 'work', style: 'inactive', result: '' },
- { title : 'others', style: 'inactive', result: '' }
+ { label : 'year', title: 'Select a year', style: '', result: '' },
+ { label : 'home', title: 'Select home(s)', style: 'inactive', result: '' },
+ { label : 'work', title: 'Select work(s)', style: 'inactive', result: '' },
+ { label : 'others', title: 'Select other places', style: 'inactive', result: '' }
  ];
-
  $scope.validYear = [];
  $scope.candidates = {}; //home, work, and other places
  $scope.selected = {}; //selected candidates' index
 
  var data = null; //JSON object
  var places = {}; //selected home and work IDs
 
+ //map
+ $scope.map = { center: { lat: 37, lng: -122, zoom: 10 } };
+
  //selected home and work IDs
  //number of years to check
  var yearNum = 3;
@@ -64,6 +65,20 @@ angular.module('365daysApp').controller('SetupCtrl', [
  $scope.selected[type] = _.map(_.range($scope.candidates[type].length), function (i) {
  return i < 3 ? true : false; //by default choose up to 3 places
  });
+
+ //show candidates on map
+ var markers = _.map(_.pluck($scope.candidates[type], 'location'), function (m, i) {
+ m.icon = {
+ type: 'extraMarker',
+ icon: 'fa-star',
+ prefix: 'fa',
+ shape: 'circle',
+ markerColor: i < 3 ? 'red' : 'blue'
+ };
+ return m;
+ });
+ $scope.map.markers = markers;
+ $scope.map.center = { lat: markers[0].lat, lng: markers[0].lng, zoom: 10 };
  }
 
  function updateStep(stepIndex, result) {
@@ -86,7 +101,7 @@ angular.module('365daysApp').controller('SetupCtrl', [
 
  //from step 2 (selecting home)
  $scope.completeStep = function (stepIndex) {
- var lastStep = $scope.steps[stepIndex].title;
+ var lastStep = $scope.steps[stepIndex].label;
 
  //get place IDs at the end of each step
  var results = '';
@@ -101,20 +116,21 @@ angular.module('365daysApp').controller('SetupCtrl', [
 
  //get candidates of next places
  if (stepIndex < $scope.steps.length - 1) {
- getCandidates($scope.steps[stepIndex + 1].title);
+ getCandidates($scope.steps[stepIndex + 1].label);
  }
  };
 
- //map
- angular.extend($scope, {
- center: {
- lat: 51.505,
- lng: -0.09,
- zoom: 4
- }
- });
+ //centering map
+ $scope.recenterMap = function (i) {
+ $scope.map.center = {
+ lat: $scope.map.markers[i].lat,
+ lng: $scope.map.markers[i].lng,
+ zoom: 12,
+ };
+ };
 
  //testing
  //$scope.loadFile(2015);
+
  }
 ]);

app/scripts/services/analyzer.js

@@ -5,18 +5,17 @@ angular.module('365daysApp').service('analyzer', [
  'moment',
  function (_, moment) {
 
-
  /* time convert functions */
- function getDuration(st, et, trim) {
+ function getDuration(st, et, trim, currentDate) {
 
  //trim if the segment starts from the previous day or end on the next day
  if (trim) {
  var sDate = +st.substring(0, 8);
  var eDate = +et.substring(0, 8);
- if (eDate - sDate === 1) {
- st = eDate.toString() + 'T000000Z';
- } else if (eDate - sDate === 1) {
- et = eDate.toString() + 'T000000Z';
+ if (+currentDate > sDate) {
+ st = currentDate + 'T000000Z';
+ } else if (eDate > +currentDate) {
+ et = currentDate + 'T000000Z';
  }
  }
  return moment(et, 'YYYYMMDDThhmmssZ').diff(moment(st, 'YYYYMMDDThhmmssZ'), 'minutes');
@@ -30,62 +29,62 @@ angular.module('365daysApp').service('analyzer', [
  }
 
  function orderPlaces(placesByDay) {
+
+ //order places by total time stpend, object by place id
  return _.map(_.sortBy(_.map(_.groupBy(placesByDay, function (day) {
- return day.id;
- }), function (placeList) {
- return {
- id: placeList[0].id,
- name: placeList[0].name,
- totalMinute: _.reduce(_.pluck(placeList, 'duration'), function (memo, num) {
- return memo + num;
- }, 0),
- count: _.size(placeList)
- };
- }), function (place) {
- return place.totalMinute;
- }).reverse().slice(0, 10), function (place) {
- place.duration = toHourMinute(place.totalMinute);
- delete place.totalMinute;
- return place;
- });
+ return day.id;
+ }), function (placeList) {
+ return {
+ id: placeList[0].id,
+ name: placeList[0].name,
+ location: placeList[0].location,
+ totalMinute: _.reduce(_.pluck(placeList, 'duration'), function (memo, num) {
+ return memo + num;
+ }, 0),
+ count: _.size(placeList)
+ };
+ }), function (place) {
+ return place.totalMinute;
+ }).reverse().slice(0, 10), function (place) {
+ place.duration = toHourMinute(place.totalMinute);
+ delete place.totalMinute;
+ return place;
+ });
+ }
+
+ function getPlaceElements(p, trim, date) {
+ return {
+ id: p.place.id,
+ name: p.place.name ?
+ p.place.name :
+ p.place.type,
+ location: { lat: p.place.location.lat, lng: p.place.location.lon },
+ duration: getDuration(p.startTime, p.endTime, trim, date)
+ };
  }
 
  function getHome(dayList) {
 
  var placesByDay = _.compact(_.map(dayList, function (day) {
- console.log(day);
  //first place of the day - present at midnight
  if (!_.isNull(day.segments) && day.date !== day.segments[0].startTime.substring(0, 8)) {
  var firstPlace = day.segments[0];
- return {
- id: firstPlace.place.id,
- name: firstPlace.place.name ?
- firstPlace.place.name :
- firstPlace.place.type,
- duration: getDuration(firstPlace.startTime, firstPlace.endTime, false)
- };
+ return getPlaceElements(firstPlace, false);
  }
  }));
-
  return orderPlaces(placesByDay);
  }
 
  function getAllPlaces(dayList, exceptions) {
  return _.flatten(_.compact(_.map(dayList, function (day) {
- if (!_.isNull(day.segments)) {
- return _.compact(_.map(day.segments, function (seg) {
- if (!_.contains(exceptions, seg.place.id)) {
- return {
- id: seg.place.id,
- name: seg.place.name ?
- seg.place.name :
- seg.place.type,
- duration: getDuration(seg.startTime, seg.endTime, true)
- };
- }
- }));
- }
- })));
+ if (!_.isNull(day.segments)) {
+ return _.compact(_.map(day.segments, function (seg) {
+ if (!_.contains(exceptions, seg.place.id)) {
+ return getPlaceElements(seg, true, day.date);
+ }
+ }));
+ }
+ })));
  }
 
  this.getPlaces = function (type, data, exceptions) {

app/views/setup.html

@@ -2,7 +2,7 @@
  <div ng-repeat="step in steps" ng-class="step.style" class="step">
 
  <div class="title-wrapper">
- <h1 class="title"> Step{{ $index + 1 }}. Select {{ step.title }} </h1>
+ <h1 class="title"> Step{{ $index + 1 }}. {{ step.title }} </h1>
  <div ng-if="step.style=='done'" class="result">
  <span class="glyphicon glyphicon-ok"></span>
  {{ step.result }}
@@ -23,16 +23,17 @@ <h1 class="title"> Step{{ $index + 1 }}. Select {{ step.title }} </h1>
 
  <!-- step >0. select places -->
  <div ng-if="$index > 0" class="content">
- <ul>
- <li ng-repeat="h in candidates[step.title]">
- <input type="checkbox" ng-model="selected[step.title][$index]">
- {{ h.name }} / {{ h.duration }} / {{ h.count }}
+ <ol>
+ <li ng-repeat="h in candidates[step.label]">
+ <input type="checkbox" ng-model="selected[step.label][$index]">
+ {{ h.name }} / {{ h.duration }} / {{ h.count }} days
+ <span><a ng-click="recenterMap([$index])">map</a></span>
  </li>
- </ul>
+ </ol>
  <p><a class="btn btn-success" ng-click="completeStep($parent.$index)">Done <span class="glyphicon glyphicon-ok"></span></a></p>
  </div>
  </div>
 </div>
-<leaflet ng-if="completedStepIndex > 0" lf-center="center" height="600px" width="40%" class="map"></leaflet>
-
 
+<!-- map -->
+<leaflet ng-if="completedStepIndex > 0" markers="map.markers" lf-center="map.center" class="map"></leaflet>

bower.json

@@ -11,6 +11,7 @@
  "angular-underscore-module": "~1.0.3",
  "d3": "~3.5.14",
  "leaflet": "~0.7.7",
+ "Leaflet.extra-markers": "~1.0.3",
  "moment": "~2.11.1",
  "underscore": "~1.8.3"
  },

less/main.less

@@ -17,13 +17,15 @@
  .title, .result {
  display: inline;
  }
+ a {
+ cursor: pointer;
+ }
 }
 .map {
  float: left;
  width: 40%;
+ height: 400px;
 }
-
-
 .inactive {
  background-color: #efefef;
  h1 {

test/karma.conf.js

@@ -33,6 +33,7 @@ module.exports = function(config) {
  'bower_components/underscore/underscore.js',
  'bower_components/angular-underscore-module/angular-underscore-module.js',
  'bower_components/d3/d3.js',
+ 'bower_components/Leaflet.extra-markers/src/leaflet.extra-markers.js',
  'bower_components/angular-mocks/angular-mocks.js',
  // endbower
  "app/scripts/**/*.js",