Commit 280ea71c authored by Lucas Détré's avatar Lucas Détré

scenario & context ok, to do improve explain ui

parent 243828a2
......@@ -45,7 +45,7 @@
<!------------------- RESULTATS --------------->
<div v-else id="simulate-results">
<div v-if="!isLoading" class="mt-5">
<SimulateurResultats :financements="financements" :scenario="scenario"></SimulateurResultats>
<SimulateurResultats :schema="schema" :financements="financements" :financements_eligibles="financements_eligibles" :scenario="scenario" :context="context"></SimulateurResultats>
</div>
<div v-else class="text-center loading-gif">
<img src="./../assets/images/loading.gif" alt="loading...">
......@@ -56,13 +56,13 @@
</template>
<script>
import SimulateurResultats from './SimulateurResultats.vue';
import SimulateurStepFormation from './SimulateurStepFormation.vue';
import SimulateurStepOne from './SimulateurStepOne.vue';
import SimulateurStepTwo from './SimulateurStepTwo.vue';
import SimulateurStepThree from './SimulateurStepThree.vue';
import SimulateurStepFour from './SimulateurStepFour.vue';
import SimulateurStepFive from './SimulateurStepFive';
import SimulateurResultats from './SimulateurResultats.vue';
export default {
name: 'Simulateur',
......@@ -83,7 +83,7 @@
formationNotExists: null,
intitule_formation : null,
//flag permettant de detecter si la formation est eligible à un financement en cas de profil de salarié
financement__accessible_salarie_formation: null,
financement_accessible_salarie_formation: null,
formation : {
numero : null,
},
......@@ -146,13 +146,18 @@
idcc: '',
commune_entreprise_autocomplete: '',
// TO DO input formation
financements : [],
financements: [],
financements_eligibles: [],
scenario: '',
resultats: false,
isLoading: true,
test: [],
schema: {},
}
},
mounted: function () {
this.loadSchema();
},
computed: {
formation_step_completed: function () {
return this.formation.numero != null;
......@@ -172,7 +177,7 @@
if (this.step_one_completed) {
if (this.birthdate.match(/^\s*(3[01]|[12][0-9]|0?[1-9])\/(1[012]|0?[1-9])\/((?:19|20)\d{2})\s*$/gi) != null) {
if (this.situation_inscrit == 1) {
if (this.commune_beneficiaire != undefined && this.niveauscolaire != '') {
if (this.commune_beneficiaire != undefined && this.niveauscolaire != '' && this.niveauscolaire != '-') {
return true;
}
} else if (this.situation_inscrit == 2) {
......@@ -287,6 +292,13 @@
},
methods: {
loadSchema: function () {
fetch('/explore/schema')
.then((response) => response.json())
.then((data) => {
this.schema = data
})
},
simulate: function () {
this.isLoading = true;
if (this.situation_inscrit == 1) {
......@@ -331,19 +343,22 @@
if (this.situation_cpfconnu != 'cpfconnu') this.situation_creditheurescpf = null;
this.$http.post('/financement?eligible=true&context=1&explain=true&scenario=1', this.request).then(response => {
if(this.situation_cpfconnu=='cpfempty') {
if(this.objectIsEmpty(response.body)) {
this.financements = [];
} else {
this.financements = [];
for(var i=0; i<response.body.financements.length; i++){
if(response.body.financements[i].type_lbf!='cpf') this.financements.push(response.body.financements[i]);
this.$http.post('/financement?context=1&explain=true&scenario=1', this.request).then(response => {
if(this.objectIsEmpty(response.body) == false) {
for(var i=0; i<response.body.financements.length-1; i++) {
if(this.situation_cpfconnu=='cpfempty') {
if(response.body.financements[i].type_lbf!='cpf') {
this.financements.push(response.body.financements[i])
if (response.body.financements[i].eligible) this.financements_eligibles.push(response.body.financements[i]);
}
} else {
this.financements = response.body.financements;
if (response.body.financements[i].eligible) this.financements_eligibles.push(response.body.financements[i]);
}
}
} else this.financements = response.body.financements;
}
this.scenario = response.body.scenario;
this.context = response.body.context;
this.isLoading = false;
}).created
this.resultats = true;
......
<template>
<div id="SimulateurContext">
<br>
<table class="table-responsive table table-striped table-hover">
<caption> Contexte de simulation </caption>
<thead>
<tr>
<th>Nom</th>
<th>Valeur</th>
</tr>
</thead>
<tbody>
<tr v-for="(value, key) in this.context" :key="key">
<td> {{ renderLabel(key) }} </td>
<td> {{ renderValue(key,value,schema[key]) }} </td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
name: 'SimulateurContext',
props: ['schema', 'context',],
data: function () {
return {
test: [],
}
},
methods: {
renderValue: function (key, value, schema_tmp) {
schema_tmp = schema_tmp || this.schema[key]
if (schema_tmp['type'] === 'array') return value.map(v => this.renderValue(key, v, schema_tmp['items'])).join(', ')
if (schema_tmp['type'] === "boolean") return value ? 'oui' : 'non'
if (schema_tmp['format'] === 'date') return (new Date(value * 1000)).toLocaleDateString()
if (schema_tmp['enum']) return schema_tmp === undefined ? schema_tmp['enum'][value]+' ('+value+')' : ''
return value
},
renderLabel: function (key) {
return this.schema[key]['label'].charAt(0).toUpperCase() + this.schema[key]['label'].slice(1)
}
}
}
</script>
<style scoped>
td {
width: 50%;
max-width:50%;
}
table{
width:100%;
table-layout:fixed;
}
</style>
<template>
<div id="SimulateurExplain">
<br>
<pre v-html="this.transformed_scenario"/>
<pre> {{ this.financements }} </pre>
</div>
</template>
<script>
export default {
name: 'SimulateurExplain',
props: ['', 'scenario'],
props: ['', 'financements'],
computed : {
/*plainExplanation : function () {
for (var condition in this.explain) {
condition
}
}*/
transformed_scenario: function() {
return this.scenario.replace(/Scénario: Donne-moi un nom/g, 'Scénario :\n')
.replace(/Si /g, '<span class="bold text-dark">Si </span>')
.replace(/ {4}Soit /g, '<span class="bold text-dark">Soit </span>')
.replace(/Quand /g, '<span class="bold text-dark">\nQuand </span>')
.replace(/Scénario: /g, '<span class="bold text-dark">Scénario: </span>')
.replace(/Ou /g, '<span class="bold text-dark">Ou </span>')
.replace(/, ou /g, '<span class="bold text-dark">, ou </span>')
.replace(/Et /g, '<span class="bold text-dark">Et </span>')
.replace(/, et /g, '<span class="bold text-dark">, et </span>')
.replace(/Alors /g, '<span class="bold text-dark">Alors </span>')
.replace(/vaut/g, '<u>vaut</u>')
.replace(/' {4}'/g,'&nbsp&nbsp')
.replace(/(«.+»)/g, "<span class=\"string\">$1</span>")
.replace(/,([^ ])/g, ", $1");
},
}
}
</script>
......
......@@ -13,16 +13,16 @@
<div class="row">
<div class="col-md-12 text-center mb-3">
<h3>
<span v-if="this.financements.length == 0">
<span v-if="this.financements_eligibles.length == 0">
Aucun financement n'est disponible pour ce profil
</span>
<span v-else>
Nous avons trouvé {{this.financements.length }} financement<span v-if="this.financements.length > 1">s</span> pour réaliser votre formation
Nous avons trouvé {{this.financements_eligibles.length }} financement<span v-if="this.financements_eligibles.length > 1">s</span> pour réaliser votre formation
</span>
</h3>
</div>
</div>
<div v-for="(financement, id) in this.financements" :key="id" class="mb-5">
<div v-for="(financement, id) in this.financements_eligibles" :key="id" class="mb-5">
<div id="financements" class="row">
<div class="col-md-12 col-sm-12 droits">
<div data-type="FORMATION FINANCEE" class="row">
......@@ -90,28 +90,62 @@
</div>
<hr class="simulateur-horizontal-separator">
</div>
<span data-toggle="collapse" data-target="#explain" aria-expanded="false" aria-controls="explain" style="cursor:pointer;">
<button class="btn main-button-primary">Voir le scénario de simulation</button>
</span>
<div id="explain" class="collapse">
<div class="row">
<div class="col-md-4">
<span data-toggle="collapse" data-target="#scenario" aria-expanded="false" aria-controls="scenario" style="cursor:pointer;">
<button class="btn main-button-primary">Voir le scénario de simulation</button>
</span>
</div>
<div class="col-md-4">
<span data-toggle="collapse" data-target="#context" aria-expanded="false" aria-controls="context" style="cursor:pointer;">
<button class="btn main-button-primary">Voir le contexte de simulation</button>
</span>
</div>
<div class="col-md-4">
<span data-toggle="collapse" data-target="#explain" aria-expanded="false" aria-controls="explain" style="cursor:pointer;">
<button class="btn main-button-primary">Voir l'explication de simulation</button>
</span>
</div>
<div class="row">
<div class="col-md-12">
<SimulateurExplain :scenario="scenario"></SimulateurExplain>
<div id="scenario" class="collapse">
<div class="row">
<div class="col-md-12">
<SimulateurScenario :scenario="scenario"></SimulateurScenario>
</div>
</div>
</div>
<div id="context" class="collapse">
<div class="row">
<div class="col-md-12">
<SimulateurContext :schema="schema" :context="context"></SimulateurContext>
</div>
</div>
</div>
<div id="explain" class="collapse">
<div class="row">
<div class="col-md-12">
<SimulateurExplain :financements="financements"></SimulateurExplain>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import SimulateurScenario from './SimulateurScenario.vue';
import SimulateurExplain from './SimulateurExplain.vue';
import SimulateurContext from './SimulateurContext.vue';
export default {
name: 'SimulateurResultats',
components: {
SimulateurScenario,
SimulateurExplain,
SimulateurContext
},
props: ['financements', 'scenario', 'isLoading'],
props: ['schema','financements', 'financements_eligibles', 'scenario', 'context', 'isLoading'],
methods: {
newSimulation : function () {
location.reload();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment