Merge pull request #134 from OneBusAway/stops-schedules-fnf

Standalone Stop Pages Fit and Finish

src/app.css

@@ -19,6 +19,26 @@
 		@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;
 	}
 
+	.tab-container {
+		@apply flex border-b border-gray-300;
+	}
+
+	.tab-container__item {
+		@apply -mb-px px-4 py-2 font-semibold text-gray-500;
+	}
+
+	.tab-container__item--active {
+		@apply border-b-2 border-green-500 text-green-500;
+	}
+
+	.button {
+		@apply rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50;
+	}
+
+	.button--primary {
+		@apply rounded-md bg-green-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600;
+	}
+
 	.rtl {
 		@apply flex-row-reverse text-right;
 		direction: rtl;

src/components/StandalonePage.svelte

@@ -0,0 +1,3 @@
+<div class="mx-auto h-full max-w-5xl overflow-y-auto pt-4">
+	<slot></slot>
+</div>

src/components/controls/CompassArrow.svelte

@@ -0,0 +1,41 @@
+<!--
+
+    This Svelte component renders a FontAwesome arrow icon that rotates based on the provided `stopDirection` prop.
+
+    Props:
+    - `stopDirection` (string): The direction in which the arrow should point. 
+      Possible values are 'N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'. 
+      If the value is not one of these, the arrow will be hidden.
+-->
+
+<script>
+	import { faArrowRight } from '@fortawesome/free-solid-svg-icons';
+	import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
+
+	export let stopDirection = '';
+
+	function rotationAngleClass() {
+		switch (stopDirection) {
+			case 'N':
+				return '-rotate-90';
+			case 'NE':
+				return '-rotate-45';
+			case 'E':
+				return 'rotate-0';
+			case 'SE':
+				return 'rotate-45';
+			case 'S':
+				return 'rotate-90';
+			case 'SW':
+				return 'rotate-135';
+			case 'W':
+				return 'rotate-180';
+			case 'NW':
+				return 'rotate-225';
+			default:
+				return 'hidden';
+		}
+	}
+</script>
+
+<FontAwesomeIcon icon={faArrowRight} class={rotationAngleClass()} />

src/components/stops/StopPageHeader.svelte

@@ -0,0 +1,39 @@
+<script>
+	import { faMapMarkerAlt } from '@fortawesome/free-solid-svg-icons';
+	import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
+	import CompassArrow from '$components/controls/CompassArrow.svelte';
+	import TabContainer from '$components/tabs/TabContainer.svelte';
+	import TabLink from '$components/tabs/TabLink.svelte';
+	import { page } from '$app/stores';
+
+	import { t } from 'svelte-i18n';
+	export let stopName;
+	export let stopId;
+	export let stopDirection;
+</script>
+
+<div class="mb-8 text-center">
+	<h1 class="flex items-center justify-center gap-2 text-3xl font-bold text-green-700">
+		{stopName}
+	</h1>
+	<div class="text-normal mt-2 flex items-center justify-center gap-x-8 text-gray-700">
+		<div class="rounded-md bg-gray-50 px-2 py-1">
+			<FontAwesomeIcon icon={faMapMarkerAlt} />
+			<strong>{$t('schedule_for_stop.stop_id')}:</strong>
+			{stopId}
+		</div>
+		<div class="rounded-md bg-gray-50 px-2 py-1">
+			<CompassArrow {stopDirection} />
+			<strong>{$t('schedule_for_stop.direction')}:</strong>
+			{stopDirection}
+		</div>
+	</div>
+	<TabContainer>
+		<TabLink href="/stops/{stopId}" current={$page.route.id === '/stops/[stopID]'}
+			>{$t('arrivals_and_departures_for_stop.title')}</TabLink
+		>
+		<TabLink href="/stops/{stopId}/schedule" current={$page.route.id === '/stops/[stopID]/schedule'}
+			>{$t('schedule_for_stop.route_schedules')}</TabLink
+		>
+	</TabContainer>
+</div>

src/components/tabs/TabContainer.svelte

@@ -0,0 +1,3 @@
+<div class="tab-container">
+	<slot></slot>
+</div>

src/components/tabs/TabLink.svelte

@@ -0,0 +1,10 @@
+<script>
+	export let current = false;
+	export let href;
+</script>
+
+<div class="tab-container__item" class:tab-container__item--active={current}>
+	<a {href} class="block">
+		<slot></slot>
+	</a>
+</div>

src/components/trip-planner/ItineraryTab.svelte

@@ -6,9 +6,8 @@
 </script>
 
 <button
-	class={`-mb-px px-4 py-2 font-semibold ${
-		activeTab === index ? 'border-b-2 border-green-500 text-green-500' : 'text-gray-500'
-	}`}
+	class="tab-container__item"
+	class:tab-container__item--active={activeTab === index}
 	on:click={() => setActiveTab(index)}
 >
 	{$t('trip-planner.itinerary')}

src/components/trip-planner/TripPlanModal.svelte

@@ -69,7 +69,7 @@
 	{/if}
 
 	{#if itineraries.length > 0}
-		<div class="flex border-b border-gray-300">
+		<div class="tab-container">
 			<!-- eslint-disable no-unused-vars -->
 			{#each itineraries as _, index}
 				<ItineraryTab {index} {activeTab} {setActiveTab} />

src/locales/am.json

@@ -75,22 +75,20 @@
 		"no_real_time_data": "ለዚህ ተሽከርካሪ በእሁድኛ ጊዜ ውሂብ አናስተውላም።",
 		"next_stop": "ቀጣይ ማቆሚያ:"
 	},
+	"arrivals_and_departures_for_stop": {
+		"title": "መድረሻዎች እና ማቆሚያዎች"
+	},
 	"schedule_for_stop": {
 		"view_schedule": "ጊዜ ሰንጠረዥን ይመልከቱ",
 		"no_am_schedules_available": "ምንም AM ጊዜ ሰንጠረዦች አልተገኙም",
 		"no_pm_schedules_available": "ምንም PM ጊዜ ሰንጠረዦች አልተገኙም",
 		"minutes": "ደቂቃዎች",
 		"hour": "ሰዓት",
-		"selected_date": "የተመረጠ ቀን",
-		"show_all_routes": "ሁሉንም መንገዶች አሳይ",
-		"collapse_all_routes": "ሁሉንም መንገዶች አጠፋ",
+		"show_all_routes": "ሁሉንም ዘርጋ",
+		"collapse_all_routes": "ሁሉንም ሰብስብ",
 		"route_schedules": "የመንገድ ጊዜ ሰንጠረዦች",
 		"no_schedules_available": "ምንም ጊዜ ሰንጠረዦች ለተመረጠው ቀን አልተገኙም።",
-		"stop_details": "የማቆሚያ ዝርዝሮች",
-		"select_date": "ቀን ይምረጡ",
 		"stop_id": "የማቆሚያ መታወቂያ",
-		"direction": "አቅጣጫ",
-		"click_for_realtime": "ለትክክለኛ ጊዜ መረጃ እዚህ ጠቅ ያድርጉ",
-		"stop_name": "የማቆሚያ ስም"
+		"direction": "አቅጣጫ"
 	}
 }

src/locales/ar.json

@@ -75,22 +75,20 @@
 		"no_real_time_data": "لا توجد بيانات في الوقت الحقيقي لهذه المركبة الآن.",
 		"next_stop": "المحطة التالية:"
 	},
+	"arrivals_and_departures_for_stop": {
+		"title": "الوصول والمغادرة"
+	},
 	"schedule_for_stop": {
 		"view_schedule": "عرض الجدول",
 		"no_am_schedules_available": "لا توجد جداول صباحية متاحة",
 		"no_pm_schedules_available": "لا توجد جداول مسائية متاحة",
 		"minutes": "دقائق",
 		"hour": "ساعة",
-		"selected_date": "التاريخ المحدد",
-		"show_all_routes": "عرض جميع المسارات",
-		"collapse_all_routes": "إخفاء جميع المسارات",
+		"show_all_routes": "توسيع الكل",
+		"collapse_all_routes": "طي الكل",
 		"route_schedules": "جداول المسارات",
 		"no_schedules_available": "لا توجد جداول متاحة للتاريخ المحدد.",
-		"stop_details": "تفاصيل المحطة",
-		"select_date": "اختر التاريخ",
 		"stop_id": "رقم المحطة",
-		"direction": "الاتجاه",
-		"click_for_realtime": "انقر هنا لمعلومات الوقت الفعلي",
-		"stop_name": "اسم المحطة"
+		"direction": "الاتجاه"
 	}
 }

src/locales/en.json

@@ -75,22 +75,20 @@
 		"no_real_time_data": "We don't have real-time data for this vehicle now.",
 		"next_stop": "Next stop:"
 	},
+	"arrivals_and_departures_for_stop": {
+		"title": "Arrivals and Departures"
+	},
 	"schedule_for_stop": {
 		"view_schedule": "View Schedule",
 		"no_am_schedules_available": "No AM schedules available",
 		"no_pm_schedules_available": "No PM schedules available",
 		"minutes": "Minutes",
 		"hour": "Hour",
-		"selected_date": "Selected date",
 		"show_all_routes": "Show All Routes",
 		"collapse_all_routes": "Collapse All Routes",
 		"route_schedules": "Route Schedules",
 		"no_schedules_available": "No schedules available for the selected date.",
-		"stop_details": "Stop Details",
-		"select_date": "Select Date",
 		"stop_id": "Stop ID",
-		"direction": "Direction",
-		"click_for_realtime": "Click here for real-time info",
-		"stop_name": "Stop Name"
+		"direction": "Direction"
 	}
 }

src/locales/es.json

@@ -75,22 +75,20 @@
 		"no_real_time_data": "Actualmente no tenemos datos en tiempo real para este vehículo.",
 		"next_stop": "Próxima parada:"
 	},
+	"arrivals_and_departures_for_stop": {
+		"title": "Llegadas y Salidas"
+	},
 	"schedule_for_stop": {
 		"view_schedule": "Ver horario",
 		"no_am_schedules_available": "No hay horarios AM disponibles",
 		"no_pm_schedules_available": "No hay horarios PM disponibles",
 		"minutes": "Minutos",
 		"hour": "Hora",
-		"selected_date": "Fecha seleccionada",
-		"show_all_routes": "Mostrar todas las rutas",
-		"collapse_all_routes": "Colapsar todas las rutas",
+		"show_all_routes": "Expandir Todo",
+		"collapse_all_routes": "Contraer Todo",
 		"route_schedules": "Horarios de rutas",
 		"no_schedules_available": "No hay horarios disponibles para la fecha seleccionada.",
-		"stop_details": "Detalles de la parada",
-		"select_date": "Seleccionar fecha",
 		"stop_id": "ID de la parada",
-		"direction": "Dirección",
-		"click_for_realtime": "Haga clic aquí para información en tiempo real",
-		"stop_name": "Nombre de la parada"
+		"direction": "Dirección"
 	}
 }

src/locales/pl.json

@@ -75,22 +75,20 @@
 		"no_real_time_data": "Obecnie nie mamy danych w czasie rzeczywistym dla tego pojazdu.",
 		"next_stop": "Następny przystanek:"
 	},
+	"arrivals_and_departures_for_stop": {
+		"title": "Przyjazdy i Odjazdy"
+	},
 	"schedule_for_stop": {
 		"view_schedule": "Zobacz rozkład",
 		"no_am_schedules_available": "Brak dostępnych rozkładów AM",
 		"no_pm_schedules_available": "Brak dostępnych rozkładów PM",
 		"minutes": "Minuty",
 		"hour": "Godzina",
-		"selected_date": "Wybrana data",
-		"show_all_routes": "Pokaż wszystkie trasy",
-		"collapse_all_routes": "Zwiń wszystkie trasy",
+		"show_all_routes": "Rozwiń Wszystko",
+		"collapse_all_routes": "Zwiń Wszystko",
 		"route_schedules": "Rozkłady tras",
 		"no_schedules_available": "Brak dostępnych rozkładów na wybraną datę.",
-		"stop_details": "Szczegóły przystanku",
-		"select_date": "Wybierz datę",
 		"stop_id": "ID przystanku",
-		"direction": "Kierunek",
-		"click_for_realtime": "Kliknij tutaj, aby zobaczyć informacje w czasie rzeczywistym",
-		"stop_name": "Nazwa przystanku"
+		"direction": "Kierunek"
 	}
 }

src/locales/so.json

@@ -75,22 +75,20 @@
 		"no_real_time_data": "Ma hayno xog ku saabsan wakhtiga dhabta ah ee gaarigan hadda.",
 		"next_stop": "Joogsiga xiga:"
 	},
+	"arrivals_and_departures_for_stop": {
+		"title": "Imaanshaha iyo Bixitaanka"
+	},
 	"schedule_for_stop": {
 		"view_schedule": "Eeg jadwalka",
 		"no_am_schedules_available": "Jadwal AM lama heli karo",
 		"no_pm_schedules_available": "Jadwal PM lama heli karo",
 		"minutes": "Daqiiqado",
 		"hour": "Saacad",
-		"selected_date": "Taariikhda la doortay",
-		"show_all_routes": "Tus dhammaan waddooyinka",
-		"collapse_all_routes": "Yaree dhammaan waddooyinka",
+		"show_all_routes": "Ballaari Dhamaan",
+		"collapse_all_routes": "Laabo Dhamaan",
 		"route_schedules": "Jadwalka waddooyinka",
 		"no_schedules_available": "Jadwal lama heli karo taariikhda la doortay.",
-		"stop_details": "Faahfaahinta joogsiga",
-		"select_date": "Dooro taariikhda",
 		"stop_id": "Aqoonsiga joogsiga",
-		"direction": "Jihada",
-		"click_for_realtime": "Riix halkan si aad u aragto macluumaadka wakhtiga dhabta ah",
-		"stop_name": "Magaca joogsiga"
+		"direction": "Jihada"
 	}
 }

src/locales/tl.json

@@ -74,22 +74,20 @@
 		"no_real_time_data": "Wala kaming real-time na data para sa sasakyang ito ngayon.",
 		"next_stop": "Susunod na hintuan:"
 	},
+	"arrivals_and_departures_for_stop": {
+		"title": "Mga Pagdating at Pag-alis"
+	},
 	"schedule_for_stop": {
 		"view_schedule": "Tingnan ang iskedyul",
 		"no_am_schedules_available": "Walang magagamit na AM na iskedyul",
 		"no_pm_schedules_available": "Walang magagamit na PM na iskedyul",
 		"minutes": "Minuto",
 		"hour": "Oras",
-		"selected_date": "Napiling petsa",
-		"show_all_routes": "Ipakita ang lahat ng ruta",
-		"collapse_all_routes": "I-collapse ang lahat ng ruta",
+		"show_all_routes": "Ipakita Lahat",
+		"collapse_all_routes": "I-collapse Lahat",
 		"route_schedules": "Mga iskedyul ng ruta",
 		"no_schedules_available": "Walang magagamit na iskedyul para sa napiling petsa.",
-		"stop_details": "Mga detalye ng hintuan",
-		"select_date": "Pumili ng petsa",
 		"stop_id": "ID ng hintuan",
-		"direction": "Direksyon",
-		"click_for_realtime": "I-click dito para sa real-time na impormasyon",
-		"stop_name": "Pangalan ng hintuan"
+		"direction": "Direksyon"
 	}
 }