Fetch stops from OpenStreetMap

templates/add_entry.html

@@ -18,14 +18,22 @@
         <input type="text" id="line" name="line" placeholder="z.B. S3, Bus 10">
       </div>
 
-      <div class="field">
+      <div class="field combo">
         <label for="origin">Von<span class="required">*</span></label>
-        <input type="text" id="origin" name="origin" required>
+        <input type="text" id="origin" name="origin" required
+               placeholder="Haltestelle suchen …"
+               data-stop-input data-stop-target="#origin_stop_id">
+        <input type="hidden" id="origin_stop_id" name="origin_stop_id">
+        <p class="field-hint" data-stop-hint></p>
       </div>
 
-      <div class="field">
+      <div class="field combo">
         <label for="destination">Nach<span class="required">*</span></label>
-        <input type="text" id="destination" name="destination" required>
+        <input type="text" id="destination" name="destination" required
+               placeholder="Haltestelle suchen …"
+               data-stop-input data-stop-target="#destination_stop_id">
+        <input type="hidden" id="destination_stop_id" name="destination_stop_id">
+        <p class="field-hint" data-stop-hint></p>
       </div>
 
       <div class="field">
@@ -53,3 +61,6 @@
     </form>
   </div>
 {% endblock %}
+{% block scripts %}
+  <script src="{{ url_for('static', filename='stops.js') }}" defer></script>
+{% endblock %}