🚧 Commence l'ajout de calendrier

resources/js/components/pages/App.tsx

@@ -14,6 +14,8 @@ import {
 } from "react-router-dom";
 import {IList} from "../../interfaces/IList";
 import {isAllLoadedLocally} from "../../utils";
+import CalendarHeatmap from "../calendar/CalendarHeatmap";
+import {CalendarHeatmapValuesProp} from "../calendar/CalendarHeatmapValuesProp";
 
 const app = document.getElementById('app');
 const word = "shikiryu"; // FIXME should be in db and ≠ between users
@@ -24,12 +26,14 @@ let getPageContentUrl,
     postUrl,
     removeUrl,
     checkword,
+    startDate,
     csrf = "";
 
 if (app) {
     getPageContentUrl   = "" + app.getAttribute('data-url');
     pages               = JSON.parse("" + app.getAttribute('data-list')) as IList[];
     postUrl             = "" + app.getAttribute('data-post');
+    startDate             = "" + app.getAttribute('data-start');
     removeUrl           = "" + app.getAttribute('data-remove');
     csrf                = "" + app.getAttribute('data-csrf');
     checkword           = "" + app.getAttribute('data-checkword');
@@ -157,9 +161,33 @@ function App() {
         return (<Prompt open={true} setOpen={updatePassphrase}/>);
     }
 
+    function getCalendarValuesFromPagesList(pages: IList[]): CalendarHeatmapValuesProp[] {
+        return pages.map(page => {
+            const [date, ] = page.date.split(" ");
+            const splittedDate = date.split("/").map(part => { return parseInt(part, 10);});
+            return {
+                id: page.id,
+                date: new Date(splittedDate[2] as number, splittedDate[1] - 1, splittedDate[0] as number),
+                event: page.id
+            };
+        });
+    }
+
     function ListPage() {
         return (
             <div className="col-md-12">
+                <CalendarHeatmap
+                    values={getCalendarValuesFromPagesList(listPages)}
+                    startDate={startDate}
+                    endDate={new Date()}
+                    showMonthLabels={true}
+                    showWeekdayLabels={true}
+                    showOutOfRangeDays={true}
+                    horizontal={true}
+                    gutterSize={4}
+                    onClick={(value) => alert(value)}
+                    tooltipDataAttrs={{}}
+                />
                 <Pages
                     pages={listPages}
                     url={getPageContentUrl}

resources/js/components/pages/Form.tsx

@@ -6,7 +6,7 @@ let encryptStorage = new EncryptStorage('test'); // TODO la clef doit venir de l
 
 export default function PageForm({setListPages, csrf, url, passphrase}) {
     const isPassphraseSet = passphrase !== null;
-    const [content, setContent] = React.useState("");
+    const [content, setContent] = React.useState<string>("");
     const onSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
         event.preventDefault();
         encryptStorage = new EncryptStorage(passphrase);
@@ -56,6 +56,9 @@ export default function PageForm({setListPages, csrf, url, passphrase}) {
                 ]);
         }
     }
+    function updateContent(value: string|undefined): void {
+        setContent(value as string);
+    }
 
     if (isPassphraseSet) {
         return (
@@ -73,7 +76,7 @@ export default function PageForm({setListPages, csrf, url, passphrase}) {
                 />
                 <MDEditor
                     value={content}
-                    onChange={setContent}
+                    onChange={updateContent}
                   />
                 <Button variant="contained" type={"submit"}>
                     Enregistrer