refactor traceroute snr label to vue component

liamcottle · Dec 5, 2024 · 3c51994 · 3c51994
1 parent 14bc3e8
commit 3c51994
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 12 deletions.
diff --git a/src/components/TraceRouteSnrLabel.vue 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>
diff --git 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,