geolocation with each ajax request

jvoros · Apr 14, 2015 · 709cd0d · 709cd0d
1 parent 35c6f68
commit 709cd0d
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 92 deletions.
diff --git a/dbase.sqlite b/dbase.sqlite
diff --git a/lib/controllers/conference-control.php b/lib/controllers/conference-control.php
@@ -11,10 +11,6 @@
   $timeframe = 'false';
 }
 
-if(isset($_POST['at_location'])) {
-  $_SESSION['user']['at_loc'] = $_POST['at_location'];
-}
-
 // Handle check-in
 if($_POST['checkin'] == 'in') {
   if (isset($checkin->in)) { 
@@ -70,8 +66,8 @@
 }
 
 $data = array(
-  'error'     => $error,
   'conf'      => $conf_array,
   'checkin'   => $checkin,
   'timeframe' => $timeframe,
+  'at_loc'    => $_POST['at_location']
 );
diff --git a/migrations/init.php b/migrations/init.php
@@ -45,25 +45,29 @@
 $loc            = R::dispense('location');
 $loc->name      = "University of Colorado";
 $loc->address   = "12605 East 16th Ave, Aurora CO 80045";
-$loc->coords    = "39.740805,-104.843302,39.743659,-104.843366,39.743643,-104.838989,39.740986,-104.839246";
+$loc->lat       = "39.7423359";
+$loc->lng       = "-104.8415582";
 $loc_id = R::store($loc);
 
 $loc2           = R::dispense('location');
 $loc2->name     = "Rita Bass, at Denver Health";
 $loc2->address  = "660 Bannock Street, Denver CO 80204";
-$loc2->coords   = "39.725582,-104.990845,39.724221,-104.990866,39.724188,-104.989321,39.725599,-104.989235";
+$loc2->lat      = "39.7268934"; 
+$loc2->lng      = "-104.9899788";
 $loc2_id = R::store($loc2);
 
 $loc3           = R::dispense('location');
 $loc3->name     = "Voros House";
 $loc3->address  = "677 South Grape Street, Denver CO 80246";
-$loc3->coords   = "39.703910,-104.923371,39.703910,-104.924605,39.704488,-104.924573,39.704471,-104.923296";
+$loc3->lat      = "39.704216";
+$loc3->lng      = "-104.924045";
 $loc3_id = R::store($loc3);
 
 $loc5           = R::dispense('location');
 $loc5->name     = "Denver Health, Main";
 $loc5->address  = "777 Bannock St, Denver CO 80204";
-$loc5->coords   = "39.727323,-104.990330,39.727241,-104.992862,39.729056,-104.992948,39.728908,-104.990201";
+$loc5->lat      = "39.72811919999999";
+$loc5->lng       = "-104.9910209";
 $loc5_id = R::store($loc5);
 
 // CONFERENCES
@@ -107,7 +111,7 @@
 $conf5->start       = date("Y-m-d H:i:s", time()+28800);
 $conf5->finish      = date("Y-m-d H:i:s", time()+36000);
 $conf5->primary_loc = $loc5;
-$conf5->sharedLocationList = [$loc2, $loc3];
+$conf5->sharedLocationList = [$loc2, $loc];
 $conf5->name        = "Test Elective";
 $conf5->elective    = TRUE;
 $conf5_id = R::store($conf5);

diff --git a/templates/_base.html b/templates/_base.html
@@ -22,6 +22,27 @@
     .ui-listview > li:first-of-type { border-top: 0 }
     .ui-listview > li { border-top: 5px solid white; }
     .ui-listview > li p { font-size: 1em; padding: 0.5em; }
+    .ui-listview > li a { text-decoration: none; }
+
+     .success {
+      color: white;
+      background-color: #2ecc71;
+    }
+
+    .warning {
+      color: white;
+      background-color: #f1c40f;
+    }
+
+    .error {
+      color: white;
+      background-color: #c1392b;
+    }
+
+    .info {
+      color: white;
+      background-color: #3498db;
+    }
 
   </style>
 

diff --git a/templates/_conference-control.html b/templates/_conference-control.html
@@ -35,7 +35,7 @@
 {% endif %}
 
 <!--AT LOCATION & TIME-->
-{% if session.user.at_loc == 'true' and data.timeframe == 'true' %}
+{% if data.at_loc == 'true' and data.timeframe == 'true' %}
 
 {% if data.checkin.in is empty %}
 <button id="checkin-button" data-theme="g" data-icon="flat-location">Check In</button>
@@ -47,6 +47,12 @@
 
 {% endif %}
 
+<!--
+<div class="ui-body">
+  <pre>{{ dump(session) }}</pre>
+</div>
+-->
+
 <script type="text/javascript">
 
   $('#update-button').click(function(e){

diff --git a/templates/conference.html b/templates/conference.html
@@ -12,10 +12,10 @@
 {% block main %}
 
 <!--GOOGLE MAP AND CONFERENCE DATA-->
-<div class="ui-body ui-body-f">
-  <div id="map-canvas" style="height: 150px"></div>
-  <br>
-  <div style="text-align: center;">
+<div class="ui-body ui-body-f" style="padding: 0">
+  <div id="map-canvas" style="height: 150px;"></div>
+
+  <div style="text-align: center; padding: 1em;">
     <strong>{{ data.conf.name }}</strong><br>
     <a href="http://maps.google.com/maps?q={{ data.conf.location.address | url_encode  }}">{{ data.conf.location.address }}</a><br>
     {{ data.conf.location.name }}<br>
@@ -30,16 +30,13 @@
 <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDodj1oiPE4rns72bKYA0zPMmzJ6RXc1R4&sensor=FALSE"></script>
 <script type="text/javascript">
 
-  // AJAX POSTING HELPER FUNCTION
-  function checkinAjax(key, value ) {
-    
+  // AJAX POSTING 
+  // Callback for geolocation
+  function ajaxCall(key, value, currentLocation) {
     // check location with each request
-    // true/false to server
     var atLocation;
-    var allLocations = remotesPolys;
-    allLocations.push(locationPoly);
-    $.each(allLocations, function(k, v) {
-      if (google.maps.geometry.poly.containsLocation(myLoc, v)) {
+    $.each(allCircles, function(k, v) {
+      if (v.getBounds().contains(currentLocation)) {
         atLocation = true;
         return false;
       } else {
@@ -71,81 +68,83 @@
       $('#ajax-box').html(textStatus);
       $.mobile.loading('hide');
     });
+
+  }
+
+  function checkinAjax(key, value, currentLocation) {
+    // get currentLocation if needed
+    if (typeof currentLocation === 'undefined') { 
+      navigator.geolocation.getCurrentPosition(function(p){      
+        currentLocation = new google.maps.LatLng(p.coords.latitude, p.coords.longitude);
+        ajaxCall(key, value, currentLocation);
+      }, noLocation);
+    } else {
+      ajaxCall(key,value, currentLocation);
+    }
   }  
 
   // MAP FUNCTIONS
-  // Geolocation success
-  function foundLocation(p) {     
-    // make Google point
-    myLoc = new google.maps.LatLng(p.coords.latitude, p.coords.longitude);
-
-    // put on map
-    var marker = new google.maps.Marker({
-      position: myLoc, 
-      map: map,
-      title: 'You are here.'
-    });
-
-    // hide loader
-    $.mobile.loading('hide');
-
-    // checkin
-    checkinAjax();
-  }
 
   // Geolocation failure
   function noLocation() {
     $.mobile.loading('hide');
     $('#error').html('Geolocation not supported.');
   }
 
-  // Convert CSV string of coords to Google Polygon
-  function coordsPoly(csv) {
-    var r = csv.split(",");
-    var coords = [
-      new google.maps.LatLng(r[0], r[1]),
-      new google.maps.LatLng(r[2], r[3]),
-      new google.maps.LatLng(r[4], r[5]),
-      new google.maps.LatLng(r[6], r[7])
-    ]; 
-    var poly = new google.maps.Polygon({
-      paths: coords
-    });
-    return poly;
-  };
-
   // Initialize the map
   function initializeMap() {
     // start loader
     $.mobile.loading('show', {theme:"a", text:"Loading", textonly:false, textVisible: true});
-    
+
     // load map into #map-canvas, centered on primary location
     var mapOptions = {
-      center: locationPoly.getPath().getAt(0),
+      center: allLocations[0],
       zoom: 15
     };
-
     map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
-
-    // put primary and remote locations on map
-    locationPoly.setMap(map);
-    $.each(remotesPolys, function(key, value) {
-      value.setMap(map);
+
+    // add locations to map and allCircles array
+    $.each(allLocations, function(k,v) {
+      var circleOptions = {
+          strokeColor: '#FF0000',
+          strokeOpacity: 0.8,
+          strokeWeight: 2,
+          fillColor: '#FF0000',
+          fillOpacity: 0.35,
+          center: v,
+          radius: 150,
+          map: map
+        }
+      newCircle = new google.maps.Circle(circleOptions);
+      allCircles.push(newCircle);
     });
 
     // Check for geolocation
-    navigator.geolocation.getCurrentPosition(foundLocation, noLocation);
+    navigator.geolocation.getCurrentPosition(function(p){
+
+      // put myLoc on map
+      var myLoc = new google.maps.LatLng(p.coords.latitude, p.coords.longitude);
+      var marker = new google.maps.Marker({
+        position: myLoc, 
+        map: map,
+        title: 'You are here.'
+      });
+
+      // send location to server
+      checkinAjax('','', myLoc);
+
+    }, noLocation);
+
+    // hide loader
+    $.mobile.loading('hide');
   }
 
   // VARIABLES FOR LOCATIONS
-  var map;
-  var myLoc;
-  var locationPoly = coordsPoly("{{ data.conf.primary_loc.coords }}");
-  var remotes = {{ data.conf.remotes | json_encode() | raw }};
-  var remotesPolys = [];
-  $.each(remotes, function(key, value) {
-    remotesPolys.push(coordsPoly(value.coords));
-  });
+  var allCircles = [];
+  var allLocations = [{ lat: {{ data.conf.location.lat }}, lng: {{ data.conf.location.lng }}}];
+  {% for loc in data.conf.remotes %}
+  allLocations.push({ lat: {{ loc.lat }}, lng: {{ loc.lng }} });
+  {% endfor %}
 
   // LOAD MAP
   google.maps.event.addDomListener(window, 'load', initializeMap);

diff --git a/templates/home.html b/templates/home.html
@@ -3,25 +3,6 @@
 {% block main %}
 
 <style>
-    .success {
-      color: white;
-      background-color: #2ecc71;
-    }
-
-    .warning {
-      color: white;
-      background-color: #f1c40f;
-    }
-
-    .error {
-      color: white;
-      background-color: #c1392b;
-    }
-
-    .info {
-      color: white;
-      background-color: #3498db;
-    }
 
   .progress {
     border: 1px solid #ddd;