diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index ac51ade242db44f31d7370c37ffefa185af97321..06b5447a8fe122bdbc3be92730979fa878ae689c 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -883,16 +883,6 @@
"integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
"dev": true
},
- "@nuxt/opencollective": {
- "version": "0.2.2",
- "resolved": "https://registry.npmjs.org/@nuxt/opencollective/-/opencollective-0.2.2.tgz",
- "integrity": "sha512-ie50SpS47L+0gLsW4yP23zI/PtjsDRglyozX2G09jeiUazC1AJlGPZo0JUs9iuCDUoIgsDEf66y7/bSfig0BpA==",
- "requires": {
- "chalk": "^2.4.1",
- "consola": "^2.3.0",
- "node-fetch": "^2.3.0"
- }
- },
"@soda/friendly-errors-webpack-plugin": {
"version": "1.7.1",
"resolved": "https://registry.npmjs.org/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.7.1.tgz",
@@ -1985,6 +1975,7 @@
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+ "dev": true,
"requires": {
"color-convert": "^1.9.0"
}
@@ -2235,6 +2226,14 @@
"integrity": "sha512-jp/uFnooOiO+L211eZOoSyzpOITMXx1rBITauYykG3BRYPu8h0UcxsPNB04RR5vo4Tyz3+ay17tR6JVf9qzYWg==",
"dev": true
},
+ "async-validator": {
+ "version": "1.8.5",
+ "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.8.5.tgz",
+ "integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
+ "requires": {
+ "babel-runtime": "6.x"
+ }
+ },
"asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -2398,6 +2397,11 @@
}
}
},
+ "babel-helper-vue-jsx-merge-props": {
+ "version": "2.0.3",
+ "resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
+ "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
+ },
"babel-helpers": {
"version": "6.24.1",
"resolved": "https://registry.npmjs.org/babel-helpers/-/babel-helpers-6.24.1.tgz",
@@ -2611,7 +2615,6 @@
"version": "6.26.0",
"resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
"integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
- "dev": true,
"requires": {
"core-js": "^2.4.0",
"regenerator-runtime": "^0.11.0"
@@ -2620,8 +2623,7 @@
"regenerator-runtime": {
"version": "0.11.1",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
- "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
- "dev": true
+ "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
}
}
},
@@ -2891,24 +2893,6 @@
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
"dev": true
},
- "bootstrap": {
- "version": "4.3.1",
- "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.3.1.tgz",
- "integrity": "sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag=="
- },
- "bootstrap-vue": {
- "version": "2.0.0-rc.24",
- "resolved": "https://registry.npmjs.org/bootstrap-vue/-/bootstrap-vue-2.0.0-rc.24.tgz",
- "integrity": "sha512-8rA/I9tOvpNVIuMKD3rdlrUqgVdPEw4vPI0X8OeFJcG2hHvCHeZDF7FmWqxSeehIrUHGDV17HlTGSuP/v1Sp5g==",
- "requires": {
- "@nuxt/opencollective": "^0.2.2",
- "bootstrap": "^4.3.1",
- "core-js": ">=2.6.5 <3.0.0",
- "popper.js": "^1.15.0",
- "portal-vue": "^2.1.5",
- "vue-functional-data-merge": "^3.1.0"
- }
- },
"brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -3289,6 +3273,7 @@
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+ "dev": true,
"requires": {
"ansi-styles": "^3.2.1",
"escape-string-regexp": "^1.0.5",
@@ -3762,6 +3747,7 @@
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+ "dev": true,
"requires": {
"color-name": "1.1.3"
}
@@ -3926,11 +3912,6 @@
"integrity": "sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==",
"dev": true
},
- "consola": {
- "version": "2.9.0",
- "resolved": "https://registry.npmjs.org/consola/-/consola-2.9.0.tgz",
- "integrity": "sha512-34Iue+LRcWbndFIfZc5boNizWlsrRjqIBJZTe591vImgbnq7nx2EzlrLtANj9TH2Fxm7puFJBJAOk5BhvZOddQ=="
- },
"console-browserify": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/console-browserify/-/console-browserify-1.1.0.tgz",
@@ -5070,6 +5051,26 @@
"integrity": "sha512-weH16m8as+4Fy4XJxrn/nFXsIqB7zkxERhvj/5YX2HE4HB8MCu98Wsef4E3mu0krIT27ic0bGsr+TvqYrUn6Qg==",
"dev": true
},
+ "element-ui": {
+ "version": "2.10.0",
+ "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.10.0.tgz",
+ "integrity": "sha512-uthsnJ1CIdQvLWphr67uwFSfSYoRBjxFcEhXhy+2/EwKNsqO7MRN+mYqroNLz5WJuLqVy1aOpJ8Lv4B32qKthQ==",
+ "requires": {
+ "async-validator": "~1.8.1",
+ "babel-helper-vue-jsx-merge-props": "^2.0.0",
+ "deepmerge": "^1.2.0",
+ "normalize-wheel": "^1.0.1",
+ "resize-observer-polyfill": "^1.5.0",
+ "throttle-debounce": "^1.0.1"
+ },
+ "dependencies": {
+ "deepmerge": {
+ "version": "1.5.2",
+ "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-1.5.2.tgz",
+ "integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ=="
+ }
+ }
+ },
"elliptic": {
"version": "6.4.1",
"resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.4.1.tgz",
@@ -5190,7 +5191,8 @@
"escape-string-regexp": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
- "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
+ "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+ "dev": true
},
"escodegen": {
"version": "1.11.1",
@@ -7475,7 +7477,8 @@
"has-flag": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
- "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
+ "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+ "dev": true
},
"has-symbols": {
"version": "1.0.0",
@@ -10988,11 +10991,6 @@
}
}
},
- "node-fetch": {
- "version": "2.6.0",
- "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.0.tgz",
- "integrity": "sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA=="
- },
"node-forge": {
"version": "0.7.5",
"resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.7.5.tgz",
@@ -11117,6 +11115,11 @@
"integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==",
"dev": true
},
+ "normalize-wheel": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
+ "integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
+ },
"npm-run-path": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
@@ -11901,16 +11904,6 @@
"integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==",
"dev": true
},
- "popper.js": {
- "version": "1.15.0",
- "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.15.0.tgz",
- "integrity": "sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA=="
- },
- "portal-vue": {
- "version": "2.1.5",
- "resolved": "https://registry.npmjs.org/portal-vue/-/portal-vue-2.1.5.tgz",
- "integrity": "sha512-vZmdMn0mOo7puvxoMQ5zju6S29aFD+9yygJxyWQtPaMXS9xunAeoYdnx6yzfL9J8HD8pMZYgSieEIbioAKhrSQ=="
- },
"portfinder": {
"version": "1.0.20",
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.20.tgz",
@@ -13185,6 +13178,11 @@
"integrity": "sha1-79qpjqdFEyTQkrKyFjpqHXqaIUc=",
"dev": true
},
+ "resize-observer-polyfill": {
+ "version": "1.5.1",
+ "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+ "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+ },
"resolve": {
"version": "1.11.1",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.11.1.tgz",
@@ -14357,6 +14355,7 @@
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+ "dev": true,
"requires": {
"has-flag": "^3.0.0"
}
@@ -14690,6 +14689,11 @@
"integrity": "sha1-iQN8vJLFarGJJua6TLsgDhVnKmo=",
"dev": true
},
+ "throttle-debounce": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-1.1.0.tgz",
+ "integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg=="
+ },
"through": {
"version": "2.3.8",
"resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
@@ -15312,11 +15316,6 @@
}
}
},
- "vue-functional-data-merge": {
- "version": "3.1.0",
- "resolved": "https://registry.npmjs.org/vue-functional-data-merge/-/vue-functional-data-merge-3.1.0.tgz",
- "integrity": "sha512-leT4kdJVQyeZNY1kmnS1xiUlQ9z1B/kdBFCILIjYYQDqZgLqCLa0UhjSSeRX6c3mUe6U5qYeM8LrEqkHJ1B4LA=="
- },
"vue-hot-reload-api": {
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.3.tgz",
@@ -15385,6 +15384,11 @@
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
"dev": true
},
+ "vuetify": {
+ "version": "1.5.16",
+ "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-1.5.16.tgz",
+ "integrity": "sha512-yBgOsfurKQkeS+l+rrTQZ2bFk0D9ezjHhkuVM5A/yVzcg62sY2nfYaq/H++uezBWC9WYFrp/5OmSocJQcWn9Qw=="
+ },
"vuex": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 9ebcc4dc8bee483865facb4b9c51338903c3ce9e..feec9951dbb34235b1ac5a5b8c88aa004cc2e09f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,13 +10,13 @@
"test:unit": "vue-cli-service test:unit"
},
"dependencies": {
- "bootstrap": "^4.3.1",
- "bootstrap-vue": "^2.0.0-rc.24",
"chart.js": "^2.8.0",
"core-js": "^2.6.5",
+ "element-ui": "^2.10.0",
"register-service-worker": "^1.6.2",
"vue": "^2.6.10",
"vue-router": "^3.0.3",
+ "vuetify": "^1.5.16",
"vuex": "^3.0.1"
},
"devDependencies": {
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index a75a47ce7c8e38ab4f3a459b321d473a4f858de5..170b1d269727baf04ed0c270fff8756cb06a9743 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,22 +1,38 @@
<template>
- <div>
- <b-navbar toggleable="lg" type="dark" variant="dark">
- <b-navbar-brand to="/">MetageneDB</b-navbar-brand>
+ <v-app>
+ <v-toolbar app dark height="50" class="blue-grey darken-4">
+ <v-toolbar-title class="headline">MetageneDB</v-toolbar-title>
+ <v-spacer></v-spacer>
+ <v-btn flat>About</v-btn>
+ </v-toolbar>
- <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
+ <v-navbar toggleable="lg" type="dark" variant="dark">
+ <v-navbar-brand to="/">MetageneDB</v-navbar-brand>
- <b-collapse id="nav-collapse" is-nav>
- <b-navbar-nav>
- <b-nav-item to="/">Home</b-nav-item>
- <b-nav-item to="/about">About</b-nav-item>
- </b-navbar-nav>
- </b-collapse>
- </b-navbar>
+ <v-navbar-toggle target="nav-collapse"></v-navbar-toggle>
- <router-view/>
- </div>
+ <v-collapse id="nav-collapse" is-nav>
+ <v-navbar-nav>
+ <v-nav-item to="/">Home</v-nav-item>
+ <v-nav-item to="/about">About</v-nav-item>
+ </v-navbar-nav>
+ </v-collapse>
+ </v-navbar>
+
+ <v-content>
+ <router-view></router-view>
+ </v-content>
+ </v-app>
</template>
-<style lang="scss">
+<script>
-</style>
+export default {
+ name: 'App',
+ data () {
+ return {
+ //
+ }
+ }
+}
+</script>
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 1e18bd8365fca9ed3e4c82768ef2d5cbfc0d0954..66515bb81d93f8eaff9e0ab32ab59ddd7ffe3663 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -1,14 +1,15 @@
import Vue from 'vue';
-import BootstrapVue from 'bootstrap-vue';
+import Vuetify from 'vuetify';
import App from './App.vue';
import router from './router';
import store from './store';
import './registerServiceWorker';
-import 'bootstrap/dist/css/bootstrap.css';
-import 'bootstrap-vue/dist/bootstrap-vue.css';
+import 'vuetify/dist/vuetify.min.css';
Vue.config.productionTip = false;
-Vue.use(BootstrapVue);
+Vue.use(Vuetify, {
+ iconfont: 'md',
+});
new Vue({
router,
diff --git a/frontend/src/views/Genes.vue b/frontend/src/views/Genes.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3fa28070de24f2055171ca2e20543881cb7fdf1c
--- /dev/null
+++ b/frontend/src/views/Genes.vue
@@ -0,0 +1,5 @@
+<template>
+ <div class="about">
+ <h1>This is an about page</h1>
+ </div>
+</template>