diff --git a/components/navigation/Bar.vue b/components/navigation/Bar.vue
index 8a22db92e4eebc66880b0b76c89fc3d417a15800..9dc8a6d71243ea38a893e2aa8456c5cca68651cb 100644
--- a/components/navigation/Bar.vue
+++ b/components/navigation/Bar.vue
@@ -2,7 +2,7 @@
<header class="header position-fixed">
<div class="position-relative">
<button
- class="toggle btn border-secondary position-absolute p-1 m-1 ml-3"
+ class="toggle btn border-secondary position-absolute p-1 ml-4"
@click="toggleMenu">
<span></span>
</button>
@@ -27,11 +27,7 @@ export default {
methods: {
toggleMenu() {
document.querySelector(".app").classList.toggle("open")
- console.log(this.isOpen)
-
this.isOpen = !this.isOpen
- console.log(this.isOpen)
-
localStorage.setItem("menu-open", this.isOpen)
}
},
@@ -64,7 +60,9 @@ $btn-width: 50px;
}
nav.breadcrumb-wrapper {
- margin: 8px 15px 8px 80px;
+ min-height: 80px;
+ margin: 8px 15px;
+ padding: 1rem 1rem 1rem 4.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
@@ -100,6 +98,7 @@ nav.breadcrumb-wrapper {
height: $btn-width;
width: $btn-width;
line-height: $btn-width;
+ top: 1rem;
span {
@extend %hamburger-line;
diff --git a/components/navigation/Breadcrumb.vue b/components/navigation/Breadcrumb.vue
index db0b14dadf35d123739b07609a5b4db8d01da547..c4361120611e9f1601e820d90d345f2c79eed33f 100644
--- a/components/navigation/Breadcrumb.vue
+++ b/components/navigation/Breadcrumb.vue
@@ -1,5 +1,5 @@
<template>
- <nav aria-label="Fil d'Ariane" class="breadcrumb-wrapper rounded p-3">
+ <nav aria-label="Fil d'Ariane" class="breadcrumb-wrapper rounded">
<ol class="breadcrumb m-0 p-0">
<li
class="breadcrumb-item"
diff --git a/components/navigation/menu/Group.vue b/components/navigation/menu/Group.vue
index e6fe0a74cb4026f0421fe55ac3c4b72e440368a5..e818f00c517a6dbd45d11407f2714ed33b1ccd20 100644
--- a/components/navigation/menu/Group.vue
+++ b/components/navigation/menu/Group.vue
@@ -8,7 +8,8 @@
class="list-group-item list-group-item-action p-0 pl-3"
:to="localePath(item.path)"
v-for="item in menu.items"
- :key="item.path">
+ :key="item.path"
+ @click.native="toggleMenu()">
<div class="position-relative py-3">{{ $t(item.title) }}</div>
</NuxtLink>
</div>
@@ -19,6 +20,13 @@
export default {
props: {
menu: Object
+ },
+ methods: {
+ toggleMenu() {
+ if (window.innerWidth < 1200) {
+ this.$emit("toggleMenu")
+ }
+ }
}
}
</script>
diff --git a/components/navigation/menu/Sidebar.vue b/components/navigation/menu/Sidebar.vue
index 11308843f0678790fe922b8f860dca98b2e95839..816ca01bd90cc6c723564e019838df00b146a5ee 100644
--- a/components/navigation/menu/Sidebar.vue
+++ b/components/navigation/menu/Sidebar.vue
@@ -10,7 +10,7 @@
</nuxt-link>
<div
class="d-flex text-info justify-content-between align-items-baseline mt-3 mx-2">
- <div class="">v0.02</div>
+ <div class="">v0.03</div>
<div class="small" v-if="countMax">
{{ $t("bloc.title") }} n°<span class="font-weight-bold">{{
countMax.number
@@ -27,11 +27,12 @@
<span aria-hidden="true">×</span>
</button>
</div>
- <nav>
+ <nav class="pt-4 rounded">
<NavigationMenuGroup
v-for="menu in menus"
:key="menu.title"
- :menu="menu" />
+ :menu="menu"
+ @toggleMenu="toggleMenu" />
</nav>
</aside>
</template>
@@ -58,3 +59,9 @@ export default {
}
}
</script>
+
+<style lang="scss" scoped>
+nav {
+ background: var(--background-color-secondary);
+}
+</style>
diff --git a/layouts/default.vue b/layouts/default.vue
index 0d4df0ee7cc0088985e39a52268f5e3d9240f7b9..f3ee63e12571041daafe342b4b08f147b23e0e2b 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -18,9 +18,7 @@ export default {
},
{
title: "previsions.title",
- items: [
- { path: "/previsions/futurs_membres", title: "futuremembers" }
- ]
+ items: [{ path: "/previsions", title: "futuremembers" }]
},
{
title: "infos",
diff --git a/pages/index.vue b/pages/index.vue
index ef21b7c25fe177df691fd2fb13bb63b1bdd05cd5..8724b066ecf88d659f9532595ab0953a7244e0b1 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,6 +1,6 @@
<template>
<main class="container">
- <h2 class="text-center mb-5 font-weight-light">{{ $t("inout") }}</h2>
+ <h2 class="text-center my-5 font-weight-light">{{ $t("inout") }}</h2>
<NavigationLoader :isLoading="$apollo.queries.newMembers.loading" />
<transition name="fade">
<div class="alert alert-danger" v-if="error">{{ error }}</div>
diff --git a/pages/lexique.vue b/pages/lexique.vue
index a9aeac8de869d844e956156815f0383b70190389..c4e16296eadbbe4e10148cb471d803c2abcf5893 100644
--- a/pages/lexique.vue
+++ b/pages/lexique.vue
@@ -1,8 +1,8 @@
<template>
<main class="container">
- <div class="rech-lexique row mb-4 pt-4">
+ <div class="rech-lexique row mb-4">
<div class="col-md-6 mx-auto">
- <h2 class="text-center mb-5 font-weight-light">{{ $t("lexique") }}</h2>
+ <h2 class="text-center my-5 font-weight-light">{{ $t("lexique") }}</h2>
<div class="form-group">
<input
v-model="search"
diff --git a/pages/membres/index.vue b/pages/membres/index.vue
index 6dfd4c987e8072e9384a67a152ce5e7c5f867dc6..47ef31c382af29245a5a49003b762b6d43a20e49 100644
--- a/pages/membres/index.vue
+++ b/pages/membres/index.vue
@@ -1,6 +1,6 @@
<template>
<main class="container">
- <h2 class="text-center mb-5 font-weight-light">{{ $t("membres") }}</h2>
+ <h2 class="text-center my-5 font-weight-light">{{ $t("membres") }}</h2>
<div class="row mb-4">
<div class="col-6 m-auto text-center">
<label for="rech" class="form-label">{{ $t("recherche.title") }}</label>
diff --git a/pages/parametres.vue b/pages/parametres.vue
index 8c4e64d953a4f821e351a87d413999ecc14dc680..1f191983d2b18892a6366c40ddfac18961cc09b0 100644
--- a/pages/parametres.vue
+++ b/pages/parametres.vue
@@ -1,6 +1,6 @@
<template>
<main class="container">
- <h2 class="text-center mb-5 font-weight-light">{{ $t("params.title") }}</h2>
+ <h2 class="text-center my-5 font-weight-light">{{ $t("params.title") }}</h2>
<NavigationLoader :isLoading="$apollo.queries.allParameters.loading" />
<transition name="fade">
<div class="alert alert-danger" v-if="error">{{ error }}</div>
diff --git a/pages/previsions/futurs_membres.vue b/pages/previsions/futurs_membres.vue
deleted file mode 100644
index d09de729d576c802dc91ced8fafbf60c9bdb19d3..0000000000000000000000000000000000000000
--- a/pages/previsions/futurs_membres.vue
+++ /dev/null
@@ -1,277 +0,0 @@
-<template>
- <main class="container">
- <NavigationLoader :isLoading="$apollo.queries.wwResult.loading" />
- <transition name="fade">
- <div class="alert alert-danger" v-if="error">{{ error }}</div>
- </transition>
- <transition name="fade">
- <div v-if="wwResult">
- <h2 class="text-center mb-5 font-weight-light">
- {{ $t("previsions.title") }}
- <small
- ><span class="badge badge-secondary">{{
- $tc("dossier.attente", wwResult.dossiers_nb)
- }}</span></small
- >
- </h2>
- <div class="row">
- <div class="col-12 text-center mb-4">
- <div class="form-check form-check-inline">
- <input
- class="form-check-input"
- type="radio"
- id="forecastsByNames"
- value="forecastsByNames"
- checked
- v-model="display"
- @change="save" />
- <label class="form-check-label" for="forecastsByNames">
- {{ $t("tri.parmembres") }}
- </label>
- </div>
- <div class="form-check form-check-inline">
- <input
- class="form-check-input"
- type="radio"
- id="forecastsByDates"
- value="forecastsByDates"
- v-model="display"
- @change="save" />
- <label class="form-check-label" for="forecastsByDates">
- {{ $t("tri.pardate") }}
- </label>
- </div>
- </div>
- <div class="col-lg-8 m-auto">
- <div v-if="display == 'forecastsByNames'">
- <h3>{{ $t("previsions.parmembre") }}</h3>
- <div class="table-responsive">
- <table class="table table-striped table-hover">
- <tbody>
- <tr
- v-for="forecast in wwResult.forecastsByNames"
- :key="forecast.member.uid"
- @click="
- $router.push(
- localePath({
- name: 'membres-hash',
- params: { hash: forecast.member.hash }
- })
- )
- ">
- <th scope="row">
- {{ forecast.member.uid }}
- <BadgeStatus :membre="forecast.member" />
- </th>
- <td class="p-0">
- <div
- class="d-flex justify-content-between p-3"
- v-for="date in forecast.forecasts"
- :key="date.date">
- <div
- class="forecast_date mr-3"
- v-if="date.date < 9999999999">
- {{ $d(new Date(date.date * 1000), "short") }}
- {{ $t("time.a") }}
- {{
- $d(new Date(date.date * 1000), "hour").replace(
- " ",
- " "
- )
- }}
- </div>
- <div class="forecast_date mr-3" v-else>N/A</div>
- <div>{{ Math.round(date.proba * 100) }} %</div>
- </div>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- <div v-if="display == 'forecastsByDates'">
- <h3>{{ $t("previsions.pardate") }}</h3>
- <div class="table-responsive">
- <table class="table table-striped">
- <tbody>
- <tr
- v-for="forecast in wwResult.forecastsByDates"
- :key="forecast.date">
- <th
- scope="row"
- class="forecast_date"
- v-if="forecast.date < 9999999999">
- {{ $d(new Date(forecast.date * 1000), "short") }}
- {{ $t("time.a") }}
- {{ $d(new Date(forecast.date * 1000), "hour") }}
- </th>
- <th scope="row" class="forecast_date" v-else>N/A</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="localePath('/membres/' + member.member.hash)"
- v-for="member in forecast.forecasts"
- :key="member.member.uid">
- <div class="mr-3">
- {{ member.member.uid }}
- <BadgeStatus :membre="member.member" />
- </div>
- <div>
- {{ Math.round(member.proba * 100) }} %
- </div>
- </nuxt-link>
- </div>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- </div>
- </div>
- </div>
- </transition>
- </main>
-</template>
-
-<script>
-import { NEWCOMERS } from "@/graphql/queries"
-
-export default {
- data() {
- return {
- breadcrumb: [
- {
- text: this.$t("accueil"),
- to: "/"
- },
- {
- text: this.$t("previsions.title"),
- to: "/previsions"
- },
- {
- text: this.$t("futuremembers"),
- active: true
- }
- ],
- error: null,
- display: "forecastsByNames"
- }
- },
- methods: {
- save() {
- localStorage.setItem("previsions", this.display)
- }
- },
- apollo: {
- wwResult: {
- query: NEWCOMERS,
- update(data) {
- let result = { byName: [], byDate: [] }
- let forecasts = data.wwResult.forecastsByNames
-
- for (let i = 0; i < forecasts.length; i++) {
- let member = forecasts[i].member
-
- // On traite les forecasts par nom
- if (
- result["byName"].filter(function (e) {
- return e.member && e.member.uid === member.uid
- }).length == 0
- ) {
- result["byName"].push({
- member: member,
- forecasts: [
- {
- date: forecasts[i].date,
- after: forecasts[i].after,
- proba: forecasts[i].proba
- }
- ]
- })
- } else {
- result["byName"]
- .filter(function (e) {
- return e.member && e.member.uid === member.uid
- })[0]
- .forecasts.push({
- date: forecasts[i].date,
- after: forecasts[i].after,
- proba: forecasts[i].proba
- })
- }
-
- // On traite les forecasts par date
- if (
- result["byDate"].filter(function (e) {
- return e.date === forecasts[i].date
- }).length == 0
- ) {
- result["byDate"].push({
- date: forecasts[i].date,
- forecasts: [
- {
- member: member,
- after: forecasts[i].after,
- proba: forecasts[i].proba
- }
- ]
- })
- } else {
- result["byDate"]
- .filter(function (e) {
- return e.date === forecasts[i].date
- })[0]
- .forecasts.push({
- member: member,
- after: forecasts[i].after,
- proba: forecasts[i].proba
- })
- }
- }
-
- result["byDate"].sort((a, b) => (a.date > b.date ? 1 : -1))
-
- return {
- permutations_nb: data.wwResult.permutations_nb,
- dossiers_nb: data.wwResult.dossiers_nb,
- certifs_nb: data.wwResult.certifs_nb,
- forecastsByNames: result["byName"],
- forecastsByDates: result["byDate"]
- }
- },
- error(err) {
- this.error = err.message
- }
- }
- },
- nuxtI18n: {
- paths: {
- fr: "/previsions/futurs_membres",
- en: "/forecasts/future_members",
- es: "/pronosticos/futuros_miembros"
- }
- },
- mounted() {
- $nuxt.$emit("changeRoute", this.breadcrumb)
- if (localStorage.previsions) {
- this.display = localStorage.getItem("previsions")
- }
- }
-}
-</script>
-
-<style lang="scss" scoped>
-.list-group-item {
- background: transparent;
- &:hover {
- background: rgba(0, 0, 255, 0.075);
- color: var(--text-primary-color);
- }
-}
-
-.forecast_date {
- min-width: 150px;
-}
-</style>
diff --git a/pages/previsions/index.vue b/pages/previsions/index.vue
index bee732cecef625f639d7e9321346a9275e65f953..1d1046e190088b13c3d4a72fb567e51088eefb6e 100644
--- a/pages/previsions/index.vue
+++ b/pages/previsions/index.vue
@@ -1,21 +1,142 @@
<template>
<main class="container">
- <h2 class="text-center mb-5 font-weight-light">En préparation</h2>
- <div class="alert alert-danger">En développement</div>
- <NavigationLoader :isLoading="$apollo.queries.previsions.loading" />
+ <NavigationLoader :isLoading="$apollo.queries.wwResult.loading" />
<transition name="fade">
<div class="alert alert-danger" v-if="error">{{ error }}</div>
</transition>
<transition name="fade">
- <div v-if="previsions">
- {{ previsions }}
+ <div v-if="wwResult">
+ <h2 class="text-center my-5 font-weight-light">
+ {{ $t("previsions.title") }}
+ <small
+ ><span class="badge badge-secondary">{{
+ $tc("dossier.attente", wwResult.dossiers_nb)
+ }}</span></small
+ >
+ </h2>
+ <div class="row">
+ <div class="col-12 text-center mb-4">
+ <div class="form-check form-check-inline">
+ <input
+ class="form-check-input"
+ type="radio"
+ id="forecastsByNames"
+ value="forecastsByNames"
+ checked
+ v-model="display"
+ @change="save" />
+ <label class="form-check-label" for="forecastsByNames">
+ {{ $t("tri.parmembres") }}
+ </label>
+ </div>
+ <div class="form-check form-check-inline">
+ <input
+ class="form-check-input"
+ type="radio"
+ id="forecastsByDates"
+ value="forecastsByDates"
+ v-model="display"
+ @change="save" />
+ <label class="form-check-label" for="forecastsByDates">
+ {{ $t("tri.pardate") }}
+ </label>
+ </div>
+ </div>
+ <div class="col-lg-8 m-auto">
+ <div v-if="display == 'forecastsByNames'">
+ <h3>{{ $t("previsions.parmembre") }}</h3>
+ <div class="table-responsive">
+ <table class="table table-striped table-hover">
+ <tbody>
+ <tr
+ v-for="forecast in wwResult.forecastsByNames"
+ :key="forecast.member.uid"
+ @click="
+ $router.push(
+ localePath({
+ name: 'membres-hash',
+ params: { hash: forecast.member.hash }
+ })
+ )
+ ">
+ <th scope="row">
+ {{ forecast.member.uid }}
+ <BadgeStatus :membre="forecast.member" />
+ </th>
+ <td class="p-0">
+ <div
+ class="d-flex justify-content-between p-3"
+ v-for="date in forecast.forecasts"
+ :key="date.date">
+ <div
+ class="forecast_date mr-3"
+ v-if="date.date < 9999999999">
+ {{ $d(new Date(date.date * 1000), "short") }}
+ {{ $t("time.a") }}
+ {{
+ $d(new Date(date.date * 1000), "hour").replace(
+ " ",
+ " "
+ )
+ }}
+ </div>
+ <div class="forecast_date mr-3" v-else>N/A</div>
+ <div>{{ Math.round(date.proba * 100) }} %</div>
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ <div v-if="display == 'forecastsByDates'">
+ <h3>{{ $t("previsions.pardate") }}</h3>
+ <div class="table-responsive">
+ <table class="table table-striped">
+ <tbody>
+ <tr
+ v-for="forecast in wwResult.forecastsByDates"
+ :key="forecast.date">
+ <th
+ scope="row"
+ class="forecast_date"
+ v-if="forecast.date < 9999999999">
+ {{ $d(new Date(forecast.date * 1000), "short") }}
+ {{ $t("time.a") }}
+ {{ $d(new Date(forecast.date * 1000), "hour") }}
+ </th>
+ <th scope="row" class="forecast_date" v-else>N/A</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="localePath('/membres/' + member.member.hash)"
+ v-for="member in forecast.forecasts"
+ :key="member.member.uid">
+ <div class="mr-3">
+ {{ member.member.uid }}
+ <BadgeStatus :membre="member.member" />
+ </div>
+ <div>
+ {{ Math.round(member.proba * 100) }} %
+ </div>
+ </nuxt-link>
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
</transition>
</main>
</template>
<script>
-import { PREVISIONS } from "@/graphql/queries"
+import { NEWCOMERS } from "@/graphql/queries"
export default {
data() {
@@ -30,19 +151,90 @@ export default {
active: true
}
],
- display: "forecastsByNames",
- error: null
+ error: null,
+ display: "forecastsByNames"
+ }
+ },
+ methods: {
+ save() {
+ localStorage.setItem("previsions", this.display)
}
},
apollo: {
- previsions: {
- query: PREVISIONS,
+ wwResult: {
+ query: NEWCOMERS,
update(data) {
+ let result = { byName: [], byDate: [] }
+ let forecasts = data.wwResult.forecastsByNames
+
+ for (let i = 0; i < forecasts.length; i++) {
+ let member = forecasts[i].member
+
+ // On traite les forecasts par nom
+ if (
+ result["byName"].filter(function (e) {
+ return e.member && e.member.uid === member.uid
+ }).length == 0
+ ) {
+ result["byName"].push({
+ member: member,
+ forecasts: [
+ {
+ date: forecasts[i].date,
+ after: forecasts[i].after,
+ proba: forecasts[i].proba
+ }
+ ]
+ })
+ } else {
+ result["byName"]
+ .filter(function (e) {
+ return e.member && e.member.uid === member.uid
+ })[0]
+ .forecasts.push({
+ date: forecasts[i].date,
+ after: forecasts[i].after,
+ proba: forecasts[i].proba
+ })
+ }
+
+ // On traite les forecasts par date
+ if (
+ result["byDate"].filter(function (e) {
+ return e.date === forecasts[i].date
+ }).length == 0
+ ) {
+ result["byDate"].push({
+ date: forecasts[i].date,
+ forecasts: [
+ {
+ member: member,
+ after: forecasts[i].after,
+ proba: forecasts[i].proba
+ }
+ ]
+ })
+ } else {
+ result["byDate"]
+ .filter(function (e) {
+ return e.date === forecasts[i].date
+ })[0]
+ .forecasts.push({
+ member: member,
+ after: forecasts[i].after,
+ proba: forecasts[i].proba
+ })
+ }
+ }
+
+ result["byDate"].sort((a, b) => (a.date > b.date ? 1 : -1))
+
return {
- // now: data.now,
- // sigQty: data.parameter.sigQty,
- // certifs_dossiers: data.wwFile.certifs_dossiers
- data
+ permutations_nb: data.wwResult.permutations_nb,
+ dossiers_nb: data.wwResult.dossiers_nb,
+ certifs_nb: data.wwResult.certifs_nb,
+ forecastsByNames: result["byName"],
+ forecastsByDates: result["byDate"]
}
},
error(err) {
@@ -58,8 +250,24 @@ export default {
}
},
mounted() {
- // Mise à jour du fil d'ariane au chargement
$nuxt.$emit("changeRoute", this.breadcrumb)
+ if (localStorage.previsions) {
+ this.display = localStorage.getItem("previsions")
+ }
}
}
</script>
+
+<style lang="scss" scoped>
+.list-group-item {
+ background: transparent;
+ &:hover {
+ background: rgba(0, 0, 255, 0.075);
+ color: var(--text-primary-color);
+ }
+}
+
+.forecast_date {
+ min-width: 150px;
+}
+</style>
diff --git a/pages/template.vue b/pages/template.vue
index 33c3972c6b002f81b807a45c57770c564cc356f7..5b4306a728f9d89b73753efa1e16d5e49aa5eb3e 100644
--- a/pages/template.vue
+++ b/pages/template.vue
@@ -1,6 +1,6 @@
<template>
<main class="container">
- <h2 class="text-center mb-5 font-weight-light">{{ myvar }}</h2>
+ <h2 class="text-center my-5 font-weight-light">{{ myvar }}</h2>
<code
>For internal links, use
<NuxtLink :to="localePath('path/page')">My link</NuxtLink></code