Merge pull request #71 from fdm-monster/feat/70-add-versions-to-about…

…-page

Feat/70 add versions to about page

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fdm-monster/client",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "private": false,
   "author": "David Zwart",
   "license": "AGPL-3.0-or-later",

src/backend/app.service.ts

@@ -1,7 +1,12 @@
 import { BaseService } from "./base.service";
+import { VersionModel } from "../models/server/version.model";
 
 export class AppService extends BaseService {
   static async updateClientDist() {
     return await this.postApi("api/server/update-client-bundle-github");
   }
+
+  static async getVersion() {
+    return (await this.getApi(`api/version`)) as VersionModel;
+  }
 }

src/models/server/version.model.ts

@@ -0,0 +1,14 @@
+export interface VersionModel {
+  version: string;
+  isDockerContainer: boolean;
+  isNodemon: boolean;
+  isNode: boolean;
+  isPm2: boolean;
+  os: string;
+  update: {
+    synced: boolean;
+    updateAvailable: boolean;
+    includingPrerelease: boolean;
+    airGapped: boolean;
+  };
+}

src/views/AboutView.vue

@@ -25,6 +25,11 @@
         to set a base for FDM Monster Client<strong>©</strong> - the webapp.
         <br />
         <br />
+        <strong>Your server's version is: {{ serverVersion }}</strong>
+        <br />
+        <strong>Your clients's version is: {{ version }}</strong>
+        <br />
+        <br />
         <v-btn color="primary" @click="updateClientDist()"> Update Client</v-btn>
       </v-card-text>
       <v-card-title>
@@ -85,17 +90,23 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, ref } from "vue";
 import { AppService } from "../backend/app.service";
+import { version } from "../../package.json";
 
 export default defineComponent({
   name: "AboutView",
   components: {},
   setup: () => {
-    return {};
+    return {
+      serverVersion: ref(""),
+      version,
+    };
   },
   async created() {},
-  async mounted() {},
+  async mounted() {
+    this.serverVersion = (await AppService.getVersion()).version;
+  },
   props: {},
   computed: {},
   methods: {