fixed Date-Formatting

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>

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);
+}