Skip to content
Snippets Groups Projects
Commit 024d9a77 authored by Teemu Autto's avatar Teemu Autto
Browse files

Details page added.

parent c85e7561
No related branches found
No related tags found
1 merge request!19Implemented some button
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
......
<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>
......@@ -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
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment