add help and try using commit git in footer

docker-compose.yaml

@@ -44,7 +44,8 @@ services:
       - backend
       - postgresql
     environment:
-      - NODE_ENV=development
+      NODE_ENV: development
+      GIT_COMMIT: local-test
 
   nginx:
     image: nginx:1.13.12-alpine

frontend/src/App.vue

@@ -9,7 +9,7 @@
     </v-content>
     <v-footer class="pa-3">
       <v-spacer></v-spacer>
-      <div>Some footer (<span class="font-italic font-weight-light">hash latest commit</span>)</div>
+      <div>Some footer (<span class="font-italic font-weight-light">{{commitHash}}</span>)</div>
     </v-footer>
   </v-app>
 </template>
@@ -25,5 +25,11 @@ export default {
       //
     };
   },
+  computed: {
+    commitHash() {
+      return process.env.GIT_COMMIT;
+      console.log(process.env)
+    },
+  }
 };
 </script>

frontend/src/components/Navbar.vue

@@ -7,13 +7,10 @@
         <span>DB</span>
       </v-toolbar-title>
       <v-spacer></v-spacer>
-      <v-btn flat>
-        <span>Sign in</span>
-        <v-icon right>exit_to_app</v-icon>
-      </v-btn>
-      <v-btn flat>
-        <span>Help</span>
-        <v-icon right>help</v-icon>
+      <Help/>
+      <v-btn href="https://gitlab.pasteur.fr/metagenomics/metagenedb" flat target="_blank" class="ma-0 pa-2">
+        <span>Source</span>
+        <v-icon class="ml-1">fab fa-gitlab</v-icon>
       </v-btn>
     </v-toolbar>
 
@@ -24,9 +21,10 @@
 
 <script>
 import Drawer from '@/components/Drawer.vue';
+import Help from '@/components/help/help.vue';
 
 export default {
-  components: { Drawer },
+  components: { Drawer, Help },
   data() {
     return {
       drawer: false,

frontend/src/components/help/help.html

+<div class="help">
+  <v-dialog v-model="dialog" fullscreen hide-overlay transition="dialog-bottom-transition">
+    <template v-slot:activator="{ on }">
+      <v-btn flat v-on="on">Help<v-icon>help</v-icon></v-btn>
+    </template>
+    <v-card>
+      <v-toolbar dark color="primary">
+        <v-btn icon dark @click="dialog = false">
+          <v-icon>close</v-icon>
+        </v-btn>
+        <v-toolbar-title>Help</v-toolbar-title>
+      </v-toolbar>
+      <v-list two-line subheader>
+        <v-list-tile>
+          <v-list-tile-avatar>
+            <v-icon class="primary lighten-2" dark>
+              fas fa-code
+            </v-icon>
+          </v-list-tile-avatar>
+          <v-list-tile-content>
+            <v-list-tile-title>API documentation</v-list-tile-title>
+            <v-list-tile-sub-title>Documentation about different endpoints of metageneDB API</v-list-tile-sub-title>
+          </v-list-tile-content>
+          <v-list-tile-avatar>
+            <v-btn href="/api/swagger" flat icon target="_blank">
+              <v-icon class="tertiary--text">
+                open_in_new
+              </v-icon>
+            </v-btn>
+          </v-list-tile-avatar>
+        </v-list-tile>
+        <v-list-tile>
+          <v-list-tile-avatar>
+            <v-icon class="primary lighten-2" dark>
+              fab fa-gitlab
+            </v-icon>
+          </v-list-tile-avatar>
+          <v-list-tile-content>
+            <v-list-tile-title>GitLab repository</v-list-tile-title>
+            <v-list-tile-sub-title>Access to source code of the project</v-list-tile-sub-title>
+          </v-list-tile-content>
+          <v-list-tile-avatar>
+            <v-btn href="/api/swagger" flat icon target="_blank">
+              <v-icon class="tertiary--text">
+                open_in_new
+              </v-icon>
+            </v-btn>
+          </v-list-tile-avatar>
+        </v-list-tile>
+      </v-list>
+    </v-card>
+  </v-dialog>
+</div>
\ No newline at end of file

frontend/src/components/help/help.js

+export default {
+  data () {
+    return {
+      dialog: false,
+    }
+  },
+}
\ No newline at end of file

frontend/src/components/help/help.vue

+<template src="./help.html" lang="html"></template>
+<script src="./help.js" lang="js"></script>
\ No newline at end of file

frontend/src/views/compare/compare.html

 <div class="compare">
     <v-flex>
       <v-toolbar class="secondary darken-1 white--text" dense>
-        <v-icon class="white--text">far fa-chart-bar</v-icon>
+        <v-icon class="white--text">far fa-clone</v-icon>
         <v-toolbar-title>Taxonomy comparison</v-toolbar-title>
         <v-spacer/>
         <v-flex xs3 md2>