Polishing stats display

tuzig · Apr 7, 2024 · b100b6f · b100b6f
1 parent b9527be
commit b100b6f
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 10 deletions.
diff --git a/css/terminal7.css b/css/terminal7.css
@@ -749,17 +749,20 @@ audio { display: none; }
     text-align: left;
     padding-left: 1.5em;
     text-shadow: none;
-    border-bottom: 1px solid var(--dark-border);
-    border-top-right-radius: 6px;
 }
 
 .gate > .gate-stats {
     position: absolute;
-    top: 0;
-    right: 0;
+    top: 1px;
+    right: 1px;
     font-size: 75%;
     z-index: 20;
     color: #fff;
+    border-bottom: 1px solid var(--dark-border);
+    border-left: 1px solid var(--dark-border);
+    border-top-right-radius: 6px;
+    background-color: var(--background);
+    opacity: 0.7;
 }
 .gate-stats > i {
     font-size: 160%;
@@ -896,4 +899,4 @@ video {
     #version {
         max-width: 35vw;
     }
-}
+}
diff --git a/src/map.ts b/src/map.ts
@@ -203,7 +203,8 @@ export class T7Map {
     }
     async updateStats() {
         terminal7.gates.forEach(async (g: Gate) => {
-            let html = ""
+            let onGate = ""
+            let onMap = ""
             if (g && g.session && (g.session as WebRTCSession).getStats) {
                 const stats = await (g.session as WebRTCSession).getStats()
                 if (!stats)
@@ -219,11 +220,13 @@ export class T7Map {
                 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) 
+                onGate = `<i class="f7-icons ${extraClass}">arrow_right_arrow_left_circle</i><span class=${extraClass}>` + pad(stats.roundTripTime + 'ms', 7) + '</span>'
+                onMap = onGate +
+                    '<i class="f7-icons">arrow_down_circle</i>' + pad(getBytes(stats.bytesReceived)) +
+                    '<i class="f7-icons">arrow_up_circle</i>' + pad(getBytes(stats.bytesSent))
             }
-            g.nameE.querySelector(".gate-stats").innerHTML = html
-            g.e.querySelector(".gate-stats").innerHTML = html
+            g.nameE.querySelector(".gate-stats").innerHTML = onMap
+            g.e.querySelector(".gate-stats").innerHTML = onGate
         })
     }
     /*