Affichage du résultat de calcul sur /regle

source/components/Results.js

@@ -9,7 +9,7 @@ import './Results.css'
 import {clearDict} from 'Engine/traverse'
 import {encodeRuleName} from 'Engine/rules'
 import {getObjectives} from 'Engine/generateQuestions'
-import RuleValueVignette from './RuleValueVignette'
+import RuleValueVignette from './rule/RuleValueVignette'
 
 @withRouter
 @connect(

source/components/rule/Rule.css

@@ -96,6 +96,16 @@
 	text-align: center;
 }
 
+#ruleValue {
+	margin-left: 3em;
+	font-weight: 600;
+}
+
+
+/*
+	Règles CSS d'affichage des algorithmes
+*/
+
 #rule-rules {
 	display: inline-flex;
 	justify-content: start;
@@ -114,7 +124,6 @@
 }
 
 #algorithm {
-	margin-top: 3em;
 	margin-right: 10em;
 }
 .dictionaryPanelWrapper {

source/components/rule/Rule.js

@@ -14,6 +14,7 @@ import References from './References'
 import Algorithm from './Algorithm'
 import Examples from './Examples'
 import Helmet from 'react-helmet'
+import {humanFigure} from './RuleValueVignette'
 
 @connect(
 	state => ({
@@ -54,12 +55,15 @@ export default class Rule extends Component {
 		// }
 
 		let
-			situationExists = !R.isEmpty(this.props.form)
+			conversationStarted = !R.isEmpty(this.props.form),
+			situationExists = conversationStarted || this.state.example != null
 
 		let
 			{type, name, description} = this.rule,
 			destinataire = R.path([type, 'destinataire'])(this.rule),
-			destinataireData = possiblesDestinataires[destinataire]
+			destinataireData = possiblesDestinataires[destinataire],
+			situationOrExampleRule = R.path(['example', 'rule'])(this.state) || this.rule,
+			ruleValue = situationOrExampleRule.nodeValue
 
 		return (
 			<div id="rule">
@@ -80,17 +84,18 @@ export default class Rule extends Component {
 					<div id="destinataire">
 						<h2>Destinataire</h2>
 						{!destinataireData ?
-								<p>Non renseigné</p>
-							: <div>
-									<a href={destinataireData.lien} target="_blank">
-										{destinataireData.image &&
-											<img src={require('Règles/ressources/destinataires/' + destinataireData.image)} /> }
-										{!destinataireData.image &&
-											<div id="calligraphy">{destinataire}</div>
-										}
-									</a>
-									{destinataireData.nom && <div id="destinataireName">{destinataireData.nom}</div>}
-								</div>
+							<p>Non renseigné</p>
+							:
+							<div>
+								<a href={destinataireData.lien} target="_blank">
+									{destinataireData.image &&
+										<img src={require('Règles/ressources/destinataires/' + destinataireData.image)} /> }
+									{!destinataireData.image &&
+										<div id="calligraphy">{destinataire}</div>
+									}
+								</a>
+								{destinataireData.nom && <div id="destinataireName">{destinataireData.nom}</div>}
+							</div>
 						}
 
 					</div>
@@ -99,10 +104,21 @@ export default class Rule extends Component {
 						{this.renderReferences(this.rule)}
 					</div>
 				</section>
+				<div id="ruleValue" style={{visibility: situationExists ? 'visible' : 'hidden'}}>
+					<h2>Résultat</h2>
+					<p>
+						{ruleValue == 0
+							? 'Règle non applicable'
+							: ruleValue == null
+								? 'Situation incomplète'
+								: humanFigure(2)(ruleValue) + ' €'}
+					</p>
+				</div>
+
 				<section id="rule-calc">
-					<Algorithm {...{traversedRule: R.path(['example', 'rule'])(this.state) || this.rule, showValues: situationExists || this.state.example != null}}/>
+					<Algorithm traversedRule={situationOrExampleRule} showValues={situationExists} />
 					<Examples
-						situationExists={situationExists}
+						situationExists={conversationStarted}
 						rule={this.rule}
 						focusedExample={this.state.example}
 						showValues={this.state.showValues}

source/components/rule/RuleValueVignette.js

@@ -1,11 +1,10 @@
 import React from "react"
 import {Link} from 'react-router-dom'
-import {computeRuleValue} from 'Engine/traverse'
 import {encodeRuleName} from 'Engine/rules'
 import classNames from 'classnames'
-import {capitalise0} from '../utils'
+import {capitalise0} from '../../utils'
 let fmt = new Intl.NumberFormat('fr-FR').format
-let humanFigure = decimalDigits => value => fmt(value.toFixed(decimalDigits))
+export let humanFigure = decimalDigits => value => fmt(value.toFixed(decimalDigits))
 import './RuleValueVignette.css'
 
 export default ({