diff --git a/index.html b/index.html index 93c28637c..9445b3080 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,7 @@ - diff --git a/source/components/GenericSimulation.css b/source/components/GenericSimulation.css new file mode 100644 index 000000000..faa4af4a5 --- /dev/null +++ b/source/components/GenericSimulation.css @@ -0,0 +1,10 @@ +#GenericSimulation { +} +#GenericSimulation > button { + padding: 0.6em 1em; + text-align: center; + margin: 1em auto; + display: block; + border-radius: 6px; + font-weight: 500; +} diff --git a/source/components/GenericSimulation.js b/source/components/GenericSimulation.js index 523590e72..1bad1cda6 100644 --- a/source/components/GenericSimulation.js +++ b/source/components/GenericSimulation.js @@ -1,20 +1,32 @@ import React from 'react' +import { connect } from 'react-redux' +import { isEmpty } from 'ramda' import Answers from 'Components/AnswerList' import Conversation from 'Components/conversation/Conversation' import withColours from 'Components/utils/withColours' import Targets from 'Components/Targets' +import './GenericSimulation.css' @withColours +@connect(state => ({ + previousAnswers: state.conversationSteps.foldedSteps +})) export default class YO extends React.Component { state = { displayAnswers: false } render() { + let colours = this.props.colours return ( - <div> - <button onClick={() => this.setState({ displayAnswers: true })}> - Mes réponses - </button> + <div className="ui__ container" id="GenericSimulation"> + <h1>Quel est l'impact de vos douches ? </h1> + {!isEmpty(this.props.previousAnswers) && ( + <button + style={{ background: colours.colour, color: colours.textColour }} + onClick={() => this.setState({ displayAnswers: true })}> + Mes réponses + </button> + )} {this.state.displayAnswers && ( <Answers onClose={() => this.setState({ displayAnswers: false })} /> diff --git a/source/components/Targets.css b/source/components/Targets.css new file mode 100644 index 000000000..4e2d2f7e0 --- /dev/null +++ b/source/components/Targets.css @@ -0,0 +1,33 @@ +#targets { + width: 60%; + margin: 5% auto; + display: flex; + justify-content: center; + align-items: center; +} +#targets > .content { + border-radius: 6px; + border: 3px solid var(--colour); + padding: 1em; + min-width: 60%; + display: flex; + justify-content: space-between; + align-items: center; +} +#targets > .icon { + margin: 0 0.6em; + font-size: 200%; + color: var(--colour); +} +#targets .value { + font-weight: 600; +} +#targets .unit { + font-weight: normal; + color: #666; +} + +#targets .explanation { + font-size: 140%; + text-decoration: none; +} diff --git a/source/components/Targets.js b/source/components/Targets.js index 006215647..2e6e675f2 100644 --- a/source/components/Targets.js +++ b/source/components/Targets.js @@ -1,15 +1,39 @@ import React from 'react' import { analysisWithDefaultsSelector } from 'Selectors/analyseSelectors' import { connect } from 'react-redux' +import './Targets.css' +import withColours from 'Components/utils/withColours' +import { Link } from 'react-router-dom' +import emoji from 'react-easy-emoji' @connect(state => ({ analysis: analysisWithDefaultsSelector(state) })) +@withColours export default class Targets extends React.Component { render() { - let { title, nodeValue } = this.props.analysis.targets[0] + let { + title, + nodeValue, + unité: unit, + dottedName + } = this.props.analysis.targets[0] return ( - <div> - <span className="targetTitle">{title}</span>{' '} - <span className="targetValue">{nodeValue}</span> + <div id="targets"> + <span className="icon">→</span> + <span className="content"> + {/*<span className="title">{title}</span> + {' : '} */} + <span className="figure"> + <span className="value">{nodeValue}</span>{' '} + <span className="unit">{unit}</span> + </span> + <Link + title="Quel est calcul ?" + style={{ color: this.props.colours.colour }} + to={'/règle/' + dottedName} + className="explanation"> + {emoji('📖')} + </Link> + </span> </div> ) } diff --git a/source/règles/co2.yaml b/source/règles/co2.yaml index d94a0b3c2..0213368dc 100644 --- a/source/règles/co2.yaml +++ b/source/règles/co2.yaml @@ -6,6 +6,7 @@ - nom: impact période: flexible + unité: kgCO2eq formule: impact par douche * nombre de douches - nom: nombre de douches @@ -41,7 +42,7 @@ par défaut: non - nom: impact par litre froid - unité: kgCO2e/l + unité: kgCO2eq/l formule: 0.000132 @@ -58,7 +59,7 @@ - espace: chauffage nom: impact par kWh - unité: kgCO2e/kWh PCI + unité: kgCO2eq/kWh PCI formule: variations: - si: type = 'gaz'