show version in the footer

src/layouts/Layout.vue

@@ -33,6 +33,14 @@
         <Login v-if="! $root.loggedIn && $root.allowLoginDialog" />
     </main>
 
+    <footer>
+        <div class="container-fluid">
+            Uptime Kuma -
+            Version: {{ $root.info.version }} -
+            <a href="https://github.com/louislam/uptime-kuma/releases" target="_blank">Check Update On GitHub</a>
+        </div>
+    </footer>
+
     <!-- Mobile Only -->
     <div style="width: 100%;height: 60px;" v-if="$root.isMobile"></div>
     <nav class="bottom-nav" v-if="$root.isMobile">
@@ -130,6 +138,14 @@ export default {
 }
 
 main {
-    margin-bottom: 30px;
+
 }
+
+footer {
+    color: #AAA;
+    font-size: 13px;
+    margin-bottom: 30px;
+    margin-left: 10px;
+}
+
 </style>

src/mixins/socket.js

@@ -9,6 +9,7 @@ export default {
 
     data() {
         return {
+            info: { },
             socket: {
                 token: null,
                 firstConnect: true,
@@ -44,6 +45,10 @@ export default {
             transports: ['websocket']
         });
 
+        socket.on('info', (info) => {
+            this.info = info;
+        });
+
         socket.on('setup', (monitorID, data) => {
             this.$router.push("/setup")
         });
@@ -280,6 +285,13 @@ export default {
 
     watch: {
 
+        // Reload the SPA if the server version is changed.
+        "info.version"(to, from) {
+              if (from && from !== to) {
+                  window.location.reload()
+              }
+        },
+
         remember() {
             localStorage.remember = (this.remember) ? "1" : "0"
         }