feat: fiches

incubateur-ademe · Oct 2, 2024 · 22c32ed · 22c32ed
1 parent 4dbe11a
commit 22c32ed
Show file tree

Hide file tree

Showing 29 changed files with 575 additions and 257 deletions.
diff --git a/.gitignore b/.gitignore
@@ -72,3 +72,5 @@ npm/react/dist/index.js.LICENSE.txt
 dist/
 
 public/webcomponents/
+
+public/pdf/
diff --git a/app/pdf/[tool]/[equivalent]/recto/page.tsx b/app/pdf/[tool]/[equivalent]/recto/page.tsx
@@ -0,0 +1,20 @@
+import { notFound } from 'next/navigation'
+import React from 'react'
+import { categories } from 'data/categories'
+import Recto from 'components/outils/equivalents/pdf/Recto'
+import 'components/outils/equivalents/pdf/pdf.css'
+
+const EquivalentPage = ({ params }: { params: { tool: string; equivalent: string } }) => {
+  const category = categories.find((category) => category.slug === params.tool)
+  if (!category || !category.equivalents) {
+    return notFound()
+  }
+  const [slug] = decodeURIComponent(params.equivalent).split('+')
+  const equivalent = category.equivalents.find((equivalent) => equivalent.slug === slug)
+  if (!equivalent) {
+    return notFound()
+  }
+  return <Recto equivalent={equivalent} />
+}
+
+export default EquivalentPage
diff --git a/app/pdf/[tool]/[equivalent]/verso/page.tsx b/app/pdf/[tool]/[equivalent]/verso/page.tsx
@@ -0,0 +1,28 @@
+import { notFound } from 'next/navigation'
+import React from 'react'
+import { ParamProvider } from 'src/providers/ParamProvider'
+import TranslationProvider from 'src/providers/TranslationProvider'
+import { categories } from 'data/categories'
+import Verso from 'components/outils/equivalents/pdf/Verso'
+import 'components/outils/equivalents/pdf/pdf.css'
+
+const EquivalentPage = ({ params }: { params: { tool: string; equivalent: string } }) => {
+  const category = categories.find((category) => category.slug === params.tool)
+  if (!category || !category.equivalents) {
+    return notFound()
+  }
+  const [slug] = decodeURIComponent(params.equivalent).split('+')
+  const equivalent = category.equivalents.find((equivalent) => equivalent.slug === slug)
+  if (!equivalent) {
+    return notFound()
+  }
+  return (
+    <ParamProvider>
+      <TranslationProvider>
+        <Verso equivalent={equivalent} category={category} />
+      </TranslationProvider>
+    </ParamProvider>
+  )
+}
+
+export default EquivalentPage
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -1,4 +1,3 @@
-version: '3'
 services:
   db:
     image: postgres:16

diff --git a/package.json b/package.json
@@ -71,21 +71,15 @@
     "postcss-preset-env": "^10.0.5",
     "preact": "^10.24.0",
     "publicodes": "1.4.0",
+    "qrcode": "^1.5.4",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-flip-toolkit": "^7.2.4",
-    "react-highlight-words": "^0.20.0",
     "react-notion-x": "^6.16.0",
-    "react-range": "^1.10.0",
-    "react-responsive-carousel": "^3.2.23",
     "react-share": "^5.1.0",
-    "react-slick": "^0.30.2",
-    "react-switch": "^7.0.0",
     "sharp": "^0.33.5",
     "swagger-jsdoc": "^6.2.8",
     "swagger-ui-react": "^5.17.14",
     "ts-node": "^10.9.2",
-    "use-query-params": "^2.2.1",
     "zod": "^3.23.8"
   },
   "devDependencies": {
@@ -110,6 +104,8 @@
     "@testing-library/user-event": "^14.5.2",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/jest": "^29.5.13",
+    "@types/node-pdftk": "^2.1.9",
+    "@types/qrcode": "^1.5.5",
     "@types/react-highlight-words": "^0.20.0",
     "@types/react-slick": "^0.23.13",
     "@types/swagger-jsdoc": "^6.0.4",
@@ -134,7 +130,9 @@
     "next-test-api-route-handler": "^4.0.11",
     "nock": "^13.5.5",
     "node-mocks-http": "^1.16.0",
+    "node-pdftk": "^2.1.3",
     "nyc": "^17.1.0",
+    "pdf-merger-js": "^5.1.2",
     "playwright": "^1.47.1",
     "postcss-loader": "^8.1.1",
     "prettier": "^3.3.3",

diff --git a/public/iframe.js.LICENSE.txt b/public/iframe.js.LICENSE.txt
@@ -1,7 +1,7 @@
 /*!
  *  @preserve
  *  
- *  @module      iframe-resizer/parent 5.2.6 (umd) - 2024-08-22
+ *  @module      iframe-resizer/parent 5.3.1 (umd) - 2024-09-12
  *
  *  @license     GPL-3.0 for non-commercial use only.
  *               For commercial use, you must purchase a license from

diff --git a/public/images/fiches.png b/public/images/fiches.png
diff --git a/public/kit/fiches.zip b/public/kit/fiches.zip
diff --git a/public/sitemap.xml b/public/sitemap.xml
@@ -1,3 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+<sitemap><loc>http://localhost:3000/sitemap-0.xml</loc></sitemap>
 </sitemapindex>
diff --git a/src/components/base/Resource.module.css b/src/components/base/Resource.module.css
@@ -38,6 +38,7 @@
   justify-content: center;
   border-right: 2px solid var(--neutral-20);
   border-radius: calc(1rem - 2px) 0 0 calc(1rem - 2px);
+  min-width: 8rem;
 
   img {
     border-radius: 1rem 0 0 1rem;

diff --git a/src/components/outils/equivalents/detail/Detail.tsx b/src/components/outils/equivalents/detail/Detail.tsx
@@ -1,11 +1,12 @@
+'use client'
+
 import { useTranslations } from 'next-intl'
 import Image from 'next/image'
 import React, { Fragment, useState } from 'react'
 import useParamContext from 'src/providers/ParamProvider'
 import { Equivalent, EquivalentValue } from 'types/equivalent'
 import PlusMinus from 'components/outils/plusMinus/PlusMinus'
 import InformationIcon from 'components/base/icons/information'
-import shareableStyles from 'components/shareable/Shareable.module.css'
 import styles from './Detail.module.css'
 import DetailValue from './DetailValue'
 import Label from './Label'
@@ -86,7 +87,15 @@ const ecvs = (type: number, values: EquivalentValue[]): Values[] => {
   return []
 }
 
-export default function Detail({ equivalent }: { equivalent: Equivalent }) {
+export default function Detail({
+  equivalent,
+  noPercentage,
+  noInfo,
+}: {
+  equivalent: Equivalent
+  noPercentage?: boolean
+  noInfo?: boolean
+}) {
   const { setOverscreen } = useParamContext()
   const t = useTranslations('equivalent')
   const [years, setYears] = useState('usage' in equivalent && equivalent.usage ? equivalent.usage.defaultyears : 0)
@@ -145,7 +154,6 @@ export default function Detail({ equivalent }: { equivalent: Equivalent }) {
   const sum = values.reduce((acc, current) => acc + current.value, 0)
   return (
     <>
-      <div className={shareableStyles.separator} />
       <table className={styles.table}>
         <tbody>
           {values.map((value) => (
@@ -164,7 +172,7 @@ export default function Detail({ equivalent }: { equivalent: Equivalent }) {
                   </div>
                 </td>
                 <td className={styles.percent}>
-                  {withPercent ? ' ' : <Percentage value={(100 * value.value) / sum} />}
+                  {withPercent || noPercentage ? ' ' : <Percentage value={(100 * value.value) / sum} />}
                 </td>
                 <td>
                   <DetailValue unit={unit} value={value.value} />
@@ -176,7 +184,7 @@ export default function Detail({ equivalent }: { equivalent: Equivalent }) {
                     <Label id={item.id} />
                   </td>
                   <td className={styles.percent}>
-                    {withPercent ? <Percentage value={(100 * item.value) / value.value} /> : ' '}
+                    {!noPercentage && withPercent ? <Percentage value={(100 * item.value) / value.value} /> : ' '}
                   </td>
                   <td>
                     <DetailValue unit={unit} value={item.value} />
@@ -191,21 +199,27 @@ export default function Detail({ equivalent }: { equivalent: Equivalent }) {
                 <td>
                   <b>{t('total')}</b> {t('yearly-usage')}
                   {' '}
-                  <button
-                    title='Voir les informations sur la durée de vie'
-                    onClick={() => setOverscreen(equivalent.slug, 'usage')}
-                    className={styles.informationButton}>
-                    <InformationIcon />
-                  </button>
+                  {!noPercentage && !noInfo && (
+                    <button
+                      title='Voir les informations sur la durée de vie'
+                      onClick={() => setOverscreen(equivalent.slug, 'usage')}
+                      className={styles.informationButton}>
+                      <InformationIcon />
+                    </button>
+                  )}
                 </td>
                 <td className={styles.usageWidgetContainer}>
-                  <PlusMinus
-                    className={styles.usageWidget}
-                    label={t('year')}
-                    value={years}
-                    setValue={setYears}
-                    step={0.5}
-                  />
+                  {noPercentage ? (
+                    ' '
+                  ) : (
+                    <PlusMinus
+                      className={styles.usageWidget}
+                      label={t('year')}
+                      value={years}
+                      setValue={setYears}
+                      step={0.5}
+                    />
+                  )}
                 </td>
                 <td>
                   <b>

diff --git a/src/components/outils/equivalents/pdf/Recto.module.css b/src/components/outils/equivalents/pdf/Recto.module.css
@@ -0,0 +1,54 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  height: 1170px;
+  width: 827px;
+  padding: 128px 32px 64px 32px;
+}
+
+.image {
+  width: 50%;
+
+  img {
+    height: auto;
+    width: 100%;
+  }
+}
+
+.content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+
+.value {
+  margin: 70px 0 20px 0;
+  font-size: 130px;
+  line-height: 130px;
+  color: var(--neutral-80);
+  font-weight: 800;
+}
+
+.text {
+  text-align: center;
+  color: var(--neutral-80);
+  font-weight: 500;
+  font-size: 40px;
+  line-height: 40px;
+  max-width: 75%;
+}
+
+.logos {
+  display: flex;
+  gap: 24px;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    height: 40px;
+  }
+}
diff --git a/src/components/outils/equivalents/pdf/Recto.tsx b/src/components/outils/equivalents/pdf/Recto.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import { ComputedEquivalent } from 'types/equivalent'
+import { getName } from 'utils/Equivalent/equivalent'
+import EquivalentIcon from 'components/base/EquivalentIcon'
+import Ademe from 'components/base/Logo/Ademe'
+import Logo from 'components/base/Logo/ImpactCO2'
+import Marianne from 'components/base/Logo/Marianne'
+import styles from './Recto.module.css'
+
+const Recto = ({ equivalent }: { equivalent: ComputedEquivalent }) => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.content}>
+        <div className={styles.image}>
+          <EquivalentIcon equivalent={equivalent} />
+        </div>
+        <div className={styles.value}>1</div>
+        <div className={styles.text}>{getName('fr', equivalent, true, 1)}</div>
+      </div>
+      <div className={styles.logos}>
+        <Marianne />
+        <Ademe />
+        <Logo />
+      </div>
+    </div>
+  )
+}
+
+export default Recto
diff --git a/src/components/outils/equivalents/pdf/Verso.module.css b/src/components/outils/equivalents/pdf/Verso.module.css
@@ -0,0 +1,70 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  height: 1170px;
+  width: 827px;
+  padding: 64px;
+}
+
+.image {
+  width: 50%;
+
+  img {
+    height: auto;
+    width: 100%;
+  }
+}
+
+.content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+
+.header {
+  width: 100%;
+
+  img {
+    width: 130px;
+    height: auto;
+  }
+}
+
+.table {
+  margin-top: 16px;
+  width: 100%;
+
+  td {
+    padding: 0.5rem 0;
+  }
+}
+
+.simulator {
+  margin: -1.25rem;
+}
+
+.logos {
+  display: flex;
+  gap: 24px;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    height: 40px;
+  }
+}
+
+.footer {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+
+  canvas {
+    height: 135px !important;
+    width: 135px !important;
+  }
+}