chore: style fixes + warning

eMerzh · Sep 28, 2023 · 35dd64b · 35dd64b
1 parent 8b9e960
commit 35dd64b
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 41 deletions.
diff --git a/README.md b/README.md
@@ -31,8 +31,7 @@ il est actuellement en cours de développement et terriblement incomplet, buggé
 - [x] ajouter une indication de remplissage
 - [x] improve immersion (filter school, doc, )
   - [x] https://inscription.cfwb.be/fileadmin/sites/insc/uploads/Documents_2023-2024/Liste_des_ecoles_immersion.xlsx
-- [ ] carte ?
-- [ ] exclude techniques?
+- [x] carte ?
 - [ ] perf
   - [x] taille du json
   - [ ] efficience du code

diff --git a/index.html b/index.html
@@ -6,19 +6,6 @@
     <title>Indice Compositor</title>
   </head>
   <body>
-    <style>
-      #root {
-        min-height: 100vh;
-        margin: 0;
-
-        display: grid;
-        grid-template-rows: auto 1fr auto;
-      }
-
-      .footer {
-        min-height: 50px;
-      }
-    </style>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,4 +1,4 @@
-import { MantineProvider } from "@mantine/core";
+import { AppShell, MantineProvider } from "@mantine/core";
 import { QueryParamProvider } from "use-query-params";
 import { WindowHistoryAdapter } from "use-query-params/adapters/window";
 
@@ -9,9 +9,9 @@ export default function Home() {
   return (
     <MantineProvider withGlobalStyles withNormalizeCSS>
       <QueryParamProvider adapter={WindowHistoryAdapter}>
-        <div></div>
-        <AppContainer />
-        <Footer />
+        <AppShell footer={<Footer />}>
+          <AppContainer />
+        </AppShell>
       </QueryParamProvider>
     </MantineProvider>
   );

diff --git a/src/AppContainer.tsx b/src/AppContainer.tsx
@@ -1,15 +1,34 @@
-import { Container, Modal, Text } from "@mantine/core";
+import { Alert, Container, Modal, Text } from "@mantine/core";
 import { useMemo, useState } from "react";
 import { BooleanParam, JsonParam } from "use-query-params";
 import { useQueryParam, StringParam } from "use-query-params";
-import { useDisclosure } from "@mantine/hooks";
+import { useDisclosure, useLocalStorage } from "@mantine/hooks";
 
 import { ComputeResult, computeAll, primarySchools, secondarySchools } from "./compute";
 import { NamedLoc } from "./GeoAutoComplete";
 import { InputConfig } from "./InputConfig";
 import ResultTable from "./ResultTable";
 import SchoolDetail from "./SchoolDetail";
+import { IconAlertCircle } from "@tabler/icons-react";
 
+const Warning = () => {
+  const [hide, setHide] = useLocalStorage({ key: "hide-warning", defaultValue: false });
+  if (hide) return <IconAlertCircle size="1rem" onClick={() => setHide(false)} />;
+  return (
+    <Alert icon={<IconAlertCircle size="1rem" />} title="Compositor2000" withCloseButton onClose={() => setHide(true)}>
+      Cet outil est un outil alternatif de calcul de l'indice composite. Les données n'étant pas complètement ouvertes,
+      il pourrait contenir des erreurs. N'oubliez par de vérifier le score obtenu sur le{" "}
+      <a href="https://inscription.cfwb.be/nc/simulation-de-lindice-composite/" target="_blank" rel="noopener">
+        calculateur officiel
+      </a>
+      , et de voir les disponibilités dans l'école de votre choix sur le{" "}
+      <a href="https://monespace.fw-b.be/demarrer-demarche/?codeDemarche=ciriparent" target="_blank" rel="noopener">
+        site adéquat
+      </a>
+      .
+    </Alert>
+  );
+};
 function useConfiguration() {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [_, setRefresher] = useState(0);
@@ -80,6 +99,7 @@ function AppContainer() {
   if (!school_prim || !locHome || !date) {
     return (
       <Container>
+        <Warning />
         <InputConfig
           primarySchools={primarySchools}
           idPrimaire={idPrimaire}
@@ -97,6 +117,7 @@ function AppContainer() {
 
   return (
     <Container>
+      <Warning />
       <InputConfig
         primarySchools={primarySchools}
         idPrimaire={idPrimaire}

diff --git a/src/Footer.tsx b/src/Footer.tsx
@@ -1,10 +1,10 @@
 import { IconBrandGithub } from "@tabler/icons-react";
 
-import { Container, Text } from "@mantine/core";
+import { Footer, Text } from "@mantine/core";
 
-const Footer = () => {
+const AppFooter = () => {
   return (
-    <Container className="footer">
+    <Footer height={60} p="md">
       <Text c="dimmed" size="sm" align="center">
         Made by{" "}
         <a href="https://github.com/eMerzh/compositor">
@@ -13,10 +13,10 @@ const Footer = () => {
         Brice
       </Text>
       <Text c="dimmed" size="sm" align="center">
-        Question - Suggestions - Soutiens → compositor__at__bmaron.net
+        Question, Suggestions, Soutiens ➤ compositor__at__bmaron.net
       </Text>
-    </Container>
+    </Footer>
   );
 };
 
-export default Footer;
+export default AppFooter;
diff --git a/src/GeoAutoComplete.tsx b/src/GeoAutoComplete.tsx
@@ -22,7 +22,7 @@ function GeoAutoComplete({ value, onSelect }: Props) {
     if (ref.current) {
       ref.current.value = value?.name || "";
     }
-  }, [value]);
+  }, [value, showDetails]);
   return (
     <form>
       <AddressAutofill
@@ -65,11 +65,12 @@ function GeoAutoComplete({ value, onSelect }: Props) {
       <Button variant="white" compact onClick={() => setShowDetails(!showDetails)} leftIcon={<IconMap size="1rem" />}>
         {showDetails ? "Cacher" : "Afficher"} la carte
       </Button>
-      {showDetails && value && (
+      {showDetails && (
         <Map
-          initialLat={value.lat}
-          initialLon={value.lon}
+          initialLat={value?.lat || 50.527942}
+          initialLon={value?.lon || 5.529293}
           setHomeLoc={(lat, lon) => {
+            console.log("setHomeLoc", lat, lon);
             onSelect({ lat, lon, name: "Personnalisé" });
           }}
         />

diff --git a/src/Map.tsx b/src/Map.tsx
@@ -1,3 +1,4 @@
+import { AspectRatio } from "@mantine/core";
 import maplibregl from "maplibre-gl";
 import "maplibre-gl/dist/maplibre-gl.css";
 import { useEffect, useRef, useState } from "react";
@@ -47,15 +48,7 @@ const Map = ({ initialLat, initialLon, setHomeLoc }: MapProps) => {
   }, [initialLat, initialLon]);
 
   return (
-    <div
-      className="map-wrap"
-      style={{
-        height: "calc(50vh - 77px)",
-        width: "100%",
-        marginBottom: "30px",
-        marginTop: "30px",
-      }}
-    >
+    <AspectRatio ratio={16 / 9}>
       <div
         ref={mapContainer}
         className="map"
@@ -65,7 +58,7 @@ const Map = ({ initialLat, initialLon, setHomeLoc }: MapProps) => {
           borderRadius: "3px",
         }}
       />
-    </div>
+    </AspectRatio>
   );
 };