components/SpeedLimitProfile/TSOLines.tsx

src/ui/components/widgets/SpeedLimitSection/components/SpeedLimitProfile/TSOLines.tsx
mail@pastecode.io avatar
unknown
typescript
8 days ago
4.2 kB
3
Indexable
Never
import { divIcon } from 'leaflet'
import React, { useEffect, useState } from 'react'
import { Marker, Polyline, Tooltip } from 'react-leaflet'

import {
  formatLatLngPolyline,
  getSpeedLimitCoords
} from '../../utils/speedLimitsUtil'

function createTSOIcon(milepost: number) {
  return divIcon({
    className:
      'w-full h-full rounded-full flex items-center justify-center text-[#2e465e]',
    iconSize: [24, 24],
    html: `<div style="background-color: #fcb503; border: 2px solid gray; border-radius: 50%; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: bold;">${milepost}</div>`
  })
}

const TSOTooltip = ({
  tsoSpeedLimit,
  temporarySpeedLimitId,
  sticky
}: {
  tsoSpeedLimit: any
  temporarySpeedLimitId?: string
  sticky?: boolean
}) => {
  return (
    <Tooltip
      sticky={sticky}
      direction="top"
      className="mt-[-20px] drop-shadow-lg rounded-[5px] "
      permanent={
        temporarySpeedLimitId === tsoSpeedLimit?.temporary_speed_limit_id
      }
    >
      <div className=" flex flex-row items-center justify-start gap-x-[15px] p-2 relative">
        <div className="flex flex-col items-start justify-center">
          <p className="m-0 whitespace-nowrap">
            <span className="font-medium">Subdivision:</span>{' '}
            <span className="text-[#c25a3a] font-bold">
              {tsoSpeedLimit?.subdivision}
            </span>
          </p>

          <p className="m-0 whitespace-nowrap">
            <span className="font-medium">Start mile:</span>{' '}
            {tsoSpeedLimit?.start_mile}
          </p>
          <p className="m-0 whitespace-nowrap">
            <span className="font-medium">End mile:</span>{' '}
            {tsoSpeedLimit?.end_mile}
          </p>
          <p className="m-0 whitespace-nowrap">
            <span className="font-medium"> Limit (mph):</span>{' '}
            <span className="font-bold">{tsoSpeedLimit?.speed_limit_mph}</span>
          </p>
        </div>
      </div>
    </Tooltip>
  )
}

const TSOLines = ({
  tsoSpeedLimitData,
  trackCoordinatesData,
  TSOSpeedLimitSelected
}: {
  tsoSpeedLimitData: any[]
  trackCoordinatesData: any[]
  TSOSpeedLimitSelected?: string
}) => {
  return (
    <>
      {tsoSpeedLimitData?.map((tsoSpeedLimit: any) => {
        return (
          <React.Fragment key={tsoSpeedLimit?.temporary_speed_limit_id}>
            {/* TSO Lines */}
            <Polyline
              pathOptions={{ weight: 5 }}
              className="focus:stroke-[#e3c024]"
              positions={formatLatLngPolyline(
                getSpeedLimitCoords(tsoSpeedLimit, trackCoordinatesData)
              )}
              color="#e3c024"
              key={`${
                tsoSpeedLimit?.temporary_speed_limit_id ===
                TSOSpeedLimitSelected
                  ? `Updated ${tsoSpeedLimit?.temporary_speed_limit_id}`
                  : tsoSpeedLimit?.temporary_speed_limit_id
              }`}
            >
              <TSOTooltip
                tsoSpeedLimit={tsoSpeedLimit}
                temporarySpeedLimitId={TSOSpeedLimitSelected}
                sticky
              />
            </Polyline>

            {/* TSO Start and End Markers */}
            <Marker
              position={[
                tsoSpeedLimit?.start_gps_coordinates?.lat,
                tsoSpeedLimit?.start_gps_coordinates?.lng
              ]}
              icon={createTSOIcon(tsoSpeedLimit?.start_mile.toFixed(1))}
              zIndexOffset={1000}
            >
              <TSOTooltip tsoSpeedLimit={tsoSpeedLimit} />
            </Marker>

            <Marker
              position={[
                tsoSpeedLimit?.end_gps_coordinates?.lat,
                tsoSpeedLimit?.end_gps_coordinates?.lng
              ]}
              icon={createTSOIcon(tsoSpeedLimit?.end_mile.toFixed(1))}
              zIndexOffset={1000}
            >
              <TSOTooltip tsoSpeedLimit={tsoSpeedLimit} />
            </Marker>
          </React.Fragment>
        )
      })}
    </>
  )
}

export default TSOLines
Leave a Comment