6 files changed, 53 insertions, 3 deletions
diff --git a/fietsboek/__init__.py b/fietsboek/__init__.py
index bd2d705..aa1d5c3 100644
--- a/fietsboek/__init__.py
+++ b/fietsboek/__init__.py
@@ -78,5 +78,6 @@ def main(global_config, **settings):
     jinja2_env = config.get_jinja2_environment()
     jinja2_env.filters['format_decimal'] = fiets_jinja2.filter_format_decimal
     jinja2_env.filters['format_datetime'] = fiets_jinja2.filter_format_datetime
+    jinja2_env.filters['local_datetime'] = fiets_jinja2.filter_local_datetime
 
     return config.make_wsgi_app()
diff --git a/fietsboek/jinja2.py b/fietsboek/jinja2.py
index def61a6..6043791 100644
--- a/fietsboek/jinja2.py
+++ b/fietsboek/jinja2.py
@@ -1,5 +1,8 @@
 """Custom filters for Jinja2."""
+import datetime
+
 import jinja2
+from markupsafe import Markup
 
 from babel.numbers import format_decimal
 from babel.dates import format_datetime
@@ -37,3 +40,40 @@ def filter_format_datetime(ctx, value):
     request = ctx.get('request')
     locale = request.localizer.locale_name
     return format_datetime(value, locale=locale)
+
+
+@jinja2.pass_context
+def filter_local_datetime(ctx, value):
+    """Format a UTC datetime to show in the user's local timezone.
+
+    This is done by embedding the UTC timestamp in the page, such that we can
+    do some client-side magic and replace it with the time in the user's local
+    timezone. As a fallback value, we do apply the locale's standard
+    formatting, in case JavaScript is disabled - however, that will not
+    represent the time in the user's timezone, but in UTC.
+
+    :param ctx: The jinja context, passed automatically.
+    :type ctx: jinja2.runtime.Context
+    :param value: The value to format.
+    :type value: datetime.datetime
+    :return: The formatted date.
+    :rtype: Markup
+    """
+    # If we get a naive object in, we assume that we got it from the database
+    # and we have to treat it like a UTC-aware object. This happens when we
+    # access object's DateTime columns directly, as SQLAlchemy only returns
+    # naive datetimes.
+    if value.tzinfo is None:
+        value = value.replace(tzinfo=datetime.timezone.utc)
+    else:
+        value = value.astimezone(datetime.timezone.utc)
+
+    request = ctx.get('request')
+    locale = request.localizer.locale_name
+    fallback = Markup.escape(format_datetime(value, locale=locale))
+
+    # Forget about the fractional seconds
+    timestamp = int(value.timestamp())
+    return Markup(
+        f'<span class="fietsboek-local-datetime" data-utc-timestamp="{timestamp}">{fallback}</span>'
+    )
diff --git a/fietsboek/static/fietsboek.js b/fietsboek/static/fietsboek.js
index 15cb08c..c073e79 100644
--- a/fietsboek/static/fietsboek.js
+++ b/fietsboek/static/fietsboek.js
@@ -219,6 +219,14 @@ document.addEventListener('DOMContentLoaded', function(event) {
     });
   });
 
+  /* Format all datetimes to the local timezone */
+  document.querySelectorAll(".fietsboek-local-datetime").forEach((obj) => {
+    let timestamp = obj.attributes["data-utc-timestamp"].value;
+    let date = new Date(timestamp * 1000);
+    let intl = new Intl.DateTimeFormat(LOCALE, {dateStyle: "medium", timeStyle: "medium"});
+    obj.innerHTML = intl.format(date);
+  });
+
   /* Enable the image selector */
   var button = $("#imageSelector");
   if (button) {
diff --git a/fietsboek/templates/details.jinja2 b/fietsboek/templates/details.jinja2
index 4dcd5ee..55a5c26 100644
--- a/fietsboek/templates/details.jinja2
+++ b/fietsboek/templates/details.jinja2
@@ -176,7 +176,7 @@
           {{ comment_md_to_html(comment.text) }}
       </div>
       <div class="card-footer text-muted">
-          {{ comment.date | format_datetime }}
+          {{ comment.date | local_datetime }}
       </div>
   </div>
   {% endfor %}
diff --git a/fietsboek/templates/layout.jinja2 b/fietsboek/templates/layout.jinja2
index a03b7c1..83a8f33 100644
--- a/fietsboek/templates/layout.jinja2
+++ b/fietsboek/templates/layout.jinja2
@@ -19,7 +19,8 @@
     <link href="{{request.static_url('fietsboek:static/theme.css')}}" rel="stylesheet">
 
     <script>
-var FRIENDS_URL = "{{ request.route_url('json-friends') }}";
+const FRIENDS_URL = "{{ request.route_url('json-friends') }}";
+const LOCALE = "{{ request.localizer.locale_name.replace('_', '-') }}";
     </script>
 
   </head>
diff --git a/fietsboek/views/detail.py b/fietsboek/views/detail.py
index e20df44..34d392b 100644
--- a/fietsboek/views/detail.py
+++ b/fietsboek/views/detail.py
@@ -140,4 +140,4 @@ def add_comment(request):
         text=request.params["comment"],
     )
     request.dbsession.add(comment)
-    return HTTPFound(request.route_url("details", id=track.id))
+    return HTTPFound(request.route_url("details", track_id=track.id))