Fixxing error, and modifying Toolbar

Author: jannik brack

multi_tab/src/App.tsx

@@ -1,72 +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 Toolbar from "@mui/material/Toolbar";
-import AppBar from "@mui/material/AppBar";
-import Box from "@mui/material/Box";
 import {useState} from "react";
 
 function App() {
     const [openSidebar, setOpenSidebar] = useState(true);
-    const ghPagesUrl = 'https://mapcomponents.github.io/react-map-components-maplibre/';
-    const logoUrl = ghPagesUrl + 'assets/WG-MapComponents-Logo_rgb.svg';
-
 
     const openTable = () => {
         const newUrl = `${window.location.href}#/table`;
         window.open(newUrl, "_blank", "popup");
     }
     return (
         <>
-            <AppBar
-                sx={{
-                    minHeight: '62px',
-                    width: '100vw',
-                    position: 'absolute',
-                    backgroundColor: 'white',
-                    zIndex: 1300,
-                    top: 0,
-                }}
-            >
-                <Toolbar disableGutters>
-                    <Box
+            <TopToolbar buttons={
+                <>
+                    <Button
                         sx={{
-                            marginLeft: '25px',
-                            display: {xs: 'none', md: 'flex'},
-                            flexGrow: {md: '30'},
+                            color: openSidebar ? "#009EE0" : "white",
+                            backgroundColor: openSidebar ? "#fff" : '#009EE0',
+                            marginRight: {xs: '0px', sm: '10px'}
+                        }}
+                        variant={openSidebar ? 'outlined' : 'contained'}
+                        onClick={() => {
+                            setOpenSidebar(!openSidebar);
                         }}
                     >
-                        <img
-                            src={logoUrl}
-                            style={{width: '100%', maxWidth: '250px'}}
-                            alt={"MapComponentsLogo"}
-                        />
-                        <Button
-                            sx={{
-                                left: 'calc(100% - 520px)',
-                                color: '#238ee5'
-                            }}
-                            disabled={openSidebar}
-                            variant='outlined'
-                            onClick={() => {
-                                setOpenSidebar(!openSidebar);
-                            }}
-                        >
-                            Open Sidebar
-                        </Button>
+                        Sidebar
+                    </Button>
 
-                        <Button
-                            sx={{
-                                left: 'calc(100% - 510px)',
-                                color: '#238ee5'
-                            }}
-                            variant='outlined'
-                            onClick={() => openTable()}
-                        >show table</Button>
-                    </Box>
-                </Toolbar>
-            </AppBar>
+                    <Button
+                        sx={{
+                            background: '#009EE0'
+                        }}
+                        variant='contained'
+                        onClick={() => openTable()}
+                    >show table</Button>
+                </>
+            }/>
             <MapLibreMap
                 options={{
                     style: "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
@@ -75,7 +46,7 @@ function App() {
                 }}
                 style={{position: "absolute", top: 0, bottom: 0, left: 0, right: 0}}
             />
-            <LayerManager setOpenSidebar={setOpenSidebar} openSidebar={openSidebar} />
+            <LayerManager setOpenSidebar={setOpenSidebar} openSidebar={openSidebar}/>
         </>
     );
 }

multi_tab/src/components/DataTableManager.jsx

@@ -1,6 +1,6 @@
 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";
 
@@ -11,8 +11,6 @@ export default function DataTableManager() {
     const [selected, setSelected] = useState();
     const [selectedLayer, setSelectedLayer] = useState("all");
     const [tableSplit, setTableSplit] = useState(false);
-    const [parksVisible, setParksVisible] = useState(true);
-    const [restaurantsVisible, setRestaurantsVisible] = useState(true);
     /*const [showOnlyVisibleObjects, setShowOnlyVisibleObjects] = useState(true);*/
 
     useEffect(() => {
@@ -27,17 +25,14 @@ export default function DataTableManager() {
                         setSelected(message.selected);
                         break;
                     case"visibleLayers":
-                        console.log(message);
-                        setParksVisible(message.parksShown);
-                        setRestaurantsVisible(message.restaurantsShown);
                         setSelectedLayer(
                             message.parksShown && message.restaurantsShown
                                 ? 'all'
                                 : message.restaurantsShown
                                     ? 'restaurant'
                                     : message.parksShown
                                         ? 'park'
-                                        : ''
+                                        : 'all'
                         );
 
                         break;

multi_tab/src/components/LayerManager.jsx

@@ -131,6 +131,7 @@ export default function LayerManager(props) {
 
     useEffect(() => {
         if (!mapHook.map) return;
+        console.log("send")
 
         sendMessageToServiceWorker({
             type: "visibleLayers",

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;