Use time and timezone of posted, not client

main/models.py

@@ -6,6 +6,6 @@ from django.db import models
 class Thought(models.Model):
     text = models.CharField(max_length=140)
     extended_text = models.TextField(blank=True)
-    posted = models.DateTimeField(auto_now_add=True)
     uuid = models.UUIDField(default=uuid.uuid4, editable=False)
+    posted = models.DateTimeField(auto_now_add=True)
     timezone_offset = models.IntegerField()  # The number of minutes behind UTC we were when this was posted

main/templates/whispermaphone/index.html

@@ -22,6 +22,8 @@
     </header>
 
     <section class="main-wrap">
+    {% load tz %}
+
     {% for thought in thoughts %}
         <div class="thought{% if thought.uuid == highlighted %} highlighted{% endif %}" id="{{thought.uuid}}">
             <div class="main">
@@ -29,11 +31,19 @@
             </div>
             <div class="extended-text text">{{thought.extended_text}}</div>
             <div class="thought-end">
-                <span class="timestamp">{{thought.posted|date:"r"}}</span>
+                <span class="timestamp">
+                    {% timezone thought.timezone %}
+                        {{ thought.posted|time:"g:i a" }}
+                        {{ thought.posted|date:"M d, Y" }},
+
+                        UTC{{ thought.offset_hours }}
+                    {% endtimezone %}
+                </span>
             </div>
             <hr>
         </div>
     {% endfor %}
+
     </section>
 
 <!--    <footer>Copyright Matthias @2020{% if authenticated %}-->
@@ -45,7 +55,6 @@
 
         for (let el of els) {
             const extended = el.querySelector(".extended-text");
-            const mainText = el.querySelector(".main-text");
 
             //Hide extended text
             extended.classList.add("hidden");
@@ -63,19 +72,6 @@
                 })
                 main.appendChild(showMoreButton);
             }
-
-            const timestampEl = el.querySelector(".timestamp");
-            const time = new Date(timestampEl.textContent);
-            const ampm = time.getHours() >= 12 ? "pm" : "am";
-            let hours = time.getHours() % 12; // 0-23
-            if (hours === 0) {
-                hours = 12;
-            }
-            let minutes = time.getMinutes().toString();
-            if (minutes.length < 2) {
-                minutes = "0" + minutes;
-            }
-            timestampEl.textContent = `${time.getFullYear()}-${time.getMonth()+1}-${time.getDate()}, ${hours}:${minutes}${ampm}`
         }
 
         const highlighted = document.querySelector(".highlighted");

main/views.py

@@ -2,6 +2,8 @@ import uuid
 
 from django.http import HttpResponse
 from django.shortcuts import render
+from django.utils import timezone
+
 from .models import Thought
 
 
@@ -18,8 +20,19 @@ def index(request):
     except ValueError:
         highlighted_uuid = ""
 
+    thoughts = Thought.objects.order_by("-posted")
+
+    for thought in thoughts:
+        thought.timezone = timezone.get_fixed_timezone(-thought.timezone_offset)
+        offset_hours = -thought.timezone_offset / 60
+        if offset_hours == int(offset_hours):
+            offset_hours = int(offset_hours)
+        if offset_hours > 0:
+            offset_hours = "+" + str(offset_hours)
+        thought.offset_hours = offset_hours
+
     return render(request, "whispermaphone/index.html", {
-        "thoughts": Thought.objects.order_by("-posted"),
+        "thoughts": thoughts,
         "highlighted": highlighted_uuid,
         "authenticated": authenticated
     })