tidy nodes list ui

src/components/nodes/NodesList.vue

@@ -24,16 +24,29 @@
                         </div>
 
                         <!-- other node info -->
-                        <div v-else>
+                        <div v-else class="flex space-x-1">
 
-                            <!-- hops away -->
-                            <span v-if="node.hopsAway === -1">Unknown Hops</span>
-                            <span v-else-if="node.hopsAway === 0">Direct Connection</span>
-                            <span v-else-if="node.hopsAway === 1">1 Hop Away</span>
-                            <span v-else>{{ node.hopsAway }} Hops Away</span>
+                            <span class="my-auto">
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
+                                    <path d="M9 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z" />
+                                    <path fill-rule="evenodd" d="M9.68 5.26a.75.75 0 0 1 1.06 0 3.875 3.875 0 0 1 0 5.48.75.75 0 1 1-1.06-1.06 2.375 2.375 0 0 0 0-3.36.75.75 0 0 1 0-1.06Zm-3.36 0a.75.75 0 0 1 0 1.06 2.375 2.375 0 0 0 0 3.36.75.75 0 1 1-1.06 1.06 3.875 3.875 0 0 1 0-5.48.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" />
+                                    <path fill-rule="evenodd" d="M11.89 3.05a.75.75 0 0 1 1.06 0 7 7 0 0 1 0 9.9.75.75 0 1 1-1.06-1.06 5.5 5.5 0 0 0 0-7.78.75.75 0 0 1 0-1.06Zm-7.78 0a.75.75 0 0 1 0 1.06 5.5 5.5 0 0 0 0 7.78.75.75 0 1 1-1.06 1.06 7 7 0 0 1 0-9.9.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" />
+                                </svg>
+                            </span>
 
                             <!-- last heard -->
-                            <span v-if="node.lastHeard"> • heard {{ formatUnixSecondsAgo(node.lastHeard) }}</span>
+                            <span class="flex my-auto text-sm text-gray-500 space-x-1">
+                                {{ formatUnixSecondsAgo(node.lastHeard) }}
+                            </span>
+
+                            <!-- hops away -->
+                            <span class="flex my-auto text-sm text-gray-500 space-x-1">
+                                <span>•</span>
+                                <span v-if="node.hopsAway === -1">???</span>
+                                <span v-else-if="node.hopsAway === 0">Direct</span>
+                                <span v-else-if="node.hopsAway === 1">1 Hop</span>
+                                <span v-else>{{ node.hopsAway }} Hops</span>
+                            </span>
 
                         </div>
 
@@ -55,6 +68,7 @@ import moment from "moment";
 import NodeIcon from "./NodeIcon.vue";
 import GlobalState from "../../js/GlobalState.js";
 import NodeDropDownMenu from "./NodeDropDownMenu.vue";
+import TimeUtils from "../../js/TimeUtils.js";
 
 export default {
     name: 'NodesList',
@@ -84,7 +98,7 @@ export default {
         getNodeColour: (nodeId) => NodeUtils.getNodeColour(nodeId),
         getNodeTextColour: (nodeId) => NodeUtils.getNodeTextColour(nodeId),
         formatUnixSecondsAgo(unixSeconds) {
-            return moment.unix(unixSeconds).fromNow();
+            return TimeUtils.getTimeAgoShortHand(moment.unix(unixSeconds).toDate());
         },
     },
     computed: {

src/js/TimeUtils.js

@@ -0,0 +1,52 @@
+import moment from "moment";
+
+class TimeUtils {
+
+    static getTimeAgoShortHand(date) {
+
+        // get duration between now and provided date
+        const duration = moment.duration(moment().diff(date));
+
+        // years
+        const years = Math.floor(duration.asYears());
+        if(years > 0){
+            return `${years} ${years === 1 ? 'year' : 'years'} ago`;
+        }
+
+        // months
+        const months = Math.floor(duration.asMonths());
+        if(months > 0){
+            return `${months} ${months === 1 ? 'month' : 'months'} ago`;
+        }
+
+        // weeks
+        const weeks = Math.floor(duration.asWeeks());
+        if(weeks > 0){
+            return `${weeks} ${weeks === 1 ? 'week' : 'weeks'} ago`;
+        }
+
+        // days
+        const days = Math.floor(duration.asDays());
+        if(days > 0){
+            return `${days} ${days === 1 ? 'day' : 'days'} ago`;
+        }
+
+        // hours
+        const hours = Math.floor(duration.asHours());
+        if(hours > 0){
+            return `${hours} ${hours === 1 ? 'hour' : 'hours'} ago`;
+        }
+
+        // minutes
+        const minutes = Math.floor(duration.asMinutes());
+        if(minutes > 0){
+            return `${minutes} ${minutes === 1 ? 'min' : 'mins'} ago`;
+        }
+
+        return "now";
+
+    };
+
+}
+
+export default TimeUtils;