feat: POC de l’affichage de la frise et documentation

pour clarifier le besoin, une documentation a été mise en place et la fonctionnalité est cachée
derrière un « feature flag » de manière à pouvoir l’activer si besoin de tester temporairement

refs #13

src/components/Indicateurs/FriseCalendrier.js

@@ -0,0 +1,68 @@
+import React from "react";
+import { Card, Flex } from "rebass";
+import Container from "./Container";
+import getISOWeek from "date-fns/get_iso_week";
+import addWeeks from "date-fns/add_weeks";
+import { differenceInWeeks, startOfISOWeek } from "date-fns";
+
+const makeDateFromFrench = french => {
+  const [d, m, Y] = french.split("/");
+  return new Date(+Y, m - 1, +d);
+};
+
+const makeWeeksDefinition = (from, to) => {
+  const startWeek = getISOWeek(from);
+  const endWeek = getISOWeek(to);
+  const currentWeek = getISOWeek(new Date(Date.now()));
+  const nbWeeks = differenceInWeeks(startOfISOWeek(to), startOfISOWeek(from));
+
+  const weeks = new Array(nbWeeks + 1);
+  return weeks
+    .fill(from)
+    .map((start, i) => getISOWeek(addWeeks(start, i)))
+    .map(week => {
+      const isPiaf = week === startWeek || week === endWeek;
+      const isAllowed = week <= startWeek + 4;
+      return {
+        week,
+        type: isPiaf ? "piaf" : isAllowed ? "ok" : "nok",
+        current: week === currentWeek
+        // 'ok' 'nok'
+      };
+    });
+};
+
+const FriseCalendrier = ({ dateDerniere, dateProchaine, ...props }) => {
+  if (dateDerniere === "-" || dateProchaine === "-") return null;
+
+  const weeks = makeWeeksDefinition(
+    makeDateFromFrench(dateDerniere),
+    makeDateFromFrench(dateProchaine)
+  );
+  console.log(weeks);
+
+  // TODO Afficher une croix ou slash ou check
+
+  return (
+    <Container {...props} helpTo="/frise-calendrier">
+      <Flex flexWrap="wrap" justifyContent="center">
+        {weeks.map(({ week, type, current }) => (
+          <Card
+            key={week}
+            p={2}
+            m="1px"
+            bg={
+              type === "piaf" ? "primary" : type === "ok" ? "green" : "orange"
+            }
+            boxShadow={current ? "0 0 8px rgba(0,0,0,0.5)" : ""}
+            title={`S${week}`}
+          >
+            S{week}
+          </Card>
+        ))}
+      </Flex>
+    </Container>
+  );
+};
+
+export default FriseCalendrier;

src/pages/frise-calendrier.mdx

@@ -0,0 +1,92 @@
+import FriseCalendrier from "../components/Indicateurs/FriseCalendrier.js";
+import ImportantText from "../ui/ImportantText.js";
+import subWeeks from "date-fns/sub_weeks";
+import addWeeks from "date-fns/add_weeks";
+import format from "date-fns/format";
+
+# Frise calendrier de participation
+
+Cet indicateur permet de sensibiliser à la régularité et aux futurs blocages que
+cela pourrait engendrer. Il affiche les informations suivantes :
+
+- la date de dernière Piaf
+- les 4 semaines - en vert - après cette dernière Piaf
+- et en orange la suite jusqu'à la prochaine Piaf (s'il y en a une)
+
+Cette page présente les différents états possibles.
+
+## Prochaine PIAF après les 4 semaines
+
+<FriseCalendrier
+  dateDerniere={format(subWeeks(new Date(), 3), "DD/MM/YYYY")}
+  dateProchaine={format(addWeeks(new Date(), 3), "DD/MM/YYYY")}
+/>
+
+<br />
+
+<FriseCalendrier
+  dateDerniere={format(subWeeks(new Date(), 6), "DD/MM/YYYY")}
+  dateProchaine={format(addWeeks(new Date(), 3), "DD/MM/YYYY")}
+/>
+
+<br />
+
+<FriseCalendrier
+  dateDerniere={format(subWeeks(new Date(), 0), "DD/MM/YYYY")}
+  dateProchaine={format(addWeeks(new Date(), 5), "DD/MM/YYYY")}
+/>
+
+## Prochaine PIAF dans les 4 semaines
+
+<FriseCalendrier
+  dateDerniere={format(subWeeks(new Date(), 1), "DD/MM/YYYY")}
+  dateProchaine={format(addWeeks(new Date(), 3), "DD/MM/YYYY")}
+/>
+
+<br />
+
+<FriseCalendrier
+  dateDerniere={format(subWeeks(new Date(), 4), "DD/MM/YYYY")}
+  dateProchaine={format(addWeeks(new Date(), 0), "DD/MM/YYYY")}
+/>
+
+<br />
+
+<FriseCalendrier
+  dateDerniere={format(subWeeks(new Date(), 2), "DD/MM/YYYY")}
+  dateProchaine={format(addWeeks(new Date(), 1), "DD/MM/YYYY")}
+/>
+
+## Pas de PIAF
+
+Dans le cas où aucune PIAF n’a été faite, ou dans le cas où aucune n’est prévue…
+rien n’est affiché.
+
+<FriseCalendrier
+  dateDerniere="-"
+  dateProchaine={format(addWeeks(new Date(), 2), "DD/MM/YYYY")}
+/>
+
+<FriseCalendrier
+  dateDerniere={format(subWeeks(new Date(), 2), "DD/MM/YYYY")}
+  dateProchaine="-"
+/>
+
+## Retardataires
+
+Certaines personnes n’ont pas fait leur PIAF depuis longtemps… par exemple il y
+a 33 semaines.
+
+<ImportantText mt={4}>
+  Question : comment affiche-t-on cette information ?
+</ImportantText>
+
+<FriseCalendrier
+  dateDerniere={format(subWeeks(new Date(), 33), "DD/MM/YYYY")}
+  dateProchaine={format(addWeeks(new Date(), 2), "DD/MM/YYYY")}
+/>
+
+<ImportantText mt={4}>
+  TODO : il reste encore un bug sur les couleurs lors du passage des années (et
+  les numéros de semaine qui reviennent à 1).
+</ImportantText>

src/templates/chouettos.js

@@ -8,6 +8,7 @@ import DernierePiaf from "../components/Indicateurs/DernierePiaf";
 import ProchainePiaf from "../components/Indicateurs/ProchainePiaf";
 import RecapGlobal from "../components/Indicateurs/RecapGlobal";
 import Barcode from "../ui/Barcode";
+import FriseCalendrier from "../components/Indicateurs/FriseCalendrier";
 
 export default ({ data }) => {
   if (!data.allChouettos || !data.allGoogleSheetSuiviRow) return <Page404 />;
@@ -43,6 +44,15 @@ export default ({ data }) => {
         <ProchainePiaf date={piaf.prochaintaf} width={1 / 2} py={5} />
       </Flex>
 
+      {process.env.GATSBY_FEATURE_FRISE_ENABLED && (
+        <FriseCalendrier
+          dateDerniere={piaf.derniertafeffectue}
+          dateProchaine={piaf.prochaintaf}
+          width={1}
+          my={4}
+        />
+      )}
+
       <RecapGlobal
         nbPiafAttendues={piaf.nbtafattendus}
         nbPiafDepuis2017={piaf.nbtafeffectuesdepuisle2017}