From 3c519941262915a2543ec7da12eebdb17f780cd5 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Thu, 5 Dec 2024 17:35:46 +1300
Subject: [PATCH] refactor traceroute snr label to vue component

---
 src/components/TraceRouteSnrLabel.vue   | 18 ++++++++++++++++++
 src/components/pages/TraceRoutePage.vue | 18 ++++++------------
 2 files changed, 24 insertions(+), 12 deletions(-)
 create mode 100644 src/components/TraceRouteSnrLabel.vue

diff --git a/src/components/TraceRouteSnrLabel.vue b/src/components/TraceRouteSnrLabel.vue
new file mode 100644
index 0000000..866cc5a
--- /dev/null
+++ b/src/components/TraceRouteSnrLabel.vue
@@ -0,0 +1,18 @@
+<template>
+    <div v-if="snr != null && snr !== -128" class="flex items-center space-x-1">
+        <div>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
+                <path fill-rule="evenodd" d="M8 2a.75.75 0 0 1 .75.75v8.69l3.22-3.22a.75.75 0 1 1 1.06 1.06l-4.5 4.5a.75.75 0 0 1-1.06 0l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.22 3.22V2.75A.75.75 0 0 1 8 2Z" clip-rule="evenodd" />
+            </svg>
+        </div>
+        <div>SNR: {{ snr / 4 }}dB</div>
+    </div>
+</template>
+<script>
+export default {
+    name: "TraceRouteSnrLabel",
+    props: {
+        snr: Number,
+    },
+}
+</script>
\ No newline at end of file
diff --git a/src/components/pages/TraceRoutePage.vue b/src/components/pages/TraceRoutePage.vue
index e6d2a34..fbdd1ad 100644
--- a/src/components/pages/TraceRoutePage.vue
+++ b/src/components/pages/TraceRoutePage.vue
@@ -35,9 +35,7 @@
                                 <div class="font-medium text-gray-900">{{ getNodeLongName(traceRoute.to) || '???' }}</div>
                                 <div>{{ getNodeHexId(traceRoute.to) }}</div>
                                 <div>Started the traceroute</div>
-                            </div>
-                            <div v-if="traceRoute.data.snrTowards.length > 0 && traceRoute.data.snrTowards[0] != null && traceRoute.data.snrTowards[0] !== -128" class="my-auto mr-1 text-sm text-gray-500">
-                                {{ traceRoute.data.snrTowards[0] / 4 }}dB SNR
+                                <TraceRouteSnrLabel :snr="traceRoute.data.snrTowards[0]"/>
                             </div>
                             <div class="my-auto">
                                 <NodeDropDownMenu :node="findNodeById(traceRoute.to)"/>
@@ -58,9 +56,7 @@
                                 <div class="font-medium text-gray-900">{{ getNodeLongName(route) || '???' }}</div>
                                 <div>{{ getNodeHexId(route) }}</div>
                                 <div>Forwarded the packet</div>
-                            </div>
-                            <div v-if="traceRoute.data.snrTowards.length > 0 && traceRoute.data.snrTowards[index + 1] != null && traceRoute.data.snrTowards[index + 1] !== -128" class="my-auto mr-1 text-sm text-gray-500">
-                                {{ traceRoute.data.snrTowards[index + 1] / 4 }}dB SNR
+                                <TraceRouteSnrLabel :snr="traceRoute.data.snrTowards[index + 1]"/>
                             </div>
                             <div class="my-auto">
                                 <NodeDropDownMenu :node="findNodeById(route)"/>
@@ -81,9 +77,7 @@
                                 <div class="font-medium text-gray-900">{{ getNodeLongName(traceRoute.from) || '???' }}</div>
                                 <div>{{ getNodeHexId(traceRoute.from) }}</div>
                                 <div>Replied to traceroute</div>
-                            </div>
-                            <div v-if="traceRoute.data.snrBack.length > 0 && traceRoute.data.snrBack[0] != null && traceRoute.data.snrBack[0] !== -128" class="my-auto mr-1 text-sm text-gray-500">
-                                {{ traceRoute.data.snrBack[0] / 4 }}dB SNR
+                                <TraceRouteSnrLabel :snr="traceRoute.data.snrBack[0]"/>
                             </div>
                             <div class="my-auto">
                                 <NodeDropDownMenu :node="findNodeById(traceRoute.from)"/>
@@ -109,9 +103,7 @@
                                     <div>{{ getNodeHexId(route) }}</div>
                                 </div>
                                 <div>Forwarded the packet</div>
-                            </div>
-                            <div v-if="traceRoute.data.snrBack.length > 0 && traceRoute.data.snrBack[index + 1] != null && traceRoute.data.snrBack[index + 1] !== -128" class="my-auto mr-1 text-sm text-gray-500">
-                                {{ traceRoute.data.snrBack[index + 1] / 4 }}dB SNR
+                                <TraceRouteSnrLabel :snr="traceRoute.data.snrBack[index + 1]"/>
                             </div>
                             <div class="my-auto">
                                 <NodeDropDownMenu :node="findNodeById(route)"/>
@@ -166,10 +158,12 @@ import ChannelUtils from "../../js/ChannelUtils.js";
 import TimeUtils from "../../js/TimeUtils.js";
 import Database from "../../js/Database.js";
 import NodeDropDownMenu from "../nodes/NodeDropDownMenu.vue";
+import TraceRouteSnrLabel from "../TraceRouteSnrLabel.vue";
 
 export default {
     name: 'TraceRoutePage',
     components: {
+        TraceRouteSnrLabel,
         NodeDropDownMenu,
         NodeIcon,
         Page,