Feat: Show elapsed time in HeartbeatBar (#3219)

* Feat: Show elapsed time in HeartbeatBar

* Chore: Fix lint

* Feat: Fix calculation & improve efficiency

* Fix: Fix getting tolerance in statusPage

* Chore: Improve comments & apply suggestions

* Optional elapsed time

---------

Co-authored-by: Louis Lam <louislam@users.noreply.github.com>

src/mixins/theme.js

@@ -5,6 +5,7 @@ export default {
             system: (window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light",
             userTheme: localStorage.theme,
             userHeartbeatBar: localStorage.heartbeatBarTheme,
+            styleElapsedTime: localStorage.styleElapsedTime,
             statusPageTheme: "light",
             forceStatusPageTheme: false,
             path: "",
@@ -22,6 +23,11 @@ export default {
             this.userHeartbeatBar = "normal";
         }
 
+        // Default Elapsed Time Style
+        if (!this.styleElapsedTime) {
+            this.styleElapsedTime = "no-line";
+        }
+
         document.body.classList.add(this.theme);
         this.updateThemeColorMeta();
     },
@@ -68,6 +74,10 @@ export default {
             localStorage.theme = to;
         },
 
+        styleElapsedTime(to, from) {
+            localStorage.styleElapsedTime = to;
+        },
+
         theme(to, from) {
             document.body.classList.remove(from);
             document.body.classList.add(this.theme);