Add simple webservice.

2014-11-17 11:44:55 +01:00 · 2014-11-17 11:44:55 +01:00 · 34a18b6eca
parent 1cb16ab621
commit 34a18b6eca
3 changed files with 98 additions and 0 deletions
--- a/server.py
+++ b/server.py
@ -0,0 +1,27 @@
+#!/usr/bin/env python
+
+from bottle import (
+    get,
+    run,
+    template
+)
+
+import thesethreewords as these
+
+
+@get('/')
+def index():
+    return template('index', err=None)
+
+@get('/<threewords>')
+def showMap(threewords):
+    try:
+        lat, lng = these.decode(threewords)
+        return template('map', lat=lat, lng=lng)
+    except:
+        return template('index',
+                        err="Could not find location {}".format(threewords))
+
+
+if __name__ == '__main__':
+    run(host='localhost', port=8080)
--- a/views/index.html
+++ b/views/index.html
@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <!-- Meta -->
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>these-3-words Map</title>
+  <!-- Style -->
+  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
+</head>
+<body>
+  <div class="container">
+    % if err:
+    <aside class="alert alert-danger" role="alert">Error: {{ err }}</aside>
+    % end
+    <main class="jumbotron">
+      <h1>These3Words Map</h1>
+      <p class="lead">
+        Find a location anywhere in the word identified by three simple words.
+      </p>
+      <p id="input3wordsContainer">
+        <input type="text" class="form-control" id="input3words" placeholder="engirt-aleutic-canun">
+      </p>
+      <p>
+        <button id="button3words" class="btn btn-lg btn-primary">Find on Map</button>
+      </p>
+    </main>
+    <script>
+      (function() {
+        var default3words = 'engirt-aleutic-canun';
+        var threewordsField = document.getElementById('input3words');
+        document.getElementById('button3words').addEventListener('click', function(evt) {
+          var threewords = threewordsField.value;
+          if (threewords.length === 0) {
+            threewords = default3words;
+          }
+          if (/\w+-\w+-\w+/.test(threewords)) {
+            window.location = '/' + threewords;
+          } else {
+            document.getElementById('input3wordsContainer').classList.add('has-error');
+          }
+        });
+      })();
+    </script>
+</div>
+</body>
+</html>
--- a/views/map.html
+++ b/views/map.html
@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style type="text/css">
+      html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
+    </style>
+    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js">
+    </script>
+    <script type="text/javascript">
+      function initialize() {
+        var mapOptions = {
+          center: { lat: {{ lat }}, lng: {{ lng }}},
+          zoom: 8
+        };
+        var map = new google.maps.Map(document.getElementById('map-canvas'),
+            mapOptions);
+      }
+      google.maps.event.addDomListener(window, 'load', initialize);
+    </script>
+  </head>
+  <body>
+<div id="map-canvas"></div>
+  </body>
+</html>