From f1e1f07f223382559fecdca08a61e56822ee4ea4 Mon Sep 17 00:00:00 2001 From: Haakon Tideman Kanter <haakotka@stud.ntnu.no> Date: Thu, 5 May 2022 11:33:22 +0200 Subject: [PATCH] Added time and date for messages --- src/components/ChatComponents/ChatMessage.vue | 47 ++++++++++++++++++- 1 file changed, 45 insertions(+), 2 deletions(-) diff --git a/src/components/ChatComponents/ChatMessage.vue b/src/components/ChatComponents/ChatMessage.vue index ac1c249..eb2e044 100644 --- a/src/components/ChatComponents/ChatMessage.vue +++ b/src/components/ChatComponents/ChatMessage.vue @@ -58,17 +58,60 @@ export default { : "justify-end"; }, calculateTime() { + var time = this?.message.timestamp; + var date = new Date(time); + //Todo add timing for mm and hh and week of message + var mmOfMessage = String(date.getMinutes()); + var hhOfMessage = String(date.getHours()); + var ddOfMessage = String(date.getDate()).padStart(2, '0'); + var dayOfMessage = date.toLocaleString('default', { weekday: 'short' }); + var monthOfMessage = String(date.getMonth() + 1).padStart(2, '0'); //January is 0! + const shortMonthOfMessage = date.toLocaleString('default', { month: 'short' }); + var yyyyOfMessage = date.getFullYear(); + + var today = new Date(); + var dd = String(today.getDate()).padStart(2, '0'); + var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0! + var yyyy = today.getFullYear(); + if(ddOfMessage == dd){ + return "" + hhOfMessage + ":" + mmOfMessage + ""; + } + else if (this.isDateInThisWeek(date)){ + return "" +dayOfMessage + " " + hhOfMessage+":" + mmOfMessage; + } + else if (monthOfMessage == mm){ + return "" + ddOfMessage + " " + hhOfMessage + ":" + mmOfMessage; + } + else if (yyyyOfMessage == yyyy){ + return "" + shortMonthOfMessage + " " + ddOfMessage; + } + return shortMonthOfMessage + " " + ddOfMessage + " " + yyyyOfMessage + ""; + /* Take timestamp and display date when message was sent If message was sent this day show time (HH:MM) (13:00) If message was sent this week show day of the week and time (DDD HH:MM) (Mon 13:00) If message was sent this month show day of the month, date and time (DD HH:MM) (13 13:00) - If message was sent this year show month and day of the month (MM DD) (Jan 13) + If message was sent this year show month and day of the month (MMM DD) (Jan 13) If message was sent more than a year ago show year with date (MMM DD YYYY) (Jan 13 2020) */ - return "13:00" }, + isDateInThisWeek(date) { + const todayObj = new Date(); + const todayDate = todayObj.getDate(); + const todayDay = todayObj.getDay(); + + // get first date of week + const firstDayOfWeek = new Date(todayObj.setDate(todayDate - todayDay)); + + // get last date of week + const lastDayOfWeek = new Date(firstDayOfWeek); + lastDayOfWeek.setDate(lastDayOfWeek.getDate() + 6); + + // if date is equal or within the first and last dates of the week + return date >= firstDayOfWeek && date <= lastDayOfWeek; +}, }, }; </script> -- GitLab