From 3b7a99c9b1d919c7d562c1273dfde8980e4b9221 Mon Sep 17 00:00:00 2001 From: Mael Date: Thu, 27 Feb 2025 11:12:12 +0100 Subject: [PATCH 01/12] =?UTF-8?q?Transition=20de=20la=20page=20inutilis?= =?UTF-8?q?=C3=A9e=20interdiction-location=20vers=20page=20DPE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/{interdiction-location => dpe}/UI.tsx | 0 app/dpe/page.tsx | 70 ++++++++ app/interdiction-location/page.tsx | 196 ---------------------- components/DPE-GES-bout-rond.svg | 15 ++ components/DPE.tsx | 1 + components/DPE.yaml | 7 + components/DPE2.tsx | 159 ++++++++++++++---- 7 files changed, 216 insertions(+), 232 deletions(-) rename app/{interdiction-location => dpe}/UI.tsx (100%) create mode 100644 app/dpe/page.tsx delete mode 100644 app/interdiction-location/page.tsx create mode 100644 components/DPE-GES-bout-rond.svg diff --git a/app/interdiction-location/UI.tsx b/app/dpe/UI.tsx similarity index 100% rename from app/interdiction-location/UI.tsx rename to app/dpe/UI.tsx diff --git a/app/dpe/page.tsx b/app/dpe/page.tsx new file mode 100644 index 00000000..1cb60fc5 --- /dev/null +++ b/app/dpe/page.tsx @@ -0,0 +1,70 @@ +import DPE from '@/components/DPE2' +import { Intro, PageBlock } from '@/components/UI' +import css from '@/components/css/convertToJs' +import { Content, Wrapper } from '@/components/explications/ExplicationUI' +import illustrationAccueil from '@/public/illustration-accueil.resized.webp' +import { Metadata } from 'next/dist/lib/metadata/types/metadata-interface' +import Image from 'next/image' +import { BlueEm, HeaderWrapper } from '../LandingUI' + +export const description = `Les passoires thermiques seront progressivement interdites à la location. Propriétaire bailleur, découvrez vos aides à la rénovation énergétique.` + +export const metadata: Metadata = { + title: 'Puis-je continuer de louer mon logement passoire thermique ?', + description, + openGraph: { images: ['/jaquette.png'] }, +} + +export default function Page() { + return ( +
+ + + Des ouvriers peignent et réparent la facade d'une maison +
+

+ Le DPE +

+ +

+ En France hexagonale, le Diagnostic de Performance Énergétique + informe sur la performance énergétique d'un logement.{' '} +

+

+ Depuis 2021, l'empreinte climat est prise en compte dans le + calcul de la classe DPE. locataire un logement décent.{' '} +

+

+ Il est un critère clef pour la vente comme la{' '} + location d'un logement . +

+ +
+ + + +
+ +
+ + + + Section 2 + + +
+ ) +} diff --git a/app/interdiction-location/page.tsx b/app/interdiction-location/page.tsx deleted file mode 100644 index 5a01ed7f..00000000 --- a/app/interdiction-location/page.tsx +++ /dev/null @@ -1,196 +0,0 @@ -import DPELabel from '@/components/DPELabel' -import { - CTA, - CTAWrapper, - ExternalLink, - Intro, - PageBlock, -} from '@/components/UI' -import css from '@/components/css/convertToJs' -import { Content, Wrapper } from '@/components/explications/ExplicationUI' -import illustrationAccueil from '@/public/illustration-accueil.resized.webp' -import { Metadata } from 'next/dist/lib/metadata/types/metadata-interface' -import Image from 'next/image' -import Link from 'next/link' -import { HeaderWrapper } from '../LandingUI' -import { Calendrier } from './UI' - -export const description = `Les passoires thermiques seront progressivement interdites à la location. Propriétaire bailleur, découvrez vos aides à la rénovation énergétique.` - -export const metadata: Metadata = { - title: 'Puis-je continuer de louer mon logement passoire thermique ?', - description, - openGraph: { images: ['/jaquette.png'] }, -} - -export default function Page() { - return ( -
- - - Des ouvriers peignent et réparent la facade d'une maison -
-

- Interdiction de location d'une passoire thermique -

- -

- En France métropolitaine, un propriétaire doit fournir à son - locataire un logement décent. Pour ce faire, la loi prévoit - qu’il respecte{' '} - - des niveaux de performance énergétique minimums de plus en - plus exigeants - - . -

- -
- - - -

En 2024

-

- Depuis le 1er janvier 2023, en France métropolitaine, un logement - est dit « énergétiquement décent » si sa consommation d'énergie - estimée par le diagnostic de performance énergétique (DPE) et - exprimée en énergie finale est inférieure à 450 kWh/m²/an. -

-

Par la suite

-

- Le critère de décence énergétique évolue au fil du temps, selon le - calendrier suivant :{' '} -

- -
  • - -
    - Au 1er janvier 2025 -
    - (dans {timeIsRunningOut('2025-01-01')}) -     - - Interdiction de louer un DPE - - -
    • -
  • - -
    - Au 1er janvier 2028 -
    - (dans {timeIsRunningOut('2028-01-01')}) -     - - Interdiction de louer un DPE - - -
    • -
  • - -
    - Au 1er janvier 2034 -
    - (dans {timeIsRunningOut('2034-01-01')}) -     - - Interdiction de louer un DPE - - -
    • -     -

    - Ces mesures s'appliqueront aux nouveaux contrats de location et - aux renouvellements ou reconductions tacites de contrats. -

    -

    - - En ne respectant pas ce critère de dédence du logement, le - propriétaire bailleur s’expose à être contraint par le juge, à - la réalisation de travaux de rénovation, à une diminution du - montant du loyer ou la suspension de sa perception, et à une - suspension de la durée du bail.{' '} - -

    -

    - - En savoir plus - - . -

    -     -     - - -

    Isoler mon logement

    -

    - L'État vous aide pour sortir votre logement de son état de - passoire énergétique. -

    -

    - - 5 minutes chrono - {' '} - et sans inscription. -

    - - - - âžž  Calculer mes aides - - - -     -     -     -
    - ) -} - -const timeIsRunningOut = (to) => { - const toDate = new Date(Date.parse(to)) - const now = new Date() - const months = monthDiff(now, toDate) - - if (months < 12) return months + ' mois' - if (months < 12 + 3) return '1 an' - if (months < 12 + 8) return '1 an et demi' - if (months < 12 + 12) return 'moins de 2 ans' - - const years = Math.floor(months / 12), - reminder = months % 12 - if (years > 8) return years + ' ans' - if (reminder > 6) return `moins de ${years + 1} ans` - return `${years} ans` -} - -function monthDiff(dateFrom, dateTo) { - return ( - dateTo.getMonth() - - dateFrom.getMonth() + - 12 * (dateTo.getFullYear() - dateFrom.getFullYear()) - ) -} diff --git a/components/DPE-GES-bout-rond.svg b/components/DPE-GES-bout-rond.svg new file mode 100644 index 00000000..e61175ed --- /dev/null +++ b/components/DPE-GES-bout-rond.svg @@ -0,0 +1,15 @@ + + + + + diff --git a/components/DPE.tsx b/components/DPE.tsx index 9326c850..77441b33 100644 --- a/components/DPE.tsx +++ b/components/DPE.tsx @@ -1,3 +1,4 @@ +'use client' import React, { Component } from 'react' class Diag extends Component { diff --git a/components/DPE.yaml b/components/DPE.yaml index ffa9a85a..e6e1b1cc 100644 --- a/components/DPE.yaml +++ b/components/DPE.yaml @@ -2,28 +2,35 @@ climat: 6 couleur: '#009c6d' lettre: A + couleur GES: '#a5dbfa' - énergie: 110 climat: 11 couleur: '#52b153' + couleur GES: '#8bb4d1' lettre: B - énergie: 180 climat: 30 couleur: '#78bd76' + couleur GES: '#7992ae' lettre: C - énergie: 180 climat: 30 couleur: '#f4e70f' + couleur GES: '#5f708f' lettre: D - énergie: 250 climat: 50 couleur: '#f0b50f' + couleur GES: '#4f5073' lettre: E - énergie: 330 climat: 70 couleur: '#eb8235' + couleur GES: '#393451' lettre: F - énergie: 420 climat: 100 couleur: '#d7221f' + couleur GES: '#281b34' lettre: G couleur du texte: white diff --git a/components/DPE2.tsx b/components/DPE2.tsx index 2758ff6c..9dffcb7e 100644 --- a/components/DPE2.tsx +++ b/components/DPE2.tsx @@ -3,54 +3,106 @@ import { styled } from 'styled-components' import css from './css/convertToJs' import data from './DPE.yaml' -export default function DPE({ letter, newLetter, onClick }) { +export default function DPE({ + letter, + newLetter, + onClick, + avecGES = false, + gesLetter = undefined, +}) { /* - * + * data's format - énergie: 420 climat: 100 couleur: '#d7221f' lettre: G - * */ +*/ - const found = data.find((el) => el.letter === letter) return ( - - + + {avecGES && ( + + + + )} + ) } +const Section = styled.section` + display: flex; + flex-wrap: wrap; + align-items: center; +` + const Bars = styled.div` ul { list-style-type: none; @@ -138,3 +190,38 @@ const Triangle = ({ background, selected, selected2 }) => ( /> ) + +const SemiRound = ({ background, selected, selected2 }) => ( + + + +) From 4a6b03f80ddb3e1a6a477376e64d87c9df7029f0 Mon Sep 17 00:00:00 2001 From: Mael Date: Thu, 27 Feb 2025 11:13:18 +0100 Subject: [PATCH 02/12] Fin du composant DPE, DPE2 devient DPE MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit DPE était notre inspiration, dans un vieux React et un vieux style de DPE anguleux --- app/dpe/page.tsx | 2 +- components/DPE.tsx | 762 +++++++++++-------------------------- components/DPE2.tsx | 227 ----------- components/DPESelector.tsx | 2 +- 4 files changed, 216 insertions(+), 777 deletions(-) delete mode 100644 components/DPE2.tsx diff --git a/app/dpe/page.tsx b/app/dpe/page.tsx index 1cb60fc5..0406baad 100644 --- a/app/dpe/page.tsx +++ b/app/dpe/page.tsx @@ -1,4 +1,4 @@ -import DPE from '@/components/DPE2' +import DPE from '@/components/DPE' import { Intro, PageBlock } from '@/components/UI' import css from '@/components/css/convertToJs' import { Content, Wrapper } from '@/components/explications/ExplicationUI' diff --git a/components/DPE.tsx b/components/DPE.tsx index 77441b33..9dffcb7e 100644 --- a/components/DPE.tsx +++ b/components/DPE.tsx @@ -1,561 +1,227 @@ 'use client' -import React, { Component } from 'react' - -class Diag extends Component { - // Default options is DPE - defaultOptions = { - width: 250, - height: 200, - value: 200, - valuesRange: [ - { - min: null, - max: 70, - color: '#319834', - textColor: '#000000', - label: 'A', - }, - { - min: 71, - max: 110, - color: '#33cc31', - textColor: '#000000', - label: 'B', - }, - { - min: 111, - max: 180, - color: '#cbfc34', - textColor: '#000000', - label: 'C', - }, - { - min: 181, - max: 250, - color: '#fbfe06', - textColor: '#000000', - label: 'D', - }, - { - min: 251, - max: 330, - color: '#fbcc05', - textColor: '#000000', - label: 'E', - }, - { - min: 331, - max: 420, - color: '#fc9935', - textColor: '#000000', - label: 'F', - }, - { - min: 421, - max: null, - color: '#fc0205', - textColor: '#ffffff', - label: 'G', - }, - ], - shadow: false, - lang: 'fr', - pad: 5, - shape: 'sharp', - small: false, - } - - svgNS = 'http://www.w3.org/2000/svg' - - constructor(props) { - super(props) - this.state = { - width: props.width || this.defaultOptions.width, - height: props.height || this.defaultOptions.height, - value: props.value || this.defaultOptions.value, - shadow: props.shadow || this.defaultOptions.shadow, - lang: props.lang || this.defaultOptions.lang, - pad: props.pad || this.defaultOptions.pad, - shape: props.shape || this.defaultOptions.shape, - small: props.small || this.defaultOptions.small, - } +import { styled } from 'styled-components' +import css from './css/convertToJs' +import data from './DPE.yaml' + +export default function DPE({ + letter, + newLetter, + onClick, + avecGES = false, + gesLetter = undefined, +}) { + /* + * data's format +- énergie: 420 + climat: 100 + couleur: '#d7221f' + lettre: G +*/ + + return ( +
    + +
      + {data.map((el, index) => ( +
    • onClick(index)} + > + + + {' '} + {el.lettre} + + {el.lettre === letter + ? 'Votre DPE' + : el.lettre === newLetter + ? 'visé' + : ''} + + + +
      • + ))} +
    +     + {avecGES && ( + +
      + {data.map((el, index) => { + const color = el['couleur GES'] + return ( +
    • onClick(index)} + > + + + {' '} + {el.lettre} + + {el.lettre === letter + ? 'Votre DPE' + : el.lettre === newLetter + ? 'visé' + : ''} + + + +
      • + ) + })} +
    +     + )} +
    + ) +} - this.container = React.createRef() +const Section = styled.section` + display: flex; + flex-wrap: wrap; + align-items: center; +` - this.getValuesDatas = this.getValuesDatas.bind(this) - this.getScore = this.getScore.bind(this) - this.setAttributes = this.setAttributes.bind(this) - this.getPath = this.getPath.bind(this) - this.getPolygon = this.getPolygon.bind(this) - this.getText = this.getText.bind(this) - this.createSVG = this.createSVG.bind(this) - this.update = this.update.bind(this) +const Bars = styled.div` + ul { + list-style-type: none; + padding-left: 0; } - - shouldComponentUpdate(nextProps, nextState) { - return nextProps.value !== this.props.value +` +const size = '2.2rem' +const Li = styled.li` + display: flex; + align-items: center; + svg { + width: ${size}; + height: ${size}; } - - getValuesDatas() { - const values = [] - const colors = [] - const labels = [] - - var toTxt = ' à ' - switch (this.state.lang) { - case 'fr': - toTxt = ' à ' - break - case 'en': - toTxt = ' to ' - break - } - this.props.valuesRange.forEach(function (value) { - if (value.min === null && value.max !== null) { - values.push('≤ ' + value.max) - } else if (value.min !== null && value.max !== null) { - values.push(value.min + toTxt + value.max) - } else if (value.min !== null && value.max === null) { - values.push('> ' + (value.min - 1)) - } - colors.push(value.color) - labels.push(value.label) - }) - - return { - values: values, - colors: colors, - labels: labels, - } + input { + margin-right: 0.6rem; + cursor: pointer; } - - getScore() { - let score = -1 - for (const values of this.props.valuesRange) { - score++ - if (typeof this.state.value === 'string') { - if (this.state.value === values.label) { - break - } - } else if (values.min === null && values.max !== null) { - if (this.state.value <= values.max) { - break - } - } else if (values.min !== null && values.max !== null) { - if (this.state.value >= values.min && this.state.value <= values.max) { - break - } - } else if (values.min !== null && values.max === null) { - if (this.state.value >= values.min) { - break - } - } - } - return score +` +const Bar = styled.label` + background: ${(p) => p.$background}; + width: ${(p) => 3 + (p.$index + 1) * 1.5}rem; + margin: 0.2rem 0; + padding-left: 0.6rem; + color: white; + text-shadow: 1px 2px 4px black; + display: flex; + align-items: center; + > span:first-child { + font-weight: bold; + font-size: 150%; + margin-right: 0.6rem; + line-height: ${size}; } - - setAttributes(elem, o) { - if (o.fill) { - elem.setAttribute('fill', o.fill) - } - if (o.fontSize) { - elem.setAttribute('font-size', o.fontSize) - } - if (o.fontFamily) { - elem.setAttribute('font-family', o.fontFamily) - } - if (o.textAnchor) { - elem.setAttribute('text-anchor', o.textAnchor) - } - if (o.fontWeight) { - elem.setAttribute('font-weight', o.fontWeight) - } - if (o.strokeWidth) { - elem.setAttribute('stroke-width', o.strokeWidth) - } - if (o.stroke) { - elem.setAttribute('stroke', o.stroke) - } - if (o.opacity) { - elem.setAttribute('opacity', o.opacity) - } + small { + font-size: 80%; + white-space: nowrap; + text-shadow: 1px 1px 2px black; } - getPath(path, options) { - var elem = document.createElementNS(this.svgNS, 'path') - this.setAttributes(elem, options) - elem.setAttribute('d', path) - return elem + height: ${size}; + border: ${(p) => + p.$selected + ? `2px solid var(--color)` + : p.$selected2 + ? `2px dashed var(--color)` + : `none`}; + border-right: none; + z-index: 1; + line-height: 1.6rem; + cursor: pointer; +` + +const Triangle = ({ background, selected, selected2 }) => ( + + + +) + +const SemiRound = ({ background, selected, selected2 }) => ( + + { - const index = e.target.parentNode.dataset.i - this.props.onClick(index) - }) - svg.appendChild(group) - group.appendChild(this.getPolygon(poly, i, datas.colors[i])) - - var whiteIdx = this.state.shape === 'sharp' ? 5 : 3 - - group.appendChild( - this.getText({ - x: x1 - this.state.pad, - y: y + blocHeight * 0.8, - text: datas.labels[i], - options: { - fill: i > whiteIdx ? '#ffffff' : '#000000', - fontSize: blocHeight * 0.8, - fontWeight: 'bold', - fontFamily: "'Arial Narrow', sans-serif", - textAnchor: 'end', - }, - }), - ) - group.appendChild( - this.getText({ - x: x + this.state.pad, - y: y + blocHeight - (blocHeight * 0.6) / 2, - text: datas.values[i], - options: { - fill: i > whiteIdx ? '#ffffff' : '#000000', - fontSize: blocHeight * 0.6, - fontFamily: "'Arial Narrow', sans-serif", - textAnchor: 'start', - }, - }), - ) - } - return svg - } - - update() { - let child - while ((child = this.container.lastElementChild)) { - this.container.removeChild(child) - } - this.container.appendChild(this.createSVG()) - } - - componentDidMount() { - this.update() - } - - componentDidUpdate() { - this.update() - } - - render() { - return
    (this.container = DOMNodeRef)} /> - } -} - -export function DPE(props) { - const valuesRange = [ - { - min: null, - max: 70, - color: '#319834', - textColor: '#000000', - label: 'A', - }, - { - min: 71, - max: 110, - color: '#33cc31', - textColor: '#000000', - label: 'B', - }, - { - min: 111, - max: 180, - color: '#cbfc34', - textColor: '#000000', - label: 'C', - }, - { - min: 181, - max: 250, - color: '#fbfe06', - textColor: '#000000', - label: 'D', - }, - { - min: 251, - max: 330, - color: '#fbcc05', - textColor: '#000000', - label: 'E', - }, - { - min: 331, - max: 420, - color: '#fc9935', - textColor: '#000000', - label: 'F', - }, - { - min: 421, - max: null, - color: '#fc0205', - textColor: '#ffffff', - label: 'G', - }, - ] - - return -} - -export function GES(props) { - const valuesRange = [ - { - min: null, - max: 6, - color: '#b4d9f6', - textColor: '#fff', - label: 'A', - }, - { - min: 7, - max: 11, - color: '#97b1d4', - textColor: '#fff', - label: 'B', - }, - { - min: 12, - max: 30, - color: '#7d90b0', - textColor: '#fff', - label: 'C', - }, - { - min: 31, - max: 50, - color: '#656f8b', - textColor: '#fff', - label: 'D', - }, - { - min: 51, - max: 70, - color: '#4e5170', - textColor: '#fff', - label: 'E', - }, - { - min: 71, - max: 100, - color: '#3b3854', - textColor: '#fff', - label: 'F', - }, - { - min: 101, - max: null, - color: '#271f39', - textColor: '#fff', - label: 'G', - }, - ] - - return -} + + `)} + d="M 0.02153,0.18293901 V 398.82896 c 0,0 180.20833,-4.3195 180.20833,-199.39978 C 180.22986,4.2041291 0.02153,0.18293901 0.02153,0.18293901 Z" + /> + +) diff --git a/components/DPE2.tsx b/components/DPE2.tsx deleted file mode 100644 index 9dffcb7e..00000000 --- a/components/DPE2.tsx +++ /dev/null @@ -1,227 +0,0 @@ -'use client' -import { styled } from 'styled-components' -import css from './css/convertToJs' -import data from './DPE.yaml' - -export default function DPE({ - letter, - newLetter, - onClick, - avecGES = false, - gesLetter = undefined, -}) { - /* - * data's format -- énergie: 420 - climat: 100 - couleur: '#d7221f' - lettre: G -*/ - - return ( -
    - -
      - {data.map((el, index) => ( -
    • onClick(index)} - > - - - {' '} - {el.lettre} - - {el.lettre === letter - ? 'Votre DPE' - : el.lettre === newLetter - ? 'visé' - : ''} - - - -
      • - ))} -
    -     - {avecGES && ( - -
      - {data.map((el, index) => { - const color = el['couleur GES'] - return ( -
    • onClick(index)} - > - - - {' '} - {el.lettre} - - {el.lettre === letter - ? 'Votre DPE' - : el.lettre === newLetter - ? 'visé' - : ''} - - - -
      • - ) - })} -
    -     - )} -
    - ) -} - -const Section = styled.section` - display: flex; - flex-wrap: wrap; - align-items: center; -` - -const Bars = styled.div` - ul { - list-style-type: none; - padding-left: 0; - } -` -const size = '2.2rem' -const Li = styled.li` - display: flex; - align-items: center; - svg { - width: ${size}; - height: ${size}; - } - input { - margin-right: 0.6rem; - cursor: pointer; - } -` -const Bar = styled.label` - background: ${(p) => p.$background}; - width: ${(p) => 3 + (p.$index + 1) * 1.5}rem; - margin: 0.2rem 0; - padding-left: 0.6rem; - color: white; - text-shadow: 1px 2px 4px black; - display: flex; - align-items: center; - > span:first-child { - font-weight: bold; - font-size: 150%; - margin-right: 0.6rem; - line-height: ${size}; - } - small { - font-size: 80%; - white-space: nowrap; - text-shadow: 1px 1px 2px black; - } - - height: ${size}; - border: ${(p) => - p.$selected - ? `2px solid var(--color)` - : p.$selected2 - ? `2px dashed var(--color)` - : `none`}; - border-right: none; - z-index: 1; - line-height: 1.6rem; - cursor: pointer; -` - -const Triangle = ({ background, selected, selected2 }) => ( - - - -) - -const SemiRound = ({ background, selected, selected2 }) => ( - - - -) diff --git a/components/DPESelector.tsx b/components/DPESelector.tsx index fda121bb..cec9b76b 100644 --- a/components/DPESelector.tsx +++ b/components/DPESelector.tsx @@ -1,4 +1,4 @@ -import DPE from './DPE2' +import DPE from './DPE' import { encodeSituation } from './publicodes/situationUtils' import data from '@/components/DPE.yaml' import css from './css/convertToJs' From 1dc7f8cf06f376ab96337b19cff3b53222c48fad Mon Sep 17 00:00:00 2001 From: Mael Date: Thu, 27 Feb 2025 11:25:49 +0100 Subject: [PATCH 03/12] =?UTF-8?q?v1=20d'un=20composant=20DPE=20non=20s?= =?UTF-8?q?=C3=A9lectionnable=20avec=20GES?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/DPE.tsx | 99 +++++++++++++++++++++----------------- components/DPESelector.tsx | 3 +- 2 files changed, 57 insertions(+), 45 deletions(-) diff --git a/components/DPE.tsx b/components/DPE.tsx index 9dffcb7e..42c075da 100644 --- a/components/DPE.tsx +++ b/components/DPE.tsx @@ -6,7 +6,7 @@ import data from './DPE.yaml' export default function DPE({ letter, newLetter, - onClick, + onClick = undefined, avecGES = false, gesLetter = undefined, }) { @@ -26,9 +26,9 @@ export default function DPE({
  • onClick(index)} + onClick={() => onClick && onClick(index)} > - + {onClick && } {avecGES && ( - -
      - {data.map((el, index) => { - const color = el['couleur GES'] - return ( -
    • onClick(index)} - > - - + +
        + {data.map((el, index) => { + const color = el['couleur GES'] + return ( +
      • - {' '} - {el.lettre} - - {el.lettre === letter - ? 'Votre DPE' - : el.lettre === newLetter - ? 'visé' - : ''} - - - -
        • - ) - })} -
      -       + {onClick && ( + + )} + + {' '} + {el.lettre} + + {el.lettre === letter + ? 'Votre DPE' + : el.lettre === newLetter + ? 'visé' + : ''} + + + +
      • + ) + })} +
    +     + )} ) } +const sizeGES = '1.6rem' + const Section = styled.section` display: flex; flex-wrap: wrap; align-items: center; + gap: 2rem; +` +const GESWrapper = styled.div` + border: 3px solid #a5dbfa; + border-radius: 1rem; + padding: 0.8rem; ` const Bars = styled.div` @@ -114,8 +127,8 @@ const Li = styled.li` display: flex; align-items: center; svg { - width: ${size}; - height: ${size}; + width: ${(p) => p.$size || size}; + height: ${(p) => p.$size || size}; } input { margin-right: 0.6rem; @@ -135,7 +148,7 @@ const Bar = styled.label` font-weight: bold; font-size: 150%; margin-right: 0.6rem; - line-height: ${size}; + line-height: ${(p) => p.$size || size}; } small { font-size: 80%; @@ -143,7 +156,7 @@ const Bar = styled.label` text-shadow: 1px 1px 2px black; } - height: ${size}; + height: ${(p) => p.$size || size}; border: ${(p) => p.$selected ? `2px solid var(--color)` diff --git a/components/DPESelector.tsx b/components/DPESelector.tsx index cec9b76b..c748b286 100644 --- a/components/DPESelector.tsx +++ b/components/DPESelector.tsx @@ -1,7 +1,6 @@ +import data from '@/components/DPE.yaml' import DPE from './DPE' import { encodeSituation } from './publicodes/situationUtils' -import data from '@/components/DPE.yaml' -import css from './css/convertToJs' export default function DPESelector({ setSearchParams, From e0421723f253fe17489bd000b969a47fb57d11b9 Mon Sep 17 00:00:00 2001 From: Morgan Merzouk Date: Tue, 4 Mar 2025 11:57:31 +0100 Subject: [PATCH 04/12] Ajout et correction des seuils sur le composant DPE --- components/DPE.tsx | 187 +++++++++++++++++++------------------------- components/DPE.yaml | 12 +-- 2 files changed, 85 insertions(+), 114 deletions(-) diff --git a/components/DPE.tsx b/components/DPE.tsx index 42c075da..38420801 100644 --- a/components/DPE.tsx +++ b/components/DPE.tsx @@ -20,100 +20,107 @@ export default function DPE({ return (
    - -
      - {data.map((el, index) => ( -
    • onClick && onClick(index)} - > - {onClick && } - +

      Classe Energétique

      +

      Consommation d'énergie

      + +
        + {data.map((el, index) => ( +
      • onClick && onClick(index)} > - {' '} - {el.lettre} - - {el.lettre === letter - ? 'Votre DPE' - : el.lettre === newLetter - ? 'visé' - : ''} - - - -
        • - ))} -
      -       + {onClick && ( + + )} + + {' '} + + {el.lettre}{' '} + + {index == 0 + ? '<= ' + data[index + 1].énergie + : index == 6 + ? '> ' + el.énergie + : el.énergie + 1 + ' à ' + data[index + 1].énergie} + + + + +
      • + ))} +
    +     + en kWhEP/m².an + {avecGES && ( - + +

    Classe GES

    +

    Emissions de gaz à effet de serre

      - {data.map((el, index) => { - const color = el['couleur GES'] - return ( -
    • ( +
    • + {onClick && ( + + )} + - {onClick && ( - - )} - - {' '} - {el.lettre} + {' '} + + {el.lettre}{' '} - {el.lettre === letter - ? 'Votre DPE' - : el.lettre === newLetter - ? 'visé' - : ''} + {index == 0 + ? '<= ' + data[index + 1].climat + : index == 6 + ? '> ' + el.climat + : el.climat + 1 + ' à ' + data[index + 1].climat} - - -
      • - ) - })} + + + + + ))}
    -     + en kgeqCO²/m².an + )}
    ) } -const sizeGES = '1.6rem' - const Section = styled.section` display: flex; flex-wrap: wrap; align-items: center; gap: 2rem; ` -const GESWrapper = styled.div` +const ClasseWrapper = styled.div` border: 3px solid #a5dbfa; border-radius: 1rem; padding: 0.8rem; + h3 { + margin: 0; + } ` const Bars = styled.div` @@ -137,7 +144,7 @@ const Li = styled.li` ` const Bar = styled.label` background: ${(p) => p.$background}; - width: ${(p) => 3 + (p.$index + 1) * 1.5}rem; + width: ${(p) => 3 + (p.$index + 2) * 1.5}rem; margin: 0.2rem 0; padding-left: 0.6rem; color: white; @@ -147,11 +154,10 @@ const Bar = styled.label` > span:first-child { font-weight: bold; font-size: 150%; - margin-right: 0.6rem; line-height: ${(p) => p.$size || size}; } small { - font-size: 80%; + font-size: 60%; white-space: nowrap; text-shadow: 1px 1px 2px black; } @@ -203,38 +209,3 @@ const Triangle = ({ background, selected, selected2 }) => ( /> ) - -const SemiRound = ({ background, selected, selected2 }) => ( - - - -) diff --git a/components/DPE.yaml b/components/DPE.yaml index e6e1b1cc..e8e5f612 100644 --- a/components/DPE.yaml +++ b/components/DPE.yaml @@ -1,15 +1,15 @@ -- énergie: 70 - climat: 6 +- énergie: 0 + climat: 0 couleur: '#009c6d' lettre: A couleur GES: '#a5dbfa' -- énergie: 110 - climat: 11 +- énergie: 70 + climat: 6 couleur: '#52b153' couleur GES: '#8bb4d1' lettre: B -- énergie: 180 - climat: 30 +- énergie: 110 + climat: 11 couleur: '#78bd76' couleur GES: '#7992ae' lettre: C From 0b11e9aae138fa00b035d28fc2f2c052d38a8c87 Mon Sep 17 00:00:00 2001 From: Morgan Merzouk Date: Tue, 4 Mar 2025 14:45:41 +0100 Subject: [PATCH 05/12] Le composant DPELabel fait maintenant la conversion lettre -> index --- components/DPELabel.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/components/DPELabel.tsx b/components/DPELabel.tsx index 6721e242..44a5efe3 100644 --- a/components/DPELabel.tsx +++ b/components/DPELabel.tsx @@ -2,7 +2,12 @@ import dpeData from '@/components/DPE.yaml' -export default function DPELabel({ index, small = true }) { +export default function DPELabel({ index, label = null, small = true }) { + const conversionLettreIndex = ['A', 'B', 'C', 'D', 'E', 'F', 'G'] + if (label) { + index = conversionLettreIndex.indexOf(label) + } + if (+index > 6 || index < 0) return ( Date: Tue, 4 Mar 2025 15:47:27 +0100 Subject: [PATCH 06/12] Ajout des fichiers data sur la valeur verte des logements --- .gitignore | 2 + data/valeur-verte-appartement.csv | 15 ++++ data/valeur-verte-maison.csv | 134 ++++++++++++++++++++++++++++++ 3 files changed, 151 insertions(+) create mode 100644 data/valeur-verte-appartement.csv create mode 100644 data/valeur-verte-maison.csv diff --git a/.gitignore b/.gitignore index 50580fe2..cf342179 100644 --- a/.gitignore +++ b/.gitignore @@ -44,6 +44,8 @@ data/* !data/README.md !data/exonération-taxe-foncière-population.csv !data/ort.csv +!data/valeur-verte-maison.csv +!data/valeur-verte-appartement.csv deno.lock public/mesaidesreno.model.json diff --git a/data/valeur-verte-appartement.csv b/data/valeur-verte-appartement.csv new file mode 100644 index 00000000..64d7aa3e --- /dev/null +++ b/data/valeur-verte-appartement.csv @@ -0,0 +1,15 @@ +;AB;C;E;FG +Auvergne-Rhône-Alpes;5% à 9%;3% à 5%;-5% à -4%;-11% à -9% +Bourgogne-Franche-Comté;12% à 24%;8% à 12%;;-16% à -12% +Bretagne;8% à 15%;3% à 6%;-6% à -3%;-11% à -8% +Centre-Val de Loire;;3% à 7%;-8% à -4%;-16% à -11% +Grand Est;13% à 20%;5% à 8%;-8% à -5%;-16% à -13% +Hauts-de-France;3% à 13%;3% à 7%;-7% à -4%;-16% à -12% +Normandie;10% à 24%;5% à 9%;;-8% à -5% +Nouvelle Aquitaine;6% à 11%;4% à 6%;-7% à -4%;-16% à -13% +Occitanie;18% à 22%;6% à 8%;-4% à -1%;-9% à -5% +Pays de la Loire;;;-7% à -4%;-16% à -12% +Provence-Alpes-Côte d'Azur;10% à 13%;5% à 6%;-5% à -3%;-14% à -11% +;;;-2% à -1%;-8% à -6% +Île-de-France - Paris Île-de-France - Petite Couronne;3% à 6%;1% à 3%;-3% à -1%;-9% à -7% +Île-de-France - Grande Couronne;5% à 9%;3% à 5%;-3% à -1%;-11% à -9% diff --git a/data/valeur-verte-maison.csv b/data/valeur-verte-maison.csv new file mode 100644 index 00000000..04c399de --- /dev/null +++ b/data/valeur-verte-maison.csv @@ -0,0 +1,134 @@ +;AB;C;E;FG +Auvergne-Rhône-Alpes;7% à 10%;3% à 5%;-6% à -5%;-19% à -17% +Bourgogne-Franche-Comté;12% à 18%;6% à 10%;-11% à -8%;-25% à -23% +Bretagne;9% à 13%;5%à 8%;-10% à -8%;-20% à -18% +Centre-Val de Loire;9% à 14%;4% à 7%;-8% à -6%;-21% à -19% +Grand Est;12% à 17%;7% à 10%;-10% à -8%;-24% à -22% +Hauts-de-France;8% à 12%;5% à 7%;-10% à -8%;-24% à -22% +Normandie;8% à 12%;3% à 6%;-7% à -5%;-19% à -17% +Nouvelle Aquitaine;11% à 14%;6% à 8%;-11% à -10%;-26% à -24% +Occitanie;17% à 19%;8% à 9%;-10% à -8%;-18% à -16% +Pays de la Loire;11% à 14%;4% à 6%;-8% à -6%;-19% à -17% +Provence-Alpes-Côte d'Azur;8% à 12%;2% à 4%;-6% à -4%;-15% à -12% +;;;; +Île-de-France - Paris Île-de-France - Petite Couronne;;;-6% à -5%;-9% à -6% +Île-de-France - Grande Couronne;4% à 7%;2% à 4%;-6% à -5%;-11% à -9% +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; +;;;; From 04c8abb5f2ecd0714cbd0632f67b970d45ce8c97 Mon Sep 17 00:00:00 2001 From: Morgan Merzouk Date: Tue, 4 Mar 2025 15:49:03 +0100 Subject: [PATCH 07/12] =?UTF-8?q?R=C3=A9duction=20de=20la=20largeur=20du?= =?UTF-8?q?=20composant=20DPE=20pour=20essayer=20de=20le=20faire=20tenir?= =?UTF-8?q?=20en=20image=20d'illustration?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/DPE.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/components/DPE.tsx b/components/DPE.tsx index 38420801..274c36e7 100644 --- a/components/DPE.tsx +++ b/components/DPE.tsx @@ -110,14 +110,10 @@ export default function DPE({ const Section = styled.section` display: flex; - flex-wrap: wrap; align-items: center; - gap: 2rem; + gap: 0.5rem; ` const ClasseWrapper = styled.div` - border: 3px solid #a5dbfa; - border-radius: 1rem; - padding: 0.8rem; h3 { margin: 0; } @@ -144,7 +140,7 @@ const Li = styled.li` ` const Bar = styled.label` background: ${(p) => p.$background}; - width: ${(p) => 3 + (p.$index + 2) * 1.5}rem; + width: ${(p) => 3 + (p.$index + 1.5) * 1.5}rem; margin: 0.2rem 0; padding-left: 0.6rem; color: white; From d73007ad6c662d7b01e26972e96a26a5da2d1404 Mon Sep 17 00:00:00 2001 From: Morgan Merzouk Date: Tue, 4 Mar 2025 15:49:17 +0100 Subject: [PATCH 08/12] Initialisation d'une page DPE par lettre --- app/dpe/[lettre]/page.tsx | 141 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 141 insertions(+) create mode 100644 app/dpe/[lettre]/page.tsx diff --git a/app/dpe/[lettre]/page.tsx b/app/dpe/[lettre]/page.tsx new file mode 100644 index 00000000..6a0792de --- /dev/null +++ b/app/dpe/[lettre]/page.tsx @@ -0,0 +1,141 @@ +import { HeaderWrapper } from '@/app/LandingUI' +import DPE from '@/components/DPE' +import DPELabel from '@/components/DPELabel' +import { Intro, PageBlock } from '@/components/UI' +import css from '@/components/css/convertToJs' +import { Content, Wrapper } from '@/components/explications/ExplicationUI' +import illustrationAccueil from '@/public/illustration-accueil.resized.webp' +import dpeData from '@/components/DPE.yaml' +import Image from 'next/image' + +export async function generateMetadata({ + params, +}: { + params: { lettre: string } +}) { + return { + title: `Les informations importantes pour les logements avec un DPE ${params.lettre}`, + description: `Pour les logements classés ${params.lettre} : quelles sont les aides à la rénovation? y a-t-il une interdiction de location? quel est l'impact sur le prix à la revente?`, + openGraph: { images: ['/jaquette.png'] }, + } +} +export default async function Page(props: Props) { + const lettre = (await props.params).lettre + const index = dpeData.findIndex((c) => { + return c.lettre == lettre + }) + + const interdictionLocation = { + G: 2025, + F: 2028, + E: 2032, + } + + return ( +
    + + +
    +

    + Le DPE de classe +

    + +

    + En France hexagonale, le Diagnostic de Performance Énergétique + informe sur la performance énergétique d'un bien. +

    +

    + Il vise à renseigner sur la performance énergétique et + climatique en se basant sur: +

      +
    • la consommation en énergie primaire
      • +
    • les émissions de gaz à effet de serre
      • +
    +

    +

    + Ce diagnostic est un élément clé à prendre en compte lorsque + l'on cherche à acheter, louer, vendre ou encore rénover un + logement. +

    +     +
    + +     + + +

    Comprendre son DPE

    +

    + L'étiquette énergétique finale est définie selon la méthode des + double seuils: un logement étant classé selon sa plus mauvaise + performance, en énergie primaire ou en gaz à effet de serre. +

    +

    + Un logement classé consomme au pire{' '} + {index == 6 ? ( + <> + plus de {dpeData[index]['énergie']} + kWhEP/m².an + + ) : ( + <> + {dpeData[index + 1]['énergie']} + kWhEP/m².an + + )}{' '} + et émet au pire{' '} + {index == 6 ? ( + <> + plus de {dpeData[index]['climat']} + kgeqCO²/m².an + + ) : ( + <> + {dpeData[index + 1]['climat']} + kgeqCO²/m².an + + )} + . +

    +
    +     +     + + +

    Quel impact sur la valeur de mon logement ?

    +     +     + + +

    Quelles aides sont mobilisables ?

    +
    +

    Une interdiction de location est-elle prévue?

    + {Object.keys(interdictionLocation).includes(lettre) ? ( + <> + Une interdiction de location est prévue à partir du{' '} + + 1er janvier {interdictionLocation[lettre]} + {' '} + pour les logements avec un DPE + + ) : ( + <> + Aucune interdiction de location n'est actuellement prévu pour un + logement avec un DPE + + )} +     +     +     +
    + ) +} From c1e4dc89d0cb80dfa2220934276ff4f30124530e Mon Sep 17 00:00:00 2001 From: Morgan Merzouk Date: Tue, 4 Mar 2025 16:04:19 +0100 Subject: [PATCH 09/12] Correction de l'encodage --- data/valeur-verte-appartement.csv | 30 +++--- data/valeur-verte-maison.csv | 149 +++--------------------------- 2 files changed, 30 insertions(+), 149 deletions(-) diff --git a/data/valeur-verte-appartement.csv b/data/valeur-verte-appartement.csv index 64d7aa3e..d4449992 100644 --- a/data/valeur-verte-appartement.csv +++ b/data/valeur-verte-appartement.csv @@ -1,15 +1,15 @@ -;AB;C;E;FG -Auvergne-Rhône-Alpes;5% à 9%;3% à 5%;-5% à -4%;-11% à -9% -Bourgogne-Franche-Comté;12% à 24%;8% à 12%;;-16% à -12% -Bretagne;8% à 15%;3% à 6%;-6% à -3%;-11% à -8% -Centre-Val de Loire;;3% à 7%;-8% à -4%;-16% à -11% -Grand Est;13% à 20%;5% à 8%;-8% à -5%;-16% à -13% -Hauts-de-France;3% à 13%;3% à 7%;-7% à -4%;-16% à -12% -Normandie;10% à 24%;5% à 9%;;-8% à -5% -Nouvelle Aquitaine;6% à 11%;4% à 6%;-7% à -4%;-16% à -13% -Occitanie;18% à 22%;6% à 8%;-4% à -1%;-9% à -5% -Pays de la Loire;;;-7% à -4%;-16% à -12% -Provence-Alpes-Côte d'Azur;10% à 13%;5% à 6%;-5% à -3%;-14% à -11% -;;;-2% à -1%;-8% à -6% -Île-de-France - Paris Île-de-France - Petite Couronne;3% à 6%;1% à 3%;-3% à -1%;-9% à -7% -Île-de-France - Grande Couronne;5% à 9%;3% à 5%;-3% à -1%;-11% à -9% +Région;AB;C;E;FG +Auvergne-Rhône-Alpes;5% à 9%;3% à 5%;-5% à -4%;-11% à -9% +Bourgogne-Franche-Comté;12% à 24%;8% à 12%;;-16% à -12% +Bretagne;8% à 15%;3% à 6%;-6% à -3%;-11% à -8% +Centre-Val de Loire;;3% à 7%;-8% à -4%;-16% à -11% +Grand Est;13% à 20%;5% à 8%;-8% à -5%;-16% à -13% +Hauts-de-France;3% à 13%;3% à 7%;-7% à -4%;-16% à -12% +Normandie;10% à 24%;5% à 9%;;-8% à -5% +Nouvelle Aquitaine;6% à 11%;4% à 6%;-7% à -4%;-16% à -13% +Occitanie;18% à 22%;6% à 8%;-4% à -1%;-9% à -5% +Pays de la Loire;;;-7% à -4%;-16% à -12% +Provence-Alpes-Côte d'Azur;10% à 13%;5% à 6%;-5% à -3%;-14% à -11% +Paris;;;-2% à -1%;-8% à -6% +Ile-de-France - Petite Couronne;3% à 6%;1% à 3%;-3% à -1%;-9% à -7% +Ile-de-France - Grande Couronne;5% à 9%;3% à 5%;-3% à -1%;-11% à -9% diff --git a/data/valeur-verte-maison.csv b/data/valeur-verte-maison.csv index 04c399de..29ad6272 100644 --- a/data/valeur-verte-maison.csv +++ b/data/valeur-verte-maison.csv @@ -1,134 +1,15 @@ -;AB;C;E;FG -Auvergne-Rhône-Alpes;7% à 10%;3% à 5%;-6% à -5%;-19% à -17% -Bourgogne-Franche-Comté;12% à 18%;6% à 10%;-11% à -8%;-25% à -23% -Bretagne;9% à 13%;5%à 8%;-10% à -8%;-20% à -18% -Centre-Val de Loire;9% à 14%;4% à 7%;-8% à -6%;-21% à -19% -Grand Est;12% à 17%;7% à 10%;-10% à -8%;-24% à -22% -Hauts-de-France;8% à 12%;5% à 7%;-10% à -8%;-24% à -22% -Normandie;8% à 12%;3% à 6%;-7% à -5%;-19% à -17% -Nouvelle Aquitaine;11% à 14%;6% à 8%;-11% à -10%;-26% à -24% -Occitanie;17% à 19%;8% à 9%;-10% à -8%;-18% à -16% -Pays de la Loire;11% à 14%;4% à 6%;-8% à -6%;-19% à -17% -Provence-Alpes-Côte d'Azur;8% à 12%;2% à 4%;-6% à -4%;-15% à -12% -;;;; -Île-de-France - Paris Île-de-France - Petite Couronne;;;-6% à -5%;-9% à -6% -Île-de-France - Grande Couronne;4% à 7%;2% à 4%;-6% à -5%;-11% à -9% -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; -;;;; +Région;AB;C;E;FG +Auvergne-Rhône-Alpes;7% à 10%;3% à 5%;-6% à -5%;-19% à -17% +Bourgogne-Franche-Comt";12% à 18%;6% à 10%;-11% à -8%;-25% à -23% +Bretagne;9% à 13%;5%à 8%;-10% à -8%;-20% à -18% +Centre-Val de Loire;9% à 14%;4% à 7%;-8% à -6%;-21% à -19% +Grand Est;12% à 17%;7% à 10%;-10% à -8%;-24% à -22% +Hauts-de-France;8% à 12%;5% à 7%;-10% à -8%;-24% à -22% +Normandie;8% à 12%;3% à 6%;-7% à -5%;-19% à -17% +Nouvelle Aquitaine;11% à 14%;6% à 8%;-11% à -10%;-26% à -24% +Occitanie;17% à 19%;8% à 9%;-10% à -8%;-18% à -16% +Pays de la Loire;11% à 14%;4% à 6%;-8% à -6%;-19% à -17% +Provence-Alpes-Côte d'Azur;8% à 12%;2% à 4%;-6% à -4%;-15% à -12% +;;;; +Ile-de-France - Petite Couronne;;;-6% à -5%;-9% à -6% +Ile-de-France - Grande Couronne;4% à 7%;2% à 4%;-6% à -5%;-11% à -9% \ No newline at end of file From a8e5520997e99b67dd1cfcca79be732ff8973a18 Mon Sep 17 00:00:00 2001 From: Morgan Merzouk Date: Tue, 4 Mar 2025 16:59:11 +0100 Subject: [PATCH 10/12] Fix typo --- data/valeur-verte-maison.csv | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/data/valeur-verte-maison.csv b/data/valeur-verte-maison.csv index 29ad6272..7407e28b 100644 --- a/data/valeur-verte-maison.csv +++ b/data/valeur-verte-maison.csv @@ -1,6 +1,6 @@ Région;AB;C;E;FG Auvergne-Rhône-Alpes;7% à 10%;3% à 5%;-6% à -5%;-19% à -17% -Bourgogne-Franche-Comt";12% à 18%;6% à 10%;-11% à -8%;-25% à -23% +Bourgogne-Franche-Comté;12% à 18%;6% à 10%;-11% à -8%;-25% à -23% Bretagne;9% à 13%;5%à 8%;-10% à -8%;-20% à -18% Centre-Val de Loire;9% à 14%;4% à 7%;-8% à -6%;-21% à -19% Grand Est;12% à 17%;7% à 10%;-10% à -8%;-24% à -22% From 2381e1934dd5a0ef4255cf7f609b5c0ad1e45e2e Mon Sep 17 00:00:00 2001 From: Morgan Merzouk Date: Tue, 4 Mar 2025 17:00:14 +0100 Subject: [PATCH 11/12] =?UTF-8?q?Cr=C3=A9ation=20de=20CalculatorWidget=20p?= =?UTF-8?q?our=20uniformiser=20l'affichage=20des=20blocs=20de=20calculs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/CalculatorWidget.tsx | 38 +++++++++++++++++++ components/cee/CEEAmpleurScenario.tsx | 36 ++---------------- .../copropriete/ExplicationCopropriete.tsx | 37 ++---------------- components/mpra/DPEScenario.tsx | 35 ++--------------- 4 files changed, 50 insertions(+), 96 deletions(-) create mode 100644 components/CalculatorWidget.tsx diff --git a/components/CalculatorWidget.tsx b/components/CalculatorWidget.tsx new file mode 100644 index 00000000..35e5de3f --- /dev/null +++ b/components/CalculatorWidget.tsx @@ -0,0 +1,38 @@ +'use client' +import calculatorIcon from '@/public/calculator-black.svg' +import Image from 'next/image' +import { Card } from './UI' + +export default function CalculatorWidget({ isMobile, children }) { + return ( + div:nth-child(2) { + display: flex; + ${isMobile && 'flex-direction: column;'} + justify-content: space-between; + gap: 1rem; + } + `} + > +
    + icone calculatrice{' '} +

    À vos calculs !

    +
    + {children} +     + ) +} diff --git a/components/cee/CEEAmpleurScenario.tsx b/components/cee/CEEAmpleurScenario.tsx index 0a8c1588..03ffdd3a 100644 --- a/components/cee/CEEAmpleurScenario.tsx +++ b/components/cee/CEEAmpleurScenario.tsx @@ -1,11 +1,10 @@ import Value from '@/components/Value' -import calculatorIcon from '@/public/calculator-black.svg' import Image from 'next/image' import DPEQuickSwitch from '../DPEQuickSwitch' -import { Card } from '../UI' import { encodeSituation } from '../publicodes/situationUtils' import editIcon from '@/public/crayon.svg' import TargetDPETabs from '../mpra/TargetDPETabs' +import CalculatorWidget from '../CalculatorWidget' export default function CEEAmpleurScenario({ engine, @@ -20,35 +19,8 @@ export default function CEEAmpleurScenario({ choice = value ? Math.min(automaticChoice, value - 1) : automaticChoice return ( - -
    - icone calculatrice{' '} -

    À vos calculs !

    -
    -
    + +
    -     + ) } diff --git a/components/copropriete/ExplicationCopropriete.tsx b/components/copropriete/ExplicationCopropriete.tsx index f4f3a24b..23e7b89e 100644 --- a/components/copropriete/ExplicationCopropriete.tsx +++ b/components/copropriete/ExplicationCopropriete.tsx @@ -14,18 +14,17 @@ import Image from 'next/image' import useSyncUrlLocalStorage from '@/utils/useSyncUrlLocalStorage' import { useSearchParams } from 'next/navigation' import Input from '../Input' -import calculatorIcon from '@/public/calculator-black.svg' import { roundToThousands } from '../utils' import informationIcon from '@/public/information.svg' import Link from 'next/link' import MprCategory from '../MprCategory' -import { omit } from '@/components/utils' import BtnBackToParcoursChoice from '../BtnBackToParcoursChoice' import { CustomQuestionWrapper } from '../CustomQuestionUI' import Value from '../Value' import CopyButton from '../CopyButton' import editIcon from '@/public/crayon.svg' import Select from '../Select' +import CalculatorWidget from '../CalculatorWidget' export default function ExplicationCopropriete() { useSyncUrlLocalStorage() @@ -107,35 +106,8 @@ export default function ExplicationCopropriete() { <> {isEligibile ? ( <> - -
    - icone calculatrice{' '} -

    À vos calculs !

    -
    -
    + +
    - - +     -
    - icone calculatrice{' '} -

    À vos calculs !

    -
    -
    + +
    )} - + ) } From d313d05e3ca31f9d549bbe62c20bea794b2c4359 Mon Sep 17 00:00:00 2001 From: Morgan Merzouk Date: Tue, 4 Mar 2025 17:00:59 +0100 Subject: [PATCH 12/12] =?UTF-8?q?Ajout=20d'un=20param=C3=A8tre=20pour=20g?= =?UTF-8?q?=C3=A9rer=20l'affichage=20ou=20non=20d'information=20compl?= =?UTF-8?q?=C3=A9mentaire=20(bar=C3=A8me,=20titre)=20sur=20le=20DPESelecto?= =?UTF-8?q?r?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/DPE.tsx | 27 +++++++++++++++++---------- 1 file changed, 17 insertions(+), 10 deletions(-) diff --git a/components/DPE.tsx b/components/DPE.tsx index 274c36e7..b0c83180 100644 --- a/components/DPE.tsx +++ b/components/DPE.tsx @@ -8,6 +8,7 @@ export default function DPE({ newLetter, onClick = undefined, avecGES = false, + avecLegend = false, gesLetter = undefined, }) { /* @@ -21,8 +22,12 @@ export default function DPE({ return (
    -

    Classe Energétique

    -

    Consommation d'énergie

    + {avecLegend && ( + <> +

    Classe Energétique

    +

    Consommation d'énergie

    + + )}
      {data.map((el, index) => ( @@ -43,13 +48,15 @@ export default function DPE({ {' '} {el.lettre}{' '} - - {index == 0 - ? '<= ' + data[index + 1].énergie - : index == 6 - ? '> ' + el.énergie - : el.énergie + 1 + ' à ' + data[index + 1].énergie} - + {avecLegend && ( + + {index == 0 + ? '<= ' + data[index + 1].énergie + : index == 6 + ? '> ' + el.énergie + : el.énergie + 1 + ' à ' + data[index + 1].énergie} + + )} - en kWhEP/m².an + {avecLegend && en kWhEP/m².an} {avecGES && (