Merge pull request #44 from mapcomponents/Add-MultiTab 0.3

JannikBrack · web-flow · commit c05183c71daa · 2024-12-02T15:39:53.000+01:00
Add multi tab 0.3
diff --git a/mc_meta.json b/mc_meta.json
@@ -73,26 +73,29 @@
             "url": "https://mapcomponents.github.io/react-map-components-apps/powerplants/"
          }
       ]
-   },"MultiTab": {
-   "name": "MultiTab",
-   "title": "Multi-Tab Demo",
-   "description": "This application is one way to split visual and information. You can open a table which contains all the information you can see on the map. Looking for an object but can't find it in one of the pages? Just click on it the programm will find it for you!",
-   "i18n": {
-      "de": {
-         "title": "Multi-Tab Demo",
-         "description": "Diese Anwendung ist eine Möglichkeit, visuelle Objekte und Informationen aufzuteilen. Sie können eine Tabelle öffnen, die alle Informationen, von den Objekten, die Sie auf der Karte sehen können, enthält. Suchen Sie ein Objekt, können es aber auf einer der Seiten nicht finden? Klicken Sie einfach auf das Objekt, das sie suchen. Das Programm findet es für Sie!"
-      }
    },
-   "tags": [],
-   "category": "",
-   "type": "application",
-   "components": ["MlGeoJsonLayer"],
-   "thumbnail": "https://mapcomponents.github.io/react-map-components-apps/assets/thumbnails/MultiTab.png",
-   "demos": [
-      {
-         "name": "Demo",
-         "url": "https://mapcomponents.github.io/react-map-components-apps/multi_tab/"
-      }
-   ]
-}
+   "MultiTab": {
+      "name": "MultiTab",
+      "title": "Multi-Tab Demo",
+      "description": "This application combines graphical and text-based information of objects that are represented in a table and map: Open a table with all the information visible on the map. Looking for an object and can't find it? Just click on it - the program will show it to you!",
+      "i18n": {
+         "de": {
+            "title": "Multi-Tab Demo",
+            "description": "Diese Anwendung kombiniert grafische und textbasierte Informationen von Objekten, die in einer Tabelle und einer Karte dargestellt werden: Öffnen Sie eine Tabelle mit allen Informationen, die auf der Karte sichtbar sind. Sie suchen ein Objekt und können es nicht finden? Klicken Sie es einfach an - das Programm zeigt es Ihnen an!"
+         }
+      },
+      "tags": [],
+      "category": "",
+      "type": "application",
+      "components": [
+         "MlGeoJsonLayer"
+      ],
+      "thumbnail": "https://mapcomponents.github.io/react-map-components-apps/assets/thumbnails/MultiTab.png",
+      "demos": [
+         {
+            "name": "Demo",
+            "url": "https://mapcomponents.github.io/react-map-components-apps/multi_tab/"
+         }
+      ]
+   }
 }
diff --git a/multi_tab/src/App.tsx b/multi_tab/src/App.tsx
@@ -1,16 +1,43 @@
 import "./App.css";
-import {MapLibreMap} from "@mapcomponents/react-maplibre";
+import {MapLibreMap, TopToolbar} from "@mapcomponents/react-maplibre";
 import LayerManager from "./components/LayerManager.jsx";
 import {Button} from "@mui/material";
+import {useState} from "react";
 
 function App() {
+    const [openSidebar, setOpenSidebar] = useState(true);
 
     const openTable = () => {
         const newUrl = `${window.location.href}#/table`;
         window.open(newUrl, "_blank", "popup");
     }
     return (
         <>
+            <TopToolbar buttons={
+                <>
+                    <Button
+                        sx={{
+                            color: openSidebar ? "#009EE0" : "white",
+                            backgroundColor: openSidebar ? "#fff" : '#009EE0',
+                            marginRight: {xs: '0px', sm: '10px'}
+                        }}
+                        variant={openSidebar ? 'outlined' : 'contained'}
+                        onClick={() => {
+                            setOpenSidebar(!openSidebar);
+                        }}
+                    >
+                        Sidebar
+                    </Button>
+
+                    <Button
+                        sx={{
+                            background: '#009EE0'
+                        }}
+                        variant='contained'
+                        onClick={() => openTable()}
+                    >show table</Button>
+                </>
+            }/>
             <MapLibreMap
                 options={{
                     style: "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
@@ -19,15 +46,7 @@ function App() {
                 }}
                 style={{position: "absolute", top: 0, bottom: 0, left: 0, right: 0}}
             />
-            <LayerManager/>
-            <Button
-                sx={{
-                    left: '93%'
-                }}
-                variant='contained'
-                color="primary"
-                onClick={() => openTable()}
-            >show table</Button>
+            <LayerManager setOpenSidebar={setOpenSidebar} openSidebar={openSidebar}/>
         </>
     );
 }
diff --git a/multi_tab/src/components/DataTableManager.jsx b/multi_tab/src/components/DataTableManager.jsx
@@ -1,14 +1,14 @@
 import {Box} from "@mui/material";
 import React, {useContext, useEffect, useState} from "react";
-import TopToolBar from "./UI_Components/TopToolbar.tsx";
+import TopToolBar from "./UI_Components/TableToolbar.tsx";
 import CreateTable from "./UI_Components/DataTable.jsx";
 import {DataContext} from "../contexts/DataContext.tsx";
 
 export default function DataTableManager() {
     const data = useContext(DataContext);
 
     const [visibleIDs, setVisibleIDs] = useState([]);
-    const [selected, setSelected] = useState(null);
+    const [selected, setSelected] = useState();
     const [selectedLayer, setSelectedLayer] = useState("all");
     const [tableSplit, setTableSplit] = useState(false);
     /*const [showOnlyVisibleObjects, setShowOnlyVisibleObjects] = useState(true);*/
@@ -23,6 +23,18 @@ export default function DataTableManager() {
                         break;
                     case "selectedFromLayerManager":
                         setSelected(message.selected);
+                        break;
+                    case"visibleLayers":
+                        setSelectedLayer(
+                            message.parksShown && message.restaurantsShown
+                                ? 'all'
+                                : message.restaurantsShown
+                                    ? 'restaurant'
+                                    : message.parksShown
+                                        ? 'park'
+                                        : 'all'
+                        );
+
                         break;
                     default:
                         console.warn(`Unhandled message type: ${type}`);
@@ -38,10 +50,6 @@ export default function DataTableManager() {
     }, []);
 
 
-    //sorts all Objects which is Layer codependent
-    useEffect(() => {
-    }, [visibleIDs, selectedLayer, data]);
-
     if (!data) {
         return <div>Loading data...</div>;
     }
diff --git a/multi_tab/src/components/LayerManager.jsx b/multi_tab/src/components/LayerManager.jsx
@@ -1,4 +1,4 @@
-import {LayerList, Sidebar, useMap,} from "@mapcomponents/react-maplibre";
+import {LayerList, Sidebar, useMap, useMapState,} from "@mapcomponents/react-maplibre";
 import ParkLayer from "./Layers/ParkLayer.tsx";
 import {useContext, useEffect, useState} from "react";
 import {sendMessageToServiceWorker} from "../js/sendMessageToSW";
@@ -48,7 +48,7 @@ const getSelectedFeature = (data, id) => {
 };
 
 
-export default function LayerManager() {
+export default function LayerManager(props) {
     const mapHook = useMap();
 
     const [selected, setSelected] = useState();
@@ -57,6 +57,13 @@ export default function LayerManager() {
 
     const data = useContext(DataContext);
 
+    const mapState = useMapState({
+        watch:{
+            layers: true
+        },
+    })
+
+
     useEffect(() => {
         if ('serviceWorker' in navigator) {
             const handleMessage = (event) => {
@@ -72,7 +79,7 @@ export default function LayerManager() {
                 navigator.serviceWorker.removeEventListener('message', handleMessage);
             };
         }
-    }, [setSelected]);
+    }, []);
 
     useEffect(() => {
         if (!mapHook.map || !selected) return;
@@ -122,11 +129,22 @@ export default function LayerManager() {
         };
     }, [mapHook.map]);
 
+    useEffect(() => {
+        if (!mapHook.map) return;
+        console.log("send")
+
+        sendMessageToServiceWorker({
+            type: "visibleLayers",
+            message: {
+                parksShown: mapHook.map.getLayer('parks').visibility === "visible",
+                restaurantsShown: mapHook.map.getLayer('restaurants').visibility === "visible",
+            }
+        })
+    }, [mapState.layers]);
     return (
         <>
-            <Sidebar open={true} name={"Layers"}>
+            <Sidebar open={props.openSidebar} setOpen={props.setOpenSidebar} name={"Layers"} >
                 <LayerList>
-                    {/* <RestaurantLayer /> */}
                     <ParkLayer
                         selected={selected}
                         setSelected={setSelected}
@@ -138,8 +156,8 @@ export default function LayerManager() {
                         setSrc={setSrc}
                     />
                 </LayerList>
-                {selectedFeature && <MlHighlightFeature features={[selectedFeature]} variant={"hell"} offset={1}/>}
             </Sidebar>
+            {selectedFeature && <MlHighlightFeature features={[selectedFeature]} variant={"hell"} offset={1}/>}
         </>
     );
 }
diff --git a/multi_tab/src/components/Layers/ParkLayer.tsx b/multi_tab/src/components/Layers/ParkLayer.tsx
@@ -8,7 +8,7 @@ interface ParkLayerProps {
     setSrc: React.Dispatch<React.SetStateAction<string>>
 }
 
-// Function to initialize all parks to the map
+// Function to initialize all parks to the map if the data is fetched successfully
 export default function ParkLayer({
                                       setSelected,
                                       setSrc
diff --git a/multi_tab/src/components/Layers/RestaurantLayer.tsx b/multi_tab/src/components/Layers/RestaurantLayer.tsx
@@ -8,7 +8,7 @@ interface RestaurantLayerProps {
     setSrc: React.Dispatch<React.SetStateAction<string>>
 }
 
-// Function to initialize all restaurants to the map
+// Function to initialize all restaurants to the map if the data is fetched successfully
 export default function RestaurantLayer({
                                             setSelected,
                                             setSrc
diff --git a/multi_tab/src/components/UI_Components/DataTable.jsx b/multi_tab/src/components/UI_Components/DataTable.jsx
@@ -2,21 +2,20 @@ import React, {useMemo} from "react";
 import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material";
 import {sendMessageToServiceWorker} from "../../js/sendMessageToSW.js";
 
+//Returns an Array of all objects which are visible on the map
 const createObjectList = (data, visibleIDs, selectedLayer) => {
-    console.log(data);
-    console.log(visibleIDs);
-    console.log(selectedLayer);
     if (!data) return [];
 
     return Object.values(data).flatMap(value =>
         value.features.filter(feature => {
             const isVisible = visibleIDs.length === 0 || visibleIDs.includes(feature.id);
-            const isCorrectLayer = selectedLayer === "all" || feature.properties.amenity === selectedLayer;
+            const isCorrectLayer = (selectedLayer === "all" || feature.properties.amenity === selectedLayer);
             return isVisible && isCorrectLayer;
         })
     );
 };
 
+//Returns an array containing the properties as objects of the parameter list
 const createPropertiesList = (objectList) => {
     if (!objectList) return [];
     const propertiesList = [];
@@ -26,6 +25,7 @@ const createPropertiesList = (objectList) => {
     return propertiesList;
 };
 
+//Returns an array containing all the keys from the properties (used in table to
 const createKeyList = (propertiesList) => {
     const keyFrequency = {};
     const minUsage = propertiesList.length < 4 ? 0 : 4;
@@ -53,7 +53,6 @@ const selecting = (id, src) => {
 
 const DataTable = (props) => {
     const objectList = useMemo(() => createObjectList(props.data, props.visibleIDs, props.selectedLayer), [props.data, props.visibleIDs, props.selectedLayer]);
-    console.log(objectList);
     const propertiesList = useMemo(() => createPropertiesList(objectList), [objectList]);
     const keyList = useMemo(() => createKeyList(propertiesList), [propertiesList]);
 
diff --git a/multi_tab/src/components/UI_Components/TableToolbar.tsx b/multi_tab/src/components/UI_Components/TableToolbar.tsx
@@ -0,0 +1,67 @@
+import * as React from 'react';
+import {useContext} from 'react';
+import {Button, MenuItem, Select, SelectChangeEvent} from "@mui/material";
+import {DataContext} from "../../contexts/DataContext";
+import {TopToolbar} from "@mapcomponents/react-maplibre";
+
+export interface TopToolbarProps {
+    children?: React.ReactNode;
+    unmovableButtons?: React.ReactNode;
+    buttons?: React.ReactNode;
+    logo?: React.ReactNode;
+    selectedLayer: string;
+    setSelectedLayer: (layer: string) => void;
+    tableSplit: boolean;
+    setTableSplit: (split: boolean) => void;
+}
+
+function TableToolbar(props: TopToolbarProps) {
+    const data = useContext(DataContext);
+
+    const layers = data
+        ? Object.keys(data).map(layerName => layerName.replace(".json", ""))
+        : [];
+
+    const handleLayerSelect = (event: SelectChangeEvent) => {
+        props.setSelectedLayer(event.target.value as string);
+    }
+
+    const handleTableSplit = () => {
+        const newTableSplit = !props.tableSplit;
+        props.setTableSplit(newTableSplit);
+    }
+
+    return (
+        <TopToolbar buttons={
+            <>
+                <Select
+                    variant={'outlined'}
+                    value={props.selectedLayer}
+                    onChange={handleLayerSelect}
+                    size={"small"}
+                    sx={{
+                        width: '122px',
+                        marginRight: {xs: '0px', sm: '10px'}
+                    }}
+                >
+                    <MenuItem value={"all"}>all</MenuItem>
+                    {layers.map(layerName => (
+                        <MenuItem value={layerName} key={layerName}>{layerName}</MenuItem>
+                    ))}
+                </Select>
+                <Button
+                    variant={'contained'}
+                    onClick={handleTableSplit}
+                    sx={{
+                        backgroundColor: '#009EE0'
+                    }}
+                >
+                    {props.tableSplit ? ("merge table") : ("split table")}
+                </Button>
+            </>
+        }/>
+
+    );
+}
+
+export default TableToolbar;
diff --git a/multi_tab/src/components/UI_Components/TopToolbar.tsx b/multi_tab/src/components/UI_Components/TopToolbar.tsx

Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@ interface ParkLayerProps {`
`8`	`8`	`setSrc: React.Dispatch<React.SetStateAction<string>>`
`9`	`9`	`}`
`10`	`10`
`11`		`-// Function to initialize all parks to the map`
	`11`	`+// Function to initialize all parks to the map if the data is fetched successfully`
`12`	`12`	`export default function ParkLayer({`
`13`	`13`	`setSelected,`
`14`	`14`	`setSrc`
Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@ interface RestaurantLayerProps {`
`8`	`8`	`setSrc: React.Dispatch<React.SetStateAction<string>>`
`9`	`9`	`}`
`10`	`10`
`11`		`-// Function to initialize all restaurants to the map`
	`11`	`+// Function to initialize all restaurants to the map if the data is fetched successfully`
`12`	`12`	`export default function RestaurantLayer({`
`13`	`13`	`setSelected,`
`14`	`14`	`setSrc`