From 629e8d47fb5fe920e3ee0c8c18e5b88d3400128a Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Thu, 2 Jan 2025 02:03:25 +1300
Subject: [PATCH] ui improvements for interfaces page

---
 .../components/interfaces/Interface.vue       | 54 ++++++++++++-------
 1 file changed, 34 insertions(+), 20 deletions(-)

diff --git a/src/frontend/components/interfaces/Interface.vue b/src/frontend/components/interfaces/Interface.vue
index 3ec90ce..47f6063 100644
--- a/src/frontend/components/interfaces/Interface.vue
+++ b/src/frontend/components/interfaces/Interface.vue
@@ -48,34 +48,22 @@
                 <div class="text-sm flex space-x-1 dark:text-zinc-100">
 
                     <!-- auto interface -->
-                    <span v-if="iface.type === 'AutoInterface'">
+                    <div v-if="iface.type === 'AutoInterface'">
                         {{ iface.type }} • Ethernet and WiFi
-                    </span>
+                    </div>
 
                     <!-- tcp client interface -->
-                    <span v-else-if="iface.type === 'TCPClientInterface'">
+                    <div v-else-if="iface.type === 'TCPClientInterface'">
                         {{ iface.type }} • {{ iface.target_host }}:{{ iface.target_port }}
-                    </span>
+                    </div>
 
                     <!-- tcp server interface -->
-                    <span v-else-if="iface.type === 'TCPServerInterface'">
+                    <div v-else-if="iface.type === 'TCPServerInterface'">
                         {{ iface.type }} • {{ iface.listen_ip }}:{{ iface.listen_port }}
-                    </span>
+                    </div>
 
-                    <!-- udp interface -->
-                    <span v-else-if="iface.type === 'UDPInterface'">
-                        {{ iface.type }} • {{ iface.listen_ip }}:{{ iface.listen_port }} • {{ iface.forward_ip }}:{{ iface.forward_port }}
-                    </span>
-
-                    <!-- rnode interface details -->
-                    <span v-else-if="iface.type === 'RNodeInterface'">
-                       {{ iface.type }} • {{ iface.port }} • freq={{ iface.frequency }} • bw={{ iface.bandwidth }} • power={{ iface.txpower }}dBm • sf={{ iface.spreadingfactor }} • cr={{ iface.codingrate }}
-                    </span>
-
-                    <!-- unknown interface types -->
-                    <span v-else>
-                       {{ iface.type ?? 'Unknown Interface Type' }}
-                    </span>
+                    <!-- other interface types -->
+                    <div v-else>{{ iface.type }}</div>
 
                 </div>
             </div>
@@ -167,6 +155,29 @@
 
         </div>
 
+        <!-- extra interface details -->
+        <div v-if="['UDPInterface', 'RNodeInterface'].includes(iface.type)" class="flex p-2 border-t dark:border-zinc-700">
+            <div class="text-sm flex space-x-1 dark:text-zinc-100">
+
+                <!-- udp interface -->
+                <div v-if="iface.type === 'UDPInterface'">
+                    <div>Listen: {{ iface.listen_ip }}:{{ iface.listen_port }}</div>
+                    <div>Forward: {{ iface.forward_ip }}:{{ iface.forward_port }}</div>
+                </div>
+
+                <!-- rnode interface details -->
+                <div v-else-if="iface.type === 'RNodeInterface'">
+                    <div>Port: {{ iface.port }}</div>
+                    <div>Frequency: {{ formatFrequency(iface.frequency) }}</div>
+                    <div>Bandwidth: {{ formatFrequency(iface.bandwidth) }}</div>
+                    <div>Spreading Factor: {{ iface.spreadingfactor }}</div>
+                    <div>Coding Rate: {{ iface.codingrate }}</div>
+                    <div>Transmit Power: {{ iface.txpower }}dBm</div>
+                </div>
+
+            </div>
+        </div>
+
         <div class="flex bg-gray-50 p-1 text-sm text-gray-500 space-x-1 border-t rounded-b dark:bg-zinc-800 dark:text-white dark:border-zinc-700">
 
             <!-- status -->
@@ -234,6 +245,9 @@ export default {
         formatBytes: function(bytes) {
             return Utils.formatBytes(bytes);
         },
+        formatFrequency(hz) {
+            return Utils.formatFrequency(hz);
+        },
     },
 }
 </script>