From dd20e00672ecebaef0871026d0b65f96127f7ad7 Mon Sep 17 00:00:00 2001
From: Chris Hager <chris@linuxuser.at>
Date: Sat, 15 Jun 2024 11:14:50 +0200
Subject: [PATCH] Website: show time since last data (#44)

* website: time since fix

* website: time since in new line

* pre-render time since
---
 services/website/html.go              |  2 +
 services/website/templates/index.html | 84 +++++++++++++++------------
 2 files changed, 48 insertions(+), 38 deletions(-)

diff --git a/services/website/html.go b/services/website/html.go
index daa013a..e19dc0f 100644
--- a/services/website/html.go
+++ b/services/website/html.go
@@ -5,6 +5,7 @@ import (
 	"text/template"
 	"time"
 
+	"github.com/dustin/go-humanize"
 	"github.com/flashbots/relayscan/database"
 )
 
@@ -63,6 +64,7 @@ var funcMap = template.FuncMap{
 	"relayTable":         relayTable,
 	"builderTable":       builderTable,
 	"builderProfitTable": builderProfitTable,
+	"humanTime":          humanize.Time,
 }
 
 func ParseIndexTemplate() (*template.Template, error) {
diff --git a/services/website/templates/index.html b/services/website/templates/index.html
index 0eb008f..6d88c81 100644
--- a/services/website/templates/index.html
+++ b/services/website/templates/index.html
@@ -6,10 +6,12 @@
 <div class="content">
     <div style="text-align: center; margin-bottom:60px;">
         <h1 style="margin-bottom:10px;">MEV-Boost Analytics</h1>
-        <!-- <h2 style="margin-bottom:10px;">24h Stats</h2> -->
 
-        <p style="color: #6d6d6d; margin-top:0;">
-            <small>Updated {{ .LastDataTimeString }} UTC / Slot {{ .LastUpdateSlot }} / <span id="updated_ago">7 minutes ago</span></small><br>
+        <p style="color: #6d6d6d; margin-top:0; line-height: 1.4em;">
+            <small>
+                Updated {{ .LastDataTimeString }} UTC / Slot {{ .LastUpdateSlot }}<br>
+                <span id="updated_ago">({{ .LastDataTime | humanTime }})</span>
+            </small>
         </p>
         <p id="view-type">
             <a href="/overview?t={{ $time }}" id="a-view-type-overview" {{ if eq $view "overview" }}class="active" {{ end }}>Overview</a>
@@ -170,6 +172,47 @@ <h1 style="margin-bottom:10px;">MEV-Boost Analytics</h1>
 
 <script src="https://unpkg.com/@popperjs/core@2"></script>
 <script>
+    function timeSince(date) {
+        var seconds = Math.floor(new Date() - date) / 1000;
+        var interval = seconds / 31536000;
+        if (interval > 1) {
+            return Math.floor(interval) + " years";
+        }
+        interval = seconds / 2592000;
+        if (interval > 1) {
+            return Math.floor(interval) + " months";
+        }
+        interval = seconds / 86400;
+        if (interval > 1) {
+            return Math.floor(interval) + " days";
+        }
+        interval = seconds / 3600;
+        if (interval > 1) {
+            return Math.floor(interval) + " hours";
+        }
+        interval = seconds / 60;
+        if (interval > 1) {
+            n = Math.floor(interval)
+            if (n == 1) {
+                return n + " minute";
+            } else {
+                return n + " minutes";
+            }
+        }
+
+        sec = Math.floor(seconds)
+        if (isNaN(sec)) {
+            return "";
+        }
+        return sec + " seconds";
+    }
+
+    var referenceTime = new Date("{{ .LastDataTime }}");
+    var timeAgo = timeSince(referenceTime);
+    if (timeAgo != "") {
+        document.getElementById("updated_ago").innerText = "(" + timeAgo + " ago)";
+    }
+
     const showEvents = ['mouseenter', 'focus'];
     const hideEvents = ['mouseleave', 'blur'];
 
@@ -258,41 +301,6 @@ <h1 style="margin-bottom:10px;">MEV-Boost Analytics</h1>
         // fix for table sorting (it's already sorted, and this click makes the sortable plugin think it has done it)
         document.getElementById("th-builderprofit-profittotal").click()
     }
-
-    function timeSince(date) {
-        var seconds = Math.floor(new Date() - date) / 1000;
-        var interval = seconds / 31536000;
-        if (interval > 1) {
-            return Math.floor(interval) + " years";
-        }
-        interval = seconds / 2592000;
-        if (interval > 1) {
-            return Math.floor(interval) + " months";
-        }
-        interval = seconds / 86400;
-        if (interval > 1) {
-            return Math.floor(interval) + " days";
-        }
-        interval = seconds / 3600;
-        if (interval > 1) {
-            return Math.floor(interval) + " hours";
-        }
-        interval = seconds / 60;
-        if (interval > 1) {
-            n = Math.floor(interval)
-            if (n == 1) {
-                return n + " minute";
-            } else {
-                return n + " minutes";
-            }
-        }
-        return Math.floor(seconds) + " seconds";
-    }
-    window.onload = function (e) {
-        var referenceTime = new Date("{{ .LastDataTime }}");
-        var timeAgo = timeSince(referenceTime);
-        document.getElementById("updated_ago").innerText = timeAgo + " ago";
-    }
 </script>
 
 <div style="display: none;">