Add geolocation capability to mobile route (PokemonGoF#1687)

* Allow client to specify location of origin * Conditionally get device's location for mobile route * Reset app.min.js as it didn't change * Add dynamic countdown timer and names
hoanghuynh · Jul 25, 2016 · 5a2e2a9 · 5a2e2a9
1 parent 1674e7c
commit 5a2e2a9
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 10 deletions.
diff --git a/pogom/app.py b/pogom/app.py
@@ -97,7 +97,12 @@ def next_loc(self):
     def list_pokemon(self):
         # todo: check if client is android/iOS/Desktop for geolink, currently only supports android
         pokemon_list = []
-        origin_point = LatLng.from_degrees(config['ORIGINAL_LATITUDE'], config['ORIGINAL_LONGITUDE'])
+
+        # Allow client to specify location
+        lat = request.args.get('lat', config['ORIGINAL_LATITUDE'], type=float)
+        lon = request.args.get('lon', config['ORIGINAL_LONGITUDE'], type=float)
+        origin_point = LatLng.from_degrees(lat, lon)
+
         for pokemon in Pokemon.get_active(None, None, None, None):
             pokemon_point = LatLng.from_degrees(pokemon['latitude'], pokemon['longitude'])
             diff = pokemon_point - origin_point
@@ -110,16 +115,17 @@ def list_pokemon(self):
                 'name': pokemon['pokemon_name'],
                 'card_dir': direction,
                 'distance': int(origin_point.get_distance(pokemon_point).radians * 6366468.241830914),
-                'time_to_disappear': '%dm %ds' % (divmod((pokemon['disappear_time']-datetime.utcnow()).seconds, 60)),
+                'time_to_disappear': '%d min %d sec' % (divmod((pokemon['disappear_time']-datetime.utcnow()).seconds, 60)),
+                'disappear_time': pokemon['disappear_time'],
                 'latitude': pokemon['latitude'],
                 'longitude': pokemon['longitude']
             }
             pokemon_list.append((entry, entry['distance']))
         pokemon_list = [y[0] for y in sorted(pokemon_list, key=lambda x: x[1])]
         return render_template('mobile_list.html',
                                pokemon_list=pokemon_list,
-                               origin_lat=config['ORIGINAL_LATITUDE'],
-                               origin_lng=config['ORIGINAL_LONGITUDE'])
+                               origin_lat=lat,
+                               origin_lng=lon)
 
 
 class CustomJSONEncoder(JSONEncoder):

diff --git a/templates/mobile_list.html b/templates/mobile_list.html
@@ -2,20 +2,70 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <style>
 body{font-family:sans-serif}
-h2{margin-top:15px;}
+h2{margin-top:10px;float:left}
 .card {display:block;border:solid 1px #aaa;border-radius:2px;box-shadow:2px 2px 2px #eee;font-family:sans-serif;margin-bottom:8px;text-decoration:none;color:#444}
 .card>div{margin: 15px 0}
-img{float:left}
+img{float:left;image-rendering:pixelated}
 h3{margin:0}
+h3 small{color:#666}
 span{color:#777}
 .origin{position:relative;top:20px;padding-bottom:10px}
+.head{display:inline-block;width:100%;}
+.nav{float:right;padding-bottom:10px}
+.nav button{padding:10px;border:solid 1px #ddd;background:white;font-size:17px;border-radius:3px;color:#333;cursor:pointer;width:140px}
+#msg{color:#ddd;font-size:70%}
+.nav label{padding:20px 10px;cursor:pointer}
+@media(max-width:800px){h2{float:none}.nav{float:left}}
 </style>
 
-<h2><a href="javascript:location.href=location.href">Nearby Pokémon &#x21bb;</a></h2>
-{% for pokemon in pokemon_list %}
+<div class="head">
+<h2>Nearby Pokémon <small id="msg"></small></h2>
+<div class="nav">
+<button onclick="loadNearby()">Refresh</button>
+<label><input type="checkbox" id="use-loc" onchange="toggleLocation()">Use device location</label>
+</div>
+</div>
+{% for pokemon in pokemon_list[:20] %}
 <a class="card" href='geo:0,0?q={{pokemon.latitude}},{{pokemon.longitude}}({{pokemon.name}})'>
 <img height='60' width='80' src='static/pixel_icons/{{pokemon.id}}.png'>
-<div><h3>{{pokemon.distance}}m ({{pokemon.card_dir}})</h3><span>{{pokemon.time_to_disappear}}</span></div>
+<div><h3>{{pokemon.name}} <small>- {{pokemon.distance}}m ({{pokemon.card_dir}})</small></h3><span></span><input type="hidden" value="{{pokemon.disappear_time}}"></div>
 </a>
 {% endfor %}
-<a class="origin" href='geo:0,0?q={{origin_lat}},{{origin_lng}}(origin)'>scan location</a>
+<a class="origin" href='geo:0,0?q={{origin_lat}},{{origin_lng}}(origin)'>origin location</a>
+<script>
+  var msg = document.getElementById('msg');
+  var useLoc = document.getElementById('use-loc');
+  if (localStorage.useLoc) useLoc.checked = localStorage.useLoc === 'true';
+  function toggleLocation() {localStorage.useLoc = useLoc.checked;}
+  function loadNearby() {
+    if (localStorage.useLoc !== 'true') {
+      return (location.href="/mobile");
+    } else if ("geolocation" in navigator) {
+      msg.innerText='Getting location...';
+      navigator.geolocation.getCurrentPosition(function(p) {
+        msg.innerText='Reloading...';
+        location.href='/mobile?lat='+p.coords.latitude+'&lon='+p.coords.longitude;
+      }, function(err) {
+        msg.innerText='';
+        alert('Failed to get location: '+err.message);
+      }, {
+        enableHighAccuracy: true,
+        timeout: 5000,
+        maximumAge: 5000
+      });
+    } else {alert('Your device does not support web geolocation');}
+  }
+  var cards = document.querySelectorAll('.card');
+  function updateTimes() {
+    for (var i=0; i<cards.length; i++) {
+      var utcString = cards[i].querySelector('input').value;
+      var disappearsAt = new Date(utcString);
+      disappearsAt.setMinutes(disappearsAt.getMinutes()-disappearsAt.getTimezoneOffset());
+      var secondsLeft = (disappearsAt.getTime()-Date.now())/1000;
+      var timeLeft = secondsLeft > 0 ? Math.floor(secondsLeft / 60) + ' min ' + Math.floor(secondsLeft % 60) + ' sec left' : '(expired)';
+      cards[i].querySelector('span').innerText = timeLeft;
+    }
+  }
+  setInterval(updateTimes, 1000);
+  updateTimes();
+</script>