Details page added.

dogmap/__init__.py

-from typing import List
+from typing import List, TypedDict
 from flask import (
     Flask,
     request,
     abort,
-    Response
+    Response,
+    url_for,
 )
 from flask.templating import render_template
 
@@ -11,6 +12,7 @@ from dotenv import load_dotenv
 from os import environ
 
 from flask_mongoengine import MongoEngine
+import mongoengine
 
 from .models import Location
 from .logging import logger, init_logging
@@ -57,6 +59,11 @@ with app.app_context():
     logger.debug("Database connection test did NOT fail")
 
 
+class Page(TypedDict):
+    title: str
+    details: str
+
+
 def fetch_all_locations() -> List[Location]:
     """
     Fetch all location documents from database.
@@ -74,24 +81,38 @@ def fetch_all_locations() -> List[Location]:
     return locations
 
 
+def fetch_location(id) -> Location:
+    """
+    Fetch a single location.
+
+    Raises 404 if location is not found.
+    """
+    try:
+        location = Location.objects.get(id=id)
+    except mongoengine.errors.DoesNotExist:
+        abort(404)
+
+    return location
+
+
 def _generate_marker(loc: Location):
     return {
         'id': str(loc.id),
         'description': loc.description,
         'loc': loc.loc,
+        'url': url_for('index', id=loc.id)
     }
 
 
 @app.route("/")
-def index():
+@app.route("/location/<id>")
+def index(id=None):
     """
     Default route for intex page.
     """
 
     # Define page attributes for template
-    page = {
-        'title': "TJTS5901 Dogmap template."
-    }
+    page = Page(title="TJTS5901 Dogmap template.")
 
     # coordinates to Agora
     agora_location = {
@@ -99,6 +120,10 @@ def index():
         'lon': 25.7359378
     }
 
+    if id is not None:
+        location = fetch_location(id)
+        page.update(get_location_html(location))
+
     # List for markers
     markers = list(map(_generate_marker, fetch_all_locations()))
 
@@ -113,6 +138,17 @@ def index():
     )
 
 
+def get_location_html(location) -> Page:
+
+    creator, *_ = location.email.split("@")  # teemu@jyu.fi -> ["teemu", "jyu.fi"] -> "teemu"
+    # email = location.email
+    # creator = email[0:email.find("@")]
+    page = {
+        'title': f"Location by {creator}",
+        'details': render_template("location_details.j2.html", location=location)
+    }
+
+    return page
 
 
 

dogmap/templates/location_details.j2.html

+<style>
+#map {
+    max-height: 35%;
+}
+</style>
+
+<div class="container">
+    <div class="row">
+        <label for="location-email" class="col-sm-3 col-form-label">Email</label>
+        <div class="col-sm-9" id="location-email">
+            {{ location.email }}
+        </div>
+    </div>
+    <div class="row">
+        <label for="location-description" class="col-sm-3 col-form-label">Location description</label>
+        <div class="col-sm-3">
+            {{ location.description }}
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-auto">
+            <a href="https://twitter.com/intent/tweet?url={{ url_for('index', id=location.id, _external=True) | urlencode }}&text={{ "Check out this super special location!" | urlencode }}" class="btn btn-primary">Tweet location</a>
+        </div>
+    </div>
+</div>

dogmap/templates/map.j2.html

@@ -55,7 +55,7 @@ html, body {
             <p class="card-text"></p>
         </div>
         <div class="card-footer">
-            <a href="#" class="">View details</a>
+            <a href="#" class="view-details-link">View details</a>
         </div>
     </div>
 </template>
@@ -76,19 +76,19 @@ html, body {
     // show the scale bar on the lower left corner
     L.control.scale().addTo(map);
 
-    function markerPopupInfobox(description) {
+    function markerPopupInfobox(marker) {
         // Get template
         const html = document.querySelector("#marker-infobox").content.cloneNode(true);
 
-        const safe_description = document.createTextNode(description);
+        const safe_description = document.createTextNode(marker.description);
         html.querySelector(".card-text").appendChild(safe_description);
-
+        html.querySelector(".view-details-link").setAttribute("href", marker.url)
         return html;
     }
 
     function addMarkerToMap(marker) {
         L.marker(marker.loc)
-            .bindPopup(() => markerPopupInfobox(marker.description))
+            .bindPopup(() => markerPopupInfobox(marker))
             .addTo(map);
     }
 
@@ -162,4 +162,8 @@ html, body {
 
 </script>
 
+{% block details %}
+    {{ page['details'] | safe }}
+{% endblock %}
+
 {% endblock %}
\ No newline at end of file