aswi2022code-of-duty-gitlab/frontend/src/features/TrackingTool/MapPath.tsx @ 8c57f958

import { Fragment, FunctionComponent, useEffect, useState } from 'react'
import { CatalogItemDto } from '../../swagger/data-contracts'
import { PathVariant } from './buildPathVariants'
import TextPath from 'react-leaflet-textpath'
import { Marker, Popup } from 'react-leaflet'
import { Checkbox, FormControlLabel, Stack, Typography } from '@mui/material'
import { formatHtmlStringToReactDom } from '../../utils/formatting/HtmlUtils'
import { DialogCatalogItemDetail as CatalogItemDetailDialog } from '../Catalog/CatalogItemDetail'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '../redux/store'

// CatalogItemDto wrapper to keep track whether the item is active or not
class DisplayableMapPoint {
    constructor(
        public readonly catalogItem: CatalogItemDto,
        public active: boolean = true
    ) {}
}

export interface MapPathProps {
    pathVariant: PathVariant // aka CatalogItemDto[]
    idx: number // index of path in the list
}

// Blue
export const primaryPathColor = '#346eeb'

// Grey
export const secondaryPathColor = '#878e9c'

// Map path component
const MapPath: FunctionComponent<MapPathProps> = ({ idx, pathVariant }) => {
    // List of all map points that belong to the path
    const [mapPoints, setMapPoints] = useState<DisplayableMapPoint[]>(
        pathVariant
            .filter((item) => item.latitude && item.longitude)
            .map((item) => new DisplayableMapPoint(item))
    )

    // Set of all active paths
    const activePaths = useSelector(
        (state: RootState) => state.trackingTool.activePaths
    )
    // Index of the primary path
    const primaryPathIdx = useSelector(
        (state: RootState) => state.trackingTool.primaryPathIdx
    )

    // Whether the path is active or not
    const [active, setActive] = useState(false)
    useEffect(() => {
        setActive(activePaths.has(idx))
    }, [activePaths, idx])

    const getActiveMapPoints = () => mapPoints.filter((item) => item.active)

    const dispatch = useDispatch()

    // Builds all edges of the path
    const buildEdges = () => {
        const activeMapPoints = getActiveMapPoints()
        if (activeMapPoints.length < 2) {
            return null
        }

        // Create path edges
        const edges: any[] = []
        for (let i = 0; i < activeMapPoints.length - 1; i += 1) {
            edges.push(
                <TextPath
                    positions={[
                        [
                            activeMapPoints[i].catalogItem.latitude,
                            activeMapPoints[i].catalogItem.longitude,
                        ],
                        [
                            activeMapPoints[i + 1].catalogItem.latitude,
                            activeMapPoints[i + 1].catalogItem.longitude,
                        ],
                    ]}
                    text="►"
                    attributes={{
                        'font-size': 25,
                        // Set to primaryPathColor if primary index in the tracking tool is equal to this index
                        fill:
                            primaryPathIdx === idx
                                ? primaryPathColor
                                : secondaryPathColor,
                    }}
                    onClick={() => {
                        dispatch(setPrimaryIdx(idx))
                    }}
                    repeat
                    center
                    weight={9}
                />
            )
        }

        // Return the path
        return edges
    }

    /**
     * Creates a list of all vertices in the path
     */
    const buildVertices = () => {
        return mapPoints.map((mapPoint, idx) => (
            <Marker
                key={idx}
                position={[
                    mapPoint.catalogItem.latitude as number,
                    mapPoint.catalogItem.longitude as number,
                ]}
            >
                <Popup>
                    <Fragment>
                        <Stack direction="column" sx={{ m: 0 }}>
                            <Typography
                                variant="h6"
                                fontWeight="bold"
                                fontSize={16}
                            >
                                {formatHtmlStringToReactDom(
                                    mapPoint.catalogItem.name as string
                                )}
                            </Typography>
                            <FormControlLabel
                                control={
                                    <Checkbox
                                        checked={mapPoint.active}
                                        onChange={() => {
                                            mapPoint.active = !mapPoint.active
                                            setMapPoints([...mapPoints])
                                        }}
                                    />
                                }
                                labelPlacement="end"
                                label="Active"
                            />
                            <CatalogItemDetailDialog
                                itemId={mapPoint.catalogItem.id ?? ''}
                            />
                        </Stack>
                    </Fragment>
                </Popup>
            </Marker>
        ))
    }

    return (
        <Fragment>
            {active && (
                <Fragment>
                    {buildVertices()}
                    {buildEdges()}
                </Fragment>
            )}
        </Fragment>
    )
}

export default MapPath
function setPrimaryIdx(idx: number): any {
    throw new Error('Function not implemented.')
}