Merge branch 'master' into gh-pages

pspeter3 · Jun 24, 2012 · 3dd3ab2 · 3dd3ab2
2 parents 6f37210 + f60ae69
commit 3dd3ab2
Show file tree

Hide file tree

Showing 2 changed files with 119 additions and 0 deletions.
diff --git a/distance-calc/app.js b/distance-calc/app.js
@@ -0,0 +1,78 @@
+// Removes destination
+var removeDestination = function() {
+    var addr = $(this).siblings('.addr').text();
+    $(this).parents('.destination').remove();
+    if (typeof(Storage) !== "undefined") {
+      var destinations = localStorage.destinations;
+      localStorage.destinations = destinations.replace(addr + "|", "");
+    }
+  };
+
+// Adds an address to the data table
+var addDestination = function(addr) {
+    if (addr !== '') {
+      $('#data').append('<tr class="destination"><td class="address"><a href="#" class="close">&times;</a><span class="addr">' + addr + '</span></td><td class="distance"></td><td class="duration"></td><td class="map"></td></tr>');
+      $('.close').click(removeDestination);
+    }
+    if (typeof(Storage) !== "undefined") {
+      var destinations = localStorage.destinations;
+      if (destinations.match(addr) === null) {
+        localStorage.destinations = destinations + addr + "|";
+      }
+    }
+  };
+
+// Update Destination
+var updateDestination = function(element, origin, obj) {
+    element.children('.distance').text(obj.distance.text);
+    element.children('.duration').text(obj.duration.text);
+    element.children('.map').html('<a target="_blank" href="http://maps.google.com/maps?saddr= ' + origin + '&daddr=' + element.find('.addr').text() + '">map</a>');
+  };
+
+var makeServiceRequest = function(origin, destinations) {
+    var service = new google.maps.DistanceMatrixService();
+    service.getDistanceMatrix({
+      origins: [origin],
+      destinations: destinations,
+      travelMode: google.maps.TravelMode.WALKING,
+      unitSystem: google.maps.UnitSystem.IMPERIAL
+    }, function(response, status) {
+      var destinationRows = $('.destination');
+      console.log(destinationRows);
+      for (var i = response.rows[0].elements.length - 1; i >= 0; i--) {
+        updateDestination($(destinationRows[i]), origin, response.rows[0].elements[i]);
+      };
+    });
+  };
+// Calculate Distances
+var calculateDistances = function() {
+    var len = $('.destination').length;
+    var destinations = [];
+    var origin = $('#address').val();
+    $('.destination').each(function() {
+      destinations.push($(this).find('.addr').html());
+      len--;
+      if (len == 0) {
+        makeServiceRequest(origin, destinations);
+      }
+    });
+  };
+
+// Sets up jQuery
+$(function() {
+  if (typeof(Storage) !== "undefined") {
+    if (typeof(localStorage.destinations) === "undefined") {
+      localStorage.destinations = '';
+    }
+    var destinations = localStorage.destinations.split('|');
+    for (var i = destinations.length - 1; i >= 0; i--) {
+      addDestination(destinations[i]);
+    };
+  }
+  // Set up add-destination binding
+  $('#add-destination').click(function() {
+    addDestination($('#address').val());
+  });
+  // Set up calculate-distances-binding
+  $('#calculate-distances').click(calculateDistances);
+});
diff --git a/distance-calc/index.html b/distance-calc/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE HTML>
+<html lang="en-US">
+<head>
+  <meta charset="UTF-8">
+  <title>Distance Calculator</title>
+  <link rel="stylesheet" href="../lib/css/bootstrap.min.css">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body>
+  <div class="container">
+    <div class="row">
+      <div class="span12">
+        <div class="page-header">
+          <h1>Distance Calculator</h1>
+        </div>
+        <form class="well form-inline">
+          <input type="text" class="input-xxlarge" id="address" placeholder="Address">
+          <a href="#" class="btn" id="add-destination"><i class="icon-plus"></i>Add Destination</a>
+          <a href="#" class="btn btn-primary" id="calculate-distances"><i class="icon-map-marker icon-white"></i>Calculate</a>
+        </form>
+        <table class="table table-striped">
+          <thead>
+            <tr>
+              <th>Address</th>
+              <th>Distance</th>
+              <th>Duration</th>
+              <th>Directions</th>
+            </tr>
+          </thead>
+          <tbody id="data">
+
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDJK0njTvFZEhUF0aJ6FG9OTNtT8nkebvA&sensor=false"></script>
+  <script type="text/javascript" src="../lib/js/jquery.min.js"></script>
+  <script type="text/javascript" src="app.js"></script>
+</body>
+</html>