Skip to content

Commit

Permalink
Merge pull request #12 from Ebubeker/refactor/theme
Browse files Browse the repository at this point in the history 
finished refactoring the map
  • Loading branch information
@majkshkurti
majkshkurti authored Sep 29, 2023
2 parents 0933094 + e480dec commit c03cfa9
Show file tree
Hide file tree
Showing 55 changed files with 2,758 additions and 869 deletions.
1 change: 0 additions & 1 deletion apps/web/app/[lng]/(dashboard)/home/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,6 @@ const Home = () => {
...queryParams,
});


return (
<Container sx={{ py: 10, px: 10 }} maxWidth="xl">
<Stack direction="column" spacing={24}>
Expand Down
5 changes: 2 additions & 3 deletions apps/web/app/[lng]/(dashboard)/settings/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
// import { redirect } from "next/navigation";
import { redirect } from "next/navigation";

export default async function Organization({}) {
return <p>hello</p>;
// return redirect("/settings/organization");
return redirect("/settings/organization");
}
294 changes: 11 additions & 283 deletions apps/web/app/[lng]/map/[projectId]/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,20 @@
"use client";

import type { MapSidebarItem, MapSidebarProps } from "@/components/map/Sidebar";
import MapSidebar from "@/components/map/Sidebar";
import type { MapToolbarProps } from "@/components/map/Toolbar";
import type { XYZ_Layer } from "@/types/map/layer";
import { MapToolbar } from "@/components/map/Toolbar";
import { BasemapSelector } from "@/components/map/controls/BasemapSelector";
import { Zoom } from "@/components/map/controls/Zoom";
import Charts from "@/components/map/panels/Charts";
import Filter from "@/components/map/panels/filter/Filter";
import LayerPanel from "@/components/map/panels/Layer";
import Legend from "@/components/map/panels/Legend";
import Scenario from "@/components/map/panels/Scenario";
import Toolbox from "@/components/map/panels/Toolbox";
import { MAPBOX_TOKEN } from "@/lib/constants";
import { Box, Collapse, Stack, useTheme } from "@mui/material";
import { Box, useTheme } from "@mui/material";
import "mapbox-gl/dist/mapbox-gl.css";
import React, { useCallback, useEffect, useRef, useState } from "react";
import React, { useCallback, useState } from "react";
import Map, { MapProvider, Layer, Source } from "react-map-gl";
import Layers from "@/components/map/Layers";
import MobileDrawer from "@/components/map/panels/MobileDrawer";

import { ICON_NAME } from "@p4b/ui/components/Icon";
import { Fullscren } from "@/components/map/controls/Fullscreen";
import Geocoder from "@/components/map/controls/Geocoder";
import { useSelector } from "react-redux";
import type { IStore } from "@/types/store";
import { setActiveBasemapIndex } from "@/lib/store/styling/slice";
import MapStyle from "@/components/map/panels/mapStyle/MapStyle";
import { fetchLayerData } from "@/lib/store/styling/actions";
import { useAppDispatch } from "@/hooks/useAppDispatch";
import { selectMapLayer } from "@/lib/store/styling/selectors";
import ProjectNavigation from "@/components/map/panels/ProjectNavigation";

const sidebarWidth = 48;
const toolbarHeight = 52;
Expand All @@ -40,33 +25,17 @@ export default function MapPage({ params: { projectId } }) {
);
const mapLayer = useSelector(selectMapLayer);

const [activeLeft, setActiveLeft] = useState<MapSidebarItem | undefined>(
undefined,
);

const [activeRight, setActiveRight] = useState<MapSidebarItem | undefined>(
undefined,
);

const [layers, setLayers] = useState<XYZ_Layer[] | []>([
{
id: "layer1",
sourceUrl:
"http://127.0.0.1:8081/collections/user_data.8c4ad0c86a2d4e60b42ad6fb8760a76e/tiles/{z}/{x}/{y}",
"https://geoapi.goat.dev.plan4better.de/collections/user_data.e66f60f87ec248faaebb8a8c64c29990/tiles/{z}/{x}/{y}",
color: "#FF0000",
},
]);

const prevActiveLeftRef = useRef<MapSidebarItem | undefined>(undefined);
const prevActiveRightRef = useRef<MapSidebarItem | undefined>(undefined);
const dispatch = useAppDispatch();

const theme = useTheme();

const handleCollapse = useCallback(() => {
setActiveLeft(undefined);
}, []);

const addLayer = useCallback((newLayer: XYZ_Layer[]) => {
setLayers(newLayer);
}, []);
Expand All @@ -78,81 +47,9 @@ export default function MapPage({ params: { projectId } }) {
height: toolbarHeight,
};

const leftSidebar: MapSidebarProps = {
topItems: [
{
icon: ICON_NAME.LAYERS,
name: "Layers",
component: <LayerPanel onCollapse={handleCollapse} />,
},
{
icon: ICON_NAME.LEGEND,
name: "Legend",
component: <Legend />,
},
{
icon: ICON_NAME.CHART,
name: "Charts",
component: <Charts />,
},
],
bottomItems: [
{
icon: ICON_NAME.HELP,
name: "Help",
link: "https://docs.plan4better.de",
},
],
width: sidebarWidth,
position: "left",
};

const rightSidebar: MapSidebarProps = {
topItems: [
{
icon: ICON_NAME.TOOLBOX,
name: "Tools",
component: <Toolbox />,
},
{
icon: ICON_NAME.FILTER,
name: "Filter",
component: <Filter />,
},
{
icon: ICON_NAME.SCENARIO,
name: "Scenario",
component: <Scenario />,
},
{
icon: ICON_NAME.STYLE,
name: "Map Style",
component: (
<MapStyle setActiveRight={setActiveRight} projectId={projectId} />
),
},
],
width: sidebarWidth,
position: "right",
};

useEffect(() => {
prevActiveLeftRef.current = activeLeft;
}, [activeLeft]);

useEffect(() => {
prevActiveRightRef.current = activeRight;
}, [activeRight]);

useEffect(() => {
if (projectId) {
dispatch(fetchLayerData(projectId));
}
}, [dispatch, projectId]);

return (
// <div>Map</div>
<MapProvider>
<MapToolbar {...toolbar} />
<Box
sx={{
display: "flex",
Expand All @@ -165,179 +62,8 @@ export default function MapPage({ params: { projectId } }) {
},
}}
>
<Box sx={{}}>
<MapToolbar {...toolbar} />
<Box
sx={{
".MuiDrawer-paper": {
height: `calc(100% - ${toolbarHeight}px)`,
marginTop: `${toolbarHeight}px`,
},
[theme.breakpoints.down("sm")]: {
display: "none",
},
}}
>
<MapSidebar
{...leftSidebar}
active={activeLeft}
onClick={(item) => {
if (item.link) {
window.open(item.link, "_blank");
return;
} else {
setActiveLeft(
item.name === activeLeft?.name ? undefined : item,
);
}
}}
/>
</Box>

<Stack
direction="row"
sx={{
zIndex: (theme) => theme.zIndex.drawer + 1,
height: "100%",
position: "absolute",
top: 0,
pointerEvents: "all",
left: sidebarWidth,
[theme.breakpoints.down("sm")]: {
left: "0"
},
}}
>
<Collapse
timeout={200}
orientation="horizontal"
in={activeLeft !== undefined}
sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}
onExited={() => {
setActiveLeft(undefined);
prevActiveLeftRef.current = undefined;
}}
>
{(activeLeft?.component !== undefined ||
prevActiveLeftRef.current?.component !== undefined) && (
<Box
sx={{
height: `calc(100% - ${toolbarHeight}px)`,
marginTop: `${toolbarHeight}px`,
width: 300,
borderLeft: `1px solid ${theme.palette.secondary.dark}}`,
pointerEvents: "all",
}}
>
{activeLeft?.component ||
prevActiveLeftRef.current?.component}
</Box>
)}
</Collapse>
{/* Left Controls */}
<Stack
direction="column"
justifyContent="space-between"
sx={{
height: `calc(100% - ${toolbarHeight}px)`,
marginTop: `${toolbarHeight}px`,
padding: theme.spacing(4),
}}
>
<Stack direction="column" sx={{ pointerEvents: "all" }}>
<Geocoder accessToken={MAPBOX_TOKEN} />
</Stack>
</Stack>
</Stack>
<Stack
direction="row"
sx={{
zIndex: (theme) => theme.zIndex.drawer + 1,
height: "100%",
position: "absolute",
top: 0,
pointerEvents: "none",
right: sidebarWidth,
[theme.breakpoints.down("sm")]: {
right: "0"
},
}}
>
<Stack
direction="column"
justifyContent="space-between"
sx={{
height: `calc(100% - ${toolbarHeight}px)`,
marginTop: `${toolbarHeight}px`,
padding: theme.spacing(4),
}}
>
<Stack direction="column" sx={{ pointerEvents: "all" }}>
<Zoom />
<Fullscren />
</Stack>
<Stack direction="column" sx={{ pointerEvents: "all" }}>
<BasemapSelector
styles={basemaps}
active={activeBasemapIndex}
basemapChange={(basemap) => {
dispatch(setActiveBasemapIndex(basemap));
}}
/>
</Stack>
</Stack>
<Collapse
timeout={200}
orientation="horizontal"
in={activeRight !== undefined}
onExit={() => {
setActiveRight(undefined);
prevActiveRightRef.current = undefined;
}}
>
{(activeRight?.component !== undefined ||
prevActiveRightRef.current?.component !== undefined) && (
<Box
sx={{
height: `calc(100% - ${toolbarHeight}px)`,
marginTop: `${toolbarHeight}px`,
width: 300,
borderRight: `1px solid ${theme.palette.secondary.dark}`,
pointerEvents: "all",
}}
>
{activeRight?.component ||
prevActiveRightRef.current?.component}
</Box>
)}
</Collapse>
</Stack>
<Box
sx={{
".MuiDrawer-paper": {
height: `calc(100% - ${toolbarHeight}px)`,
marginTop: `${toolbarHeight}px`,
},
[theme.breakpoints.down("sm")]: {
display: "none",
},
}}
>
<MapSidebar
{...rightSidebar}
active={activeRight}
onClick={(item) => {
if (item.link) {
window.open(item.link, "_blank");
return;
} else {
setActiveRight(
item.name === activeRight?.name ? undefined : item,
);
}
}}
/>
</Box>
<Box>
<ProjectNavigation projectId={projectId}/>
</Box>
<Box
sx={{
Expand All @@ -346,7 +72,6 @@ export default function MapPage({ params: { projectId } }) {
display: "none",
},
height: `calc(100% - ${toolbarHeight}px)`,
marginTop: `${toolbarHeight}px`,
}}
>
<Map
Expand All @@ -371,6 +96,9 @@ export default function MapPage({ params: { projectId } }) {
</Map>
</Box>
</Box>
<Box>
<MobileDrawer />
</Box>
</MapProvider>
);
}
19 changes: 0 additions & 19 deletions apps/web/app/api/map/filtering/get-layers/route.ts
View file

This file was deleted.

Loading

0 comments on commit c03cfa9

Please sign in to comment.