aswi2022code-of-duty-gitlab/frontend/src/features/TrackingTool/TrackingTool.tsx @ 41a11178

import { Button, Divider, Grid, Stack, Typography } from '@mui/material'
import { Fragment } 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'

// Page with tracking tool
const TrackingTool = () => {
    const createDummyPathCoords = () => {
        // Sample dummy path to display
        const dummyPath = []
        for (let i = 0; i < 10; i += 1) {
            dummyPath.push({
                latitude:
                    mapConfig.defaultCoordinates[0] +
                    i * 0.1 +
                    Math.random() * 0.1,
                longitude:
                    mapConfig.defaultCoordinates[1] +
                    i * 0.1 +
                    Math.random() * 0.1,
            })
        }
        return dummyPath
    }

    const createDummyPath = () => {
        const coords = createDummyPathCoords()
        const polylines: any[] = []

        if (coords.length < 2) {
            return []
        }

        for (let i = 0; i < coords.length - 1; i += 1) {
            polylines.push(
                // <Polyline
                //     key={i}
                //     positions={[
                //         [dummyPath[i].latitude, dummyPath[i].longitude],
                //         [dummyPath[i + 1].latitude, dummyPath[i + 1].longitude],
                //     ]}
                //     color="red"
                //     weight={5}
                //     opacity={1}

                //     smoothFactor={1}
                // >
                //     <Popup>Caesar 🥗 War Path (Allegedly)</Popup>
                //     </Polyline>
                <TextPath
                    positions={[
                        [coords[i].latitude, coords[i].longitude],
                        [coords[i + 1].latitude, coords[i + 1].longitude],
                    ]}
                    text="►"
                    attributes={{
                        'font-size': 25,
                        fill: 'blue',
                    }}
                    repeat
                    center
                    weight={10}
                >
                    <Popup>Caesar 🥗 War Path (Allegedly)</Popup>
                </TextPath>
            )
        }

        return [polylines, coords]
    }

    const [polylines, coords] = createDummyPath()

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

            <Grid container>
                <Grid item xs={12} md={4}>
                    <Stack
                        direction="row"
                        alignItems="flex-start"
                        spacing={2}
                        sx={{ m: 0, p: 0 }}
                    >
                        <Typography
                            variant="h5"
                            sx={{ mb: 2 }}
                            fontWeight="500"
                        >
                            Upload:
                        </Typography>
                        <PlaintextUpload />
                        <FileUpload />
                    </Stack>
                </Grid>
                <Grid
                    item
                    xs={12}
                    md={12}
                    style={{
                        minHeight: '60vh',
                        maxHeight: '100vh',
                        width: '100%',
                    }}
                >
                    <MapContainer
                        center={[
                            mapConfig.defaultCoordinates[0],
                            mapConfig.defaultCoordinates[1],
                        ]}
                        zoom={mapConfig.defaultZoom}
                        style={{ height: '100%', minHeight: '100%' }}
                    >
                        <TileLayer
                            attribution={mapConfig.attribution}
                            url={mapConfig.url}
                        />
                        {coords.map(({ latitude, longitude }, idx) => (
                            <Marker position={[latitude, longitude]} />
                        ))}
                        {polylines}
                    </MapContainer>
                </Grid>
                
            </Grid>
        </Fragment>
    )
}

export default TrackingTool