diff --git a/README.md b/README.md
index 099cced09a03c05241a478a41c75e34fdfa5db6b..8d68e531b80cdb4191ef89a03117467a4996585a 100644
--- a/README.md
+++ b/README.md
@@ -1,69 +1,65 @@
# wotwizard-ui
-## Build Setup
-
+## Contribute
```bash
-# use node 16
-$ nvm use 16
-
-# install dependencies
+$ git clone https://git.duniter.org/paidge/wotwizard-ui.git
+$ cd wotwizard-ui
+$ git checkout -b my-branch
$ npm install
-
-# serve with hot reload at localhost:3000
$ npm run dev
-
-# Analyze assets to check bundle's size
$ npm run analyze
+$ git commit
+$ git push
+```
-# build for production and launch server for Server Side Rendering (SSR)
-$ npm run build
-$ npm run start
+### Add a new page
+Copy/paste the file `./pages/template.vue` and rename it to create a new page. This template is extremly commented for beginners so you can create a query and display the response very easily even using i18n ! If you want to add your page in the menu, edit the `menus` variable in the `./layouts/default.vue` file.
-# generate static project
-$ npm run generate
+### ChartJS
+There is an example to use component graph lazyly in `./pages/chartjs.vue`.
-# generate introspection schema for graphql server
-$ npm run build-fragment
-```
+### GraphQL
+All conf files for Apollo Graphql are stored in `./graphql`.
+In `queries.js` you'll find all queries.
+If you want to add a 2nd graphQL server, edit `./graphql/clients/endpoints.js` to put your URL and uncomment the line concerning the `apollo.clientConfigs.myotherclient` option in `nuxt.config.js`. I have not tested this functionnality.
+### Special Directories
For detailed explanation on how things work, check out the [documentation](https://nuxtjs.org).
-## Special Directories
-
You can create the following extra directories, some of which have special behaviors. Only `pages` is required; you can delete them if you don't want to use their functionality.
-### `assets`
+#### `assets`
The assets directory contains your uncompiled assets such as Stylus or Sass files, images, or fonts.
More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/assets).
-### `components`
+#### `components`
The components directory contains your Vue.js components. Components make up the different parts of your page and can be reused and imported into your pages, layouts and even other components.
More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/components).
-### `layouts`
+#### `layouts`
Layouts are a great help when you want to change the look and feel of your Nuxt app, whether you want to include a sidebar or have distinct layouts for mobile and desktop.
More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/layouts).
-### `pages`
+#### `pages`
This directory contains your application views and routes. Nuxt will read all the `*.vue` files inside this directory and setup Vue Router automatically.
More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/get-started/routing).
-### `plugins`
+#### `plugins`
The plugins directory contains JavaScript plugins that you want to run before instantiating the root Vue.js Application. This is the place to add Vue plugins and to inject functions or constants. Every time you need to use `Vue.use()`, you should create a file in `plugins/` and add its path to plugins in `nuxt.config.js`.
More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/plugins).
-### `static`
+#### `static`
This directory contains your static files. Each file inside this directory is mapped to `/`.
@@ -71,29 +67,34 @@ Example: `/static/robots.txt` is mapped as `/robots.txt`.
More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/static).
-### `store`
+#### `store`
This directory contains your Vuex store files. Creating a file in this directory automatically activates Vuex.
More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/store).
+## Build Setup
-## Contributions
```bash
-$ git clone https://git.duniter.org/paidge/wotwizard-ui.git
-$ cd wotwizard-ui
-$ git checkout -b my-branch
+# use node 16
+$ nvm use 16
+
+# install dependencies
$ npm install
+
+# serve with hot reload at localhost:3000
$ npm run dev
+
+# Analyze assets to check bundle's size
$ npm run analyze
-$ git commit
-$ git push
-```
-### Ajouter des pages
-Il suffit de créer un fichier `./pages/mapage.vue` pour que la nouvelle page soit accessible directement sur http://localhost/mapage. Pensez à insérer la logique pour le fil d'ariane dans ce fichier et à mettre à jour le menu dans la variable `menus` du fichier `./layouts/default.vue`. 3 pages d'exemple sont fournies pour montrer l'utilisation de l'API graphQL et de chartJS.
+# build for production and launch server for Server Side Rendering (SSR)
+$ npm run build
+$ npm run start
+
+# generate static project
+$ npm run generate
-## GraphQL
-All conf files for Apollo Graphql are stored in `./graphql`.
-The file `queries.js` contains all queries.
-If you want to add a 2nd graphQL server, edit the file `./graphql/clients/endpoints.js` to put your URL and uncomment the line concerning the `apollo.clientConfigs.myotherclient` option in `nuxt.config.js`. I have not tested this functionnality.
\ No newline at end of file
+# generate introspection schema for graphql server
+$ npm run build-fragment
+```
\ No newline at end of file
diff --git a/components/btn/Theme.vue b/components/btn/Theme.vue
index dc2f65c98c216f01da458a2432c65c36e695252f..9282fd799fb50dd96ff1972ca10d582d9bf1a996 100644
--- a/components/btn/Theme.vue
+++ b/components/btn/Theme.vue
@@ -40,7 +40,6 @@ export default {
};
</script>
-<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
*, ::before, ::after {
box-sizing: initial;
diff --git a/components/navigation/Breadcrumb.vue b/components/navigation/Breadcrumb.vue
index 2c0f0deda22663ce50107e63f817aadf4bad287f..30f678a47bf63cddb8a65d2b219338a574051974 100644
--- a/components/navigation/Breadcrumb.vue
+++ b/components/navigation/Breadcrumb.vue
@@ -2,7 +2,7 @@
<nav aria-label="Fil d'Ariane" class="breadcrumb-wrapper rounded p-3">
<ol class="breadcrumb m-0 p-0">
<li class="breadcrumb-item" :class="{ 'active': item.active }" :aria-current="item.active ? 'page' : null" v-for="item in breadcrumb" :key="item.text">
- <NuxtLink :to="item.to" v-if="item.to">{{ item.text }}</NuxtLink>
+ <NuxtLink :to="localePath(item.to)" v-if="item.to">{{ item.text }}</NuxtLink>
<span v-else>{{ item.text }}</span>
</li>
</ol>
diff --git a/layouts/default.vue b/layouts/default.vue
index 80c65ee16bb4cd73a4e7fe31b06d80320febfefe..2252d3bc4980f65cbb69428e104eb323d9235fbd 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -23,13 +23,7 @@ export default {
items : [
{path: '/membres',title: 'membres'}
]
- },
- {
- title: 'dev',
- items : [
- {path: '/previsions',title: 'inpreparation'}
- ]
- },
+ }
]
}
},
diff --git a/pages/chartjs.vue b/pages/chartjs.vue
index 868f022e80da3139b14b920a84a6f553c809df22..a8483d59568e0a44193b2d979b78fc92d7ecc3e5 100644
--- a/pages/chartjs.vue
+++ b/pages/chartjs.vue
@@ -10,7 +10,7 @@
<select class="form-control my-4" v-model="chartType">
<option v-for="type in allTypes" :key="type">{{ type }}</option>
</select>
- <button @click="fillData()" class="btn btn-primary mb-5">Randomize</button>
+ <button @click="fillData" class="btn btn-primary mb-5">Randomize</button>
<LazyGraph id="monGraph" :type="chartType" :data="data" :options="options" />
</div>
</main>
@@ -21,7 +21,6 @@ import {chartTypes} from "~/components/Graph.vue"
export default {
data () {
- // Variables locales
return {
allTypes: chartTypes,
chartType: "line",
@@ -42,7 +41,6 @@ export default {
]
}
},
- // Fonctions locales
methods: {
fillData () {
this.data = {
@@ -85,7 +83,6 @@ export default {
}
},
mounted () {
- // Mise à jour du fil d'ariane au chargement
$nuxt.$emit('changeRoute',this.breadcrumb)
// On remplit les données dans le graph
this.fillData()
diff --git a/pages/index.vue b/pages/index.vue
index ec0a5b48633087ffa50f1364715afacd0f9f16b3..982266404118d7cc7894a781f27f1c1c51241687 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -46,7 +46,7 @@ export default {
methods: {
addValue(arr,val) {
if (arr.filter(function(e) { return e.uid === val.uid }).length == 0) {
- arr.push(member.member)
+ arr.push(val)
}
return arr
}
@@ -64,16 +64,12 @@ export default {
member.member.inOut = member.inOut
if (member.member.history.length==1) {
- if (result['entrees'].filter(function(e) { return e.uid === member.member.uid }).length == 0) {
- result['entrees'].push(member.member)
- }
+ this.addValue(result['entrees'],member.member)
} else if (member.inOut) {
- if (result['renew'].filter(function(e) { return e.uid === member.member.uid }).length == 0) {
- result['renew'].push(member.member)
- }
- } else if (result['sorties'].filter(function(e) { return e.uid === member.member.uid }).length == 0) {
- result['sorties'].push(member.member)
- }
+ this.addValue(result['renew'],member.member)
+ } else {
+ this.addValue(result['sorties'],member.member)
+ }
}
}
@@ -87,7 +83,6 @@ export default {
}
},
mounted () {
- // Mise à jour du fil d'ariane au chargement
$nuxt.$emit('changeRoute',this.breadcrumb)
}
}
diff --git a/pages/membres/_hash.vue b/pages/membres/_hash.vue
index d0a04287fe2f94d131497623091d416473e00112..f7be2fb18baead1608de28095059138fcaf36d1a 100644
--- a/pages/membres/_hash.vue
+++ b/pages/membres/_hash.vue
@@ -35,7 +35,6 @@ import CertifStatus from '~/components/badge/CertifStatus.vue';
export default {
components: { CertifStatus },
data() {
- // Variables locales
return {
breadcrumb: [
{
@@ -54,7 +53,6 @@ export default {
error: null
};
},
- // Fonctions locales
methods: {},
apollo: {
idFromHash: {
diff --git a/pages/membres/index.vue b/pages/membres/index.vue
index d086e38d18db74e0e11c000884baaab833754892..d3676539438811fbf0080fb0cdff76e9432189be 100644
--- a/pages/membres/index.vue
+++ b/pages/membres/index.vue
@@ -42,7 +42,6 @@ export default {
error: null
}
},
- // Fonctions locales
methods: {
save() {
localStorage.setItem('search', this.param)
@@ -64,7 +63,6 @@ export default {
}
},
mounted () {
- // Mise à jour du fil d'ariane au chargement
$nuxt.$emit('changeRoute',this.breadcrumb)
// Rechargement du input
if (localStorage.search) {
diff --git a/pages/previsions/_hash.vue b/pages/previsions/_hash.vue
index 66a8d7c6671adc7188249e5af56d4cac2e91208b..d25fde5de7d81c24004d4be1308d27b0b29e25fb 100644
--- a/pages/previsions/_hash.vue
+++ b/pages/previsions/_hash.vue
@@ -22,7 +22,6 @@ import {PREVISION} from "@/graphql/queries"
export default {
data() {
- // Variables locales
return {
breadcrumb: [
{
@@ -41,8 +40,6 @@ export default {
error: null
};
},
- // Fonctions locales
- methods: {},
apollo: {
idFromHash: {
query: PREVISION,
diff --git a/pages/previsions/futurs_membres.vue b/pages/previsions/futurs_membres.vue
index 770ff377179f93b98726e31d9f42d97dd8dbf6cd..5d74fa17b4a857b9dae96b35dc319571980d206c 100644
--- a/pages/previsions/futurs_membres.vue
+++ b/pages/previsions/futurs_membres.vue
@@ -59,7 +59,7 @@
<th scope="row">{{ $d(new Date(forecast.date*1000), 'long') }} {{ $t('time.a') }} {{ $d(new Date(forecast.date*1000), 'hour') }}</th>
<td class="p-0">
<div class="list-group rounded-0">
- <nuxt-link class="list-group-item list-group-item-action border-0 d-flex justify-content-between" :to="'/previsions/' + member.member.hash" v-for="member in forecast.forecasts" :key="member.member.uid">
+ <nuxt-link class="list-group-item list-group-item-action border-0 d-flex justify-content-between" :to="localePath('/previsions/' + member.member.hash)" v-for="member in forecast.forecasts" :key="member.member.uid">
<div>{{ member.member.uid }} <BadgeStatus :membre="member.member" /></div>
<div>{{ member.proba * 100 }} %</div>
</nuxt-link>
@@ -101,7 +101,6 @@ export default {
display: 'forecastsByNames'
}
},
- // Fonctions locales
methods: {
save() {
localStorage.setItem('previsions', this.display)
@@ -175,7 +174,6 @@ export default {
}
},
mounted () {
- // Mise à jour du fil d'ariane au chargement
$nuxt.$emit('changeRoute',this.breadcrumb)
if (localStorage.previsions) {
this.display = localStorage.getItem('previsions')
diff --git a/pages/template.vue b/pages/template.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9765eabd582066ff7789157b5ecb726c3b518574
--- /dev/null
+++ b/pages/template.vue
@@ -0,0 +1,92 @@
+<template>
+<main class="container">
+ <h2 class="text-center mb-5 font-weight-light">{{ this.myFunction() }}</h2>
+ <code>For internal links, use <NuxtLink :to="localePath('path/page')">My link</NuxtLink></code>
+ <p>Use <code>$t() and $d()</code> functions to translate strings and dates</p>
+ <!-- <NavigationLoader :isLoading="$apollo.queries.myresponse.loading" /> -->
+ <!-- <transition name="fade">
+ <div class="alert alert-danger" v-if="error">{{ error }}</div>
+ </transition> -->
+ <!-- <transition name="fade">
+ <div class="result" v-if="myresponse">
+ <div class="row text-center">
+ <div class="col-lg-6">
+ {{ myresponse }}
+ </div>
+ </div>
+ </div>
+ </transition> -->
+</main>
+</template>
+
+<script>
+// Import your graphQL query
+// import {MY_QUERY} from '@/graphql/queries.js'
+
+export default {
+ data() {
+ // local variables
+ return {
+ breadcrumb: [
+ {
+ text: this.$t('accueil'),
+ to: '/'
+ },
+ {
+ // Translations are stored in ./i18n/locales folder
+ text: this.$t('mypage.mytitle'),
+ active: true
+ }
+ ],
+ error: null,
+ myvar : "Hello World !"
+ }
+ },
+ // local functions. You can use :
+ // {{ myFunction() }} in template if a value is returned
+ // - this.myFunction everywhere in the page but not in arrows functions
+ // - @event="myFunction" on Vue eventHandlers
+ // methods: {
+ // myFunction() {
+
+ // }
+ // },
+ // For computed values. Use {{ myComputedValue }} in the template
+ // computed: {
+ // myComputedValue : function() {
+ // return this.var * 3
+ // }
+ // },
+ // apollo: {
+ // // Use {{ myresponse }} in the template. If update is omitted, this name should correspond to the Query Type !
+ // myresponse : {
+ // query: MY_QUERY,
+ // // Optional : this is for parametered queries
+ // // variables() {return {param1:value1,param2:value2}},
+ // // Optional : treat the response before display. If omitted, the query name must correspond to the Query Type !
+ // // update (data) {
+
+ // // return data
+ // // },
+ // error (err) {this.error = err.message}
+ // }
+ // },
+ // Route's i18n (Need to rebuild App)
+ nuxtI18n: {
+ paths: {
+ fr: '/mapage',
+ en: '/mypage',
+ es: '/mipagina'
+ }
+ },
+ mounted () {
+ // Update breadcrumb when the page is displayed
+ $nuxt.$emit('changeRoute',this.breadcrumb)
+ }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this page only -->
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file