Refactorization, UI Improvements

1. All message created time processing now takes place in the front-end.
	The backend only sends time in format "May 24 2019 13:00:00 UTC".
2. UI improvements: select2 is themed a little better using flex,
 	The latest message appears in chat preview. The times displayed when the user
	 clicks on a message are now more intuitive i.e. if the message had been sent
	 in the past week, only the weekday name and time appears, if it's sent today,
	 only time appears, etc. Functions are added to filter out strings that are present
	  in multiple spots in the WebSocket for better readability.
3. Messages are now automatically ordered from last to first in the model level.

django_chatter/consumers.py

@@ -3,8 +3,6 @@
 --------------------------------------------------------------------------AI'''
 from django.contrib.auth import get_user_model
 from django.db import connection
-from django.utils.timezone import now, get_default_timezone_name
-from django.utils import dateformat
 
 
 '''AI--------------------------------------------------------------------------
@@ -26,7 +24,6 @@
 --------------------------------------------------------------------------AI'''
 import json
 from uuid import UUID
-import pytz
 
 
 '''
@@ -163,11 +160,7 @@ async def receive_json(self, data):
                                     self.multitenant,
                                     self.schema_name
                                     )
-
-            zone = pytz.timezone(get_default_timezone_name())
-            time = time.astimezone(tz=zone)
-            formatted = dateformat.DateFormat(time)
-            time = formatted.format('M d, Y h:i a')
+            time = time.strftime("%d %b %Y %H:%M:%S %Z")
 
 
             if message_harmful:

django_chatter/migrations/0002_auto_20190524_2308.py

@@ -0,0 +1,17 @@
+# Generated by Django 2.0.9 on 2019-05-25 03:08
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('django_chatter', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.AlterModelOptions(
+            name='message',
+            options={'ordering': ['-id']},
+        ),
+    ]

django_chatter/migrations/0003_auto_20190524_2315.py

@@ -0,0 +1,17 @@
+# Generated by Django 2.0.9 on 2019-05-25 03:15
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('django_chatter', '0002_auto_20190524_2308'),
+    ]
+
+    operations = [
+        migrations.AlterModelOptions(
+            name='message',
+            options={},
+        ),
+    ]

django_chatter/models.py

@@ -44,3 +44,6 @@ class Message(DateTimeModel):
 
     def __str__(self):
         return f'{self.text} sent by "{self.sender}" in Room "{self.room}"'
+
+    class Meta:
+        ordering = ['-id']

django_chatter/static/css/chat-window.css

@@ -29,7 +29,7 @@ AI-------------------------------------------------------------------
 
 .chatroom-list-container {
   flex-basis: 0;
-	flex-grow: 2;
+	flex-grow: 1.5;
 	border-right: 0;
   max-width: 400px;
 }
@@ -45,7 +45,7 @@ AI-------------------------------------------------------------------
 }
 
 .dialog-container {
-	flex-grow: 3;
+	flex-grow: 2.5;
   flex-basis: 0;
   width: 100px; /*Placeholder to enable max-width*/
   max-width: 800px;

django_chatter/static/css/chatroom-list.css

@@ -19,7 +19,7 @@ AI-------------------------------------------------------------------
 }
 
 .select-chat-user {
-	width: 80%;
+	width: 80% !important;
 }
 
 .select-chat-button {
@@ -42,20 +42,29 @@ AI-------------------------------------------------------------------
 }
 
 .list-room {
-	height: 60px;
+	height: 70px;
 	width: 100%;
 	display: flex;
 	align-items: center;
 	text-decoration: none;
 	color: black;
-	font-size: 18px;
 	cursor:pointer;
 }
 
 .chat-list-item {
 	margin-left: 20px;
 }
 
+.chat-list-title {
+	font-size: 18px;
+}
+
+.chat-list-last-message {
+	margin-top: 5px;
+	font-size: 14px;
+	color: #606060;
+}
+
 .list-room:hover {
 	background-color: var(--bg-grey);
 }

django_chatter/static/js/chat-window.js

@@ -32,14 +32,22 @@ $(function() {
     }
 	});
 
+	// Formats the time a message was sent in a more chat-style manner like Android Messages or Messenger
+	times = $('.message-date-created');
+	times.each(function(index, el) {
+		$this = times.eq(index);
+		time_human_readable = dateFormatter($this.text());
+		$this.text(time_human_readable);
+	});
+
 	// Set the latest message as visible
 	document.getElementById('chat-dialog').scrollTop
 		= document.getElementById('chat-dialog').scrollHeight;
 
 
 	// Mark active room with grey focus color
 	$active_room = $("#" + room_id);
-	$active_room.css("background", "#E0E0E0");
+	$active_room.css("background", "var(--bg-grey)");
 
 	// Focus message input on load
 	$('#send-message').focus();

django_chatter/static/js/date-formatter.js

@@ -0,0 +1,70 @@
+/*
+  dateFormatter: str -> str
+
+  This function takes in a time in the format ex. "24 May 2019 00:00:00 UTC"
+  and returns a string that is one of the following:
+  str ::= | 12:00 am
+          | <Weekday> 12:00 am
+          | <Month> <Day>, <Year> 12:00AM if time - timeNow > 7 days
+*/
+
+function dateFormatter (string) {
+  inputTime = new Date(Date.parse(string));
+  timeNow = new Date(Date.now());
+  difference = convertMS(timeNow - inputTime);
+  var options = {};
+  if (difference["days"] > 7) {
+    // days > 7
+    options = {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+      hour: "numeric",
+      minute: "numeric",
+      hour12: true
+    };
+    return inputTime.toLocaleDateString('en-US', options);
+  }
+  else {
+    if (sameDay(inputTime, timeNow)) {
+      // "same day"
+      options = {
+        hour: "numeric",
+        minute: "numeric",
+        hour12: true
+      };
+      return inputTime.toLocaleTimeString('en-US', options);
+    }
+    else {
+      // "0 < days < 7"
+      options = {
+        weekday: "short",
+        hour: "numeric",
+        minute: "numeric",
+        hour12: true
+      }
+      return inputTime.toLocaleTimeString('en-US', options);
+    }
+  }
+}
+
+
+//Converts milliseconds to days, hours, minutes and seconds and returns a dict.
+function convertMS(ms) {
+    var d, h, m, s;
+    s = Math.floor(ms / 1000);
+    m = Math.floor(s / 60);
+    s = s % 60;
+    h = Math.floor(m / 60);
+    m = m % 60;
+    d = Math.floor(h / 24);
+    h = h % 24;
+    return { days: d, hours: h, minutes: m, seconds: s };
+};
+
+// Taken from https://stackoverflow.com/questions/43855166/how-to-tell-if-two-dates-are-in-the-same-day
+function sameDay(d1, d2) {
+  return d1.getFullYear() === d2.getFullYear() &&
+    d1.getMonth() === d2.getMonth() &&
+    d1.getDate() === d2.getDate();
+}