adds date range fields to map view

compass/app/Http/Controllers/Api.php

@@ -45,6 +45,9 @@ class Api extends BaseController
     if($date=$request->input('date')) {
       $start = DateTime::createFromFormat('Y-m-d H:i:s', $date.' 00:00:00', new DateTimeZone($tz));
       $end = DateTime::createFromFormat('Y-m-d H:i:s', $date.' 23:59:59', new DateTimeZone($tz));
+    } elseif(($start=$request->input('start')) && ($end=$request->input('end'))) {
+      $start = new DateTime($start, new DateTimeZone($tz));
+      $end = new DateTime($end, new DateTimeZone($tz));
     } else {
       return response(json_encode(['error' => 'no date provided']))->header('Content-Type', 'application/json');
     }

compass/app/Http/Controllers/Controller.php

@@ -93,7 +93,10 @@ class Controller extends BaseController
       'database' => $db,
       'menu' => [
         '/settings/'.$name => 'Settings'
-      ]
+      ],
+      'range_from' => $request->input('from') ?: '',
+      'range_to' => $request->input('to') ?: '',
+      'range_tz' => $request->input('tz') ?: 'America/Los_Angeles'
     ]);
   }
 

compass/public/assets/map.js

@@ -13,12 +13,29 @@ var geojsonLineOptions = {
   opacity: 0.5
 };
 
+var startIcon = L.icon({
+  iconUrl: '/assets/map-pin-start.png',
+  iconSize: [18,28],
+  iconAnchor: [9,28]
+});
+var endIcon = L.icon({
+  iconUrl: '/assets/map-pin-end.png',
+  iconSize: [18,28],
+  iconAnchor: [9,28]
+});
+
 var visible_layers = [];
 var visible_data = [];
 var highlightedMarker;
 var animatedMarker;
+var startMarker;
+var endMarker;
 var timers = [];
 
+function pointFromGeoJSON(geo) {
+  return L.latLng(geo[1], geo[0])
+}
+
 function resetAnimation() {
   if(animatedMarker) {
     map.removeLayer(animatedMarker);
@@ -30,20 +47,67 @@ function resetAnimation() {
   }
 }
 
+function displayLineOnMap(response, options) {
+  var data = response.linestring;
+
+  if(data.coordinates && data.coordinates.length > 0) {
+    // For any null coordinates, fill it in with the previous location
+    var lastCoord = null;
+    for(var i in data.coordinates) {
+      if(data.coordinates[i] == null) {
+        data.coordinates[i] = lastCoord;
+      } else {
+        lastCoord = data.coordinates[i];
+      }
+    }
+
+    visible_data.push(data);
+    visible_layers.push(L.geoJson(data, {
+      style: geojsonLineOptions
+    }).addTo(map));
+
+    // Show the start/end pins if necessary
+    if(options.pins) {
+      startMarker = L.marker(pointFromGeoJSON(visible_data[0].coordinates[0]), {icon: startIcon});
+      startMarker.addTo(map);
+      endMarker = L.marker(pointFromGeoJSON(visible_data[0].coordinates[ visible_data[0].coordinates.length-1 ]), {icon: endIcon});
+      endMarker.addTo(map);
+    }
+
+    // If the new layer is completely outside the current view, zoom the map to fit all layers
+    var vlayer = visible_layers[visible_layers.length - 1];
+    var is_outside = false;
+    if(!map.getBounds().intersects(vlayer.getBounds())) {
+      is_outside = true;
+    }
+
+    if(is_outside) {
+      console.log('is outside');
+      console.log(vlayer);
+      var full_bounds;
+      for(var i in visible_layers) {
+      if(visible_layers[i].getBounds) {
+          if(full_bounds) {
+            full_bounds.extend(visible_layers[i].getBounds());
+          } else {
+            full_bounds = visible_layers[i].getBounds();
+          }
+        }
+      }
+      map.fitBounds(full_bounds);
+    }
+
+    showBatteryGraph(response);
+  }
+}
+
 jQuery(function($){
 
   $('.calendar a').click(function(evt){
     var append = evt.altKey;
 
     if(!append) {
-      $('.calendar a').removeClass('selected');
-      if(visible_layers.length) {
-        for(var i in visible_layers) {
-          map.removeLayer(visible_layers[i]);
-        }
-      }
-      visible_layers = [];
-      visible_data = [];
+      removeVisibleLayers();
     }
     $(this).addClass('selected');
 
@@ -52,55 +116,32 @@ jQuery(function($){
     var db_name = $("#database").data("name");
     var db_token = $("#database").data("token");
 
-    $.get("/api/query?format=linestring&date="+$(this).data('date')+"&tz=America/Los_Angeles&token="+db_token, function(response){
-      var data = response.linestring;
-      
-      if(data.coordinates && data.coordinates.length > 0) {
-        // For any null coordinates, fill it in with the previous location
-        var lastCoord = null;
-        for(var i in data.coordinates) {
-          if(data.coordinates[i] == null) {
-            data.coordinates[i] = lastCoord;
-          } else {
-            lastCoord = data.coordinates[i];
-          }
-        }
-        
-        visible_data.push(data);
-        visible_layers.push(L.geoJson(data, {
-          style: geojsonLineOptions
-        }).addTo(map));
-
-        // If the new layer is completely outside the current view, zoom the map to fit all layers
-        var vlayer = visible_layers[visible_layers.length - 1];
-        var is_outside = false;
-        if(!map.getBounds().intersects(vlayer.getBounds())) {
-          is_outside = true;
-        }
-
-        if(is_outside) {
-	        console.log('is outside');
-	        console.log(vlayer);
-          var full_bounds;
-          for(var i in visible_layers) {
-	        if(visible_layers[i].getBounds) {
-	            if(full_bounds) {
-	              full_bounds.extend(visible_layers[i].getBounds());
-	            } else {
-	              full_bounds = visible_layers[i].getBounds();
-	            }
-            }
-          }
-          map.fitBounds(full_bounds);
-        }
-
-        showBatteryGraph(response);
-      }
+    $.get("/api/query?format=linestring&date="+$(this).data('date')+"&tz="+$("#timezone").val()+"&token="+db_token, function(data){
+      displayLineOnMap(data, {pins: false});
     });
+    $("#range-from").val($(this).data('date')+' 00:00:00');
+    $("#range-to").val($(this).data('date')+' 23:59:59');
 
     return false;
   });
-  
+
+  $('#range-go').click(function(evt) {
+    var stateObj = {from: $('#range-from').val(), to: $('#range-to').val(), tz: $('#timezone').val()};
+    var baseURL = "/map/" + $("#database").data('name');
+    var historyURL = baseURL + "?from="+stateObj.from+"&to="+stateObj.to+"&tz="+stateObj.tz;
+    window.history.pushState(stateObj, "GPS Log", historyURL)
+    resetAnimation();
+    removeVisibleLayers();
+
+    $("#range-go").addClass("loading");
+    var db_token = $("#database").data("token");
+    $.get("/api/query?format=linestring&start="+$('#range-from').val()+"&end="+$('#range-to').val()+"&tz="+$("#timezone").val()+"&token="+db_token, function(data){
+      $("#range-go").removeClass("loading");
+      displayLineOnMap(data, {pins: true});
+    });
+    return false;
+  })
+
   $('#btn-play').click(function(){
     console.log(visible_data[0].coordinates[0]);
     var point = pointFromGeoJSON(visible_data[0].coordinates[0]);
@@ -121,13 +162,33 @@ jQuery(function($){
         }, interval*i));
       })(i);
     }
-
   });
 
-  $(".calendar a[data-date='"+((new Date()).toISOString().slice(0,10))+"']").focus().click();
+  if($("#range-from").val() == "") {
+    console.log("Autoselecting calendar day");
+    $(".calendar a[data-date="+((new Date()).toISOString().slice(0,10))+"]").focus().click();
+  } else {
+    console.log("Loading range");
+    $("#range-go").click();
+  }
 
 });
 
+function removeVisibleLayers() {
+  $('.calendar a').removeClass('selected');
+  if(visible_layers.length) {
+    for(var i in visible_layers) {
+      map.removeLayer(visible_layers[i]);
+    }
+  }
+  visible_layers = [];
+  visible_data = [];
+  if(startMarker) {
+    map.removeLayer(startMarker);
+    map.removeLayer(endMarker);
+  }
+}
+
 function moveMarkerToPosition(point) {
   if(point.location) {
     var coord = pointFromGeoJSON(point.location);
@@ -144,4 +205,3 @@ function moveMarkerToPosition(point) {
 function pointFromGeoJSON(geo) {
   return L.latLng(geo[1], geo[0])
 }
-

compass/public/assets/styles.css

@@ -77,3 +77,17 @@
 .hidden {
   display: none;
 }
+
+#daterange {
+  z-index: 100;
+  width: 40vw;
+  position: absolute;
+  top: 60px;
+  left: 60px;
+  border: 3px #aaa solid;
+  border-radius: 4px;
+  background: white;
+}
+#daterange .in {
+  margin: 4px;
+}

compass/resources/views/map.blade.php

@@ -4,6 +4,15 @@
 
 @include('partials/logged-in')
 
+<div id="daterange"><div class="in">
+  <div class="ui form"><div class="fields">
+    <div class="five wide field"><input type="text" id="range-from" placeholder="from" value="<?= $range_from ?>"></div>
+    <div class="five wide field"><input type="text" id="range-to" placeholder="to" value="<?= $range_to ?>"></div>
+    <div class="five wide field"><input type="text" id="timezone" value="<?= $range_tz ?>"></div>
+    <button class="ui submit button" id="range-go">Go</button>
+  </div></div>
+</div></div>
+
 <div id="calendar">
   <div class="scroll">
   <?php