From 674704b0d6cfee1dbf6ee3b0d959603292c5290b Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Wed, 17 Jan 2024 11:55:03 +0000
Subject: [PATCH] Display the microscope's hostname in the interface

---
 webapp/src/App.vue                                         | 7 +++++++
 .../tabContentComponents/aboutComponents/statusPane.vue    | 5 +++++
 webapp/src/store.js                                        | 6 +++++-
 3 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/webapp/src/App.vue b/webapp/src/App.vue
index e1234a92..2dfbe3d0 100644
--- a/webapp/src/App.vue
+++ b/webapp/src/App.vue
@@ -321,6 +321,13 @@ export default {
             );
           }
         }
+        try {
+          let hostname = await this.readThingProperty("settings", "hostname");
+          this.$store.commit("changeMicroscopeHostname", hostname);
+          document.title = `OpenFlexure Microscope: ${hostname}`;
+        } catch {
+          this.$store.commit("changeMicroscopeHostname", null);
+        }
         this.$store.commit("setConnected");
         this.$store.commit("setErrorMessage", null);
       } catch (error) {
diff --git a/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue b/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue
index 63d12f02..88c06096 100644
--- a/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue
+++ b/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue
@@ -2,6 +2,11 @@
   <div class="host-input">
     <div v-if="$store.state.available">
       <div>
+        <div class="uk-margin-small-bottom">
+          <b>Microscope hostname:</b>
+          <br />
+          {{ $store.state.microscopeHostname }}
+        </div>
         <div class="uk-margin-small-bottom">
           <b>API origin:</b>
           <br />
diff --git a/webapp/src/store.js b/webapp/src/store.js
index f2b2bf68..fa7bcd70 100644
--- a/webapp/src/store.js
+++ b/webapp/src/store.js
@@ -91,7 +91,8 @@ export default new Vuex.Store({
     imjoyEnabled: false,
     galleryEnabled: true,
     appTheme: "system",
-    activeStreams: {}
+    activeStreams: {},
+    microscopeHostname: ""
   },
 
   mutations: {
@@ -144,6 +145,9 @@ export default new Vuex.Store({
     },
     removeStream(state, id) {
       state.activeStreams[id] = false;
+    },
+    changeMicroscopeHostname(state, value) {
+      state.microscopeHostname = value;
     }
   },