Merge pull request #21 from mapcomponents/Add-MultiTab

Add multi tab
mapcomponents · Nov 26, 2024 · 76c545a · 76c545a
2 parents 4ae9b1e + acced55
commit 76c545a
Show file tree

Hide file tree

Showing 18 changed files with 1,015 additions and 352 deletions.
diff --git a/multi_tab/package.json b/multi_tab/package.json
@@ -1,8 +1,9 @@
 {
-  "name": "app_title",
+  "name": "multi_tab",
   "private": true,
   "version": "0.0.0",
   "type": "module",
+  "homepage": ".",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",

diff --git a/webGis/package.json b/webGis/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "homepage": ".",
   "dependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@mapcomponents/react-maplibre": "^0.1.85",

diff --git a/webGis/src/AppContext.js b/webGis/src/AppContext.js
@@ -1,5 +1,5 @@
 import { createContext } from "react";
-import { useState, useEffect } from "react";
+import { useState } from "react";
 
 const AppContext = createContext({});
 

diff --git a/webGis/src/components/BottomSidebar.js b/webGis/src/components/BottomSidebar.js
@@ -1,14 +1,12 @@
 import * as React from "react";
 import { Global } from "@emotion/react";
-import { styled, useTheme } from "@mui/material/styles";
+import { styled,  } from "@mui/material/styles";
 import {
   Box,
   Typography,
-  CssBaseline,
   SwipeableDrawer,
-  autocompleteClasses,
-} from "@mui/material/";
-import { grey } from "@mui/material/colors";
+  } from "@mui/material/";
+
 
 const drawerBleeding = 56;
 

diff --git a/webGis/src/components/CustomDraggableFrame.js b/webGis/src/components/CustomDraggableFrame.js
@@ -4,7 +4,6 @@ import theme from "../theme";
 import StraightenOutlinedIcon from "@mui/icons-material/StraightenOutlined";
 import SquareFootOutlinedIcon from "@mui/icons-material/SquareFootOutlined";
 import makeStyles from "@mui/styles/makeStyles";
-import useMediaQuery from "@mui/material/useMediaQuery";
 import "maplibre-gl/dist/maplibre-gl.css";
 
 import DraggableFrame from "./DraggableFrame";
@@ -17,9 +16,9 @@ import GeoJSONLoader from "../components/Frames/GeoJSONLoader";
 import LineGeoJSONIntersectionFeatureInfo from "../components/Frames/LineGeoJSONIntersectionFeatureInfo";
 
 
-import { ExampleConfig } from "../components/MlIconLayerstories";
+import { ExampleConfig } from "./MlIconLayerstories";
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(() => ({
   icon: {
     width: "40px",
     margin: "10px",
@@ -36,7 +35,6 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 function CustomDraggableFrame(props) {
-  const mediaIsMobile = useMediaQuery("(max-width:900px)");
   const classes = useStyles(theme);
 
   const entry = [

diff --git a/webGis/src/components/DraggableFrame.js b/webGis/src/components/DraggableFrame.js
@@ -12,7 +12,7 @@ import { useMediaQuery } from "@mui/material";
 
 import BottomSidebar from "./BottomSidebar";
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(() => ({
   icon: {
     width: "30px",
     margin: "10px",
@@ -34,10 +34,10 @@ function DraggableFrame(props) {
   var startPos;
 
   useEffect(() => {
-    if (props.componentId == "toolbar") {
+    if (props.componentId === "toolbar") {
       window.addEventListener(
         "resize",
-        function (event) {
+        function () {
           setPos({ ...pos, x: window.innerWidth - 100 });
         },
         true
@@ -91,7 +91,7 @@ function DraggableFrame(props) {
     if (index > -1) {
       newState.splice(index, 1);
 
-      if (props.componentId == "featureInfo") {
+      if (props.componentId === "featureInfo") {
         appContext.setFeatureInfoEnabled(false);
       }
     }

diff --git a/webGis/src/components/Frames/FeatureInfo.js b/webGis/src/components/Frames/FeatureInfo.js
@@ -1,4 +1,4 @@
-import { useEffect, useState, useContext } from "react";
+import { useEffect, useContext } from "react";
 
 import Grid from "@mui/material/Grid";
 
@@ -25,7 +25,7 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-function FeatureInfo(props) {
+function FeatureInfo() {
   const classes = useStyles(theme);
 
   const appContext = useContext(AppContext);

diff --git a/webGis/src/components/Frames/GeoJSONLoader.js b/webGis/src/components/Frames/GeoJSONLoader.js
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState, useContext, useRef } from "react";
+import {  useContext, useRef } from "react";
 
 import Grid from "@mui/material/Grid";
 
@@ -10,10 +10,10 @@ import { Button } from "@mui/material";
 
 import ShareOutlinedIcon from '@mui/icons-material/ShareOutlined';
 
-import TextField from "@mui/material/TextField";
+
 import AppContext from "../../AppContext.js";
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(() => ({
   icon: {
     width: "40px",
     margin: "10px",
@@ -29,7 +29,7 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-function GeoJSONLoader(props) {
+function GeoJSONLoader() {
   const classes = useStyles(theme);
 
   const inputRef = useRef(null);

diff --git a/webGis/src/components/Frames/LayerTree.js b/webGis/src/components/Frames/LayerTree.js
@@ -1,7 +1,3 @@
-import { useEffect, useState } from "react";
-
-import IconButton from "@mui/material/IconButton";
-
 import makeStyles from "@mui/styles/makeStyles";
 import theme from "../../theme.js";
 import Grid from "@mui/material/Grid";
@@ -26,7 +22,7 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-function LayerTree(props) {
+function LayerTree() {
   const classes = useStyles(theme);
 
   return (

diff --git a/webGis/src/components/Frames/LineGeoJSONIntersectionFeatureInfo.js b/webGis/src/components/Frames/LineGeoJSONIntersectionFeatureInfo.js
@@ -2,10 +2,6 @@ import { useEffect, useState, useContext } from "react";
 
 import Grid from "@mui/material/Grid";
 import Box from "@mui/material/Box";
-import Card from "@mui/material/Card";
-import CardActions from "@mui/material/CardActions";
-import CardContent from "@mui/material/CardContent";
-import Button from "@mui/material/Button";
 import Typography from "@mui/material/Typography";
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
@@ -25,7 +21,7 @@ import { MlFeatureEditor } from "@mapcomponents/react-maplibre";
 
 import * as turf from "@turf/turf";
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(() => ({
   icon: {
     width: "40px",
     margin: "10px",
@@ -41,7 +37,7 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-function LineGeoJSONIntersectionFeatureInfo(props) {
+function LineGeoJSONIntersectionFeatureInfo() {
   const classes = useStyles(theme);
 
   const appContext = useContext(AppContext);

diff --git a/webGis/src/components/Frames/MeasureWindow.js b/webGis/src/components/Frames/MeasureWindow.js
@@ -1,10 +1,9 @@
-import theme from "../../theme";
 import {MlMeasureTool} from "@mapcomponents/react-maplibre"
 import { Select, Box, Grid, MenuItem, FormControl } from "@mui/material";
 import { useState } from "react";
 import makeStyles from "@mui/styles/makeStyles";
 
-const useStyles = makeStyles((theme)=> ({
+const useStyles = makeStyles(()=> ({
   icon: {
     width: "40px",
     margin: "10px",
@@ -25,7 +24,6 @@ const MeasureWindow = (props) => {
     const handleChange = (event) => {
       setUnit(event.target.value);
     };
-  const classes = useStyles(theme);
 
     return (
       <div style={{color: "#ddd", margin: "5px", minWidth: "200px" }}>

diff --git a/webGis/src/components/Frames/MlCreatePdfButton/MlCreatePdfButton.js b/webGis/src/components/Frames/MlCreatePdfButton/MlCreatePdfButton.js
@@ -4,7 +4,6 @@ import { MapContext } from "@mapcomponents/react-maplibre";
 
 import createPdf from "./createPdf";
 
-import PrinterIcon from "@mui/icons-material/Print";
 import Button from "@mui/material/Button";
 
 import theme from "../../../theme";

diff --git a/webGis/src/components/Frames/Print.js b/webGis/src/components/Frames/Print.js
@@ -1,5 +1,3 @@
-import { useEffect, useState } from "react";
-
 import InputLabel from "@mui/material/InputLabel";
 import MenuItem from "@mui/material/MenuItem";
 import FormControl from "@mui/material/FormControl";
@@ -8,9 +6,6 @@ import Grid from "@mui/material/Grid";
 
 import makeStyles from "@mui/styles/makeStyles";
 import theme from "../../theme.js";
-
-import Stack from "@mui/material/Stack";
-import { Button } from "@mui/material";
 import Box from "@mui/material/Box";
 import FormGroup from "@mui/material/FormGroup";
 import FormControlLabel from "@mui/material/FormControlLabel";
@@ -39,7 +34,7 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-function Print(props) {
+function Print() {
   const classes = useStyles(theme);
 
   return (

diff --git a/webGis/src/components/Frames/WmsLoader.js b/webGis/src/components/Frames/WmsLoader.js
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState, useContext } from "react";
+import { useCallback, useState, useContext } from "react";
 
 import Grid from "@mui/material/Grid";
 
@@ -16,7 +16,7 @@ import AddPhotoAlternateOutlinedIcon from '@mui/icons-material/AddPhotoAlternate
 import TextField from "@mui/material/TextField";
 import AppContext from "../../AppContext.js";
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(() => ({
   icon: {
     width: "40px",
     margin: "10px",
@@ -32,7 +32,7 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-function WmsLoader(props) {
+function WmsLoader() {
   const classes = useStyles(theme);
 
   const appContext = useContext(AppContext);

diff --git a/webGis/src/components/Header.js b/webGis/src/components/Header.js
@@ -4,13 +4,11 @@ import useMediaQuery from "@mui/material/useMediaQuery";
 
 import { AppBar } from "@mui/material";
 import Toolbar from "@mui/material/Toolbar";
-import Typography from "@mui/material/Typography";
 import IconButton from "@mui/material/IconButton";
 import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
 
 import DynamicFeedOutlinedIcon from "@mui/icons-material/DynamicFeedOutlined";
 import LocalPrintshopOutlinedIcon from "@mui/icons-material/LocalPrintshopOutlined";
-import AddPhotoAlternateOutlinedIcon from "@mui/icons-material/AddPhotoAlternateOutlined";
 import RoomOutlinedIcon from "@mui/icons-material/RoomOutlined";
 import { ReactComponent as MapcomponentsIconText } from "../assets/WG-MapComponents-Logo_rgb-weisse-schrift.svg";
 import { ReactComponent as MapcomponentsIcon } from "../assets/WG-MapComponents-Signet_rgb.svg";
@@ -34,7 +32,7 @@ import { MapContext } from "@mapcomponents/react-maplibre";
 
 import * as React from "react";
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(() => ({
   icon: {
     width: "40px",
     margin: "10px",
@@ -101,8 +99,8 @@ function Header(props) {
     (element) => {
       //if there is no geojson loaded, show error snackbar
       if (
-        appContext.includedGeoJSONs.length == 0 &&
-        element == "lgiFeatureInfo"
+        appContext.includedGeoJSONs.length === 0 &&
+        element === "lgiFeatureInfo"
       ) {
         handleClickSnackbar();
         return;
@@ -120,7 +118,7 @@ function Header(props) {
       }
       ////////////////////////Try///////////////
 
-      if (mediaIsMobile == true) {
+      if (mediaIsMobile === true) {
         if (
           [
             "print",
@@ -134,41 +132,41 @@ function Header(props) {
           ].includes(element)
         ) {
           let index = newState.indexOf("print");
-          if (index > -1 && element != "print") {
+          if (index > -1 && element !== "print") {
             newState.splice(index, 1);
           }
 
           index = newState.indexOf("layers");
-          if (index > -1 && element != "layers") {
+          if (index > -1 && element !== "layers") {
             newState.splice(index, 1);
           }
           index = newState.indexOf("measurePolygon");
-          if (index > -1 && element != "measurePolygon") {
+          if (index > -1 && element !== "measurePolygon") {
             newState.splice(index, 1);
           }
 
           index = newState.indexOf("measureLine");
-          if (index > -1 && element != "measureLine") {
+          if (index > -1 && element !== "measureLine") {
             newState.splice(index, 1);
           }
 
           index = newState.indexOf("featureInfo");
-          if (index > -1 && element != "featureInfo") {
+          if (index > -1 && element !== "featureInfo") {
             newState.splice(index, 1);
             appContext.setFeatureInfoEnabled(false);
           }
 
           index = newState.indexOf("lgiFeatureInfo");
-          if (index > -1 && element != "lgiFeatureInfo") {
+          if (index > -1 && element !== "lgiFeatureInfo") {
             newState.splice(index, 1);
           }
           index = newState.indexOf("wmsLoader");
-          if (index > -1 && element != "wmsLoader") {
+          if (index > -1 && element !== "wmsLoader") {
             newState.splice(index, 1);
           }
 
           index = newState.indexOf("geojsonLoader");
-          if (index > -1 && element != "geojsonLoader") {
+          if (index > -1 && element !== "geojsonLoader") {
             newState.splice(index, 1);
           }
         }
@@ -182,29 +180,29 @@ function Header(props) {
           ].includes(element)
         ) {
           let index = newState.indexOf("measurePolygon");
-          if (index > -1 && element != "measurePolygon") {
+          if (index > -1 && element !== "measurePolygon") {
             newState.splice(index, 1);
           }
 
           index = newState.indexOf("measureLine");
-          if (index > -1 && element != "measureLine") {
+          if (index > -1 && element !== "measureLine") {
             newState.splice(index, 1);
           }
 
           index = newState.indexOf("featureInfo");
-          if (index > -1 && element != "featureInfo") {
+          if (index > -1 && element !== "featureInfo") {
             newState.splice(index, 1);
             appContext.setFeatureInfoEnabled(false);
           }
 
           index = newState.indexOf("lgiFeatureInfo");
-          if (index > -1 && element != "lgiFeatureInfo") {
+          if (index > -1 && element !== "lgiFeatureInfo") {
             newState.splice(index, 1);
           }
         }
       }
 
-      if (element == "featureInfo") {
+      if (element === "featureInfo") {
         appContext.setFeatureInfoEnabled(newState.includes(element));
       }