aswi2022code-of-duty-gitlab/frontend/src/features/TrackingTool/TrackingTool.tsx @ 91fd3fa6

import {
    Button,
    Card,
    CardContent,
    Divider,
    Grid,
    Paper,
    Stack,
    Typography,
} from '@mui/material'
import { Fragment, useEffect, useState } from 'react'
import AddIcon from '@mui/icons-material/Add'
import { MapContainer, Marker, Polyline, Popup, TileLayer } from 'react-leaflet'
import mapConfig from '../../config/mapConfig'
import TextPath from 'react-leaflet-textpath'
import PlaintextUpload from './PlaintextUpload'
import FileUpload from './FileUpload'
import L from 'leaflet'
import DeleteIcon from '@mui/icons-material/Delete'
import { PathDto } from '../../swagger/data-contracts'
import { formatHtmlStringToReactDom } from '../../utils/formatting/HtmlUtils'
import buildPathVariants, { PathVariant } from './buildPathVariants'

// Page with tracking tool
const TrackingTool = () => {
    // Path response from the API
    const [pathDto, setPathDto] = useState<PathDto | undefined>(undefined)

    // Whether the path variants are building
    const [buildingPathVariants, setBuildingPathVariants] =
        useState<boolean>(false)

    // List of all computed path variants
    const [pathVariants, setPathVariants] = useState<PathVariant[] | undefined>(
        undefined
    )

    // List of all rendered paths to display
    const [renderedPaths, setRenderedPaths] = useState<any[]>([])

    const [mapCenter, setMapCenter] = useState<number[]>([
        mapConfig.defaultCoordinates[0],
        mapConfig.defaultCoordinates[1],
    ])

    // Returns tuple of average latitude and longitude
    const calculateMapCenter = (pathVariant: PathVariant) => [
        pathVariant
            .map((item) => item.latitude ?? 0)
            .reduce((a, b) => a + b, 0) / pathVariant.length,
        pathVariant
            .map((item) => item.longitude ?? 0)
            .reduce((a, b) => a + b, 0) / pathVariant.length,
    ]

    useEffect(() => {
        if (!pathDto) {
            return
        }

        setBuildingPathVariants(true)
        buildPathVariants(pathDto).then((pathVariants) => {
            setPathVariants(pathVariants)
            setBuildingPathVariants(false)
            const paths: any[] = []
            let first = true
            pathVariants?.forEach((pathVariant) => {
                if (first) {
                    setMapCenter(calculateMapCenter(pathVariant))
                }
                for (let i = 0; i < pathVariant.length - 1; i++) {
                    paths.push(
                        <TextPath
                            positions={[
                                [
                                    pathVariant[i].latitude,
                                    pathVariant[i].longitude,
                                ],
                                [
                                    pathVariant[i + 1].latitude,
                                    pathVariant[i + 1].longitude,
                                ],
                            ]}
                            text="►"
                            attributes={{
                                'font-size': 25,
                                fill: first ? 'blue' : 'gray',
                            }}
                            repeat
                            center
                            weight={10}
                        />
                    )
                }
                first = false
            })
            console.log(paths)
            setRenderedPaths(paths)
        })
    }, [pathDto])

    return (
        <Fragment>
            <Typography variant="h3" sx={{ mb: 2 }} fontWeight="bold">
                Tracking Tool
            </Typography>

            {pathDto && (
                <Fragment>
                    <Card variant="outlined">
                        <CardContent>
                            <Stack direction="column">
                                <Typography
                                    variant="h5"
                                    sx={{ mb: 1 }}
                                    fontWeight="600"
                                >
                                    Text
                                </Typography>
                                <Typography variant="body2">
                                    {formatHtmlStringToReactDom(
                                        pathDto.text ?? ''
                                    )}
                                </Typography>
                            </Stack>
                        </CardContent>
                    </Card>
                </Fragment>
            )}
            <Grid container>
                <Grid item xs={12}>
                    {pathDto && pathDto?.foundCatalogItems?.length === 0 && (
                        <Typography
                            variant="body1"
                            sx={{ mb: 2 }}
                            fontWeight="500"
                            align="center"
                            color="error.main"
                        >
                            Looks like no path / catalog items match this query.
                        </Typography>
                    )}

                    <Stack
                        direction="row"
                        alignItems="flex-start"
                        spacing={2}
                        sx={{ mt: 1 }}
                    >
                        <Typography
                            variant="h5"
                            sx={{ mb: 2 }}
                            fontWeight="500"
                        >
                            {pathDto ? 'Update path' : 'Show Path'}
                        </Typography>
                        <PlaintextUpload setPaths={setPathDto} />
                        <FileUpload />
                    </Stack>
                </Grid>

                <Grid
                    item
                    xs={12}
                    md={12}
                    style={{
                        minHeight: '60vh',
                        maxHeight: '100vh',
                        width: '100%',
                    }}
                >
                    <MapContainer
                        center={[mapCenter[0], mapCenter[1]]}
                        zoom={mapConfig.defaultZoom}
                        style={{ height: '100%', minHeight: '100%' }}
                    >
                        <TileLayer
                            attribution={mapConfig.attribution}
                            url={mapConfig.url}
                        />
                        {renderedPaths}
                    </MapContainer>
                </Grid>
            </Grid>
        </Fragment>
    )
}

export default TrackingTool