dynamic Time

app.py

@@ -68,15 +68,9 @@ def index():
     for habit_list in habit_lists:
         habit_list.habits = sorted(habit_list.get_habits(), key=lambda habit: (habit.checked, habit.slot))
 
-    days = {"Monday": "Montag", "Tuesday": "Dienstag", "Wednesday": "Mittwoch", "Thursday": "Donnerstag",
-            "Friday": "Freitag", "Saturday": "Samstag", "Sunday": "Sonntag"}
-
-    date = datetime.datetime.now().strftime("%d.%m.%Y %H:%M ") + days[datetime.datetime.now().strftime("%A")]
-
     return render_template(
         'index.html',
         title=name,
-        utc_dt=date,
         habit_lists=habit_lists,
         heatmap_values=heatmap_values,
         day=day,

static/script/script-index.js

@@ -160,8 +160,22 @@ document.addEventListener('DOMContentLoaded', () => {
 
 $(function () {
     $('[data-toggle="tooltip"]').tooltip()
-
 })
+
+// Function to update the current time
+function updateCurrentTime() {
+    const currentTimeElement = document.getElementById('current-time');
+    const currentDate = new Date();
+    const options = { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit', hour12: false };
+    const currentDateTime = currentDate.toLocaleString('de-DE', options);
+    currentTimeElement.innerText = currentDateTime.replace(',', ',') + ' ' + currentDate.toLocaleString('de-DE', { weekday: 'long' });
+}
+
 // Erstelle die Heatmap mit den simulierten Daten
 createHeatmap(activityData, day, color);
 
+// Update the time immediately
+updateCurrentTime();
+
+// Update the time every second
+setInterval(updateCurrentTime, 1000);

templates/index.html

@@ -7,7 +7,7 @@
             {% if (current_user.is_authenticated) %}<img class="avatar avatar-xl" src="{{user.profile_image}}" alt="no image"/>{% endif %}
             {{ title }}
         </h1>
-        <h3>{{ utc_dt }}</h3>
+        <h3 id="current-time"></h3>
     </div>
     <div class="col-2">
         <a href="https://anti-stress-team.de/blog/selbstmanagement/80-spannende-ideen-fuer-deinen-habit-tracker/" role="button" class="btn btn-discovery">Beliebte Habits</a>