show delivered message info when clicking status label

src/components/messages/MessageViewer.vue

@@ -42,7 +42,7 @@
                                         <span>Failed: {{ message.error }}</span>
                                         <span @click="retrySendingMessage(message)" class="text-blue-500 underline cursor-pointer">Retry?</span>
                                     </span>
-                                    <span v-else-if="isMessageDelivered(message)">Delivered</span>
+                                    <span v-else-if="isMessageDelivered(message)" @click="showDeliveredMessageInfo(message)" class="cursor-pointer">Delivered</span>
                                     <span v-else>Sending</span>
                                 </div>
 
@@ -270,6 +270,22 @@ export default {
         formatMessageTimestamp(timestamp) {
             return TimeUtils.formatMessageTimestamp(timestamp);
         },
+        showDeliveredMessageInfo: function(message) {
+
+            // basic info
+            const info = [
+                `Sent: ${TimeUtils.millisecondsToDateTimeString(message.timestamp)}`,
+            ];
+
+            // add round trip time if available
+            if(message.rtt){
+                info.push(`RTT: ${message.rtt}ms`);
+            }
+
+            // show info
+            alert(info.join("\n"));
+
+        },
     },
     computed: {
         canSendMessage() {

src/js/Connection.js

@@ -121,7 +121,7 @@ class Connection {
         GlobalState.connection.on(Constants.PushCodes.SendConfirmed, async (event) => {
             console.log("SendConfirmed", event);
             await databaseToBeReady;
-            await Database.Message.setMessageDeliveredByAckCode(event.ackCode);
+            await Database.Message.setMessageDeliveredByAckCode(event.ackCode, event.roundTrip);
         });
 
         // initial setup without needing database

src/js/Database.js

@@ -1,9 +1,13 @@
 import {v4} from 'uuid';
-import {createRxDatabase} from 'rxdb/plugins/core';
+import {addRxPlugin, createRxDatabase} from 'rxdb/plugins/core';
 import {getRxStorageDexie} from 'rxdb/plugins/storage-dexie';
 import GlobalState from "./GlobalState.js";
 import Utils from "./Utils.js";
 
+// add rxdb migration plugin
+import { RxDBMigrationSchemaPlugin } from 'rxdb/plugins/migration-schema';
+addRxPlugin(RxDBMigrationSchemaPlugin);
+
 var database = null;
 async function initDatabase(publicKeyHex) {
 
@@ -23,7 +27,7 @@ async function initDatabase(publicKeyHex) {
     await database.addCollections({
         messages: {
             schema: {
-                version: 0,
+                version: 1,
                 primaryKey: 'id',
                 type: 'object',
                 properties: {
@@ -61,10 +65,20 @@ async function initDatabase(publicKeyHex) {
                     send_type: {
                         type: 'integer',
                     },
+                    rtt: {
+                        type: 'integer',
+                    },
                     error: {
                         type: 'string',
                     },
                 },
+            },
+            migrationStrategies: {
+                // add rtt integer property in v1
+                1: (oldMessage) => {
+                    oldMessage.rtt = null;
+                    return oldMessage;
+                },
             }
         },
         contact_messages_read_state: {
@@ -140,6 +154,7 @@ class Message {
             timestamp: Date.now(),
             expected_ack_crc: data.expected_ack_crc,
             send_type: data.send_type,
+            rtt: null,
             error: null,
         });
     }
@@ -165,7 +180,7 @@ class Message {
     }
 
     // mark a message as delivered by its ack code
-    static async setMessageDeliveredByAckCode(ackCode) {
+    static async setMessageDeliveredByAckCode(ackCode, roundTrip) {
 
         // find one latest message by ack code
         // this will prevent updating older messages that might have the same ack code
@@ -185,6 +200,7 @@ class Message {
         // patch the message state
         return await message.incrementalPatch({
             status: "delivered",
+            rtt: roundTrip,
         });
 
     }

src/js/TimeUtils.js

@@ -27,10 +27,15 @@ class TimeUtils {
         }
 
         // long format for all other messages
-        return date.format("DD/MM/YYYY hh:mm A");
+        return date.format("DD/MMM/YYYY hh:mm A");
 
     }
 
+    static millisecondsToDateTimeString(unixMilliseconds) {
+        const date = moment.unix(unixMilliseconds / 1000);
+        return date.format("DD/MMM/YYYY hh:mm A");
+    }
+
     static getTimeAgoShortHand(date) {
 
         // get duration between now and provided date