Commit a07be122 authored by Jérémy GAILLARD's avatar Jérémy GAILLARD
Browse files

feat: routing et refactoring qui en découle

parent de24b0a0
......@@ -11267,6 +11267,11 @@
}
}
},
"vue-router": {
"version": "3.1.6",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.1.6.tgz",
"integrity": "sha512-GYhn2ynaZlysZMkFE5oCHRUTqE8BWs/a9YbKpNLi0i7xD6KG1EzDqpHQmv1F5gXjr8kL5iIVS8EOtRaVUEXTqA=="
},
"vue-style-loader": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",
......
......@@ -10,7 +10,8 @@
"dependencies": {
"core-js": "^3.6.4",
"vue": "^2.6.11",
"vue-carousel": "^0.18.0"
"vue-carousel": "^0.18.0",
"vue-router": "^3.1.6"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.2.0",
......
......@@ -180,7 +180,7 @@
<button id="submitButton" @click="submit()" :disabled='!canSubmit'>Envoyer le formulaire</button>
</div>
<div>
<button id="returnButton" @click="page = $emit('changePage', 'list')">Retour</button>
<router-link tag='button' id="returnButton" :to="{ name: 'home' }" @click.native="pageChange()">Retour</router-link>
</div>
</div>
</div>
......@@ -473,6 +473,9 @@ export default {
this.localisation.push(event.target.value);
}
}
},
pageChange: function() {
window.scrollTo(0, 0);
}
}
};
......
......@@ -6,24 +6,15 @@
<p> pendant le confinement ! </p>
</div>
<div class="right">
<div class="radio-toolbar">
<input type="radio" id="Accueil" value="Accueil" @change="page = $emit('changePageHome')" name="menu" v-model="menu_filter">
<label for="Accueil">
<p>Accueil</p>
</label>
</div>
<div class="radio-toolbar">
<input type="radio" id="Rechercher" value="Rechercher" @change="page = $emit('changePageList')" name="menu" v-model="menu_filter">
<label for="Rechercher">
<p>Rechercher</p>
</label>
</div>
<div class="radio-toolbar">
<input type="radio" id="Proposer" value="Proposer" @change="page = $emit('changePageForm')" name="menu" v-model="menu_filter">
<label for="Proposer">
<p>Publier</p>
</label>
</div>
<div class="nav-toolbar">
<router-link :to="{ name: 'home' }">Accueil</router-link>
</div>
<div class="nav-toolbar">
<router-link :to="{ name: 'list', query: { cat: '1' } }">Rechercher</router-link>
</div>
<div class="nav-toolbar">
<router-link :to="{ name: 'form' }">Publier</router-link>
</div>
</div>
</header>
</template>
......@@ -46,13 +37,16 @@ header {
padding: 0.5% 10% 0.2% 10%;
}
p {
a {
float:left;
font-size: 0.9vw;
font-weight: bold;
margin: 1% 3%;
color: black;
text-decoration: none;
outline: 0;
}
.logo_left{
max-width: 100%;
float: left;
......@@ -65,39 +59,20 @@ p {
justify-content: flex-end;
}
[type=radio] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
label {
background-color: var(--very-light-grey);
}
.right p {
cursor:pointer;
font-weight: bold;
}
.radio-toolbar{
.nav-toolbar{
margin: 0 25%;
}
.radio-toolbar input[type="radio"] {
display: none;
}
.radio-toolbar:hover label{
a:hover{
color: var(--medium-red);
}
.radio-toolbar input[type="radio"]:checked+label {
.router-link-exact-active {
color: var(--medium-red);
}
.radio-toolbar input[type="radio"]:checked+label p{
border-bottom: 2px solid var(--medium-red);
}
......@@ -112,12 +87,12 @@ label {
display: none;
}
.radio-toolbar{
.nav-toolbar{
margin: 0 10%;
}
p {
a {
font-size: 3vw;
}
}
</style>
\ No newline at end of file
</style>
......@@ -3,50 +3,18 @@
<div class="home">
<p class="subtitle"> Rechercher des solutions pour </p>
<div class="categories">
<div class="categorie">
<img src="../static/Categorie_illustration527.svg" alt="Courses, manger local">
<div class="categorie" v-for='(k, v) in choices("categorie")' :key="k">
<img :src="getImage(v)" :alt="k">
<div class="categorie_icon">
<img src="../../public/Courses-MangerLocal_1.svg">
<p> Cartes des points de ventes, <br /> marchés solidaires, <br /> livraisons de paniers... </p>
<img :src="getIcon(v)">
<p v-html='getLabel(v)'></p>
</div>
<button @click="page = $emit('seeInitiative')"> Voir les initiatives </button>
</div>
<div class="categorie">
<img src="../static/Categorie_illustration529.svg" alt="Avec les enfants à la maison">
<div class="categorie_icon">
<img src="../../public/Scolarité.svg">
<p> Des ressources éducatives, <br /> des conseils, <br />des communautés... </p>
</div>
<button @click="page = $emit('seeInitiative')"> Voir les initiatives </button>
</div>
<div class="categorie">
<img src="../static/Categorie_illustration530.svg" alt="Solidarités, lien social et professionnel">
<div class="categorie_icon">
<img src="../../public/Emploi.svg">
<p> Groupes d'entraide, <br /> aides aux entreprises, <br /> solidarités... </p>
</div>
<button @click="page = $emit('seeInitiative')"> Voir les initiatives </button>
</div>
<div class="categorie">
<img src="../static/Categorie_illustration531.svg" alt="Savoirs, culture, activités physique">
<div class="categorie_icon">
<img src="../../public/FormationCultureActivPhysique.svg">
<p> Contenus culturels, <br /> idées d'activités, <br /> conseils... </p>
</div>
<button @click="page = $emit('seeInitiative')"> Voir les initiatives </button>
</div>
<div class="categorie">
<img src="../static/Categorie_illustration528.svg" alt="Aide aux producteurs (alimentaire)">
<div class="categorie_icon">
<img src="../../public/producers.svg">
<p> Cartes des points de ventes, <br /> marchés solidaires, <br /> livraisons de paniers... </p>
</div>
<button @click="page = $emit('seeInitiative')"> Voir les initiatives </button>
<router-link tag='button' :to="{ name: 'list', query: {cat: v} }" @click.native="pageChange()"> Voir les initiatives </router-link>
</div>
<div class="categorie add_initiative">
<p class="subsubtitle"> Vous avez lancé une initiative ? </p>
<p> Vous en connaissez une <br /> qui n'apparait pas sur le site ? <br /><br /> Aidez nous à répertorier <br />toutes les initiatives <br /> sur la Métropole ! </p>
<button @click="page = $emit('addInitiative')"> <span class="plus"> + </span> <span> publier une initiative</span> </button>
<router-link tag='button' :to="{ name: 'form' }" @click.native="pageChange()"> <span class="plus"> + </span> <span> publier une initiative</span> </router-link>
</div>
</div>
</div>
......@@ -79,6 +47,61 @@
</template>
<script>
import Store from '../utils/store.js'
const IMAGE_PATH = {
"1": "/Categorie_illustration527.svg",
"2": "/Categorie_illustration529.svg",
"3": "/Categorie_illustration530.svg",
"4": "/Categorie_illustration531.svg",
"5": "/Categorie_illustration528.svg"
};
const ICON_PATH = {
"1": "/Courses-MangerLocal_1.svg",
"2": "/Scolarité.svg",
"3": "/Emploi.svg",
"4": "/FormationCultureActivPhysique.svg",
"5": "/producers.svg"
};
const LABELS = {
"1": "Cartes des points de ventes, <br /> marchés solidaires, <br /> livraisons de paniers...",
"2": "Des ressources éducatives, <br /> des conseils, <br />des communautés...",
"3": "Groupes d'entraide, <br /> aides aux entreprises, <br /> solidarités...",
"4": "Contenus culturels, <br /> idées d'activités, <br /> conseils...",
"5": "Cartes des points de ventes, <br /> marchés solidaires, <br /> livraisons de paniers..."
};
export default {
name: 'Home',
data: function() {
return {
store: Store
}
},
methods: {
pageChange: function() {
window.scrollTo(0, 0);
},
choices: function(field) {
return this.store.metadata["fields"][field]["options"]["choices"];
},
getImage(id) {
return IMAGE_PATH[id];
},
getIcon(id) {
return ICON_PATH[id];
},
getLabel(id) {
return LABELS[id];
}
}
}
</script>
<style scoped>
.home{
background-color: var(--almost-white);
......@@ -185,8 +208,8 @@ button{
}
a{
text-decoration: none;
text-decoration: none;
color: white;
}
</style>
\ No newline at end of file
</style>
<template>
<div>
<Header @changePageHome="pageChange('home')" @changePageList="pageChange('list')" @changePageForm="pageChange('form')"></Header>
<News v-if="store.news !== null" :news="news"></News>
<Title v-if='page === "list" || page === "home"'></Title>
<transition name="fade">
<div v-if='page === "home"'>
<Home @seeInitiative="pageChange('list')" @addInitiative="pageChange('form')"/>
<Header/>
<News v-if="store.news !== null" :news="news"/>
<Title v-if='page === "list" || page === "home"'/>
<div v-if='subtitle' class="notice_header">
<h2> {{subtitle}} </h2>
</div>
</transition>
<div v-if='store.metadata !== null && store.services !== null'>
<transition name="fade">
<ServiceList v-if='page === "list"'/>
</transition>
<!-- Form-->
<transition name="fade">
<div v-if='page === "form"'>
<div class="notice_header">
<div class="left_back" @click='page = "list";'>
<img src="../static/arrow_back.svg" alt="Flèche arrière">
<button >Revenir</button>
</div>
<h2> Proposer une initiative </h2>
</div>
<Form v-if='page === "form"' :mode='"new"' @changePage="pageChange('list')"/>
</div>
<router-view class="view"></router-view>
</transition>
</div>
......@@ -33,73 +16,15 @@
<p>Chargement...</p>
</div>
<!-- Notice-->
<transition name="fade">
<div v-if='page === "notice"'>
<div class="notice_header">
<div class="left_back" @click='page = "list"'>
<img src="../static/arrow_back.svg" alt="Flèche arrière">
<button>Revenir</button>
</div>
<h2> Mentions légales </h2>
</div>
<Notice/>
</div>
</transition>
<!-- Démarche -->
<transition name="fade">
<div v-if='page === "demarche"'>
<div class="notice_header">
<div class="left_back" @click='page = "list"'>
<img src="../static/arrow_back.svg" alt="Flèche arrière">
<button >Revenir</button>
</div>
<h2> Une démarche collaborative </h2>
</div>
<Demarche/>
</div>
</transition>
<!-- CGU -->
<transition name="fade">
<div v-if='page === "cgu"'>
<div class="notice_header">
<div class="left_back" @click='page = "list"'>
<img src="../static/arrow_back.svg" alt="Flèche arrière">
<button >Revenir</button>
</div>
<h2> Conditions Générales d'Utilisation </h2>
</div>
<CGU/>
</div>
</transition>
<!-- Charte -->
<transition name="fade">
<div v-if='page === "charte"'>
<div class="notice_header">
<div class="left_back" @click='page = "list"'>
<img src="../static/arrow_back.svg" alt="Flèche arrière">
<button >Revenir</button>
</div>
<h2> Charte des services accessibles sur la plateforme aide-covid.grandlyon.com </h2>
</div>
<Charte/>
</div>
</transition>
<!-- Footer-->
<footer>
<Stayathome v-if='page !== "home"'/>
<div class="bottom">
<div class="bottom_left">
<button @click='pageChange("demarche"); stats("ClickDemarche")'>Démarche</button>
<button @click='pageChange("notice"); stats("ClickNotice")'>Mentions légales</button>
<button @click='pageChange("cgu"); stats("ClickCGU")'>Conditions Générales d'Utilisation</button>
<button @click='pageChange("charte"); stats("ClickCharte")'>Charte</button>
<router-link tag="button" :to="{ name: 'demarche' }" @click.native='pageChange();stats("ClickDemarche")'>Démarche</router-link>
<router-link tag="button" :to="{ name: 'notice' }" @click.native='pageChange();stats("ClickNotice")'>Mentions légales</router-link>
<router-link tag="button" :to="{ name: 'cgu' }" @click.native='pageChange();stats("ClickCGU")'>Conditions Générales d'Utilisation</router-link>
<router-link tag="button" :to="{ name: 'charte' }" @click.native='pageChange();stats("ClickCharte")'>Charte</router-link>
<button> <a href="mailto:plateformeinitiativescovid19@grandlyon.com">Contact / Signaler une erreur</a></button>
</div>
<div class="bottom_right">
......@@ -114,33 +39,26 @@
<script>
import { getItems, getCollection } from "../utils/requests"
import ServiceList from './ServiceList.vue'
import Form from './Form.vue'
import Notice from './Notice.vue'
import Demarche from './Demarche.vue'
import CGU from './CGU.vue'
import Charte from './Charte.vue'
import Title from './Title.vue'
import Header from './Header.vue'
import News from './News.vue'
import Title from './Title.vue'
import Stayathome from './Stayathome.vue'
import Home from './Home.vue'
import Store from '../utils/store.js'
const SUBTITLES = {
"notice": "Mentions légales",
"demarche": "Une démarche collaborative",
"cgu": "Conditions Générales d'Utilisation",
"charte": "Charte des services accessibles sur la plateforme aide-covid.grandlyon.com"
}
export default {
name: 'MainPage',
components: {
ServiceList,
Form,
Notice,
Demarche,
CGU,
Charte,
Header,
News,
Title,
Stayathome,
Home,
Title,
Header,
News,
Stayathome
},
data: function() {
return {
......@@ -151,8 +69,15 @@ export default {
table: Store.table,
table_news: Store.table_news,
services: Store.services,
news: Store.news,
page: "home"
news: Store.news
}
},
computed: {
page: function() {
return this.$route.name;
},
subtitle: function() {
return SUBTITLES[this.page];
}
},
created: function() {
......@@ -174,8 +99,7 @@ export default {
);
},
methods: {
pageChange: function(pageName) {
this.page = pageName;
pageChange: function() {
window.scrollTo(0, 0);
},
stats: function(actionName) {
......
......@@ -5,19 +5,19 @@
<!-- Bloc correspondant au choix de la catégorie (version web)-->
<div class="categories">
<div class="radio-toolbar" v-for='(k, v) in choices("categorie")' :key="k">
<input type="radio" :id="k" name="filtre" :value="v" @change='filterChange(); stats(k)' v-model="cat_filter">
<router-link tag="div" :to="{ name: 'list', query: {cat: v} }" class="radio-toolbar" v-for='(k, v) in choices("categorie")' :key="k">
<input type="radio" :id="k" name="filtre" :value="v" @change='filterChange(); stats(k)' v-model="cat">
<label :for="k">
<img :src="`${publicPath}${imagePath(v)}`" :alt="k">
<p>{{k}}</p>
</label>
</div>
</router-link>
</div>
<!-- Bloc correspondant au choix de la catégorie (version mobile) -->
<div class="categories_smartphone filter">
<select @change='filterChange()' v-model="cat_filter">
<option v-for='(k, v) in choices("categorie")' :value='v' :key='v'>{{k}}</option>
<select @change='filterChange()'>
<router-link tag="option" :to="{ name: 'list', query: {cat: v} }" v-for='(k, v) in choices("categorie")' :value='v' :key='v'>{{k}}</router-link>
</select>
</div>
......@@ -56,40 +56,40 @@
</div>-->
<!-- Filtres spécifiques par catégorie -->
<div v-if='cat_filter==="1"' class="filter">
<div v-if='cat==="1"' class="filter">
<p>Comment je peux commander ?</p>
<select @change='filterChange()' v-model="pai_filter">
<option v-for='(k, v) in choices("mode_de_paiement")' :value='v' :key='v'>{{k}}</option>
</select>
</div>
<div v-if='cat_filter==="1"' class="filter">
<div v-if='cat==="1"' class="filter">
<p>Type de produits ?</p>
<select @change='filterChange()' v-model="pro_filter">
<option v-for='(k, v) in choices("type_de_produit")' :value='v' :key='v'>{{k}}</option>
</select>
</div>
<div v-if='cat_filter==="1"' class="filter">
<div v-if='cat==="1"' class="filter">
<p>Comment récupérer ?</p>
<select @change='filterChange()' v-model="liv_filter">
<option value=''>Sur place ou à domicile</option>
<option v-for='(k, v) in choices("modalite_de_livraison")' :value='v' :key='v'>{{k}}</option>
</select>
</div>
<div v-if='cat_filter==="2"' class="filter">
<div v-if='cat==="2"' class="filter">
<p>Type de contenu ?</p>
<select @change='filterChange()' v-model="con_filter">
<option value=''>Tous</option>
<option v-for='(k, v) in choices("type_contenu")' :value='v' :key='v'>{{k}}</option>
</select>
</div>
<div v-if='cat_filter==="3"' class="filter">
<div v-if='cat==="3"' class="filter">
<p>Type de domaine ?</p>
<select @change='filterChange()' v-model="sol_filter">
<option value=''>Tous</option>
<option v-for='(k, v) in choices("type_de_domaine_solidarite")' :value='v' :key='v'>{{k}}</option>
</select>
</div>
<div v-if='cat_filter==="4"' class="filter">
<div v-if='cat==="4"' class="filter">
<p>Type de domaine ?</p>
<select @change='filterChange()' v-model="sav_filter">
<option value=''>Tous</option>
......@@ -132,40 +132,40 @@
<option v-for='(k, v) in choices("type_contenu")' :value='v' :key='v'>{{k}}</option>
</select>
</div>-->
<div v-if='cat_filter==="1"' class="filter">
<div v-if='cat==="1"' class="filter">
<p>Comment je peux commander ?</p>
<select @change='filterChange()' v-model="pai_filter">
<option v-for='(k, v) in choices("mode_de_paiement")' :value='v' :key='v'>{{k}}</option>
</select>
</div>
<div v-if='cat_filter==="1"' class="filter">
<div v-if='cat==="1"' class="filter">
<p>Type de produits ?</p>
<select @change='filterChange()' v-model="pro_filter">
<option v-for='(k, v) in choices("type_de_produit")' :value='v' :key='v'>{{k}}</option>
</select>
</div>
<div v-if='cat_filter==="1"' class="filter">
<div v-if='cat==="1"' class="filter">
<p>Comment récupérer ?</p>
<select @change='filterChange()' v-model="liv_filter">
<option value=''>Sur place ou à domicile</option>
<option v-for='(k, v) in choices("modalite_de_livraison")' :value='v' :key='v'>{{k}}</option>
</select>
</div>
<div v-if='cat_filter==="2"' class="filter">
<div v-if='cat==="2"' class="filter">
<p>Type de contenu</p>
<select @change='filterChange()' v-model="con_filter">
<option value=''>Tous</option>
<option v-for='(k, v) in choices("type_contenu")' :value='v' :key='v'>{{k}}</option>
</select>
</div>
<div v-if='cat_filter==="3"' class="filter">
<div v-if='cat==="3"' class="filter">
<p>Type de domaine ?</p>
<select @change='filterChange()' v-model="sol_filter">
<option value=''>Tous</option>
<option v-for='(k, v) in choices("type_de_domaine_solidarite")' :value='v' :key='v'>{{k}}</option>
</select>
</div>
<div v-if='cat_filter==="4"' class="filter">
<div v-if='cat==="4"' class="filter">
<p>Type de domaine ?</p>
<select @change='filterChange()' v-model="sav_filter">
<option value=''>Tous</option>
......@@ -180,11 +180,11 @@
<p v-else>Aucune initiative trouvée pour les filtres sélectionnés</p>-->
<!-- Bandeaux spécifiques en haut des résultats -->
<div v-if='cat_filter==="1"' class="producers">
<div v-if='cat==="1"' class="producers">
<p class="producers_texte"> <b> Vous avez besoin d'aide ou d'un renseignement ? </b> (de 9h à 12h30 et de 14h à 16h) </p>
<a class="contact"> 04 26 99 33 99</a>
</div>
<div v-if='cat_filter==="5"' class="producers">
<div v-if='cat==="5"' class="producers">