Merge pull request #22 from Ebubeker/indicators

Changes in the toolbox
goat-community · Dec 21, 2023 · 7b0bd29 · 7b0bd29
2 parents 9ec660b + c151b75
commit 7b0bd29
Show file tree

Hide file tree

Showing 30 changed files with 1,627 additions and 1,943 deletions.
diff --git a/apps/web/components/common/AccordionWrapper.tsx b/apps/web/components/common/AccordionWrapper.tsx
@@ -0,0 +1,42 @@
+import React from 'react'
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Divider,
+} from "@mui/material";
+import { Icon, ICON_NAME } from '@p4b/ui/components/Icon';
+
+import type { ReactNode } from 'react';
+
+const AccordionWrapper = ({
+  header,
+  body,
+}: {
+  header: ReactNode;
+  body: ReactNode;
+}) => {
+  return (
+    <Accordion square={false}>
+      <AccordionSummary
+        sx={{
+          my: 0,
+          py: 0,
+        }}
+        expandIcon={
+          <Icon
+            iconName={ICON_NAME.CHEVRON_DOWN}
+            style={{ fontSize: "15px" }}
+          />
+        }
+        aria-controls="panel1a-content"
+      >
+        {header}
+      </AccordionSummary>
+      <Divider sx={{ mt: 0, pt: 0 }} />
+      <AccordionDetails sx={{ pt: 0, mt: 0 }}>{body}</AccordionDetails>
+    </Accordion>
+  );
+};
+
+export default AccordionWrapper
diff --git a/apps/web/components/map/Markers.tsx b/apps/web/components/map/Markers.tsx
@@ -1,10 +1,11 @@
 import React from "react";
 import { Marker } from "react-map-gl";
 import { useSelector } from "react-redux/es/hooks/useSelector";
-import { Icon, ICON_NAME } from "@p4b/ui/components/Icon";
-import { Box, useTheme } from "@mui/material";
+import { Icon } from "@p4b/ui/components/Icon";
+import { useTheme } from "@mui/material";
 
 import type { IStore } from "@/types/store";
+import type { ICON_NAME } from "@p4b/ui/components/Icon";
 
 const Markers = () => {
   const { markers } = useSelector((state: IStore) => state.map);
@@ -20,16 +21,11 @@ const Markers = () => {
           latitude={marker.lat}
           anchor="bottom"
         >
-          <Box position="relative">
-            <Icon iconName={ICON_NAME.LOCATION_MARKER} htmlColor="#cf0707" fontSize="large"/>
-            <Box position="absolute" top="3px" left="50%" sx={{
-              transform: "translateX(-50%)"
-            }}>
-              <Icon iconName={marker.iconName as ICON_NAME} htmlColor={theme.palette.background.paper} sx={{
-                fontSize: "17px"
-              }}/>
-            </Box>
-          </Box>
+          <Icon
+            iconName={marker.iconName as ICON_NAME}
+            htmlColor={theme.palette.error.main}
+            fontSize="large"
+          />
         </Marker>
       ))}
     </>

diff --git a/apps/web/components/map/controls/Geocoder.tsx b/apps/web/components/map/controls/Geocoder.tsx
@@ -24,10 +24,6 @@ import { match } from "@/lib/utils/match";
 
 import type {
   Result,
-  // Feature,
-  // Context,
-  // Geometry,
-  // Properties,
 } from "@/types/map/controllers";
 
 type Props = {

diff --git a/apps/web/components/map/panels/ProjectNavigation.tsx b/apps/web/components/map/panels/ProjectNavigation.tsx
@@ -6,7 +6,7 @@ import LayerPanel from "@/components/map/panels/layer/Layer";
 import Legend from "@/components/map/panels/Legend";
 import Charts from "@/components/map/panels/Charts";
 import Toolbox from "@/components/map/panels/toolbox/Toolbox";
-// import Filter from "@/components/map/panels/filter/Filter";
+import Filter from "@/components/map/panels/filter/Filter";
 import Scenario from "@/components/map/panels/Scenario";
 import LayerStyle from "@/components/map/panels/style/LayerStyle";
 import MapSidebar from "@/components/map/Sidebar";
@@ -89,14 +89,14 @@ const ProjectNavigation = ({ projectId }) => {
         component: <PropertiesPanel projectId={projectId} />,
         disabled: !activeLayer,
       },
-      // {
-      //   id: MapSidebarItemID.FILTER,
-      //   icon: ICON_NAME.FILTER,
-      //   name: t("panels.filter.filter"),
-      //   component: <Filter projectId={projectId} />,
-      //   disabled:
-      //     !activeLayer || activeLayer?.type !== layerType.Values.feature,
-      // },
+      {
+        id: MapSidebarItemID.FILTER,
+        icon: ICON_NAME.FILTER,
+        name: t("panels.filter.filter"),
+        component: <Filter projectId={projectId} />,
+        disabled:
+          !activeLayer || activeLayer?.type !== layerType.Values.feature,
+      },
       {
         id: MapSidebarItemID.STYLE,
         icon: ICON_NAME.STYLE,