diff --git a/package-lock.json b/package-lock.json
index d33f57146fe7bc1c35ce5604cd39acea41793626..89d169ef0cddc58984a4411f5020187c227646ca 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3352,6 +3352,14 @@
"node-int64": "^0.4.0"
}
},
+ "buefy": {
+ "version": "0.8.17",
+ "resolved": "https://registry.npmjs.org/buefy/-/buefy-0.8.17.tgz",
+ "integrity": "sha512-lLAnLjc8dQpGnLML+4tKpP2yUi/WAQ38ukR5qAMq7Cc9J0sbwy1kXAHarEPlOZkQFzx6c3VmHgL7/qGsupszrQ==",
+ "requires": {
+ "bulma": "0.7.5"
+ }
+ },
"buffer": {
"version": "4.9.2",
"resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.2.tgz",
@@ -3393,6 +3401,11 @@
"integrity": "sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=",
"dev": true
},
+ "bulma": {
+ "version": "0.7.5",
+ "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.7.5.tgz",
+ "integrity": "sha512-cX98TIn0I6sKba/DhW0FBjtaDpxTelU166pf7ICXpCCuplHWyu6C9LYZmL5PEsnePIeJaiorsTEzzNk3Tsm1hw=="
+ },
"bytes": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
diff --git a/package.json b/package.json
index 0dc18a8bbf8decea60f6e0c95b2240d8c9e96503..05cbfc30fd5b0382bf45c14d611f4aac95b19825 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
{
- "name": "mozoo",
+ "name": "mozen",
"version": "0.1.0",
"private": true,
"scripts": {
@@ -9,6 +9,7 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
+ "buefy": "^0.8.17",
"core-js": "^3.6.4",
"vue": "^2.6.11",
"vue-router": "^3.1.6"
diff --git a/public/index.html b/public/index.html
index 41235286563508e0feb4c451a34b598ef822ec21..e9bb139bf6bf5d4171056081bcc293ccdb4f16e1 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,6 +4,7 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
+ <link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.5.94/css/materialdesignicons.min.css">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
diff --git a/public/mozen_logo.png b/public/mozen_logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..396806b11ece63679e62917cdfafea9706101675
Binary files /dev/null and b/public/mozen_logo.png differ
diff --git a/public/mozen_logo_w.png b/public/mozen_logo_w.png
new file mode 100644
index 0000000000000000000000000000000000000000..0d55f240f84175728fdd3d7832b1cdec76106866
Binary files /dev/null and b/public/mozen_logo_w.png differ
diff --git a/src/App.vue b/src/App.vue
index 6c26aa6303fb37fa2a3ca1042e567d4e6544a693..abf72b8ea6481ff33cc844e6b7e47d7ade1df6c9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,13 +1,20 @@
<template>
<div id="app">
- <div id="nav">
- <router-link to="/">Home</router-link> |
- <router-link to="/about">About</router-link>
- </div>
+ <Navbar/>
<router-view/>
</div>
</template>
+<script>
+import Navbar from '@/components/Navbar.vue'
+export default {
+ name: 'App',
+ components: {
+ Navbar
+ }
+}
+</script>
+
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
@@ -16,17 +23,4 @@
text-align: center;
color: #2c3e50;
}
-
-#nav {
- padding: 30px;
-}
-
-#nav a {
- font-weight: bold;
- color: #2c3e50;
-}
-
-#nav a.router-link-exact-active {
- color: #42b983;
-}
</style>
diff --git a/src/components/Filters.vue b/src/components/Filters.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d5918ad65a45612ca48b848725a7b5da0ebd5dc2
--- /dev/null
+++ b/src/components/Filters.vue
@@ -0,0 +1,22 @@
+<template>
+ <b-menu>
+ <div >
+ <b-menu-list v-for="tag in tags" v-bind:key="tag.name">
+ <div v-for="type in tag.types" v-bind:key="type" class="field">
+ <b-checkbox>{{type}}</b-checkbox>
+ </div>
+ </b-menu-list>
+ </div>
+ </b-menu>
+</template>
+
+<script>
+export default {
+ name: 'Filters',
+ props: ['tags']
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/components/ModelCard.vue b/src/components/ModelCard.vue
new file mode 100644
index 0000000000000000000000000000000000000000..579af09c585779c7ed93bdf69a2c0f46dea131bc
--- /dev/null
+++ b/src/components/ModelCard.vue
@@ -0,0 +1,32 @@
+<template>
+ <div class="box">
+ <article class="media">
+ <figure></figure>
+ </article>
+ <div class="media-content">
+ <div class="content">
+ <p>
+ <strong>{{model.name}}</strong>
+ <br>
+ <small>{{model.author}}</small> - <small>{{model.modificationDate}}</small>
+ <br>
+ {{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-taglist>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'ModelCard',
+ props: ['model']
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
new file mode 100644
index 0000000000000000000000000000000000000000..89be3e77675dd02aff5916f3c7e6b08a088a43b1
--- /dev/null
+++ b/src/components/Navbar.vue
@@ -0,0 +1,66 @@
+<template>
+ <b-navbar type="is-dark" wrapper-class="container">
+ <template slot="brand">
+ <b-navbar-item tag="router-link" :to="{ path: '/' }">
+ <img
+ src="mozen_logo_w.png"
+ alt="Mozen"
+ >
+ </b-navbar-item>
+ </template>
+ <template slot="start">
+ <b-navbar-item tag="div">
+ <b-field>
+ <b-input placeholder="Rechercher..."
+ type="search"
+ icon="magnify"
+ v-model="search"
+ v-on:keyup.enter="onSearch"
+ >
+ </b-input>
+ </b-field>
+ </b-navbar-item>
+ </template>
+ <template slot="end">
+ <b-navbar-item tag="router-link" :to="{ path: '/' }">
+ Home
+ </b-navbar-item>
+ <b-navbar-item tag="router-link" :to="{ name: 'Search' }">
+ Rechercher
+ </b-navbar-item>
+ <b-navbar-item tag="router-link" :to="{ name: 'Docs' }">
+ Documentation
+ </b-navbar-item>
+ <b-navbar-item tag="router-link" :to="{ name: 'About' }">
+ <b-icon icon="help-circle-outline"/>
+ </b-navbar-item>
+ <b-navbar-item tag="div">
+ <div class="buttons">
+ <a class="button is-inverted">
+ <strong>Connexion</strong>
+ </a>
+ </div>
+ </b-navbar-item>
+ </template>
+ </b-navbar>
+</template>
+
+<script>
+export default {
+ name: 'Navbar',
+ data () {
+ return {
+ search: ''
+ }
+ },
+ methods: {
+ onSearch () {
+
+ }
+ }
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/main.js b/src/main.js
index 659607daa329e1a2c850ffa76cdcf3151cace807..37e6f1fd44b020798632a972be0295bc76d39d05 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,9 +1,14 @@
import Vue from 'vue'
import App from './App.vue'
import router from './router'
+import Buefy from 'buefy'
+import 'buefy/dist/buefy.css'
+Vue.use(Buefy)
Vue.config.productionTip = false
+Vue.prototype.$serverurl = 'http://localhost:8181/api/v1/'
+
new Vue({
router,
render: h => h(App)
diff --git a/src/router/index.js b/src/router/index.js
index e44cdcd855cdcbfe33ac6782a0225f89dd48ee31..acc2ad2a8a25906bf0a0278b54534b3b78de8ccd 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -13,10 +13,17 @@ const routes = [
{
path: '/about',
name: 'About',
- // route level code-splitting
- // this generates a separate chunk (about.[hash].js) for this route
- // which is lazy-loaded when the route is visited.
- component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+ component: () => import('../views/About.vue')
+ },
+ {
+ path: '/docs',
+ name: 'Docs',
+ component: () => import('../views/Docs.vue')
+ },
+ {
+ path: '/search',
+ name: 'Search',
+ component: () => import('../views/Search.vue')
}
]
diff --git a/src/views/About.vue b/src/views/About.vue
index 3fa28070de24f2055171ca2e20543881cb7fdf1c..77a63abeed1e4db788f5cfa52612d6ca92c57020 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -1,5 +1,5 @@
<template>
<div class="about">
- <h1>This is an about page</h1>
+ <h1>About page</h1>
</div>
</template>
diff --git a/src/views/Docs.vue b/src/views/Docs.vue
new file mode 100644
index 0000000000000000000000000000000000000000..609fdb4691da7d3d4c0fa74d64907c75c73f91ba
--- /dev/null
+++ b/src/views/Docs.vue
@@ -0,0 +1,5 @@
+<template>
+ <div class="docs">
+ <h1>Documentation page</h1>
+ </div>
+</template>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 8bd6c57f306571c13dab5ce8ee5dab0d3e03eeeb..09c569739d0da53d19aa5363d54e2b2658884eb0 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,18 +1,24 @@
<template>
<div class="home">
- <img alt="Vue logo" src="../assets/logo.png">
- <HelloWorld msg="Welcome to Your Vue.js App"/>
+ <img
+ src="mozen_logo.png"
+ alt="Mozen"
+ >
</div>
</template>
<script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
-
export default {
name: 'Home',
components: {
- HelloWorld
}
}
</script>
+
+<style scoped>
+
+.home {
+ padding-top: 50px;
+}
+
+</style>
diff --git a/src/views/Search.vue b/src/views/Search.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bd20d68cb1519912064df4ab179cc648e4659177
--- /dev/null
+++ b/src/views/Search.vue
@@ -0,0 +1,69 @@
+<template>
+ <div class="search container">
+ <div class="columns">
+ <div class="column">
+ <Filters v-bind:tags="tags"/>
+ </div>
+ <div v-if="models" class="column is-four-fifths">
+ <div v-for="model in models" v-bind:key="model.name">
+ <ModelCard v-bind:model="model"/>
+ </div>
+ </div>
+ <div v-else class="column is-four-fifths">
+ <h1 class="title">no modelo</h1>
+ </div>
+ </div>
+ <b-loading :active.sync="isLoading" :is-full-page="false"/>
+ </div>
+</template>
+
+<script>
+import Filters from '@/components/Filters.vue'
+import ModelCard from '@/components/ModelCard.vue'
+
+export default {
+ name: 'Search',
+ components: {
+ Filters,
+ ModelCard
+ },
+ data () {
+ return {
+ tags: '',
+ models: true,
+ isLoading: true
+ }
+ },
+ async mounted () {
+ this.tags = await this.getTags()
+ this.models = await this.getModels()
+ this.isLoading = false
+ },
+ methods: {
+ async getTags () {
+ const url = this.$serverurl + 'tags'
+ const response = await fetch(url)
+ try {
+ return await response.json()
+ } catch (error) {
+ return null
+ }
+ },
+ async getModels () {
+ const url = this.$serverurl + 'search'
+ const response = await fetch(url)
+ try {
+ return await response.json()
+ } catch (error) {
+ return null
+ }
+ }
+ }
+}
+</script>
+
+<style scoped>
+.search {
+ padding-top: 50px;
+}
+</style>