frontend: network: Add positioning

* Add positioning * Add serving cell info * Add bettwer signal chart
bluerobotics · Dec 10, 2024 · 1f65027 · 1f65027
1 parent fc8d47b
commit 1f65027
Show file tree

Hide file tree

Showing 6 changed files with 457 additions and 127 deletions.
diff --git a/frontend/src/components/network/NeighborCellsTable.vue b/frontend/src/components/network/NeighborCellsTable.vue
@@ -5,17 +5,15 @@
   >
     <strong>No nearby cells info available.</strong>
   </div>
-  <div v-else>
-    <v-card-text>
-      <v-row class="virtual-table-row">
-        <v-col
-          v-for="column in tableColumns"
-          class="virtual-table-cell"
-        >
-          <strong>{{ column }}</strong>
-        </v-col>
-      </v-row>
-    </v-card-text>
+  <v-card v-else>
+    <v-row class="pt-3 virtual-table-row">
+      <v-col
+        v-for="column in tableColumns"
+        class="virtual-table-cell title-table-cell"
+      >
+        <strong>{{ column }}</strong>
+      </v-col>
+    </v-row>
     <v-virtual-scroll
       :items="tableData"
       height="300"
@@ -33,13 +31,15 @@
         </v-row>
       </template>
     </v-virtual-scroll>
-  </div>
+  </v-card>
 </template>
 
 <script setup lang="ts">
 import { computed, defineProps } from 'vue';
+
 import { ModemCellInfo, NeighborCellInfo } from '@/types/ModemManager';
 
+/** Props / Emits */
 const props = defineProps<{
   cellInfo: ModemCellInfo | null;
 }>();
@@ -106,6 +106,11 @@ const tableData = computed<string[][]>(() => {
   text-wrap: nowrap;
 }
 
+.title-table-cell {
+  font-weight: bold;
+  text-wrap: nowrap;
+}
+
 .virtual-table {
   overflow-x: hidden;
 }

diff --git a/frontend/src/components/network/NetworkDetailsTab.vue b/frontend/src/components/network/NetworkDetailsTab.vue
@@ -1,13 +1,17 @@
 <template>
-  <v-container fluid class="d-flex flex-wrap">
-    <ServingTower
-      :modem="props.modem"
-      :cell-info="cellInfo"
-    />
-    <NetworkTowers
-      :modem="props.modem"
-      :cell-info="cellInfo"
-    />
+  <v-container fluid class="ga-3 d-flex flex-wrap align-center">
+    <v-col cols="12" md="6" class="tab-col right-col">
+      <NetworkTowers
+        :modem="props.modem"
+        :cell-info="cellInfo"
+      />
+    </v-col>
+    <v-col cols="12" md="6" class="tab-col left-col">
+      <ServingTower
+        :modem="props.modem"
+        :cell-info="cellInfo"
+      />
+    </v-col>
   </v-container>
 </template>
 
@@ -21,6 +25,7 @@ import { ModemCellInfo, ModemDevice } from '@/types/ModemManager';
 import NetworkTowers from './NetworkTowers.vue';
 import ServingTower from './ServingTower.vue';
 
+/** Props / Emits */
 const props = defineProps<{
   modem: ModemDevice;
 }>();
@@ -34,10 +39,29 @@ const fetchCellInfo = async () => {
     cellInfo.value = await ModemManager.fetchCellInfoById(props.modem.id);
   } catch (error) {
     cellInfo.value = null;
-    console.error('Unable to fetch cellInfo', (error as any)?.message);
+    console.error('Failed to fetch Cell Info, error:', (error as any)?.message);
   }
 };
 
 /** Tasks */
-new OneMoreTime({ delay: 10000, disposeWith: this }, fetchCellInfo);
+new OneMoreTime({ delay: 25000, disposeWith: this }, fetchCellInfo);
 </script>
+
+<style scoped>
+.tab-col {
+  flex: 1;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+}
+
+.left-col {
+  min-width: 400px;
+}
+
+.right-col {
+  min-width: 400px;
+  height: 100%;
+}
+</style>