feat: Move version to menu, add hash, add copy buttons, add repo link

OpenGeoscience · Oct 10, 2024 · f1b1b34 · f1b1b34
1 parent 6f6d04d
commit f1b1b34
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 4 deletions.
diff --git a/web/src/App.vue b/web/src/App.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent, ref, watch, onMounted, computed } from "vue";
+import { defineComponent, ref, Ref, watch, onMounted, computed } from "vue";
 import {
   currentUser,
   currentError,
@@ -32,13 +32,21 @@ export default defineComponent({
     const drawer = ref(true);
     const showError = computed(() => currentError.value !== undefined);
     const version = process.env.VUE_APP_VERSION;
+    const hash = process.env.VUE_APP_HASH;
+    const copied: Ref<string | undefined> = ref();
 
     function onReady() {
       if (currentUser.value) {
         loadProjects();
       }
     }
 
+    function copyToClipboard(content: string) {
+      navigator.clipboard.writeText(content).then(() => {
+        copied.value = content;
+      });
+    }
+
     const login = () => {
       oauthClient.redirectToLogin();
     };
@@ -51,6 +59,8 @@ export default defineComponent({
       login,
       logout,
       version,
+      hash,
+      copied,
       currentUser,
       drawer,
       currentProject,
@@ -61,6 +71,7 @@ export default defineComponent({
       currentChart,
       currentSimulationType,
       projectConfigMode,
+      copyToClipboard,
     };
   },
 });
@@ -107,9 +118,41 @@ export default defineComponent({
       />
       <v-toolbar-title>
         UVDAT
-        <v-card-subtitle style="display: inline-block; vertical-align: bottom">
-          {{ version }}
-        </v-card-subtitle>
+        <v-menu
+          activator="parent"
+          :open-on-hover="true"
+          :close-on-content-click="false"
+          @update:model-value="copied = undefined"
+        >
+          <v-card class="pa-3" style="width: fit-content">
+            <v-card-subtitle>
+              <a
+                href="https://github.com/OpenGeoscience/uvdat"
+                target="_blank"
+                style="text-decoration: none"
+              >
+                <v-icon icon="mdi-github" />
+                Source
+              </a>
+            </v-card-subtitle>
+            <v-card-subtitle>
+              <v-icon
+                :icon="copied === version ? 'mdi-check' : 'mdi-content-copy'"
+                :color="copied === version ? 'green' : 'black'"
+                @click="copyToClipboard(version)"
+              />
+              Version: {{ version }}
+            </v-card-subtitle>
+            <v-card-subtitle>
+              <v-icon
+                :icon="copied === hash ? 'mdi-check' : 'mdi-content-copy'"
+                :color="copied === hash ? 'green' : 'black'"
+                @click="copyToClipboard(hash)"
+              />
+              Hash: {{ hash }}
+            </v-card-subtitle>
+          </v-card>
+        </v-menu>
       </v-toolbar-title>
       <v-spacer />
       <div v-if="currentUser" class="px-3">

diff --git a/web/vue.config.js b/web/vue.config.js
@@ -3,6 +3,7 @@ const { ProvidePlugin } = require("webpack");
 const { gitDescribeSync } = require("git-describe");
 const describe = gitDescribeSync();
 process.env.VUE_APP_VERSION = describe.dirty ? describe.raw : describe.tag;
+process.env.VUE_APP_HASH = describe.hash;
 
 module.exports = {
   transpileDependencies: true,