Added versions and minor cleanup

tubio-frontend-nuxt-app/components/Icons/github.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="github-logo">
+
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.github-logo {
+  background-image: url("/assets/brand/github/github-mark-light-120px.png");
+  background-size: contain;
+}
+</style>

tubio-frontend-nuxt-app/components/Layout/Header.vue

@@ -10,11 +10,19 @@
     </div>
 
     <div class="right-icons flex flex-row justify-end flex-grow">
-        <nuxt-link exact to="/settings">
+
+        <a href="https://github.com/Leonetienne/Tubio" target="_blank" title="GitHub repository" class="mr-4">
+          <div class="headerbutton flex justify-center items-center">
+            <IconGithub class="headericon icon-github" />
+          </div>
+        </a>
+
+        <nuxt-link exact to="/settings" title="Settings">
           <div class="headerbutton button-settings">
-              <IconGear class="headericon icon-gear" />
+            <IconGear class="headericon icon-gear" />
           </div>
         </nuxt-link>
+
     </div>
 
   </div>
@@ -22,21 +30,26 @@
 
 <script>
 import IconGear from "~/components/Icons/gear";
+import IconGithub from "~/components/Icons/github";
 import Logo from "~/components/Logo";
 
 export default {
   components: {
     IconGear,
+    IconGithub,
     Logo,
   },
 };
 </script>
 
 <style lang="scss" scoped>
-.headericon {
+.headerbutton {
   cursor: pointer;
   height: 50px;
   width: 50px;
+}
+
+.headericon {
   stroke: theme("colors.purple-3");
   fill: theme("colors.purple-3");
   transition:
@@ -44,12 +57,6 @@ export default {
     fill 0.2s,
     color 0.2s,
     transform 0.2s ease-in-out;
-
-  &:hover {
-    transform: rotate(90deg);
-    stroke: theme("colors.purple-3-1");
-    fill: theme("colors.purple-3-1");
-  }
 }
 
 .headerlogo {
@@ -79,6 +86,21 @@ export default {
     & svg {
       height: 100%;
     }
+
+    &:hover {
+      transform: rotate(90deg);
+      stroke: theme("colors.purple-3-1");
+      fill: theme("colors.purple-3-1");
+    }
+  }
+
+  &-github {
+    height: 40px;
+    width: 40px;
+
+    &:hover {
+      transform: scale(1.075);
+    }
   }
 }
 </style>

tubio-frontend-nuxt-app/pages/settings.vue

@@ -79,7 +79,16 @@
             
             <div class="w-full lg:w-1/2 border-left lg:pl-3 mt-6 lg:mt-0">
 
-                <div class="disk-usage">
+                <div class="versions">
+                  <div class="versions__entry">
+                    <p>Web-UI version: {{version__webUI}}</p>
+                  </div>
+                  <div class="versions__entry">
+                    <p>Server version: {{serverVersion}}</p>
+                  </div>
+                </div>
+
+                <div class="disk-usage mt-3">
                     <h2>Disk usage</h2>
 
                     <div class="disk-usage__entry flex">
@@ -155,7 +164,8 @@ export default {
 
   data: function() {
     return {
-      canUpdate: {type: Boolean, default: true}
+      canUpdate: {type: Boolean, default: true},
+      version__webUI: 0.75
     };
   },
 
@@ -166,6 +176,9 @@ export default {
     serverOs: function() {
       return this.$store.state.serverOs.os_name;
     },
+    serverVersion: function() {
+     return this.$store.state.serverVersion.serverVersion;
+    },
   },
 
   methods: {
@@ -316,6 +329,7 @@ export default {
 
     this.$store.dispatch("diskUsage/update");
     this.$store.dispatch("serverOs/update");
+    this.$store.dispatch("serverVersion/update");
     this.$store.dispatch("settings/updateGet", function() {
       that.whitelistToInputfield();
     });
@@ -341,19 +355,20 @@ h2 {
   font-size: 24pt;
 }
 
-.disk-usage {
+.disk-usage,
+.versions {
   &__entry {
     & p {
       color: theme("colors.text-gray-1");
       font-size: 16pt;
-
-      &:first-child {
-        width: 150px;
-      }
     }
   }
 }
 
+.disk-usage__entry p {
+  width: 150px;
+}
+
 textarea {
   color: theme("colors.purple-0");
   border-radius: 5px;

tubio-frontend-nuxt-app/store/serverVersion.js

@@ -0,0 +1,24 @@
+import axios from 'axios';
+
+export const state = () => ({
+    serverVersion: -1
+});
+
+export const mutations = {
+    update(state, data) {
+        state.serverVersion = data;
+    },
+};
+
+export const actions = {
+    update(context) {
+        axios.post("/api", {
+            request: "get_server_version"
+        })
+        .then(function(response) {
+            if (response.data.status === "OK") {
+                context.commit("update", response.data.server_version);
+            }
+        });
+    },
+};