Feat/trip-planner-localization

src/app.css

@@ -18,12 +18,39 @@
 	.modal-pane {
 		@apply rounded-lg border-gray-500 bg-white/90 px-4 shadow-lg dark:bg-black dark:text-white dark:shadow-lg dark:shadow-gray-200/10;
 	}
+
 	.rtl {
-		@apply flex-row-reverse text-left;
+		@apply flex-row-reverse text-right;
 		direction: rtl;
 	}
 
 	.rtl .rotate-rtl {
 		transform: rotate(180deg);
 	}
+
+	.rtl .ml-3 {
+		margin-right: 0.75rem;
+	}
+
+	.rtl .mr-3 {
+		margin-left: 0.75rem;
+	}
+
+	.rtl .space-x-4 {
+		margin-left: 1rem;
+	}
+
+	.rtl .space-x-reverse {
+		margin-right: 1rem;
+	}
+
+	.rtl .border-l-4 {
+		border-left-width: 0;
+		border-right-width: 4px;
+	}
+
+	.rtl .left-5 {
+		left: auto;
+		right: 1.25rem;
+	}
 }

src/components/search/SearchPane.svelte

@@ -122,7 +122,7 @@
 
 <div class={`modal-pane flex flex-col justify-between md:w-96 ${cssClasses}`}>
 	<Tabs tabStyle="underline" contentClass="pt-2 pb-4 bg-gray-50 rounded-lg dark:bg-black">
-		<TabItem open title="Stops and Stations" on:click={handleTabSwitch}>
+		<TabItem open title={$t('tabs.stops-and-stations')} on:click={handleTabSwitch}>
 			<SearchField value={query} on:searchResults={handleSearchResults} />
 
 			{#if query}
@@ -182,7 +182,7 @@
 		</TabItem>
 
 		{#if env.PUBLIC_OTP_SERVER_URL}
-			<TabItem title="Plan a Trip" on:click={handlePlanTripTabClick} disabled={!mapLoaded}>
+			<TabItem title={$t('tabs.plan_trip')} on:click={handlePlanTripTabClick} disabled={!mapLoaded}>
 				<TripPlan {mapProvider} on:tripPlanned={handleTripPlan} />
 			</TabItem>
 		{/if}

src/components/trip-planner/ItineraryDetails.svelte

@@ -1,22 +1,26 @@
 <script>
 	import LegDetails from './LegDetails.svelte';
 	import { formatTime } from '$lib/formatters';
+	import { t } from 'svelte-i18n';
 	export let itinerary;
 	export let expandedSteps;
 	export let toggleSteps;
 </script>
 
 <div class="mb-4 flex items-center justify-between rounded-lg bg-gray-100 p-4 shadow-md">
 	<div class="text-center">
-		<p class="text-sm font-semibold text-gray-500">Duration</p>
-		<p class="text-lg font-bold text-gray-700">{Math.round(itinerary.duration / 60)} min</p>
+		<p class="text-sm font-semibold text-gray-500">{$t('trip-planner.duration')}</p>
+		<p class="text-lg font-bold text-gray-700">
+			{Math.round(itinerary.duration / 60)}
+			{$t('time.min')}
+		</p>
 	</div>
 	<div class="text-center">
-		<p class="text-sm font-semibold text-gray-500">Start Time</p>
+		<p class="text-sm font-semibold text-gray-500">{$t('trip-planner.start_time')}</p>
 		<p class="text-lg font-bold text-gray-700">{formatTime(itinerary.startTime)}</p>
 	</div>
 	<div class="text-center">
-		<p class="text-sm font-semibold text-gray-500">End Time</p>
+		<p class="text-sm font-semibold text-gray-500">{$t('trip-planner.end_time')}</p>
 		<p class="text-lg font-bold text-gray-700">{formatTime(itinerary.endTime)}</p>
 	</div>
 </div>

src/components/trip-planner/ItineraryTab.svelte

@@ -1,4 +1,5 @@
 <script>
+	import { t } from 'svelte-i18n';
 	export let index;
 	export let activeTab;
 	export let setActiveTab;
@@ -10,5 +11,6 @@
 	}`}
 	on:click={() => setActiveTab(index)}
 >
-	Itinerary {index + 1}
+	{$t('trip-planner.itinerary')}
+	{index + 1}
 </button>

src/components/trip-planner/LegDetails.svelte

@@ -14,7 +14,7 @@
 		faArrowAltCircleRight
 	} from '@fortawesome/free-solid-svg-icons';
 	import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
-
+	import { t } from 'svelte-i18n';
 	export let leg;
 	export let index;
 	export let expandedSteps;
@@ -75,15 +75,15 @@
 		<div class="mt-3 flex space-x-4 text-sm text-gray-600 dark:text-gray-100">
 			<div class="flex items-center">
 				<FontAwesomeIcon icon={faClock} class="mr-1 text-blue-500" />
-				<span class="text-md">Start:</span>
+				<span class="text-md">{$t('trip-planner.start')}:</span>
 				<div class="ml-1 flex items-baseline">
 					<span class="text-md font-semibold">{formatTime(leg.startTime).slice(0, -3)}</span>
 					<span class="ml-1 text-xs">{formatTime(leg.startTime).slice(-2)}</span>
 				</div>
 			</div>
 			<div class="flex items-center">
 				<FontAwesomeIcon icon={faClock} class="mr-1 text-red-500" />
-				<span class="text-md">End:</span>
+				<span class="text-md">{$t('trip-planner.end')}:</span>
 				<div class="ml-1 flex items-baseline">
 					<span class="text-md font-semibold">{formatTime(leg.endTime).slice(0, -3)}</span>
 					<span class="ml-1 text-xs">{formatTime(leg.endTime).slice(-2)}</span>
@@ -98,11 +98,13 @@
 			</div>
 			<div class="mb-2 flex items-center">
 				<FontAwesomeIcon icon={faRulerCombined} class="mr-2 text-gray-400" />
-				<span>Distance: {Math.round(leg.distance)} meters</span>
+				<span>Distance: {Math.round(leg.distance)} {$t('trip-planner.meters')}</span>
 			</div>
 			<div class="mb-4 flex items-center">
 				<FontAwesomeIcon icon={faClock} class="mr-2 text-gray-400" />
-				<span>Duration: {Math.round(leg.duration / 60)} minutes</span>
+				<span
+					>{$t('trip-planner.duration')}: {Math.round(leg.duration / 60)} {$t('time.minutes')}</span
+				>
 			</div>
 		</div>
 
@@ -119,7 +121,11 @@
 							<div class="font-semibold">{step.relativeDirection} on {step.streetName}</div>
 							<div class="mb-2 flex items-center">
 								<FontAwesomeIcon icon={faRulerCombined} class="mr-2 text-gray-400" />
-								<span>Distance: {Math.round(step.distance)} meters</span>
+								<span
+									>{$t('trip-planner.distance')}
+									{Math.round(step.distance)}
+									{$t('trip-planner.meters')}</span
+								>
 							</div>
 							<div class="flex items-center">
 								<FontAwesomeIcon icon={faArrowAltCircleRight} class="mr-2 text-gray-400" />

src/components/trip-planner/TripPlan.svelte

@@ -4,6 +4,7 @@
 	import TripPlanSearchField from './TripPlanSearchField.svelte';
 	import { error } from '@sveltejs/kit';
 	import { browser } from '$app/environment';
+	import { t } from 'svelte-i18n';
 	export let mapProvider;
 
 	let fromPlace = '';
@@ -81,12 +82,12 @@
 			const response = await geocodeLocation(suggestion.text);
 			if (isFrom) {
 				selectedFrom = response.location.geometry.location;
-				fromMarker = mapProvider.addPinMarker(selectedFrom, 'From');
+				fromMarker = mapProvider.addPinMarker(selectedFrom, $t('trip-planner.from'));
 				fromPlace = suggestion.text;
 				fromResults = [];
 			} else {
 				selectedTo = response.location.geometry.location;
-				toMarker = mapProvider.addPinMarker(selectedTo, 'To');
+				toMarker = mapProvider.addPinMarker(selectedTo, $t('trip-planner.to'));
 				toPlace = suggestion.text;
 				toResults = [];
 			}
@@ -142,8 +143,8 @@
 				mapProvider.removePinMarker(toMarker);
 			}
 
-			fromMarker = mapProvider.addPinMarker(selectedFrom, 'From');
-			toMarker = mapProvider.addPinMarker(selectedTo, 'To');
+			fromMarker = mapProvider.addPinMarker(selectedFrom, $t('trip-planner.from'));
+			toMarker = mapProvider.addPinMarker(selectedTo, $t('trip-planner.to'));
 
 			const data = await fetchTripPlan(selectedFrom, selectedTo);
 
@@ -167,7 +168,7 @@
 
 <div class="space-y-4">
 	<TripPlanSearchField
-		label="From:"
+		label="{$t('trip-planner.from')}:"
 		place={fromPlace}
 		results={fromResults}
 		isLoading={isLoadingFrom}
@@ -177,7 +178,7 @@
 	/>
 
 	<TripPlanSearchField
-		label="To:"
+		label="{$t('trip-planner.to')}:"
 		place={toPlace}
 		results={toResults}
 		isLoading={isLoadingTo}
@@ -210,9 +211,9 @@
 				></circle>
 				<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path>
 			</svg>
-			Planning...
+			{$t('trip-planner.planning')}...
 		{:else}
-			Plan Your Trip
+			{$t('trip-planner.plan_your_trip')}
 		{/if}
 	</button>
 </div>

src/components/trip-planner/TripPlanModal.svelte

@@ -4,6 +4,7 @@
 	import ItineraryDetails from './ItineraryDetails.svelte';
 	import ItineraryTab from './ItineraryTab.svelte';
 	import { onDestroy, onMount } from 'svelte';
+	import { t } from 'svelte-i18n';
 
 	export let mapProvider;
 	export let itineraries = [];
@@ -62,7 +63,7 @@
 	});
 </script>
 
-<ModalPane on:close title="Trip Itineraries">
+<ModalPane on:close title={$t('trip-planner.trip_itineraries')}>
 	{#if loading}
 		<LoadingSpinner />
 	{/if}
@@ -82,7 +83,7 @@
 		</div>
 	{:else}
 		<div class="flex h-full items-center justify-center text-gray-400 dark:text-gray-500">
-			No itineraries found
+			{$t('trip-planner.no_itineraries_found')}
 		</div>
 	{/if}
 </ModalPane>

src/components/trip-planner/TripPlanSearchField.svelte

@@ -1,7 +1,7 @@
 <script>
 	import { faMapMarkerAlt } from '@fortawesome/free-solid-svg-icons';
 	import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
-
+	import { t } from 'svelte-i18n';
 	export let label = '';
 	export let place = '';
 	export let results = [];
@@ -33,7 +33,7 @@
 			type="text"
 			bind:value={place}
 			on:input={handleInput}
-			placeholder="Enter location"
+			placeholder="{$t('trip-planner.search_for_a_place')}..."
 			class="dark: mt-1 block w-full rounded-md border-gray-300 pr-10 text-black shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
 		/>
 		{#if place}
@@ -61,7 +61,7 @@
 		<p
 			class="absolute z-10 mt-1 w-full rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-500 shadow-lg"
 		>
-			Loading...
+			{$t('trip-planner.loading')}...
 		</p>
 	{:else if results.length > 0}
 		<ul

src/locales/am.json

@@ -1,4 +1,27 @@
 {
+	"trip-planner": {
+		"plan_your_trip": "ጉዞዎን ያቅዱ",
+		"itinerary": "ጉዞ አይነት",
+		"duration": "ቆይታ ጊዜ",
+		"start_time": "መነሻ ጊዜ",
+		"end_time": "መጨረሻ ጊዜ",
+		"minutes": "ደቂቃዎች",
+		"distance": "ርቀት",
+		"end": "መጨረሻ",
+		"start": "መነሻ",
+		"meters": "ሜትሮች",
+		"no_itineraries_found": "ምንም ጉዞ አይነት አልተገኘም",
+		"loading": "በመጫን ላይ...",
+		"planning": "በማቅዳት ላይ",
+		"from": "ከ",
+		"to": "ወደ",
+		"search_for_a_place": "ቦታ ይፈልጉ",
+		"trip_itineraries": "የጉዞ አይነቶች"
+	},
+	"tabs": {
+		"stops-and-stations": "ማቆሚያዎችና ጣቢያዎች",
+		"plan_trip": "ጉዞን አቅድ"
+	},
 	"search": {
 		"placeholder": "ቆሻሻዎችን፣ መንገዶችን እና ቦታዎችን ይፈልጉ",
 		"results_for": "የፍለጋ ውጤቶች ለ",
@@ -43,9 +66,9 @@
 		"sec": "ሰከንድ",
 		"secs": "ሰከንዶች",
 		"min": "ደቂቃ",
-		"mins": "ደቂቃዎች"
+		"mins": "ደቂቃዎች",
+		"minutes": "ደቂቃዎች"
 	},
-
 	"vehicle": {
 		"number": "ተሽከርካሪ #",
 		"data_updated": "የተሻሻለ ውሂብ",

src/locales/ar.json

@@ -1,4 +1,27 @@
 {
+	"trip-planner": {
+		"plan_your_trip": "خطط رحلتك",
+		"itinerary": "مسار الرحلة",
+		"duration": "المدة",
+		"start_time": "وقت البدء",
+		"end_time": "وقت الانتهاء",
+		"minutes": "دقيقة",
+		"distance": "المسافة",
+		"end": "النهاية",
+		"start": "البداية",
+		"meters": "الأمتار",
+		"no_itineraries_found": "لم يتم العثور على مسارات",
+		"loading": "جاري التحميل...",
+		"planning": "جاري التخطيط",
+		"from": "من",
+		"to": "إلى",
+		"search_for_a_place": "ابحث عن المكان",
+		"trip_itineraries": "مسارات الرحلة"
+	},
+	"tabs": {
+		"stops-and-stations": "المحطات والمواقف",
+		"plan_trip": "خطط لرحلة"
+	},
 	"search": {
 		"placeholder": "ابحث عن المحطات، المسارات، والأماكن",
 		"results_for": "نتائج البحث عن",
@@ -34,6 +57,7 @@
 	"stop": "المحطة",
 	"routes": "المسارات",
 	"route": "المسار",
+	"route_modal_title": "مسار {name}",
 	"loading": "جاري التحميل",
 	"arrives": "يصل",
 	"NA": "غير متاح",
@@ -42,7 +66,8 @@
 		"sec": "ثانية",
 		"secs": "ثواني",
 		"min": "دقيقة",
-		"mins": "دقائق"
+		"mins": "دقائق",
+		"minutes": "دقائق"
 	},
 	"vehicle": {
 		"number": "رقم المركبة",