From 2c10698be91cc4eb9e6ddf3ea24b02379f7ade90 Mon Sep 17 00:00:00 2001
From: paidge <paidge_cs@hotmail.com>
Date: Mon, 10 Jan 2022 22:14:14 +0100
Subject: [PATCH] add template page for contributors
---
README.md | 81 ++++++++++++------------
components/btn/Theme.vue | 1 -
components/navigation/Breadcrumb.vue | 2 +-
layouts/default.vue | 8 +--
pages/chartjs.vue | 5 +-
pages/index.vue | 17 ++---
pages/membres/_hash.vue | 2 -
pages/membres/index.vue | 2 -
pages/previsions/_hash.vue | 3 -
pages/previsions/futurs_membres.vue | 4 +-
pages/template.vue | 92 ++++++++++++++++++++++++++++
11 files changed, 143 insertions(+), 74 deletions(-)
create mode 100644 pages/template.vue
diff --git a/README.md b/README.md
index 099cced..8d68e53 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 dc2f65c..9282fd7 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 2c0f0de..30f678a 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 80c65ee..2252d3b 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 868f022..a8483d5 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 ec0a5b4..9822664 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 d0a0428..f7be2fb 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 d086e38..d367653 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 66a8d7c..d25fde5 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 770ff37..5d74fa1 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 0000000..9765eab
--- /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
--
GitLab