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

import { Fragment, FunctionComponent, 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'

// 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[]
    active: boolean // whether this component is active
    idx: number // index of path in the list
    primaryIdx: number // reference to index of path which has primary color
    setPrimary: (idx: number) => void // callback to set the primary path
}

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

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

// Map path component 
const MapPath: FunctionComponent<MapPathProps> = ({
    pathVariant,
    active,
    primaryIdx,
    idx,
    setPrimary
}) => {
    // 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))
    )
    

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

    // 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: primaryIdx === idx ? primaryPathColor : secondaryPathColor,
                    }}
                    onClick={() => {
                        setPrimary(idx)
                        console.log('hehehe')
                    }
                    }
                    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