From fee2fb4bdde9260cd7d2d8751baceab4b19bf84b Mon Sep 17 00:00:00 2001
From: joschuatonn <joschua@francoismechanics.com>
Date: Sun, 16 Jun 2024 18:01:21 +0200
Subject: [PATCH] fixed Date-Formatting

---
 src/components/MessageComponent.vue | 18 +++++++++++++++++-
 src/utils.ts                        | 20 +++++++++++++++++++-
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/components/MessageComponent.vue b/src/components/MessageComponent.vue
index d4e809f..419398f 100644
--- a/src/components/MessageComponent.vue
+++ b/src/components/MessageComponent.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { getDaysOffset, isToday } from 'src/utils';
+
 
   const props =  defineProps({
     ownMessage: Boolean,
@@ -11,8 +13,22 @@
     showSender: Boolean,
   })
 
+  const options: Intl.DateTimeFormatOptions = {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  };
+
   const date = new Date(Number(props.timestamp));
-  const timestampFormatted = date.toLocaleString('de-DE');
+  let timestampFormatted = date.toLocaleString('de-DE', options);
+  const daysOffset = getDaysOffset(date, new Date());
+
+  if(daysOffset <= 1) {
+    const descriptions = ['Heute', 'Gestern'];
+    timestampFormatted = descriptions[daysOffset] + ', ' + date.toLocaleTimeString('de-DE', {hour: '2-digit', minute: '2-digit'});
+  }
 </script>
 
 <template>
diff --git a/src/utils.ts b/src/utils.ts
index 8e23921..8907b9c 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -6,6 +6,24 @@ export const sendNotification = (message : string, successful : Boolean) => {
     position: 'top',
     timeout: 2000,
     color: successful ? "green" : "red",
-    icon: successful ? "success" : "warning"
+    icon: successful ? "check" : "warning"
   });
+}
+
+export const isToday = (date : Date) => {
+  const today = new Date();
+  return date.getFullYear() === today.getFullYear() &&
+         date.getMonth() === today.getMonth() &&
+         date.getDate() === today.getDate();
+}
+
+export const getDaysOffset = (date1: Date, date2: Date) => {
+  // Berechne die Differenz in Millisekunden
+  const diffInMillis = date2.getTime() - date1.getTime();
+  
+  // Eine Konstante für die Anzahl der Millisekunden in einem Tag
+  const millisInDay = 1000 * 60 * 60 * 24;
+  
+  // Berechne die Differenz in vollen Tagen und runde ab
+  return Math.floor(diffInMillis / millisInDay);
 }
\ No newline at end of file