From e3cb5b3dc5f7b57cdc30ad6207fedd46daa40013 Mon Sep 17 00:00:00 2001
From: Mark Haslinghuis <mark@numloq.nl>
Date: Tue, 17 Sep 2024 18:12:12 +0200
Subject: [PATCH] Add network speed to status bar

---
 locales/en/messages.json                      |  3 +++
 .../status-bar/ConnectionStatus.vue           | 25 +++++++++++++++++++
 src/components/status-bar/StatusBar.vue       | 10 ++++++++
 src/index.html                                |  2 ++
 src/js/data_storage.js                        |  1 +
 src/js/utils/connection.js                    |  3 +++
 6 files changed, 44 insertions(+)
 create mode 100644 src/components/status-bar/ConnectionStatus.vue

diff --git a/locales/en/messages.json b/locales/en/messages.json
index 5f201d1888e..ccc371ce708 100755
--- a/locales/en/messages.json
+++ b/locales/en/messages.json
@@ -667,6 +667,9 @@
     "versionLabelFirmware": {
         "message": "Firmware"
     },
+    "versionLabelConnection": {
+        "message": "ISP"
+    },
     "versionLabelConfigurator": {
         "message": "Configurator"
     },
diff --git a/src/components/status-bar/ConnectionStatus.vue b/src/components/status-bar/ConnectionStatus.vue
new file mode 100644
index 00000000000..07e6e70b495
--- /dev/null
+++ b/src/components/status-bar/ConnectionStatus.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="connection">
+    {{ $t("versionLabelConnection") }}: {{ networkSpeed }} Mb/s
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    networkSpeed: {
+      type: Number,
+      default: 0,
+    },
+  },
+};
+</script>
+
+<style>
+.connection {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  margin-left: auto;
+}
+</style>
diff --git a/src/components/status-bar/StatusBar.vue b/src/components/status-bar/StatusBar.vue
index 7b58dea24dc..8ab85508404 100644
--- a/src/components/status-bar/StatusBar.vue
+++ b/src/components/status-bar/StatusBar.vue
@@ -21,6 +21,9 @@
       :value="cpuLoad"
       unit="%"
     />
+    <ConnectionStatus
+      :network-speed="networkSpeed"
+    />
     <StatusBarVersion
       :configurator-version="configuratorVersion"
       :firmware-version="firmwareVersion"
@@ -33,12 +36,14 @@
 <script>
 import StatusBarVersion from "./StatusBarVersion.vue";
 import ReadingStat from "./ReadingStat.vue";
+import ConnectionStatus from "./ConnectionStatus.vue";
 import PortUtilization from "./PortUtilization.vue";
 
 export default {
   components: {
     PortUtilization,
     ReadingStat,
+    ConnectionStatus,
     StatusBarVersion,
   },
   props: {
@@ -67,6 +72,11 @@ export default {
       default: 0,
     },
 
+    networkSpeed: {
+      type: Number,
+      default: 0,
+    },
+
     configuratorVersion: {
       type: String,
       default: "",
diff --git a/src/index.html b/src/index.html
index c08d3b4fa9f..6879df1502f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -177,6 +177,8 @@
             :cycle-time="FC.CONFIG.cycleTime"
             :cpu-load="FC.CONFIG.cpuload"
 
+            :network-speed="CONFIGURATOR.networkSpeed"
+
             :configurator-version="CONFIGURATOR.getDisplayVersion()"
             :firmware-version="FC.CONFIG.flightControllerVersion"
             :firmware-id="FC.CONFIG.flightControllerIdentifier"
diff --git a/src/js/data_storage.js b/src/js/data_storage.js
index efb37b3498e..4a18d699237 100644
--- a/src/js/data_storage.js
+++ b/src/js/data_storage.js
@@ -11,6 +11,7 @@ const CONFIGURATOR = {
 
     connectionValid: false,
     connectionValidCliOnly: false,
+    networkSpeed: 0,
     virtualMode: false,
     virtualApiVersion: '0.0.1',
     cliActive: false,
diff --git a/src/js/utils/connection.js b/src/js/utils/connection.js
index 986b9ee0dfc..2d9e632480f 100644
--- a/src/js/utils/connection.js
+++ b/src/js/utils/connection.js
@@ -1,4 +1,5 @@
 import { get as getConfig } from "../ConfigStorage";
+import CONFIGURATOR from "../data_storage";
 
 export function ispConnected() {
 
@@ -14,6 +15,8 @@ export function ispConnected() {
     const rtt = navigator.connection.rtt;
     const logHead = '[ISP] ';
 
+    CONFIGURATOR.networkSpeed = downlink;
+
     if (isMetered) {
         console.log(`${logHead}Metered connection is enabled`);
         return false;