Commit 67ca3ad1 authored by Lucas Détré's avatar Lucas Détré 😺 Committed by David Foucher
Browse files

add new pages scenarios and schema

parent be2e68ca
Pipeline #2931 passed with stage
in 1 minute and 45 seconds
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
<router-view name="financements"/> <router-view name="financements"/>
<router-view name="simulateur"/> <router-view name="simulateur"/>
<router-view name="scenarios"/> <router-view name="scenarios"/>
<router-view name="schema"/>
<router-view name="outils"/> <router-view name="outils"/>
</div> </div>
</div> </div>
......
...@@ -46,7 +46,6 @@ ...@@ -46,7 +46,6 @@
</span> </span>
</router-link> </router-link>
</li> </li>
<!--
<li class="nav-item"> <li class="nav-item">
<router-link to="/scenarios" name="scenarios" class="nav-link"> <router-link to="/scenarios" name="scenarios" class="nav-link">
<svg class="nav-icon"> <svg class="nav-icon">
...@@ -56,7 +55,17 @@ ...@@ -56,7 +55,17 @@
Scénarios Scénarios
</span> </span>
</router-link> </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"> <li class="nav-item">
<router-link to="/outils" name="outils" target="_blank" class="nav-link"> <router-link to="/outils" name="outils" target="_blank" class="nav-link">
<svg class="nav-icon"> <svg class="nav-icon">
...@@ -91,10 +100,13 @@ ...@@ -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> <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>
<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"> <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"/> <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> </symbol>
</svg> </svg>
</div> </div>
</div> </div>
......
<template> <template>
<div id="Scenarios"> <div id="Scenarios">
<div class="container"> <div id="scenarios-main-div">
<div class="row"> <div v-if="!this.isLoading">
<div class="col-md-6"> <div class="container ml-5 mr-2">
<ul> <div class="row">
<li v-for="filter in filterList" :key="filter.id"> <div :class="classCollapsedMenu">
<a href="#" :class="{selected: filters[filter].selected}" :title="filter" @click="selectToggle(filters[filter])"> <div class="mb-3 pull-right">
{{ filter }} <button @click="collapsed = !collapsed" type="button" class="btn main-button mb-5">
</a> <span v-show="collapsed"><span class="chevron-toggle">&#8594;</span> Ouvrir le panneau</span>
</li> <span v-show="!collapsed"><span class="chevron-toggle">&#8592;</span> Fermer le panneau</span>
</ul> </button>
<div v-if="nbSelected"> </div>
<ul> <div v-show="!collapsed">
<li v-for="scenario in activeScenario" :key="scenario.id"> <h2 class="mb-5">Scénarios</h2>
<h4> <ul>
{{ scenario.name }} <li v-for="(filter, id) in filterList" :key="id">
<a :href="'https://framagit.org/ybon/trefle/tree/master/'+scenario.filename+'#L'+scenario.line" target=_blank> <a href="#" :class="{selected: filters[filter].selected}" @click="setFilter(filters[filter]);">
<i class=icon>edit</i> {{ filter.charAt(0).toUpperCase() + filter.slice(1) }}
</a> </a>
</h4> </li>
</li> </ul>
</ul> </div>
</div> </div>
</div> <div v-show="!collapsed" :class="classCollapsedSeparator">
<div class="col-md-6"> <hr class="referentiel-vertical-separator">
<div v-if="!nbSelected"> </div>
<p>Sélectionner au moins une catégorie dans le menu.</p> <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>
</div> </div>
<div v-else class="text-center loading-gif">
<img src="./../assets/images/loading.gif" alt="loading...">
</div>
</div> </div>
</div> </div>
</template> </template>
...@@ -42,23 +63,29 @@ ...@@ -42,23 +63,29 @@
selected_filters: [], selected_filters: [],
filters: [], filters: [],
toggled: "", toggled: "",
collapsed: false,
isLoading: true,
} }
}, },
computed: { computed: {
activeScenario: function(){ show: function () {
var activeScenario = [] return (this.nbSelected !== '')
},
activeScenarios: function(){
var activeScenarios = []
var scenarios = this.scenarios 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){ scenarios.forEach(function(scenario){
var idx = scenario.tags.indexOf(tag) if (scenario.tags.find(scenario_tag => scenario_tag == tag) != undefined)
if(idx > -1 && !(idx in activeScenario)) activeScenario[idx]=scenario activeScenarios.push(scenario);
}) })
}) }
return activeScenario return activeScenarios
}, },
filterList: function(){ filterList: function(){
var filterList = [] var filterList = []
var scenarios = this.scenarios var scenarios = this.activeScenarios
Object.values(this.filters).forEach(function(filter){ Object.values(this.filters).forEach(function(filter){
if(filter.selected){ if(filter.selected){
scenarios.forEach(function(scenario){ scenarios.forEach(function(scenario){
...@@ -84,10 +111,19 @@ ...@@ -84,10 +111,19 @@
}, },
nbSelected: function(){ nbSelected: function(){
return Object.values(this.selectedItem).reduce(function(cnt, item){ if(item.selected) cnt=cnt+1; return cnt},0); return Object.values(this.selectedItem).reduce(function(cnt, item){ if(item.selected) cnt=cnt+1; return cnt},0);
} },
//active: function(){ classCollapsedContent: function () {
// return Object.values(this.filters).reduce(function(cnt, item){ if(item.selected) cnt=cnt+1; return cnt},0); 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 () { created: function () {
this.load(); this.load();
...@@ -95,32 +131,62 @@ ...@@ -95,32 +131,62 @@
methods: { methods: {
load: function () { load: function () {
this.$http.get('/explore/scenarios').then(response => { this.$http.get('/explore/scenarios').then(response => {
this.scenarios = response.body this.scenarios = response.body
this.selected_filters = decodeURIComponent(this.$route.params.filters).split(',') this.isLoading = false;
if(this.filters) { if(this.filters) {
this.active = [] this.active = []
} }
for (var i = 0, scenario; i < this.scenarios.length; i++) {
scenario = this.scenarios[i] for (var i = 0, scenario; i < this.scenarios.length; i++) {
if (scenario.tags.length>0) { scenario = this.scenarios[i]
for (var k = 0; k < scenario.tags.length; k++) { if (scenario.tags.length>0) {
if (this.filters.indexOf(scenario.tags[k]) === -1) 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}) 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.active.push(scenario)
this.filters = this.filters.reduce(function(filters, item){ filters[item.tag]=item; return filters }, {}) }
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; }).created;
}, },
selectToggle: function(item){ setFilter: function (filter) {
item.selected = !item.selected
this.$router.append('test') 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> </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'; ...@@ -27,6 +27,7 @@ import Referentiel from './components/Referentiel.vue';
import Financements from './components/Financements.vue'; import Financements from './components/Financements.vue';
import Simulateur from './components/Simulateur.vue'; import Simulateur from './components/Simulateur.vue';
import Scenarios from './components/Scenarios.vue'; import Scenarios from './components/Scenarios.vue';
import Schema from './components/Schema.vue';
import Outils from './components/Outils.vue'; import Outils from './components/Outils.vue';
const routes = [ const routes = [
...@@ -34,7 +35,8 @@ const routes = [ ...@@ -34,7 +35,8 @@ const routes = [
{ path: '/referentiel', name: 'referentiel', component: Referentiel }, { path: '/referentiel', name: 'referentiel', component: Referentiel },
{ path: '/financements', name: 'financements', component: Financements }, { path: '/financements', name: 'financements', component: Financements },
{ path: '/simulateur', name: 'simulateur', component: Simulateur }, { 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: '/outils', name: 'outils', component: Outils},
{ path: '*', redirect: '/'} { 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