Fixed home page message box

UserInterface/js/chatbox.js

@@ -1,4 +1,5 @@
 import { GreenhouseProxy } from "../api/api.js";
+import * as Utils from "../js/utilities.js";
 
 const proxy = new GreenhouseProxy();
 
@@ -78,19 +79,37 @@ async function renderMessages() {
     const messages = await proxy.getAllMessagesByRoom(roomID);
     if (messages.length) {
       messages.forEach(message => {
-        const user = message["user_id"];
+        // const user = message["user_id"];
         const textContainer = document.createElement('div');
         textContainer.setAttribute('class', 'd-flex align-items-baseline mb-4');
         const container2 = document.createElement('div');
         container2.setAttribute('class', 'pe-2');
         const textCard = document.createElement('div');
         textCard.setAttribute('class', 'card card-text d-inline-block p-2 px-3 m-1');
+        const user = document.createElement('div');
+        user.setAttribute('class', 'small');
+        user.textContent = usernames[message['user_id']];
         const date = document.createElement('div');
         date.setAttribute('class', 'small');
-        date.textContent = usernames[message['user_id']];
+
+        const dateObj = new Date(message['timestamp']);
+        const day = dateObj.getDate();
+        const month = Utils.months[dateObj.getMonth()];
+        const year = dateObj.getFullYear();
+        const hoursObj = Utils.toStandardTime(dateObj.getHours());
+        let minutes = dateObj.getMinutes();
+        if (minutes < 10) {
+          minutes = '0' + minutes;
+        }
+        const hours = hoursObj['hours'];
+        const amPm = hoursObj['amPm'];
+        const dateStr = `${hours}:${minutes} ${amPm} - ${day} ${month}, ${year}`;
+
+        date.textContent = dateStr;
 
         textCard.textContent = message["body"];
 
+        container2.append(user);
         container2.append(textCard);
         container2.append(date);