diff --git a/index.html b/index.html index 2455855..ba03fec 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@ + GeoView Demo Page diff --git a/src/components/GeoViewMap.tsx b/src/components/GeoViewMap.tsx index f346e5d..d5dff07 100644 --- a/src/components/GeoViewMap.tsx +++ b/src/components/GeoViewMap.tsx @@ -10,17 +10,18 @@ import ArrowBackIcon from '@mui/icons-material/ArrowBack'; import { useNavigate } from 'react-router-dom'; import { CodeSnippet } from './CodeSnippet'; import { EventsLog } from './EventsLog'; +import { LegendLayerStatusTable } from './LegendLayerStatusTable'; interface GeoViewMapProps { showConfigEditor?: boolean; showEventsLog?: boolean; + showLegendLayerStatus?: boolean; config: string | object; configIsFilePath?: boolean; codeSnippet?: string; children?: React.ReactNode; top?: React.ReactNode; bottom?: React.ReactNode; - } function GeoViewMap(props: GeoViewMapProps) { @@ -35,6 +36,7 @@ function GeoViewMap(props: GeoViewMapProps) { const { showConfigEditor = true, showEventsLog = true, + showLegendLayerStatus = true, config = DEFAULT_CONFIG, configIsFilePath, codeSnippet, @@ -86,6 +88,7 @@ function GeoViewMap(props: GeoViewMapProps) { {showConfigEditor && } {codeSnippet && } {showEventsLog && } + {showLegendLayerStatus && } @@ -104,6 +107,11 @@ function GeoViewMap(props: GeoViewMapProps) { } + {showLegendLayerStatus && + + + } + ); }; diff --git a/src/components/LegendLayerStatusTable.tsx b/src/components/LegendLayerStatusTable.tsx new file mode 100644 index 0000000..b5a5dd5 --- /dev/null +++ b/src/components/LegendLayerStatusTable.tsx @@ -0,0 +1,47 @@ +import { useContext } from 'react'; +import { CGPVContext } from '../providers/cgpvContextProvider/CGPVContextProvider'; +import { Box, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material'; + + +export function LegendLayerStatusTable() { + const cgpvContext = useContext(CGPVContext); + + if (!cgpvContext) { + throw new Error('CGPVContent must be used within a CGPVProvider'); + } + + const { legendLayerStatusList } = cgpvContext; + + + return ( + +

Legend Layer Status

+ + + + + + Layer Name + Status + + + + {legendLayerStatusList.map((row, index) => ( + + + {row.layerName} + + {row?.status} + + ))} + +
+ + + ); + + +}; \ No newline at end of file diff --git a/src/components/SplitButton.tsx b/src/components/SplitButton.tsx index 09ba5b8..39bc415 100644 --- a/src/components/SplitButton.tsx +++ b/src/components/SplitButton.tsx @@ -28,7 +28,7 @@ export default function SplitButton({ options, label, title, onClick }: SplitBut } }; - const handleMenuItemClick = (event: React.MouseEvent, index: number) => { + const handleMenuItemClick = (index: number) => { setSelectedIndex(index); setOpen(false); }; @@ -84,7 +84,7 @@ export default function SplitButton({ options, label, title, onClick }: SplitBut {options.map((option, index) => ( - handleMenuItemClick(event, index)}> + handleMenuItemClick(index)}> {option} ))} diff --git a/src/providers/cgpvContextProvider/cgpvHook.ts b/src/providers/cgpvContextProvider/cgpvHook.ts index 1396129..dbdaed0 100644 --- a/src/providers/cgpvContextProvider/cgpvHook.ts +++ b/src/providers/cgpvContextProvider/cgpvHook.ts @@ -6,7 +6,7 @@ import { DEFAULT_MAP_WIDTH, } from '../../constants'; import _ from 'lodash'; -import { EventListItemType } from '../../types'; +import { EventListItemType, LegendLayerStatus } from '@/types'; export interface ICgpvHook { mapId: string; @@ -20,6 +20,7 @@ export interface ICgpvHook { mapHeight: number; setMapHeight: React.Dispatch>; eventsList: EventListItemType[]; + legendLayerStatusList: LegendLayerStatus[]; initializeMap: (mapId: string, config: string | object, configIsFilePath?: boolean) => void; handleRemoveMap: () => string; @@ -42,6 +43,7 @@ export function useCgpvHook(): ICgpvHook { const [isInitialized, setIsInitialized] = useState(false); const [isLoading, setIsLoading] = useState(false); const [eventsList, setEventsList] = useState([]); + const [legendLayerStatusList, setLegendLayerStatusList] = useState([]); const addEventToList = (eventName: string, description: string) => { @@ -50,8 +52,19 @@ export function useCgpvHook(): ICgpvHook { }); }; - const registerEventListeners = () => { + const registerEventListeners = (mapId: string) => { // Events===================================================================================================================== + console.log('registering events'); + + cgpv.api.maps[mapId].layer.legendsLayerSet.onLayerSetUpdated((sender: any, payload: any) => { + const { resultSet } = payload; + const resultArr: LegendLayerStatus[] = Object.keys(resultSet).map((key) => { + return { layerName: resultSet[key]?.layerName, status: resultSet[key]?.layerStatus }; + }); + console.log('resultArr', resultArr); + setLegendLayerStatusList(resultArr); + }); + // listen to layer added event cgpv.api.maps[mapId].layer.onLayerAdded((sender: any, payload: any) => { addEventToList('onLayerAdded', `layer ${payload.layerPath} added`); @@ -168,7 +181,7 @@ export function useCgpvHook(): ICgpvHook { handleCreateMap(mapId, configJson); cgpv.init(() => { // write some code ... - registerEventListeners(); + registerEventListeners(mapId); setIsLoading(false); }); } @@ -209,6 +222,8 @@ export function useCgpvHook(): ICgpvHook { cgpv.api.createMapFromConfig(theMapId, JSON.stringify(data)); cgpv.init(() => { // write some code ... + console.log('map created----------------------------------------'); + registerEventListeners(theMapId); }); setConfigJson({ ...data }); setMapId(theMapId); @@ -304,6 +319,7 @@ export function useCgpvHook(): ICgpvHook { isLoading, applyWidthHeight, eventsList, + legendLayerStatusList, initializeMap, handleRemoveMap, diff --git a/src/types.ts b/src/types.ts index 31031b1..9b61201 100644 --- a/src/types.ts +++ b/src/types.ts @@ -10,4 +10,10 @@ export type EventListItemType = { eventName: string; description: string; status?: string; +} + + +export type LegendLayerStatus = { + layerName: string; + status: string; } \ No newline at end of file diff --git a/tsconfig.app.json b/tsconfig.app.json index 7e08b1b..72c5826 100644 --- a/tsconfig.app.json +++ b/tsconfig.app.json @@ -1,8 +1,8 @@ { "compilerOptions": { - "target": "ES2020", + "target": "ES2021", "useDefineForClassFields": true, - "lib": ["ES2020", "DOM", "DOM.Iterable"], + "lib": ["ES2021", "DOM", "DOM.Iterable"], "module": "ESNext", "skipLibCheck": true, @@ -17,7 +17,7 @@ /* Linting */ "strict": true, "noUnusedLocals": true, - "noUnusedParameters": true, + "noUnusedParameters": false, "noFallthroughCasesInSwitch": true, "paths": {