Clickable transport and stops + refactor stop modal

api/service/masstrans/masstrans.ts

@@ -89,6 +89,7 @@ export class MasstransService {
             arriveTime: item.tc_arrivetime,
             route: item.mr_num,
             routeDirection: item.rl_racetype,
+            routeId: parseInt(item.mr_id, 10),
             type: item.type,
             to: item.laststation_title,
             // TODO: get through stations from GetRoute

client/common/types/state.ts

@@ -14,12 +14,22 @@ export interface State {
 }
 
 export type CurrentVehiclePayload = State['publicTransport']['currentVehicle'];
-export interface SetCurrentVehiclePayload {
+export interface CurrentVehicleOptions {
+    shouldClear?: boolean;
+}
+export type CurrentVehiclePayloadWithOptions = CurrentVehiclePayload & CurrentVehicleOptions;
+export interface SetCurrentVehiclePayload extends CurrentVehicleOptions {
     currentVehicle: CurrentVehiclePayload;
     currentRoute: State['publicTransport']['currentRoute'];
 }
 export type CurrentStopPayload = State['publicTransport']['currentStop'];
-export interface SetCurrentStopPayload {
+export interface CurrentStopOptions {
+    shouldClear?: boolean;
+}
+export interface CurrentStopPayloadWithOptions extends CurrentStopOptions {
+    currentStop: CurrentStopPayload;
+}
+export interface SetCurrentStopPayload extends CurrentStopOptions {
     currentStop: CurrentStopPayload;
     stopInfo: State['publicTransport']['stopInfo'];
 }

client/components/Map/Location/MapLocation.tsx

@@ -79,6 +79,7 @@ export function MapLocation() {
 
         userMarkerRef.current = new MovingMarker(COORDS_EKATERINBURG, {
             icon: USER_ICON,
+            pane: 'location',
         }).addTo(map);
     }, [map]);
 

client/components/Map/MainContainer/MapMainContainer.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { MapContainer, TileLayer } from 'react-leaflet';
+import { MapContainer, Pane, TileLayer } from 'react-leaflet';
 import classNames from 'classnames/bind';
 
 import { sidebarService } from 'services/sidebar/sidebar';
@@ -14,7 +14,9 @@ import { MapWelcomeMessage } from 'components/Map/WelcomeMessage/MapWelcomeMessa
 import styles from './MapMainContainer.module.css';
 import 'leaflet/dist/leaflet.css';
 
-const tileServerUrl = `https://tiles.ekaterinburg.io/styles/basic-white/{z}/{x}/{y}${devicePixelRatio > 1 ? '@2x' : ''}.png`
+const tileServerUrl = `https://tiles.ekaterinburg.io/styles/basic-white/{z}/{x}/{y}${
+    devicePixelRatio > 1 ? '@2x' : ''
+}.png`;
 
 const cn = classNames.bind(styles);
 
@@ -31,7 +33,7 @@ function MapMainContainer({ zoom = 16, showControls = true }) {
                 sidebarService.open({ component: <MapWelcomeMessage /> });
                 localStorage.setItem('hasVisited', '1');
             }
-        } catch (e) { }
+        } catch (e) {}
     }, []);
 
     return (
@@ -47,12 +49,15 @@ function MapMainContainer({ zoom = 16, showControls = true }) {
             doubleClickZoom={false}
             className={cn(styles.Map)}
         >
-            <TileLayer url="https://tiles.ekaterinburg.io/styles/basic-white/{z}/{x}/{y}@2x.png" />
+            <TileLayer url={tileServerUrl} />
 
-            {showControls && <>
-                <MapLocation />
-                <MapZoomControl position="bottomright" />
-            </>}
+            {showControls && (
+                <>
+                    <Pane name="location" style={{ zIndex: 400 }} />
+                    <MapLocation />
+                    <MapZoomControl position="bottomright" />
+                </>
+            )}
 
             <MapTransport />
 

client/components/Map/Stops/Item/MapStopsItem.tsx

@@ -25,9 +25,10 @@ export function MapStopsItem({ type, id, name, coords }: MapStopsItemProps) {
     const currentVehicle = useSelector((state: State) => state.publicTransport.currentVehicle);
 
     const icon = useMemo(() => {
+        const hasActiveStop = currentStop !== null;
         const isVehicleActive = Boolean(currentVehicleStops.length);
 
-        if (isVehicleActive) {
+        if (isVehicleActive && !hasActiveStop) {
             const isStopActive = currentVehicleStops.includes(id);
 
             if (isStopActive) {
@@ -46,11 +47,10 @@ export function MapStopsItem({ type, id, name, coords }: MapStopsItemProps) {
 
         const iconObject = getIconObjectByTypes(type);
 
-        const isActive = currentStop === id;
-        const hasActiveStop = currentStop !== null;
-
         let icon = iconObject.idle;
 
+        const isActive = currentStop === id;
+
         if (!isActive && hasActiveStop) {
             icon = iconObject.inactive;
         }
@@ -81,7 +81,7 @@ export function MapStopsItem({ type, id, name, coords }: MapStopsItemProps) {
                             onClose: () => dispatch(setCurrentStop(null)),
                         });
 
-                        dispatch(setCurrentStop(id));
+                        dispatch(setCurrentStop({ currentStop: id }));
                     }
                 },
             }}

client/components/Map/Stops/Sidebar/Header/MapStopsSidebarHeader.module.css

@@ -0,0 +1,20 @@
+.MapStopsSidebarHeader {
+    display: flex;
+    gap: 16px;
+    border-top-left-radius: 16px;
+    border-top-right-radius: 16px;
+    padding-right: 80px;
+
+    background-color: #fff;
+}
+
+.MapStopsSidebarHeaderWrapper {
+    position: sticky;
+    top: 0;
+}
+
+.MapStopsSidebarHeaderInfo {
+    display: flex;
+    gap: 10px;
+    flex: 1;
+}

client/components/Map/Stops/Sidebar/Header/MapStopsSidebarHeader.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import classNames from 'classnames/bind';
+
+import { StopType } from 'transport-common/types/masstrans';
+
+import { Typography } from 'components/UI/Typography/Typography';
+import { IconFont } from 'components/UI/Typography/IconFont/IconFont';
+import { IconFontCharsNames } from 'common/constants/iconFontChars';
+import { Divider } from 'components/UI/Divider/Divider';
+import t from 'utils/typograph';
+
+import { MapStopsSidebarProps } from '../MapStopsSidebar';
+import { MapStopsSidebarRow } from '../Row/MapStopsSidebarRow';
+
+import styles from './MapStopsSidebarHeader.module.css';
+
+const cn = classNames.bind(styles);
+
+export interface MapStopsSidebarHeaderProps extends Pick<MapStopsSidebarProps, 'name'> {
+    types: Exclude<StopType, StopType.TrollBus>[];
+}
+
+export function MapStopsSidebarHeader({ types, name }: MapStopsSidebarHeaderProps) {
+    return (
+        <div className={cn(styles.MapStopsSidebarHeaderWrapper)}>
+            <MapStopsSidebarRow mix={styles.MapStopsSidebarHeader}>
+                <div className={cn(styles.MapStopsSidebarHeaderInfo)}>
+                    <Typography variant="h3">
+                        {types.map((t) => (
+                            <IconFont key={t} name={IconFontCharsNames[t]} />
+                        ))}
+                    </Typography>
+                    <Typography variant="h3">{t(name)}</Typography>
+                </div>
+            </MapStopsSidebarRow>
+            <Divider />
+        </div>
+    );
+}

client/components/Map/Stops/Sidebar/MapStopsSidebar.module.css

@@ -8,107 +8,3 @@
 
     font-family: 'Iset Sans', sans-serif;
 }
-
-.MapStopsSidebarRow {
-    padding: 16px 24px;
-}
-
-.MapStopsSidebarHeaderWrapper {
-    position: sticky;
-    top: 0;
-}
-
-.MapStopsSidebarHeader {
-    display: flex;
-    gap: 16px;
-    border-top-left-radius: 16px;
-    border-top-right-radius: 16px;
-    padding-right: 80px;
-
-    background-color: #fff;
-}
-
-.MapStopsSidebarHeaderInfo {
-    display: flex;
-    gap: 10px;
-    flex: 1;
-}
-
-.MapStopsSidebarCloseButton {
-    border: 0;
-    padding: 0;
-
-    background: none;
-    cursor: pointer;
-    z-index: 100;
-}
-
-.MapStopsSidebarCloseIcon > path {
-    stroke: var(--text-primary);
-}
-
-.MapStopsSidebarVehicles {
-    display: flex;
-    flex-direction: column;
-    gap: 30px;
-
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-}
-
-.MapStopsSidebarVehicles::-webkit-scrollbar {
-    display: none;
-}
-
-.MapStopsSidebarVehicle {
-    display: flex;
-    gap: 32px;
-}
-
-.MapStopsSidebarVehicleInfo {
-    display: flex;
-    gap: 16px;
-    flex: 1;
-}
-
-.MapStopsSidebarVehicleRoute {
-    flex-shrink: 0;
-
-    width: 58px;
-    height: 32px;
-    border-radius: 3px;
-
-    font-weight: 500;
-    font-size: 28px;
-    line-height: 32px;
-    text-align: center;
-
-    color: white;
-}
-
-.MapStopsSidebarVehicleRouteBus {
-    background-color: var(--bus);
-}
-
-.MapStopsSidebarVehicleRouteTram {
-    background-color: var(--tram);
-}
-
-.MapStopsSidebarVehicleRouteTroll {
-    background-color: var(--troll);
-}
-
-.MapStopsSidebarVehicleEndpoint {
-    font-size: 20px;
-    line-height: 22px;
-}
-
-.MapStopsSidebarVehicleKeypoints,
-.MapStopsSidebarVehicleArriveTime {
-    font-size: 16px;
-    line-height: 18px;
-}
-
-.MapStopsSidebarVehicleKeypoints {
-    font-weight: 300;
-}