Commit 12cadfe0 authored by David Foucher's avatar David Foucher

Add (explorer): improve ux

* remove url input and add selected menu underline
* add filter lable on simulate panel
* add link to copy url lbf for cimulate on cli
* add edition mode for schema, financements and features
* rename commun to "règles nationales"
parent 18517e90
......@@ -48,6 +48,10 @@ async def simulate_(request, response):
eligible = request.query.bool("eligible", None)
if eligible is not None:
financements = [f for f in financements if f["eligible"] == eligible]
financements = sorted(financements, key=lambda value: value["eligible"],
explain = request.query.bool("explain", False)
for financement in financements:
financement["explain"] = (
......@@ -181,6 +181,8 @@ def load_scenario(feature, scenario):
steps = [load_step(scenario, step) for step in scenario.steps]
return {
"filename": scenario.filename,
"line": scenario.line,
"raw": "\n".join("{keyword} {name}".format(**step) for step in steps),
"tags": set(scenario.tags),
<h2>Liste des types de financements <a href= target=_blank><i class="icon">edit</i></a></h2>
<dl each={ this.financements }>
<dt>{ intitule }</dt>
<dd if={ racine.endsWith('.rules') }><strong>Règles racine</strong>: <a href="#/rules/{ racine }">{ racine } <i class="icon">arrow_forward</i></a></dd>
......@@ -2,13 +2,13 @@
<progress style="display: none" id="progress" />
<h1><a href="."></a></h1>
<a href="#schema">Schéma</a>
<a href="#rules">Règles de gestion</a>
<a href="#simulate">Simuler</a>
<a href="#financements">Financements</a>
<a href="#scenarios">Scénarios</a>
<a href="#tools">Outils</a>
<a href="#glossary">Glossaire</a>
<a href="#schema" class="{selected: window.location.hash.startsWith('#schema')}">Schéma</a>
<a href="#rules" class="{selected: window.location.hash.startsWith('#rules')}">Règles de gestion</a>
<a href="#simulate" class="{selected: window.location.hash.startsWith('#simulate')}">Simuler</a>
<a href="#financements" class="{selected: window.location.hash.startsWith('#financements')}">Financements</a>
<a href="#scenarios" class="{selected: window.location.hash.startsWith('#scenarios')}">Scénarios</a>
<a href="#tools" class="{selected: window.location.hash.startsWith('#tools')}">Outils</a>
<a href="#glossary" class="{selected: window.location.hash.startsWith('#glossary')}">Glossaire</a>
<style scoped>
......@@ -27,8 +27,8 @@
font-size: 1.4em;
font-variant: small-caps;
nav a:hover {
text-decoration: underline dotted;
nav a:hover, nav a.selected {
text-decoration: underline;
a + a {
margin-left: 1em;
......@@ -5,7 +5,7 @@
<div if={ this.selected_filters.length && }>
<!-- <h3>{ this.feature.path } <a href={ this.feature.path } target=_blank> <i class="icon">edit</i></a></h3> -->
<li each={ }><h4>{ name }</h4>
<li each={ }><h4>{ name } <a href={ filename }#L{ line } target=_blank><i class=icon>edit</i></a></h4>
<rule content={ raw }></rule>
<!-- <pre><div each={ steps }>{ keyword } { name }</div></pre> -->
......@@ -44,7 +44,7 @@
<h2>{ }</h2>
<h2>{ } <a href= target=_blank><i class=icon>edit</i></a></h2>
<dl each={ props, key in this.opts.items } id='schema/{ key }'>
<dt>{props.label || props.description} <a href="#schema/{ key }" class=anchor>#</a></dt>
<dd if={ props.value }><strong>Valeur constante</strong> { renderValue(key, props.value) }</dd>
<h2>Depuis une URL LBF</h2>
<form onsubmit={ this.submit }>
<input type="url" ref="url" placeholder="Entrer une URL LBF" name="lbfurl" href="#" value={ this.opts.url }>
<input type="submit" value="Simuler">
<h2>Depuis un résultat de financement LBF <a if={ opts.url } href={ opts.url }><i class=icon>link</i></a></h2>
<section if={ Object.keys(this.errors).length && !Object.keys(this.context).length } class=results>
<li each={ message, key in this.errors }><strong>{ key }</strong> { message }</li>
<section class=results if={ !Object.keys(this.context).length }>
<p>Vous devez faire une simulation sur LBF et cliquer sur le bouton "simuler sur trèfle"</p>
<p> Pour voir le bouton sur le site de production glisser/déposer ce lien dans votre bookmark <a class=button href="javascript:(()=>\{if(document.cookie='mode-expert=1; max-age=43200;') location.reload()\})()">LBF mode expert</a></p>
<section class=results if={ Object.keys(this.context).length }>
<li each={ this.financements } class={result: 'result', visible: visible}>
<h3 class={ passed: eligible, failed: !eligible } onclick={ parent.toggle }>{intitule}</h3>
<p><strong>Description</strong> {description}</p>
<p><strong>Démarches</strong> {demarches}</p>
<virtual if={ eligible }>
<p><strong>Prise en charge</strong> { prise_en_charge }</p>
<p if={ prise_en_charge_texte }><strong>Prise en charge</strong> { prise_en_charge_texte }</p>
<p><strong>Plafond de prise en charge</strong> {plafond_prise_en_charge}</p>
<p><strong>Plafond de prix horaire</strong> {plafond_prix_horaire}</p>
<p><strong>Nombre d'heures prises en charge</strong> {heures}</p>
<p><strong>Rémunération</strong> {remuneration}</p>
<p if={ remuneration_texte }><strong>Rémunération</strong> { remuneration_texte }</p>
<p if={ fin_remuneration}><strong>Fin de la rémunération</strong> { renderValue('financement.fin_remuneration', fin_remuneration) }</p>
<p if={ rff }><strong>RFF</strong> { rff }</p>
<p if={ debut_rff }><strong>Début de la RFF</strong> { renderValue('financement.debut_rff', debut_rff) }</p>
<p if={ fin_rff }><strong>Fin de la RFF</strong> { renderValue('financement.fin_rff', fin_rff) }</p>
<p if={ organisme }><strong>Organisme</strong> {organisme.nom}</p>
<strong>Règles de gestion</strong>
<eligibilite conditions={ explain }></eligibilite>
<p if={ !this.financements.length }>Aucun financement trouvé.</p>
<context data={ this.context }></context>
<h2>Scénario de test</h2>
<textarea onfocus={ this.selectScenario }>{ this.scenario }</textarea>
this.financements = []
this.context = {}
this.errors = {}
<p class="filter">
<span onclick={ this.filter } class="label {eligible: this._tagsEligible.includes(tag)}" each={ tag, i in this._tags }>{tag}</span>
<p if={ !this.currentFilter }>
<input type=checkbox onclick={ this.checked=toggleFailed }>Tous les financements</input>
<p if={ this.currentFilter }>
<input type=checkbox onclick={ this.checked=this.filter }>Tous les financements éligibles</input>
<li each={ this.financements } class={result: 'result', visible: visible, hide: (!eligible && !this.currentFilter)}>
<h3 class={ passed: eligible, failed: !eligible } onclick={ parent.toggle }>{intitule}