Commit 071b4926 authored by Lucas Détré's avatar Lucas Détré

new home page layout

parent f9be7eef
Pipeline #3317 passed with stage
in 1 minute and 29 seconds
...@@ -228,4 +228,8 @@ ...@@ -228,4 +228,8 @@
margin-left: -1em; margin-left: -1em;
} }
a:hover {
color:#384EAA;
}
</style> </style>
...@@ -2,56 +2,70 @@ ...@@ -2,56 +2,70 @@
<div id="Accueil"> <div id="Accueil">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-md-12 mt-3"> <div class="col-md-5 mt-5">
<h2>Bienvenue sur l'outil Trèfle</h2> <h2>Bienvenue sur l'outil Trèfle</h2>
</div> </div>
</div> <div class="col-md-7 mt-5">
<div class="row mt-3">
<div class="col-md-12">
<p>
Trèfle est un outil dédié aux dispositifs de financement des formations.
</p>
<p>
Il recense région par région tous les dispositifs applicables.
</p>
<p> <p>
Trèfle vous permet de consulter ou de modifier un dispositif de financement existant. Trèfle est un outil dédié aux dispositifs de financement des formations.<br>
</p> Il recense région par région tous les dispositifs applicables.<br>
<p> Trèfle vous permet de consulter ou de modifier un dispositif de financement existant.<br>
Les règles enregistrées dans Trèfle alimentent le simulateur de financement de formation disponible sur <a href="https://labonneformation.pole-emploi.fr/" target="_blank">La Bonne Formation</a> et <a href="https://candidat.pole-emploi.fr/formations/accueil" target="_blank">Pole Emploi.fr</a> Les règles enregistrées dans Trèfle alimentent le simulateur de financement de formation disponible sur <a class="link_class" href="https://labonneformation.pole-emploi.fr/" target="_blank">La Bonne Formation</a> et <a class="link_class" href="https://candidat.pole-emploi.fr/formations/accueil" target="_blank">Pole Emploi.fr</a>
</p> </p>
</div> </div>
</div> </div>
<div class="row mt-3"> <div v-if="!isLoading">
<div class="col-md-4 col-sm-12"> <div class="row">
<div id="chart-container"> <div class="col-md-6">
<ModificationChart @on-receive="update" :values="modification_chart_datas.datasets" :labels="modification_chart_datas.labels"></ModificationChart> <h4>
<strong>
{{ Object.keys(modification_list).length }}
</strong>
modifications en cours de validation
</h4>
<span style="color:#384EAA">
Cliquez sur le graphique pour afficher les modifications par région
</span>
</div>
<div class="col-md-6">
<!--<a href="referentiel" class="main-button-primary btn float-right">Accédez au référentiel de règles</a>-->
</div>
</div>
</div>
<div v-else class="text-center loading-gif">
<img src="./../assets/images/loading.gif" alt="loading...">
</div>
<div class="row">
<div class="col-md-12 mt-5">
<div id="chart-container" class="text-center">
<ModificationChart width="1200" height="200" @on-receive="update" :values="modification_chart_datas.datasets" :labels="modification_chart_datas.labels"></ModificationChart>
</div> </div>
</div> </div>
<div v-if="!isLoading"> <div class="col-md-12">
<div class="col-md-8 col-sm-12"> <div v-if="!isUpdateLoading">
<div id="modification_list"> <div id="modification_list">
<div v-if="selected_rule"> <div v-if="selected_rule">
<h5> Modification(s) de la règle en cours de validation {{ selected_rule }} ({{ Object.keys(selected_modification_list).length }}) </h5> <h5>
<strong>
{{ Object.keys(selected_modification_list).length }}
</strong>
Modification(s) de la règle
<strong>
{{ selected_rule }}
</strong>
en cours de validation
</h5>
<ul v-for="modification in selected_modification_list" :key="modification.id" class="dash"> <ul v-for="modification in selected_modification_list" :key="modification.id" class="dash">
<li> <li>
<a :href="'referentiel#'+selected_rule+'.rules#modified'"> {{ modification.title }} </a> <a :href="'referentiel#'+selected_rule+'.rules#modified'" class="link_class"> {{ modification.title }} </a>
</li>
</ul>
</div>
<div v-else>
<h5> Toutes les modifications en cours de validation ({{ Object.keys(modification_list).length }})</h5>
<ul v-for="modification in modification_list" :key="modification.id" class="dash">
<li>
<a :href="'referentiel#'+modification.file.split('/').pop().split('.')[0]+'.rules#modified'"> {{ modification.title }} - ({{ modification.file.split('/').pop().split('.')[0] }})</a>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
</div> <div v-else class="text-center loading-gif" style="padding-top:0;">
<div v-else class="text-center loading-gif"> <img src="./../assets/images/loading.gif" alt="loading...">
<img src="./../assets/images/loading.gif" alt="loading..."> </div>
</div> </div>
</div> </div>
</div> </div>
...@@ -73,6 +87,7 @@ ...@@ -73,6 +87,7 @@
selected_rule: '', selected_rule: '',
test:0, test:0,
isLoading: true, isLoading: true,
isUpdateLoading: false,
} }
}, },
computed : { computed : {
...@@ -125,13 +140,16 @@ ...@@ -125,13 +140,16 @@
}, },
update (data) { update (data) {
this.selected_rule = data.value this.selected_rule = data.value
this.isUpdateLoading=true;
this.$http this.$http
.get('/source/modified?branch='+encodeURIComponent(this.selected_rule)) .get('/source/modified?branch='+encodeURIComponent(this.selected_rule))
.then(response => { .then(response => {
this.selected_modification_list = response.body; this.selected_modification_list = response.body;
this.isUpdateLoading=false;
return true; return true;
}, response => { }, response => {
if(response.status == 500) this.selected_modification_list = {}; if(response.status == 500) this.selected_modification_list = {};
this.isUpdateLoading=false;
return false; return false;
}) })
} }
...@@ -141,7 +159,11 @@ ...@@ -141,7 +159,11 @@
<style> <style>
#chart-container { #chart-container {
width: 20rem; width: 40rem;
height: 20rem; height: 20rem;
} }
.link_class {
cursor:pointer;
color:#384EAA;
}
</style> </style>
...@@ -6,11 +6,6 @@ ...@@ -6,11 +6,6 @@
export default { export default {
extends: Pie, extends: Pie,
props: ["values", 'labels'], props: ["values", 'labels'],
data : function () {