diff --git a/src/App.vue b/src/App.vue
index abf72b8ea6481ff33cc844e6b7e47d7ade1df6c9..5305d28021f222a0fc1f67919dae60fdd8bba599 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -20,7 +20,6 @@ export default {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
- text-align: center;
color: #2c3e50;
}
</style>
diff --git a/src/components/Filters.vue b/src/components/Filters.vue
index d5918ad65a45612ca48b848725a7b5da0ebd5dc2..d6101fe508d3f4a734910948666b80a6e56e4864 100644
--- a/src/components/Filters.vue
+++ b/src/components/Filters.vue
@@ -1,9 +1,15 @@
<template>
<b-menu>
- <div >
- <b-menu-list v-for="tag in tags" v-bind:key="tag.name">
+ <div>
+ <b-menu-list label="Performance">
+ <b-slider lazy></b-slider>
+ </b-menu-list>
+ <b-menu-list v-for="tag in tags" v-bind:key="tag.name" :label="tag.name">
<div v-for="type in tag.types" v-bind:key="type" class="field">
- <b-checkbox>{{type}}</b-checkbox>
+ <b-checkbox
+ :native-value="type"
+ v-model="checkboxGroup"
+ @input="changeTag">{{type}}</b-checkbox>
</div>
</b-menu-list>
</div>
@@ -13,10 +19,22 @@
<script>
export default {
name: 'Filters',
- props: ['tags']
+ props: ['tags'],
+ data () {
+ return {
+ checkboxGroup: []
+ }
+ },
+ methods: {
+ changeTag () {
+ this.$emit('setTags', this.checkboxGroup)
+ }
+ }
}
</script>
-<style>
-
+<style scoped>
+.menu {
+ margin: 15px;
+}
</style>
diff --git a/src/components/ModelCard.vue b/src/components/ModelCard.vue
index 579af09c585779c7ed93bdf69a2c0f46dea131bc..3b909e7b57f5a873d9fd20faec3954d83810b5d6 100644
--- a/src/components/ModelCard.vue
+++ b/src/components/ModelCard.vue
@@ -1,5 +1,5 @@
<template>
- <div class="box">
+ <a class="box" v-on:click="onClick">
<article class="media">
<figure></figure>
</article>
@@ -13,20 +13,27 @@
{{model.shortDescription}}
</p>
<b-taglist>
- <b-tag v-for="tag in model.tags" v-bind:key="tag.name" type="is-info">{{tag.type}}</b-tag>
+ <b-tag v-for="tag in model.tags" v-bind:key="tag.type" type="is-info">{{tag.type}}</b-tag>
</b-taglist>
</div>
</div>
- </div>
+ </a>
</template>
<script>
export default {
name: 'ModelCard',
- props: ['model']
+ props: ['model'],
+ methods: {
+ onClick () {
+ this.$router.push({ name: 'Model', params: { model: this.model } })
+ }
+ }
}
</script>
<style>
-
+.box {
+ margin-bottom: 10px;
+}
</style>
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 89be3e77675dd02aff5916f3c7e6b08a088a43b1..111864a1211ccceee6ae1f7d53c8fcf52792f3d2 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -15,7 +15,7 @@
type="search"
icon="magnify"
v-model="search"
- v-on:keyup.enter="onSearch"
+ v-on:keyup.enter.native="onSearch"
>
</b-input>
</b-field>
@@ -55,7 +55,7 @@ export default {
},
methods: {
onSearch () {
-
+ this.$router.push({ name: 'Search', query: { n: this.search } })
}
}
}
diff --git a/src/router/index.js b/src/router/index.js
index acc2ad2a8a25906bf0a0278b54534b3b78de8ccd..89b258cfe4a0f54bb40cb8cbc85c225deba71fff 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -24,6 +24,12 @@ const routes = [
path: '/search',
name: 'Search',
component: () => import('../views/Search.vue')
+ },
+ {
+ path: '/model',
+ name: 'Model',
+ component: () => import('../views/Model.vue'),
+ props: true
}
]
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 09c569739d0da53d19aa5363d54e2b2658884eb0..43da2f9784d95960223e22768df55253f5d6041c 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -19,6 +19,7 @@ export default {
.home {
padding-top: 50px;
+ text-align: center;
}
</style>
diff --git a/src/views/Model.vue b/src/views/Model.vue
new file mode 100644
index 0000000000000000000000000000000000000000..85f171cfefd5b09bb5a5b15337d50de603b4f0bc
--- /dev/null
+++ b/src/views/Model.vue
@@ -0,0 +1,33 @@
+<template>
+ <div class="model container">
+ <div class="title">
+ {{model.name}}
+ </div>
+ <div class="content">
+ <p>
+ <strong></strong>
+ <br>
+ <small>{{model.author}}</small> - <small>{{model.modificationDate}}</small>
+ <br>
+ {{model.shortDescription}}
+ </p>
+ <hr>
+ <b-taglist>
+ <b-tag v-for="tag in model.tags" v-bind:key="tag.type" type="is-info">{{tag.type}}</b-tag>
+ </b-taglist>
+ <hr>
+ {{model.longDescription}}
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'Model',
+ props: ['model']
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/views/Search.vue b/src/views/Search.vue
index bd20d68cb1519912064df4ab179cc648e4659177..f3839ecff2540281c71c71371ba40712a67370bb 100644
--- a/src/views/Search.vue
+++ b/src/views/Search.vue
@@ -2,7 +2,7 @@
<div class="search container">
<div class="columns">
<div class="column">
- <Filters v-bind:tags="tags"/>
+ <Filters v-bind:tags="tags" v-on:setTags="getModels"/>
</div>
<div v-if="models" class="column is-four-fifths">
<div v-for="model in models" v-bind:key="model.name">
@@ -31,6 +31,10 @@ export default {
return {
tags: '',
models: true,
+ paramTags: '',
+ paramSearch: '',
+ resultSize: 10,
+ page: 1,
isLoading: true
}
},
@@ -40,6 +44,14 @@ export default {
this.isLoading = false
},
methods: {
+ setParams (tags) {
+ const searchParam = this.$route.query.n
+ var tagsParam
+ if (tags) tagsParam = tags
+ else tagsParam = this.$route.query.t
+
+ this.$router.push({ name: 'Search', query: { n: searchParam, t: tagsParam } })
+ },
async getTags () {
const url = this.$serverurl + 'tags'
const response = await fetch(url)
@@ -49,8 +61,22 @@ export default {
return null
}
},
- async getModels () {
- const url = this.$serverurl + 'search'
+ async getModels (tags) {
+ this.setParams(tags)
+ const url = new URL(this.$serverurl + 'search')
+ const params = new URLSearchParams()
+ const nameParam = this.$route.query.n
+ var tagsParam = this.$route.query.t
+
+ if (nameParam) params.append('n', nameParam)
+ if (tagsParam) params.append('t', tagsParam)
+
+ params.append('size', this.resultSize)
+ params.append('page', this.page)
+
+ console.log('get models ' + nameParam + ' + ' + tags)
+
+ url.search = params
const response = await fetch(url)
try {
return await response.json()