From 4644bb46ae6ea038024a2a520ba5ca69f9286db0 Mon Sep 17 00:00:00 2001
From: Kenzo-Hugo Hillion <kenzo-hugo.hillion1@pasteur.fr>
Date: Fri, 5 Jun 2020 21:53:35 +0200
Subject: [PATCH] add help and try using commit git in footer
---
docker-compose.yaml | 3 +-
frontend/src/App.vue | 8 +++-
frontend/src/components/Navbar.vue | 14 +++----
frontend/src/components/help/help.html | 53 +++++++++++++++++++++++++
frontend/src/components/help/help.js | 7 ++++
frontend/src/components/help/help.vue | 2 +
frontend/src/views/compare/compare.html | 2 +-
7 files changed, 78 insertions(+), 11 deletions(-)
create mode 100644 frontend/src/components/help/help.html
create mode 100644 frontend/src/components/help/help.js
create mode 100644 frontend/src/components/help/help.vue
diff --git a/docker-compose.yaml b/docker-compose.yaml
index bc892d7..5c3986c 100644
--- a/docker-compose.yaml
+++ b/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
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 1caff4e..04d75f2 100644
--- a/frontend/src/App.vue
+++ b/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>
diff --git a/frontend/src/components/Navbar.vue b/frontend/src/components/Navbar.vue
index 06dacee..95b50d6 100644
--- a/frontend/src/components/Navbar.vue
+++ b/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,
diff --git a/frontend/src/components/help/help.html b/frontend/src/components/help/help.html
new file mode 100644
index 0000000..d893ffd
--- /dev/null
+++ b/frontend/src/components/help/help.html
@@ -0,0 +1,53 @@
+<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
diff --git a/frontend/src/components/help/help.js b/frontend/src/components/help/help.js
new file mode 100644
index 0000000..870ee43
--- /dev/null
+++ b/frontend/src/components/help/help.js
@@ -0,0 +1,7 @@
+export default {
+ data () {
+ return {
+ dialog: false,
+ }
+ },
+}
\ No newline at end of file
diff --git a/frontend/src/components/help/help.vue b/frontend/src/components/help/help.vue
new file mode 100644
index 0000000..d5c4473
--- /dev/null
+++ b/frontend/src/components/help/help.vue
@@ -0,0 +1,2 @@
+<template src="./help.html" lang="html"></template>
+<script src="./help.js" lang="js"></script>
\ No newline at end of file
diff --git a/frontend/src/views/compare/compare.html b/frontend/src/views/compare/compare.html
index 8c452af..bd27763 100644
--- a/frontend/src/views/compare/compare.html
+++ b/frontend/src/views/compare/compare.html
@@ -1,7 +1,7 @@
<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>
--
GitLab