Skip to content
GitLab
Commit 3e3005c0 authored by Kenzo-Hugo Hillion's avatar Kenzo-Hugo Hillion ♻
Browse files

reorganize front content to components and views

parent 7f30478a
Hide whitespace changes
Inline Side-by-side
frontend/public/index.html
View file @ 3e3005c0
......@@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>code</title>
<title>MetageneDB</title>
</head>
<body>
<noscript>
......
frontend/src/components/Drawer.vue
View file @ 3e3005c0
......@@ -8,7 +8,7 @@
<v-list>
<v-list-tile>
<v-list-tile-title>
Browse
Browse content
</v-list-tile-title>
</v-list-tile>
</v-list>
......@@ -16,11 +16,12 @@
<v-divider></v-divider>
<v-list dense class="pt-0">
<v-list class="pt-0">
<v-list-tile
v-for="item in items"
:key="item.title"
@click=""
router :to="item.route"
active-class="secondary"
>
<v-list-tile-action>
<v-icon>{{ item.icon }}</v-icon>
......
frontend/src/components/Navbar.vue
View file @ 3e3005c0
......@@ -31,10 +31,10 @@ export default {
return {
drawer: false,
items: [
{ title: 'Home', icon: 'home' },
{ title: 'Catalog Statistics', icon: 'bar_chart' },
{ title: 'Genes', icon: 'list' },
{ title: 'About', icon: 'contact_support' },
{ title: 'Home', icon: 'home', route: '/' },
{ title: 'Catalog Statistics', icon: 'bar_chart', route: '/catalogstats' },
{ title: 'Genes', icon: 'list', route: '/genes' },
{ title: 'About', icon: 'contact_support', route: '/about' },
],
right: null,
};
......
frontend/src/main.js
View file @ 3e3005c0
......@@ -9,7 +9,8 @@ import 'vuetify/dist/vuetify.min.css';
Vue.config.productionTip = false;
Vue.use(Vuetify, {
theme: {
primary: '#042630',
primary: '#212836',
secondary: '#677ea3',
},
});
......
frontend/src/router.js
View file @ 3e3005c0
import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import Home from '@/views/Home.vue';
import Genes from '@/views/Genes.vue';
import Catalogstats from '@/views/Catalogstats.vue';
Vue.use(Router);
......@@ -13,6 +16,16 @@ export default new Router({
name: 'home',
component: Home,
},
{
path: '/catalogstats',
name: 'catalogstats',
component: Catalogstats,
},
{
path: '/genes',
name: 'genes',
component: Genes,
},
{
path: '/about',
name: 'about',
......
frontend/src/views/Catalogstats.vue 0 → 100644
View file @ 3e3005c0
<template>
<div class="catalogstats">
<h1>Statistics</h1>
<div class="card">
<div class="card-header">
Gene length distribution
</div>
<div class="card-body">
<histogram v-bind:geneLengthData="geneLengthData"></histogram>
<label for="geneLengthWindowSize">Gene size window</label>
<input type="range" class="custom-range" min="200" max="10000" step="200"
v-model="geneLengthWindowSize" v-on:input="fetchGeneLength(geneLengthWindowSize)"
debounce="500">
{{geneLengthWindowSize}}
</div>
</div>
</div>
</template>
<script>
import Histogram from '@/components/Histogram.vue';
export default {
name: 'home',
data() {
return {
geneLengthData: {},
geneLengthWindowSize: 10000,
};
},
mounted() {
this.fetchGeneLength(this.geneLengthWindowSize);
},
methods: {
fetchGeneLength(geneLengthWindowSize) {
fetch('/catalog/api/gene_length?window_size='.concat(geneLengthWindowSize), {
method: 'GET',
headers: {
Accept: 'application/json',
},
})
.then((response) => {
if (response.ok) {
response.json().then((json) => {
this.geneLengthData = json.data;
});
}
});
},
},
components: { histogram: Histogram },
};
</script>
frontend/src/views/Genes.vue
View file @ 3e3005c0
<template>
<div class="about">
<h1>This is an about page</h1>
<div class="genes">
<h1>Genes</h1>
<p>
The catalog currently contains
<span class="badge badge-secondary"> {{ count }} </span>
genes.
</p>
<div v-for="(gene, i) in genes" :key="i">
<h4>{{ gene.gene_id }}</h4>
<p>Gene length: {{ gene.gene_length }} {{ gene.functions }}</p>
</div>
</div>
</template>
<script>
export default {
name: 'genes',
data() {
return {
genes: [],
count: 0,
};
},
mounted() {
this.fetchGenes();
},
methods: {
fetchGenes() {
fetch('/catalog/api/genes/', {
method: 'GET',
headers: {
Accept: 'application/json',
},
})
.then((response) => {
if (response.ok) {
response.json().then((json) => {
this.genes = json.data;
this.count = json.count;
});
}
});
},
},
};
</script>
frontend/src/views/Home.vue
View file @ 3e3005c0
<template>
<div class="jumbotron">
<h3>Genes</h3>
<p>
The catalog currently contains
<span class="badge badge-secondary"> {{ count }} </span>
genes.
</p>
<div v-for="(gene, i) in genes" :key="i">
<h4>{{ gene.gene_id }}</h4>
<p>Gene length: {{ gene.gene_length }} {{ gene.functions }}</p>
</div>
<div class="card">
<div class="card-header">
Gene length distribution
</div>
<div class="card-body">
<histogram v-bind:geneLengthData="geneLengthData"></histogram>
<label for="geneLengthWindowSize">Gene size window</label>
<input type="range" class="custom-range" min="200" max="10000" step="200"
v-model="geneLengthWindowSize" v-on:input="fetchGeneLength(geneLengthWindowSize)"
debounce="500">
{{geneLengthWindowSize}}
</div>
</div>
</div>
<h1>Welcome!</h1>
</template>
<script>
import Histogram from '../components/Histogram.vue';
export default {
name: 'home',
data() {
return {
genes: [],
count: 0,
geneLengthData: {},
geneLengthWindowSize: 10000,
};
},
mounted() {
this.fetchGenes();
this.fetchGeneLength(this.geneLengthWindowSize);
},
methods: {
fetchGenes() {
fetch('/catalog/api/genes/', {
method: 'GET',
headers: {
Accept: 'application/json',
},
})
.then((response) => {
if (response.ok) {
response.json().then((json) => {
this.genes = json.data;
this.count = json.count;
});
}
});
},
fetchGeneLength(geneLengthWindowSize) {
fetch('/catalog/api/gene_length?window_size='.concat(geneLengthWindowSize), {
method: 'GET',
headers: {
Accept: 'application/json',
},
})
.then((response) => {
if (response.ok) {
response.json().then((json) => {
this.geneLengthData = json.data;
});
}
});
},
},
components: { histogram: Histogram },
};
</script>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment