From 9278244e7e8ea18ee71b8981f0b783f411f636be Mon Sep 17 00:00:00 2001 From: Maxime Quandalle Date: Mon, 2 Mar 2020 13:37:50 +0100 Subject: [PATCH] =?UTF-8?q?Studio=20:=20Support=20des=20exemples=20et=20me?= =?UTF-8?q?nu=20d=C3=A9roulant?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 6 +- source/Provider.tsx | 6 +- source/sites/publi.codes/Landing.js | 12 +- .../publi.codes/{Studio.js => Studio.tsx} | 106 +++++++++--------- .../bareme-ir.yaml} | 0 .../{exemple2.yaml => exemples/douche.yaml} | 7 +- test/mécanismes/multiplication.yaml | 10 ++ yarn.lock | 13 ++- 8 files changed, 96 insertions(+), 64 deletions(-) rename source/sites/publi.codes/{Studio.js => Studio.tsx} (51%) rename source/sites/publi.codes/{exemple1.yaml => exemples/bareme-ir.yaml} (100%) rename source/sites/publi.codes/{exemple2.yaml => exemples/douche.yaml} (98%) diff --git a/package.json b/package.json index 2f7513453..bc460ccc8 100644 --- a/package.json +++ b/package.json @@ -21,8 +21,8 @@ "dependencies": { "@babel/polyfill": "^7.4.0", "@babel/runtime": "^7.3.4", + "@monaco-editor/react": "^3.1.1", "@rehooks/local-storage": "^2.1.1", - "@monaco-editor/react": "^2.3.0", "classnames": "^2.2.5", "color-convert": "^1.9.2", "core-js": "^3.2.1", @@ -31,6 +31,7 @@ "i18next": "^18.0.1", "iframe-resizer": "^4.1.1", "js-yaml": "^3.13.1", + "monaco-editor": "^0.20.0", "moo": "^0.5.0", "nearley": "^2.19.0", "ramda": "^0.25.0", @@ -63,6 +64,9 @@ "swr": "^0.1.16", "whatwg-fetch": "^3.0.0" }, + "peerDependencies": { + "monaco-editor": "^0.20.0" + }, "scripts": { "prepare": "node source/scripts/prepare.js", "compile": "yarn run webpack --config source/webpack.prod.js && yarn run webpack --config source/webpack.prod.legacyBrowser.js", diff --git a/source/Provider.tsx b/source/Provider.tsx index eb7c47479..6ced107ea 100644 --- a/source/Provider.tsx +++ b/source/Provider.tsx @@ -42,7 +42,7 @@ if ( } type ProviderProps = { - tracker: Tracker + tracker?: Tracker basename: string sitePaths: SitePaths language: AvailableLangs @@ -92,7 +92,7 @@ export default class Provider extends PureComponent { document.body.appendChild(css) } componentWillUnmount() { - this.props.tracker.disconnectFromHistory() + this.props.tracker?.disconnectFromHistory() } render() { const iframeCouleur = @@ -105,7 +105,7 @@ export default class Provider extends PureComponent { - + diff --git a/source/sites/publi.codes/Landing.js b/source/sites/publi.codes/Landing.js index 00a9ed1e0..982fa93bb 100644 --- a/source/sites/publi.codes/Landing.js +++ b/source/sites/publi.codes/Landing.js @@ -1,5 +1,5 @@ -import exemple1 from '!!raw-loader!./exemple1.yaml' -import exemple2 from '!!raw-loader!./exemple2.yaml' +import exemple1 from '!!raw-loader!./exemples/bareme-ir.yaml' +import exemple2 from '!!raw-loader!./exemples/douche.yaml' import ColoredYaml from 'Components/rule/ColoredYaml' import React, { useEffect } from 'react' import emoji from 'react-easy-emoji' @@ -61,7 +61,9 @@ export default function Landing() {
- + + Lancer le calcul ⚡ +

En plus du site Web, Mon-entreprise est disponible comme une{' '} @@ -76,7 +78,9 @@ export default function Landing() {

- + + Lancer le calcul ⚡ +
) diff --git a/source/sites/publi.codes/Studio.js b/source/sites/publi.codes/Studio.tsx similarity index 51% rename from source/sites/publi.codes/Studio.js rename to source/sites/publi.codes/Studio.tsx index 5ad9089fd..43f6ee65a 100644 --- a/source/sites/publi.codes/Studio.js +++ b/source/sites/publi.codes/Studio.tsx @@ -1,18 +1,23 @@ +import baremeIr from '!!raw-loader!./exemples/bareme-ir.yaml' +import douche from '!!raw-loader!./exemples/douche.yaml' import { ControlledEditor } from '@monaco-editor/react' +import Engine from 'Engine/index' import { buildFlatRules } from 'Engine/rules' import { serializeUnit } from 'Engine/units' import { safeLoad } from 'js-yaml' -import React, { useEffect, useState } from 'react' +import React, { useRef, useState } from 'react' import emoji from 'react-easy-emoji' -import { useDispatch, useSelector } from 'react-redux' -import { analysisWithDefaultsSelector } from 'Selectors/analyseSelectors' -import { setSimulationConfig } from '../../actions/actions' +import { useLocation } from 'react-router' import { Header } from './Header' -let initialInput = ` -a: +let examples = { + 'bareme-ir': baremeIr, + douche +} + +let initialInput = `a: formule: 10 -b: +b: formule: a + 18 c: formule: @@ -34,34 +39,29 @@ export default function SafeStudio() { ) } export function Studio() { - const defaultTarget = 'b' - const [ready, setReady] = useState(false) - const [value, setValue] = useState(initialInput) - const [target, setTarget] = useState(defaultTarget) + const { search } = useLocation() + const currentExample = new URLSearchParams(search ?? '').get('exemple') + const [editorValue, setEditorValue] = useState( + currentExample && Object.keys(examples).includes(currentExample) + ? examples[currentExample] + : initialInput + ) + const [targets, setTargets] = useState([]) + const [currentTarget, setCurrentTarget] = useState('') + const [analysis, setAnalysis] = useState() + const engine = useRef(null) - const dispatch = useDispatch() + try { + setTargets(Object.keys(safeLoad(editorValue) ?? {})) + } catch {} - const setRules = rulesString => - dispatch({ - type: 'SET_RULES', - rules: buildFlatRules(safeLoad(rulesString)) - }) - const setTargets = targets => - dispatch(setSimulationConfig({ objectifs: targets })) - - useEffect(() => { - setRules(initialInput) - setTargets([defaultTarget]) - setReady(true) - }, []) - - function onChange(ev, newValue) { - setValue(newValue) - } - - function updateRules() { - setTargets([target]) - setRules(value) + function updateResult() { + engine.current = new Engine.Engine(buildFlatRules(safeLoad(editorValue))) + engine.current.evaluate( + [targets.includes(currentTarget) ? currentTarget : targets[0]], + { defaultUnits: [], situation: {} } + ) + setAnalysis(engine.current.getLastEvaluationExplanations()?.targets?.[0]) } return ( @@ -70,34 +70,37 @@ export function Studio() { setEditorValue(newValue ?? '')} options={{ minimap: { enabled: false } }} />
- setTarget(e.target.value)} - /> +
- {ready && } + ) } -export const Results = () => { - const analysis = useSelector(state => analysisWithDefaultsSelector(state)) - ?.targets[0] - console.log(analysis) - return ( +export const Results = ({ analysis }) => { + return analysis ? (

Résultats

    @@ -108,12 +111,12 @@ export const Results = () => {
  • Applicable : {analysis.isApplicable ? '✅' : '❌'}
- ) + ) : null } class ErrorBoundary extends React.Component { state = { - error: false + error: false as false | { message: string } } static getDerivedStateFromError(error) { // Mettez à jour l'état, de façon à montrer l'UI de repli au prochain rendu. @@ -123,7 +126,7 @@ class ErrorBoundary extends React.Component { render() { return ( <> - {this.state.error && ( + {this.state.error ? (

Erreur :{' '} { @@ -132,8 +135,9 @@ class ErrorBoundary extends React.Component { )[0] }

+ ) : ( + this.props.children )} - {this.props.children} ) } diff --git a/source/sites/publi.codes/exemple1.yaml b/source/sites/publi.codes/exemples/bareme-ir.yaml similarity index 100% rename from source/sites/publi.codes/exemple1.yaml rename to source/sites/publi.codes/exemples/bareme-ir.yaml diff --git a/source/sites/publi.codes/exemple2.yaml b/source/sites/publi.codes/exemples/douche.yaml similarity index 98% rename from source/sites/publi.codes/exemple2.yaml rename to source/sites/publi.codes/exemples/douche.yaml index 48c8213c8..d002af0dc 100644 --- a/source/sites/publi.codes/exemple2.yaml +++ b/source/sites/publi.codes/exemples/douche.yaml @@ -1,6 +1,8 @@ +douche: + icônes: 🚿 + douche . impact par douche: titre: Une douche - icônes: 🚿 formule: impact par litre * litres d'eau douche . impact par litre: @@ -75,6 +77,9 @@ chauffage . impact par litre: titre: impact par litre chauffé formule: impact par kWh * énergie consommée par litre +eau: + icônes: 🌊 + eau . impact par litre froid: unité: kgCO₂e/l formule: eau potable + traitement eau usée diff --git a/test/mécanismes/multiplication.yaml b/test/mécanismes/multiplication.yaml index 4e0270e18..f97010c04 100644 --- a/test/mécanismes/multiplication.yaml +++ b/test/mécanismes/multiplication.yaml @@ -98,3 +98,13 @@ Multiplication complète: # valeur attendue: 0 # variables manquantes: [] +a: + formule: + multiplication: + assiette: 1000 + taux: 3% + +b: + formule: a + exemples: + - valeur attendue: 30 diff --git a/yarn.lock b/yarn.lock index 4dc4a50e6..c53ee2f20 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1039,10 +1039,10 @@ "@types/istanbul-reports" "^1.1.1" "@types/yargs" "^13.0.0" -"@monaco-editor/react@^2.3.0": - version "2.3.0" - resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-2.3.0.tgz#ef1e09c408bb3119e2dc0d369b132e82b2d3ade7" - integrity sha512-jmmZCQ4iSMfwelWGRV4HWUOJchkN4MOx9vhx1DWvC6ERpvK5DXrcwJBBzuayVtiK7cyCVOGKB7mgjT7KOdUkJw== +"@monaco-editor/react@^3.1.1": + version "3.1.1" + resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-3.1.1.tgz#35338643f8350d37f508596b02970bcc2ecf8ea9" + integrity sha512-c2XMTEu5SxOahcmvZ6AorDZLWrl3Q6Cax4G2fr5rC55jCYN2b8hpjXu8BlH/Q3blKHEk8e/bahF/i2GeQukLzA== "@prerenderer/prerenderer@^0.7.2": version "0.7.2" @@ -7366,6 +7366,11 @@ moment@2.24.0: resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b" integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg== +monaco-editor@^0.20.0: + version "0.20.0" + resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.20.0.tgz#5d5009343a550124426cb4d965a4d27a348b4dea" + integrity sha512-hkvf4EtPJRMQlPC3UbMoRs0vTAFAYdzFQ+gpMb8A+9znae1c43q8Mab9iVsgTcg/4PNiLGGn3SlDIa8uvK1FIQ== + moo@^0.4.3: version "0.4.3" resolved "https://registry.yarnpkg.com/moo/-/moo-0.4.3.tgz#3f847a26f31cf625a956a87f2b10fbc013bfd10e"