merged

scyclops · Jun 2, 2013 · c794d94 · c794d94
2 parents 9037fd0 + 1c24d7d
commit c794d94
Show file tree

Hide file tree

Showing 13 changed files with 137 additions and 10 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 node_modules/
-server.js
+server.js
+server.pyc
diff --git a/images/ajax-loader.gif b/images/ajax-loader.gif
diff --git a/images/icons-18-black.png b/images/icons-18-black.png
diff --git a/images/icons-18-white.png b/images/icons-18-white.png
diff --git a/images/icons-36-black.png b/images/icons-36-black.png
diff --git a/images/icons-36-white.png b/images/icons-36-white.png
diff --git a/index.html b/index.html
@@ -2,16 +2,38 @@
 <html>
   <head>
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+    <link rel="stylesheet" type="text/css" href="jquery.mobile-1.3.1.min.css" />
     <link rel="stylesheet" type="text/css" href="main.css" />
     <script type="text/javascript" src="phonegap.js"></script> 
-    <script type="text/javascript" src="zepto.js"></script>
+    <script type="text/javascript" src="jquery.js"></script>
+    <script type="text/javascript" src="jquery.mobile-1.3.1.min.js"></script>
     <script type="text/javascript" src="D.min.js"></script>
     <script type="text/javascript" src="settings.js"></script>
     <script type="text/javascript" src="icons.js"></script>
     <script type="text/javascript" src="api.js"></script>
     <script type="text/javascript" src="map.js"></script>
   </head>
   <body>
-    <div id="map-canvas"></div>
+    <div data-role="page" id="map-window" data-theme="b">
+      <div data-role="header" data-position="fixed" data-theme="b" class="header">
+        <h1>Fruitdrop</h1>
+        <a href="#settings-window" data-transition="flip" data-role="button" class="ui-btn-right" data-icon="gear">Settings</a>
+      </div>
+      <div data-role="content" class="content">
+        <div id="map-canvas"></div>
+      </div>
+    </div>
+    <div data-role="page" id="settings-window" name="settings-window" data-theme="b" data-add-back-btn="true">
+      <div data-role="header" data-position="fixed" data-theme="b">
+        <h1>Settings</h1>
+      </div>
+      <div data-role="content" class="content">
+        <label for="location-txt">Location:</label>
+        <input type="text" id="location-text" />
+        <label for="filter-text">Filter:</label>
+        <input type="text" id="filter-text" />
+        <input type="button" id="save-btn" value="Save" disabled="disabled" />
+      </div>
+    </div>
   </body>
 </html>
diff --git a/jquery.js b/jquery.js
diff --git a/jquery.mobile-1.3.1.min.css b/jquery.mobile-1.3.1.min.css
diff --git a/jquery.mobile-1.3.1.min.js b/jquery.mobile-1.3.1.min.js
diff --git a/main.css b/main.css
@@ -8,8 +8,28 @@ body {
 	padding: 0
 }
 
+#map-window {
+	height: 100%;
+	padding: 0;
+	width: 100%;
+}
+
+#map-window .header {
+	left: 0;
+	position: absolute;
+	top: 0;
+	width: 100%;
+}
+
+#map-window .content {
+	height: 100%;
+	padding: 0;
+	width: 100%;
+}
+
 #map-canvas {
 	height: 100%;
+	padding: 0;
 	width: 100%; 
 }
 

diff --git a/map.js b/map.js
@@ -7,7 +7,6 @@ $(document).on('click', 'a', function(){
     }
 });
 
-
 var FruitDrop = function() {
 
 };
@@ -26,7 +25,11 @@ FruitDrop.prototype = {
 
     this._map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
     this._infoWindow = new google.maps.InfoWindow();
-    google.maps.event.addListener(this._map, 'bounds_changed', $.proxy(this.getData, this));
+    this._geocoder = new google.maps.Geocoder();
+
+    google.maps.event.addListener(this._map, 'idle', $.proxy(this.getData, this));
+
+    this.setupSettings();
 
     if (navigator.geolocation)
       navigator.geolocation.getCurrentPosition($.proxy(this.geo_success, this), $.proxy(this.geo_fail, this), {enableHighAccuracy:true});
@@ -38,15 +41,58 @@ FruitDrop.prototype = {
     var d=document,s=d.createElement('SCRIPT'),c=d.getElementsByTagName('script')[0];s.type='text/javascript';s.async=true;s.src=src;c.parentNode.insertBefore(s, c);
   },
 
+  setupSettings: function() {
+    this._locationInput = $('#location-text');
+    this._filterInput = $('#filter-text');
+    this._saveButton = $('#save-btn');
+
+    this._locationInput.on('keypress', $.proxy(this.enableSaveButton, this));
+    this._filterInput.on('keypress', $.proxy(this.enableSaveButton, this));
+    this._saveButton.on('click', $.proxy(this.saveClick, this));
+  },
+
+  enableSaveButton: function(e) {
+    this.toggleSaveButton(false);
+  },
+
+  toggleSaveButton: function(disabled) {
+    if (disabled)
+      this._saveButton.button('disable');
+    else
+      this._saveButton.button('enable');
+
+    this._saveButton.button('refresh');
+  },
+
+  saveClick: function(e) {
+    e.preventDefault();
+    this._location = this._locationInput.val();
+    this._filter = this._filterInput.val();
+    this.toggleSaveButton(true);
+
+    this.getNewCenter();
+    this._lastLocation = this._location;
+
+    $.mobile.changePage('#map-window');
+  },
+
   geo_success: function(pos) {
     var lat = pos.coords.latitude,
         lng = pos.coords.longitude;
     this._map.setCenter(new google.maps.LatLng(lat, lng));
-    this.placeMarker(this._map.getCenter(), 'You are here');
+    this.setHomeMarker();
   },
 
   geo_fail: function() {
-    this.placeMarker(this._map.getCenter(), 'You are here');
+    this.setHomeMarker();
+  },
+
+  setHomeMarker: function() {
+    if (this._homeMarker)
+      this._homeMarker.setMap(null);
+
+    this._lastCenter = this._map.getCenter();
+    this._homeMarker = this.placeMarker(this._lastCenter, 'You are Here');
   },
 
   getData: function() {
@@ -99,6 +145,9 @@ FruitDrop.prototype = {
   },
 
   placeMarker: function(location, title, location_id) {
+    if ((this._filter) && (title.search(new RegExp(this._filter,"i")) < 0) && (title !== 'You are Here'))
+      return;
+
     var marker = new google.maps.Marker({
       position: location,
       map: this._map,
@@ -145,8 +194,29 @@ FruitDrop.prototype = {
     return marker;
   },
 
+  getNewCenter: function() {
+    if (!this._location) {
+      this.changeCenter(this._lastCenter);
+      return;
+    }
+
+    this._geocoder.geocode({ 'address': this._location }, $.proxy(this.geocodeSuccess, this));
+  },
+
+  geocodeSuccess: function(results, status) {
+    if (status == google.maps.GeocoderStatus.OK)
+      this.changeCenter(results[0].geometry.location);
+    else
+      this.changeCenter(this._lastCenter);
+  },
+
+  changeCenter: function(latlng) {
+    this._map.panTo(latlng);
+    this.setHomeMarker();
+  },
+
   error: function() {
-    alert('error');
+    console.log("error");
   }
 };
 

diff --git a/zepto.js b/zepto.js