Commit 3f4ddaaf authored by David Foucher's avatar David Foucher

Merge branch 'new-simulator' into 'master'

add new pages scenarios and schema

See merge request !47
parents 44cd980a 67ca3ad1
Pipeline #2934 passed with stages
in 10 minutes and 44 seconds
......@@ -7,6 +7,7 @@
<router-view name="financements"/>
<router-view name="simulateur"/>
<router-view name="scenarios"/>
<router-view name="schema"/>
<router-view name="outils"/>
</div>
</div>
......
......@@ -46,7 +46,6 @@
</span>
</router-link>
</li>
<!--
<li class="nav-item">
<router-link to="/scenarios" name="scenarios" class="nav-link">
<svg class="nav-icon">
......@@ -56,7 +55,17 @@
Scénarios
</span>
</router-link>
</li>-->
</li>
<li class="nav-item">
<router-link to="/schema" name="schema" class="nav-link">
<svg class="nav-icon">
<use xlink:href="#schema_icon" />
</svg>
<span class="nav-label">
Schéma
</span>
</router-link>
</li>
<li class="nav-item">
<router-link to="/outils" name="outils" target="_blank" class="nav-link">
<svg class="nav-icon">
......@@ -91,10 +100,13 @@
<path d="M17,14.0002 L3,14.0002 C2.45,14.0002 2,13.5502 2,13.0002 L2,5.0002 C2,4.4502 2.45,4.0002 3,4.0002 L17,4.0002 C17.55,4.0002 18,4.4502 18,5.0002 L18,13.0002 C18,13.5502 17.55,14.0002 17,14.0002 M18,2.0002 L10,2.0002 L8.59,0.5902 C8.21,0.2102 7.7,0.0002 7.17,0.0002 L2,0.0002 C0.9,0.0002 0.01,0.9002 0.01,2.0002 L0,14.0002 C0,15.1002 0.9,16.0002 2,16.0002 L18,16.0002 C19.1,16.0002 20,15.1002 20,14.0002 L20,4.0002 C20,2.9002 19.1,2.0002 18,2.0002"></path>
</symbol>
<symbol id="schema_icon" x="0px" y="0px" viewBox="0 0 24.92 24.92">
<path d="M20.226,14.389L13.65,10.53h3.672V0H6.791v10.529h3.822l-5.949,3.859H0.33V24.92h10.529V14.389h-4.03l5.227-3.404 l6.045,3.404h-4.042V24.92H24.59V14.389H20.226z M8.758,2.047h6.596v6.598H8.758V2.047z M8.894,16.436v6.598H2.297v-6.598H8.894z M22.623,23.033h-6.596v-6.598h6.596V23.033z"/>
</symbol>
<symbol id="outils_icon" width="23px" height="25px" viewBox="0 0 30 30">
<path fill="none" d="M0 0h24v24H0V0z"/><path d="M22.61 18.99l-9.08-9.08c.93-2.34.45-5.1-1.44-7C9.79.61 6.21.4 3.66 2.26L7.5 6.11 6.08 7.52 2.25 3.69C.39 6.23.6 9.82 2.9 12.11c1.86 1.86 4.57 2.35 6.89 1.48l9.11 9.11c.39.39 1.02.39 1.41 0l2.3-2.3c.4-.38.4-1.01 0-1.41zm-3 1.6l-9.46-9.46c-.61.45-1.29.72-2 .82-1.36.2-2.79-.21-3.83-1.25C3.37 9.76 2.93 8.5 3 7.26l3.09 3.09 4.24-4.24-3.09-3.09c1.24-.07 2.49.37 3.44 1.31 1.08 1.08 1.49 2.57 1.24 3.96-.12.71-.42 1.37-.88 1.96l9.45 9.45-.88.89z"/>
</symbol>
</svg>
</div>
</div>
......
<template>
<div id="Scenarios">
<div class="container">
<div class="row">
<div class="col-md-6">
<ul>
<li v-for="filter in filterList" :key="filter.id">
<a href="#" :class="{selected: filters[filter].selected}" :title="filter" @click="selectToggle(filters[filter])">
{{ filter }}
</a>
</li>
</ul>
<div v-if="nbSelected">
<ul>
<li v-for="scenario in activeScenario" :key="scenario.id">
<h4>
{{ scenario.name }}
<a :href="'https://framagit.org/ybon/trefle/tree/master/'+scenario.filename+'#L'+scenario.line" target=_blank>
<i class=icon>edit</i>
</a>
</h4>
</li>
</ul>
</div>
</div>
<div class="col-md-6">
<div v-if="!nbSelected">
<p>Sélectionner au moins une catégorie dans le menu.</p>
<div id="scenarios-main-div">
<div v-if="!this.isLoading">
<div class="container ml-5 mr-2">
<div class="row">
<div :class="classCollapsedMenu">
<div class="mb-3 pull-right">
<button @click="collapsed = !collapsed" type="button" class="btn main-button mb-5">
<span v-show="collapsed"><span class="chevron-toggle">&#8594;</span> Ouvrir le panneau</span>
<span v-show="!collapsed"><span class="chevron-toggle">&#8592;</span> Fermer le panneau</span>
</button>
</div>
<div v-show="!collapsed">
<h2 class="mb-5">Scénarios</h2>
<ul>
<li v-for="(filter, id) in filterList" :key="id">
<a href="#" :class="{selected: filters[filter].selected}" @click="setFilter(filters[filter]);">
{{ filter.charAt(0).toUpperCase() + filter.slice(1) }}
</a>
</li>
</ul>
</div>
</div>
<div v-show="!collapsed" :class="classCollapsedSeparator">
<hr class="referentiel-vertical-separator">
</div>
<div :class="classCollapsedContent">
<div v-if="this.show">
<ul>
<li v-for="(scenario, id) in this.activeScenarios" :key="id">
<h4>
{{ scenario.name.toUpperCase() }}
<!--<a :href="'https://framagit.org/ybon/trefle/tree/master/'+scenario.filename+'#L'+scenario.line" target=_blank>
<i class=icon>edit</i>
</a>-->
</h4>
<pre v-html="transform(scenario.raw)"/>
<br><br>
</li>
</ul>
</div>
<div v-else>
<h2>Sélectionnez une catégorie dans le menu.</h2>
</div>
</div>
</div>
</div>
</div>
<div v-else class="text-center loading-gif">
<img src="./../assets/images/loading.gif" alt="loading...">
</div>
</div>
</div>
</template>
......@@ -42,23 +63,29 @@
selected_filters: [],
filters: [],
toggled: "",
collapsed: false,
isLoading: true,
}
},
computed: {
activeScenario: function(){
var activeScenario = []
show: function () {
return (this.nbSelected !== '')
},
activeScenarios: function(){
var activeScenarios = []
var scenarios = this.scenarios
this.filterList.forEach(function(tag){
for (var i=0; i< this.selected_filters.length; i++) {
var tag = this.selected_filters[i].tag
scenarios.forEach(function(scenario){
var idx = scenario.tags.indexOf(tag)
if(idx > -1 && !(idx in activeScenario)) activeScenario[idx]=scenario
if (scenario.tags.find(scenario_tag => scenario_tag == tag) != undefined)
activeScenarios.push(scenario);
})
})
return activeScenario
}
return activeScenarios
},
filterList: function(){
var filterList = []
var scenarios = this.scenarios
var scenarios = this.activeScenarios
Object.values(this.filters).forEach(function(filter){
if(filter.selected){
scenarios.forEach(function(scenario){
......@@ -84,10 +111,19 @@
},
nbSelected: function(){
return Object.values(this.selectedItem).reduce(function(cnt, item){ if(item.selected) cnt=cnt+1; return cnt},0);
}
//active: function(){
// return Object.values(this.filters).reduce(function(cnt, item){ if(item.selected) cnt=cnt+1; return cnt},0);
//}
},
classCollapsedContent: function () {
if(this.collapsed) return "col-md-12 col-sm-12 col-xs-12";
return "col-md-8 col-sm-12 col-xs-12";
},
classCollapsedMenu: function () {
if(this.collapsed) return "col-md-0 col-sm-0 col-xs-0";
return "col-md-3 col-sm-12 col-xs-12";
},
classCollapsedSeparator: function () {
if(this.collapsed) return "col-md-0 col-sm-0 col-xs-0";
return "col-md-1 col-sm-0 col-xs-0";
},
},
created: function () {
this.load();
......@@ -95,32 +131,62 @@
methods: {
load: function () {
this.$http.get('/explore/scenarios').then(response => {
this.scenarios = response.body
this.selected_filters = decodeURIComponent(this.$route.params.filters).split(',')
if(this.filters) {
this.active = []
}
for (var i = 0, scenario; i < this.scenarios.length; i++) {
scenario = this.scenarios[i]
if (scenario.tags.length>0) {
for (var k = 0; k < scenario.tags.length; k++) {
if (this.filters.indexOf(scenario.tags[k]) === -1)
{
var isSelected=(this.selected_filters.indexOf(scenario.tags[k]) > -1)
this.filters.push({tag:scenario.tags[k], selected:isSelected})
}
this.scenarios = response.body
this.isLoading = false;
if(this.filters) {
this.active = []
}
for (var i = 0, scenario; i < this.scenarios.length; i++) {
scenario = this.scenarios[i]
if (scenario.tags.length>0) {
for (var k = 0; k < scenario.tags.length; k++) {
if (this.filters.indexOf(scenario.tags[k]) === -1)
{
var isSelected=(this.selected_filters.indexOf(scenario.tags[k]) > -1)
this.filters.push({tag:scenario.tags[k], selected:isSelected})
}
}
this.active.push(scenario)
}
this.filters.sort((a, b) => a.tag.localeCompare(b.tag))
this.filters = this.filters.reduce(function(filters, item){ filters[item.tag]=item; return filters }, {})
this.active.push(scenario)
}
this.filters.sort((a, b) => a.tag.localeCompare(b.tag))
this.filters = this.filters.reduce(function(filters, item){ filters[item.tag]=item; return filters }, {})
}).created;
},
selectToggle: function(item){
item.selected = !item.selected
this.$router.append('test')
}
setFilter: function (filter) {
var index = this.selected_filters.indexOf(filter)
if (index > -1) this.selected_filters.splice(index, 1)
else this.selected_filters.push(filter)
filter.selected = !filter.selected
},
transform: function(data) {
return data
.replace(/Si /g, '<span class="bold text-dark">Si </span>')
.replace(/Soit /g, '<span class="bold text-dark">Soit </span>')
.replace(/Quand /g, '<span class="bold text-dark">Quand </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(/(#.+)/g, "<em class=\"comment\">$1</em>")
.replace(/appliquer les règles «([^»]+?)(.rules)?»/g, 'appliquer les règles « <a href="'+this.rulePath+'#$1.rules" class="btn main-button" title="Ouvrir les règles" style="display:inline-block">$1</a> »')
.replace(/(«.+»)/g, "<span class=\"string\">$1</span>")
.replace(/,([^ ])/g, ", $1");
},
},
}
</script>
<style scoped>
#scenarios-main-div {
padding-top: 3rem;
}
.selected {
font-weight: bold;
}
</style>
<template>
<div id="Schema">
<div id="schema-main-div">
<div v-if="!this.isLoading">
<div class="container ml-5 mr-2">
<div class="row">
<div :class="classCollapsedMenu">
<div class="mb-3 pull-right">
<button @click="collapsed = !collapsed" type="button" class="btn main-button mb-5">
<span v-show="collapsed"><span class="chevron-toggle">&#8594;</span> Ouvrir le panneau</span>
<span v-show="!collapsed"><span class="chevron-toggle">&#8592;</span> Fermer le panneau</span>
</button>
</div>
<div v-show="!collapsed">
<h2 class="mb-5">Catégories</h2>
<ul>
<li v-for="(category_value, id) in categories" :key="id">
<a href="#" :class="{selected: category==id}" @click="setCategory(id);">
{{ category_value.charAt(0).toUpperCase() + category_value.slice(1) }}
</a>
</li>
</ul>
</div>
</div>
<div v-show="!collapsed" :class="classCollapsedSeparator">
<hr class="schema-vertical-separator">
</div>
<div :class="classCollapsedContent">
<div v-if="this.show">
<h2 class="mb-5">{{ this.categories[category] }} </h2>
<dl v-for="(schema_row,id) in this.filteredSchema" :key="id">
<dt v-if="schema_row.label"> {{schema_row.label.charAt(0).toUpperCase() + schema_row.label.slice(1)}} <a :href="'#schema/'+id" class=anchor>#</a></dt>
<dt v-else> {{ schema_row.description }} <a :href="'#schema/'+id" class=anchor>#</a></dt>
<dd v-if="schema_row.value"><strong>Valeur constante :</strong> {{ formatValue(schema_row.value) }}</dd>
<dd v-if="schema_row.description"><strong>Description :</strong> {{schema_row.description}}</dd>
<dd v-if="schema_row.source"><strong>Source :</strong> {{schema_row.source}}</dd>
<dd v-if="schema_row.xpath"><strong>LHEO :</strong> {{schema_row.xpath}}</dd>
<dd v-if="schema_row.url"><strong>Ressource externe :</strong> <a :href="schema_row.url">{{ schema_row.url }}</a></dd>
<dd v-if="schema_row.enum">
<strong>Valeurs possibles</strong>
<ul>
<li v-for="(enum_label, enum_key) in schema_row.enum" :key="enum_key">{{ enum_key }} : {{ enum_label }}</li>
</ul>
</dd>
<dd><strong>Clé interne :</strong> {{ id }}</dd>
<dd><strong>Type interne :</strong> {{ schema_row.type }}</dd>
</dl>
</div>
<div v-else>
<h2>Sélectionnez une catégorie dans le menu.</h2>
</div>
</div>
</div>
</div>
</div>
<div v-else class="text-center loading-gif">
<img src="./../assets/images/loading.gif" alt="loading...">
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Schema',
data : function () {
return {
isLoading: true,
schema: {},
category: "",
categories: {
aide: 'Propriétés d\'aides',
constante: 'Propriétés constantes',
beneficiaire: 'Propriétés du bénéficiaire',
formation: 'Propriétés de la formation',
financement: 'Propriétés du financement',
},
collapsed: false,
}
},
computed: {
show: function () {
return this.category != ""
},
classCollapsedContent: function () {
if(this.collapsed) return "col-md-12 col-sm-12 col-xs-12";
return "col-md-8 col-sm-12 col-xs-12";
},
classCollapsedMenu: function () {
if(this.collapsed) return "col-md-0 col-sm-0 col-xs-0";
return "col-md-3 col-sm-12 col-xs-12";
},
classCollapsedSeparator: function () {
if(this.collapsed) return "col-md-0 col-sm-0 col-xs-0";
return "col-md-1 col-sm-0 col-xs-0";
},
filteredSchema: function () {
var filteredSchema = [];
if (this.show) {
for(var i=0; i< Object.keys(this.schema).length; i++) {
var schema_value = Object.keys(this.schema)[i];
if (schema_value.split('.')[0]==this.category) filteredSchema.push(this.schema[schema_value]);
}
}
return filteredSchema
}
},
mounted: function () {
this.load();
},
methods: {
load : function () {
this.$http.get('/explore/schema').then(response => {
this.schema = response.body;
this.isLoading=false;
});
},
setCategory: function (category) {
this.category = category;
},
formatValue: function (value) {
if (Array.isArray(value)) return value.join(', ')
return value
}
}
}
</script>
<style scoped>
#schema-main-div {
padding-top: 3rem;
}
.schema-vertical-separator {
border: none;
border-left: 1px solid #bfbfbf;
height: 95%;
width: 1px;
}
.selected {
font-weight: bold;
}
.anchor {
font-weight: normal;
font-style: italic;
}
dl:target {
background-color: #ddd;
}
dt {
font-weight: bolder;
}
dt em {
font-variant: normal;
}
dl {
margin-top: 10px;
font-size: 1.1em;
padding: 5px;
}
dl:nth-child(even) {
background: #f3f3f3;
}
dd {
padding-left: 2.5rem;
}
</style>
......@@ -27,6 +27,7 @@ import Referentiel from './components/Referentiel.vue';
import Financements from './components/Financements.vue';
import Simulateur from './components/Simulateur.vue';
import Scenarios from './components/Scenarios.vue';
import Schema from './components/Schema.vue';
import Outils from './components/Outils.vue';
const routes = [
......@@ -34,7 +35,8 @@ const routes = [
{ path: '/referentiel', name: 'referentiel', component: Referentiel },
{ path: '/financements', name: 'financements', component: Financements },
{ path: '/simulateur', name: 'simulateur', component: Simulateur },
{ path: '/scenarios/:filters?', name: 'scenarios', component: Scenarios },
{ path: '/scenarios', name: 'scenarios', component: Scenarios },
{ path: '/schema', name: 'schema', component: Schema },
{ path: '/outils', name: 'outils', component: Outils},
{ path: '*', redirect: '/'}
];
......
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