From ea76def1d20acbd9f7f549b0a2890221b39d4cd6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tom=20Erik=20St=C3=B8wer?= Date: Mon, 18 Dec 2023 10:42:58 +0100 Subject: [PATCH] Include images into vite build process so urls are transformed correctly --- .../ItineraryList/ItineraryHeaderLegContent.tsx | 11 +++++++++-- .../src/components/MapView/NavigationMarkers.tsx | 6 ++++-- client-next/src/components/SearchBar/SearchBar.tsx | 10 ++-------- .../static}/img/marker-flag-end-shadowed.png | Bin .../static}/img/marker-flag-start-shadowed.png | Bin client-next/{public => src/static}/img/mode/air.png | Bin .../{public => src/static}/img/mode/bicycle.png | Bin client-next/{public => src/static}/img/mode/bus.png | Bin .../{public => src/static}/img/mode/cableway.png | Bin client-next/{public => src/static}/img/mode/car.png | Bin .../{public => src/static}/img/mode/coach.png | Bin .../{public => src/static}/img/mode/foot.png | Bin .../{public => src/static}/img/mode/funicular.png | Bin .../{public => src/static}/img/mode/metro.png | Bin .../{public => src/static}/img/mode/monorail.png | Bin .../{public => src/static}/img/mode/rail.png | Bin .../{public => src/static}/img/mode/taxi.png | Bin .../{public => src/static}/img/mode/tram.png | Bin .../{public => src/static}/img/mode/trolleybus.png | Bin .../{public => src/static}/img/mode/water.png | Bin client-next/{public => src/static}/img/otp-logo.svg | 0 21 files changed, 15 insertions(+), 12 deletions(-) rename client-next/{public => src/static}/img/marker-flag-end-shadowed.png (100%) rename client-next/{public => src/static}/img/marker-flag-start-shadowed.png (100%) rename client-next/{public => src/static}/img/mode/air.png (100%) rename client-next/{public => src/static}/img/mode/bicycle.png (100%) rename client-next/{public => src/static}/img/mode/bus.png (100%) rename client-next/{public => src/static}/img/mode/cableway.png (100%) rename client-next/{public => src/static}/img/mode/car.png (100%) rename client-next/{public => src/static}/img/mode/coach.png (100%) rename client-next/{public => src/static}/img/mode/foot.png (100%) rename client-next/{public => src/static}/img/mode/funicular.png (100%) rename client-next/{public => src/static}/img/mode/metro.png (100%) rename client-next/{public => src/static}/img/mode/monorail.png (100%) rename client-next/{public => src/static}/img/mode/rail.png (100%) rename client-next/{public => src/static}/img/mode/taxi.png (100%) rename client-next/{public => src/static}/img/mode/tram.png (100%) rename client-next/{public => src/static}/img/mode/trolleybus.png (100%) rename client-next/{public => src/static}/img/mode/water.png (100%) rename client-next/{public => src/static}/img/otp-logo.svg (100%) diff --git a/client-next/src/components/ItineraryList/ItineraryHeaderLegContent.tsx b/client-next/src/components/ItineraryList/ItineraryHeaderLegContent.tsx index 93ee400fa2a..d1b21d46543 100644 --- a/client-next/src/components/ItineraryList/ItineraryHeaderLegContent.tsx +++ b/client-next/src/components/ItineraryList/ItineraryHeaderLegContent.tsx @@ -1,5 +1,10 @@ import { Leg } from '../../gql/graphql.ts'; import { useHeaderLegContentStyleCalculations } from './useHeaderLegContentStyleCalculations.ts'; +const modeIcons = import.meta.glob('../../static/img/mode/*.png', { as: 'url', eager: true }); + +function getModeIconUrl(leg: Leg) { + return modeIcons[`../../static/img/mode/${leg.mode.toLowerCase()}.png`]; +} export function ItineraryHeaderLegContent({ leg, @@ -22,6 +27,8 @@ export function ItineraryHeaderLegContent({ pxSpan, ); + const legIconImageUrl = getModeIconUrl(leg); + return (
{showPublicCode && {leg.line?.publicCode}} diff --git a/client-next/src/components/MapView/NavigationMarkers.tsx b/client-next/src/components/MapView/NavigationMarkers.tsx index a99590bd068..1e92a94f7a4 100644 --- a/client-next/src/components/MapView/NavigationMarkers.tsx +++ b/client-next/src/components/MapView/NavigationMarkers.tsx @@ -1,5 +1,7 @@ import { TripQueryVariables } from '../../gql/graphql.ts'; import { Marker } from 'react-map-gl'; +import markerFlagStart from '../../static/img/marker-flag-start-shadowed.png'; +import markerFlagEnd from '../../static/img/marker-flag-end-shadowed.png'; export function NavigationMarkers({ tripQueryVariables, @@ -27,7 +29,7 @@ export function NavigationMarkers({ }} anchor="bottom-right" > - + )} {tripQueryVariables.to.coordinates && ( @@ -45,7 +47,7 @@ export function NavigationMarkers({ }} anchor="bottom-right" > - + )} diff --git a/client-next/src/components/SearchBar/SearchBar.tsx b/client-next/src/components/SearchBar/SearchBar.tsx index ea1492fbe9b..dbdb5db29bf 100644 --- a/client-next/src/components/SearchBar/SearchBar.tsx +++ b/client-next/src/components/SearchBar/SearchBar.tsx @@ -14,6 +14,7 @@ import { ItineraryFilterDebugSelect } from './ItineraryFilterDebugSelect.tsx'; import Navbar from 'react-bootstrap/Navbar'; import { ServerInfoTooltip } from './ServerInfoTooltip.tsx'; import { useRef, useState } from 'react'; +import logo from '../../static/img/otp-logo.svg'; type SearchBarProps = { onRoute: () => void; @@ -31,14 +32,7 @@ export function SearchBar({ onRoute, tripQueryVariables, setTripQueryVariables,
setShowServerInfo((v) => !v)}>
- {' '} - OTP Debug Client + OTP Debug Client {showServerInfo && }
diff --git a/client-next/public/img/marker-flag-end-shadowed.png b/client-next/src/static/img/marker-flag-end-shadowed.png similarity index 100% rename from client-next/public/img/marker-flag-end-shadowed.png rename to client-next/src/static/img/marker-flag-end-shadowed.png diff --git a/client-next/public/img/marker-flag-start-shadowed.png b/client-next/src/static/img/marker-flag-start-shadowed.png similarity index 100% rename from client-next/public/img/marker-flag-start-shadowed.png rename to client-next/src/static/img/marker-flag-start-shadowed.png diff --git a/client-next/public/img/mode/air.png b/client-next/src/static/img/mode/air.png similarity index 100% rename from client-next/public/img/mode/air.png rename to client-next/src/static/img/mode/air.png diff --git a/client-next/public/img/mode/bicycle.png b/client-next/src/static/img/mode/bicycle.png similarity index 100% rename from client-next/public/img/mode/bicycle.png rename to client-next/src/static/img/mode/bicycle.png diff --git a/client-next/public/img/mode/bus.png b/client-next/src/static/img/mode/bus.png similarity index 100% rename from client-next/public/img/mode/bus.png rename to client-next/src/static/img/mode/bus.png diff --git a/client-next/public/img/mode/cableway.png b/client-next/src/static/img/mode/cableway.png similarity index 100% rename from client-next/public/img/mode/cableway.png rename to client-next/src/static/img/mode/cableway.png diff --git a/client-next/public/img/mode/car.png b/client-next/src/static/img/mode/car.png similarity index 100% rename from client-next/public/img/mode/car.png rename to client-next/src/static/img/mode/car.png diff --git a/client-next/public/img/mode/coach.png b/client-next/src/static/img/mode/coach.png similarity index 100% rename from client-next/public/img/mode/coach.png rename to client-next/src/static/img/mode/coach.png diff --git a/client-next/public/img/mode/foot.png b/client-next/src/static/img/mode/foot.png similarity index 100% rename from client-next/public/img/mode/foot.png rename to client-next/src/static/img/mode/foot.png diff --git a/client-next/public/img/mode/funicular.png b/client-next/src/static/img/mode/funicular.png similarity index 100% rename from client-next/public/img/mode/funicular.png rename to client-next/src/static/img/mode/funicular.png diff --git a/client-next/public/img/mode/metro.png b/client-next/src/static/img/mode/metro.png similarity index 100% rename from client-next/public/img/mode/metro.png rename to client-next/src/static/img/mode/metro.png diff --git a/client-next/public/img/mode/monorail.png b/client-next/src/static/img/mode/monorail.png similarity index 100% rename from client-next/public/img/mode/monorail.png rename to client-next/src/static/img/mode/monorail.png diff --git a/client-next/public/img/mode/rail.png b/client-next/src/static/img/mode/rail.png similarity index 100% rename from client-next/public/img/mode/rail.png rename to client-next/src/static/img/mode/rail.png diff --git a/client-next/public/img/mode/taxi.png b/client-next/src/static/img/mode/taxi.png similarity index 100% rename from client-next/public/img/mode/taxi.png rename to client-next/src/static/img/mode/taxi.png diff --git a/client-next/public/img/mode/tram.png b/client-next/src/static/img/mode/tram.png similarity index 100% rename from client-next/public/img/mode/tram.png rename to client-next/src/static/img/mode/tram.png diff --git a/client-next/public/img/mode/trolleybus.png b/client-next/src/static/img/mode/trolleybus.png similarity index 100% rename from client-next/public/img/mode/trolleybus.png rename to client-next/src/static/img/mode/trolleybus.png diff --git a/client-next/public/img/mode/water.png b/client-next/src/static/img/mode/water.png similarity index 100% rename from client-next/public/img/mode/water.png rename to client-next/src/static/img/mode/water.png diff --git a/client-next/public/img/otp-logo.svg b/client-next/src/static/img/otp-logo.svg similarity index 100% rename from client-next/public/img/otp-logo.svg rename to client-next/src/static/img/otp-logo.svg