Css modification and snd Itération of structure

Add too new data and origin data in link with school
solarpush · Nov 8, 2023 · b678489 · b678489
1 parent ba1ad3b
commit b678489
Show file tree

Hide file tree

Showing 12 changed files with 1,454 additions and 1,126 deletions.
diff --git a/build/assets/index-28140dc9.js b/build/assets/index-28140dc9.js
diff --git a/build/assets/index-79972c6e.js b/build/assets/index-79972c6e.js
diff --git a/build/assets/index-cbf64dde.css b/build/assets/index-cbf64dde.css
diff --git a/build/assets/index-d950d6bb.css b/build/assets/index-d950d6bb.css
diff --git a/build/index.html b/build/index.html
@@ -5,8 +5,8 @@
     <link rel="icon" type="image/svg+xml" href=https://solarpush.github.io/spaced-memo/vite.svg />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Spaced Mémo</title>
-    <script type="module" crossorigin src="https://solarpush.github.io/spaced-memo/assets/index-79972c6e.js"></script>
-    <link rel="stylesheet" href="https://solarpush.github.io/spaced-memo/assets/index-cbf64dde.css">
+    <script type="module" crossorigin src="https://solarpush.github.io/spaced-memo/assets/index-28140dc9.js"></script>
+    <link rel="stylesheet" href="https://solarpush.github.io/spaced-memo/assets/index-d950d6bb.css">
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/App.css b/src/App.css
@@ -1,6 +1,8 @@
 /* Content App style */
 .app_content {
   display: flex;
+  flex-direction: column;
+  gap: 3rem;
   align-items: center;
 }
 #logo-app {
@@ -14,28 +16,56 @@
 }
 .selector {
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
 }
+
+.card_and_stats_container {
+  display: flex;
+  flex-direction: column;
+  /* @media screen and (max-width: 500px) {
+    margin-top: 30px;
+  } */
+}
+.stats_container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.stats_content {
+  display: flex;
+  overflow-x: auto;
+}
+
 .cards_container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.cards_content {
   display: grid;
-  grid-template-columns: 30% 30% 30%;
+  grid-template-columns: 45% 45%;
   justify-content: space-around;
   /* display: flex;
   flex-direction: column; */
   /* align-items: center; */
   width: 100%;
-  height: 70vh;
+  height: 60vh;
   gap: 2rem;
   overflow-y: auto;
+  @media screen and (max-width: 500px) {
+    grid-template-columns: 85%;
+  }
 }
 .form_container {
+  /* background-color: red; */
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-around;
-  gap: 1rem;
+  gap: 0.3rem;
 }
 .card {
-  max-height: 400px;
+  /* max-height: 350px; */
 }
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import "./App.css";
 import CustomCard from "./components/card/CustomCard";
 import CustomDialog from "./components/dialog/CustomDialog";
@@ -8,16 +8,23 @@ import ForcedViewSelector from "./components/ForcedViewSelector/ForcedViewSelect
 import { Dialog } from "primereact/dialog";
 import { Button } from "primereact/button";
 import spacedLogo from "./assets/spaced-memo.png";
+import first_Data from "./mock_data.json";
+import { ListBox } from "primereact/listbox";
+import { Toast } from "primereact/toast";
+import { Chip } from "primereact/chip";
+import { Knob } from "primereact/knob";
 
 //The App function return Jsx.ELEMENT => return after compilation html and javascript vanilla only
 function App() {
   const today = new dayjs();
+  const toast = useRef(null);
   const [data, setData] = useState(
     localStorage.getItem("data") ? JSON.parse(localStorage.getItem("data")) : []
   );
   const [forcedView, setForcedView] = useState(null);
 
   const [visible, setVisible] = useState(false);
+  const [formDisplay, setFormDisplay] = useState(false);
   const [cardInformations, setCardInformations] = useState(null);
   function setDialogVisibility() {
     setVisible(true);
@@ -89,7 +96,7 @@ function App() {
   }
 
   function is_good_moment_for_display_this_card(card) {
-    const { id, lastView, position } = card;
+    const { lastView, position } = card;
     function get_diff_between_lastView_and_now(lastView) {
       return today.diff(dayjs(lastView), "day");
     }
@@ -168,11 +175,24 @@ function App() {
       } else return false;
     }
   }
-  const [formDisplay, setFormDisplay] = useState(false);
 
+  const show = (message = <b>Validé</b>, severity = "info") => {
+    toast.current.show({
+      severity: severity,
+      detail: <b>{message}</b>,
+    });
+  };
+
+  const CustomKnobs = (data) => {
+    return <Knob value={50} step={10} />;
+  };
   useEffect(() => {
-    console.log(data);
-    localStorage.setItem("data", JSON.stringify(data));
+    if (data.length === 0) {
+      localStorage.setItem("data", JSON.stringify(first_Data));
+      setData(first_Data);
+    } else {
+      localStorage.setItem("data", JSON.stringify(data));
+    }
   }, [data]);
 
   return (
@@ -182,7 +202,7 @@ function App() {
         <h1>Spaced Mémo App</h1>
         <Button onClick={() => setFormDisplay(true)}>Ajouter une carte</Button>
       </div>
-      <div className="app_container">
+      <div className="app_content">
         <ForcedViewSelector
           forcedView={forcedView}
           actions={{ update_forcedView: update_forcedView }}
@@ -192,47 +212,59 @@ function App() {
           visible={visible}
           actions={{ onHide: onHide, update_positionCard: update_positionCard }}
         />
-        <div className="cards_container">
-          <Dialog
-            header="Ajouter une carte"
-            visible={formDisplay}
-            onHide={() => setFormDisplay(false)}
-          >
-            <CustomCard
-              data={{
-                title: "",
-                form: (
-                  <CardForm
-                    actions={{
-                      save_newCard: save_newCard,
-                    }}
-                  />
-                ),
-              }}
-              actions={{
-                setCardInfo: setCardInfo,
-              }}
-            />
-          </Dialog>
-          {data.map((element) => {
-            if (
-              is_good_moment_for_display_this_card(element) ||
-              is_forceView_contain_element_position(element)
-            ) {
-              return (
+        <div className="card_and_stats_container">
+          <div className="cards_container">
+            <h3>Mes cartes à mémorisé</h3>
+            <div className="cards_content">
+              <Dialog
+                header="Ajouter une carte"
+                visible={formDisplay}
+                onHide={() => setFormDisplay(false)}
+              >
                 <CustomCard
-                  key={element.id}
-                  data={element}
                   actions={{
                     setCardInfo: setCardInfo,
-                    setDialogVisibility: setDialogVisibility,
+                  }}
+                  data={{
+                    title: "",
+                    form: (
+                      <CardForm
+                        actions={{
+                          save_newCard: save_newCard,
+                          show: show,
+                        }}
+                      />
+                    ),
                   }}
                 />
-              );
-            }
-          })}
+              </Dialog>
+              {data.map((element) => {
+                if (
+                  is_good_moment_for_display_this_card(element) ||
+                  is_forceView_contain_element_position(element)
+                ) {
+                  return (
+                    <CustomCard
+                      key={element.id}
+                      data={element}
+                      actions={{
+                        setCardInfo: setCardInfo,
+                        setDialogVisibility: setDialogVisibility,
+                      }}
+                    />
+                  );
+                }
+              })}
+            </div>
+          </div>
+          <div className="stats_container">
+            <h3>Stats</h3>
+            <div className="stats_content"></div>
+          </div>
         </div>
       </div>
+      <CustomKnobs data={data} />
+      <Toast ref={toast} />
     </div>
   );
 }

diff --git a/src/components/ForcedViewSelector/ForcedViewSelector.jsx b/src/components/ForcedViewSelector/ForcedViewSelector.jsx
@@ -14,7 +14,9 @@ const ForcedViewSelector = ({ forcedView, actions }) => {
 
   return (
     <div className="selector">
+      <label htmlFor="forced_selector">Vue forcé des niveaux</label>
       <MultiSelect
+        id="forced_selector"
         value={forcedView}
         onChange={(e) => actions.update_forcedView(e.value)}
         options={cities}

diff --git a/src/components/card/CustomCard.jsx b/src/components/card/CustomCard.jsx
@@ -11,6 +11,7 @@ const CustomCard = ({ data, actions }) => {
       className="card"
       title={data.title}
       subTitle={!data.form && "Niveau " + data.position}
+      style={{ maxHeight: data.form ? "800px" : "350px" }}
     >
       {data.form ? data.form : <p>{data.ask}</p>}
       {!data.form && (

diff --git a/src/components/form/CardForm.jsx b/src/components/form/CardForm.jsx
@@ -30,7 +30,9 @@ const CardForm = ({ actions }) => {
     const card = {
       ...formState,
     };
+
     actions.save_newCard(card);
+    actions.show("Enregistré", "success");
     resetForm();
   }
 

diff --git a/src/index.css b/src/index.css
@@ -17,17 +17,19 @@ body {
 }
 
 .app_container {
-  width: 90vw;
-  min-height: 80vh;
-  height: 80vh;
-  display: grid;
-  grid-template-rows: 15% 90%;
+  width: 100%;
+  min-height: 75vh;
+  height: 75vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 .header_container {
   display: flex;
   width: 100%;
   flex-direction: column;
   align-items: center;
+  gap: 0.2rem;
 }
 
 /* Global style */