Adding color to latency #454

tuzig · Apr 4, 2024 · 415b32e · 415b32e
1 parent b67a24b
commit 415b32e
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/css/terminal7.css b/css/terminal7.css
@@ -12,6 +12,7 @@
     --text-color: #01FAFA;
     --remote-border: #F4DB53;
     --warning: #F4DB53;
+    --error: #F54545;
     --background: #271D30;
     --text-background: #11051E;
     --text-offline: #004444;
@@ -701,6 +702,9 @@ footer pre { font-size: 14px; }
 .warning {
     color: var(--warning);
 }
+.error {
+    color: var(--error);
+}
 .lose-state p {
     text-align: left;
 }

diff --git a/src/map.ts b/src/map.ts
@@ -217,9 +217,10 @@ export class T7Map {
                     return (+(bytes / Math.pow(1024, i)).toFixed(2) + sizes[i])
                 }
                 const pad = (s: string, n = 9) => s.padEnd(n, 'X').replace(/X/g, '&nbsp;')
+                const extraClass = stats.roundTripTime > 400 ? "error" : stats.roundTripTime > 100 ? "warning" : ""
 
                 html =
-                    '<i class="f7-icons">arrow_right_arrow_left_circle</i>' + pad(stats.roundTripTime + 'ms', 7) +
+                    `<i class="f7-icons ${extraClass}">arrow_right_arrow_left_circle</i><span class=${extraClass}>` + pad(stats.roundTripTime + 'ms', 7) + '</span>' +
                     '<i class="f7-icons">arrow_down_circle</i>' + pad(getBytes(stats.bytesReceived)) +
                     '<i class="f7-icons">arrow_up_circle</i>' + pad(getBytes(stats.bytesSent))
             }