Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Better routes #70

Merged
merged 6 commits into from
Sep 5, 2024
Merged

Better routes #70

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9b1e954
RouteHeading component
42A7C5 Sep 1, 2024
cf74cd3
Basic stop list
42A7C5 Sep 4, 2024
127c5d5
Merge pull request #71 from catenarytransit/main
kylerchin Sep 4, 2024
5e5b5bf
ui improvements to nearby departures
kylerchin Sep 4, 2024
09e560c
Basic horizontal list
42A7C5 Sep 5, 2024
24c5742
Finish up UI
42A7C5 Sep 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 8 additions & 3 deletions src/components/DelayDiff.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@
let m: number = 0;
let s: number = 0;

export let show_seconds: boolean = true;

let this_locale: string | null | undefined = null;

function locale_hour_marking(l: string | null | undefined) {
Expand Down Expand Up @@ -96,9 +98,12 @@
{/if}{#if h > 0 || m > 0}
<span class="text-sm">{m}</span>
<span class="text-xs">{locale_min_marking(this_locale)}</span>{/if}
{#if Math.abs(diff) > 0}
<span class="text-sm">{s}</span>
<span class="text-xs">{locale_s_marking(this_locale)}</span>
{#if show_seconds == true}
{#if Math.abs(diff) > 0}
<span class="text-sm">{s}</span>
<span class="text-xs">{locale_s_marking(this_locale)}</span>
{/if}
{/if}

<span class="text-sm">{')'}</span>
</span>
156 changes: 84 additions & 72 deletions src/components/NearbyDepartures.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,80 +87,92 @@
Refresh Departures
</button>

<div class="flex flex-col gap-y-5">
{#each departure_list as route_group }
<p style={`color: ${route_group.color}`}>
{#if route_group.short_name}

<span class="font-medium">{route_group.short_name}</span>
{/if}

{#if route_group.long_name}

<span>{route_group.long_name}</span>
{/if}

<div class="px-2 py-2 bg-slate-100 dark:bg-slate-700 rounded-lg shadow-md dark:shadow-slate-800">
<p style={`color: ${route_group.color}`}>
{#if route_group.short_name}

<span class="font-bold">{route_group.short_name}</span>
{/if}

{#if route_group.long_name}

<span class="font-medium">{route_group.long_name}</span>
{/if}


</p>

{#each Object.entries(route_group.directions) as [d_id, direction_group] }
<p>
<span class="px-0.5 mr-2 bg-slate-600"></span>
{direction_group.headsign}</p>

<p class='text-sm'>🚏 {stops_table[route_group.chateau_id][direction_group.trips[0].stop_id].name}</p>

</p>

{#each Object.entries(route_group.directions) as [d_id, direction_group] }
<p>
<span class="px-0.5 mr-2 bg-slate-600"></span>
{direction_group.headsign}</p>

<p class='text-sm'>🚏 {stops_table[route_group.chateau_id][direction_group.trips[0].stop_id].name}</p>

<div class="flex flex-row gap-x-1 overflow-x-auto catenary-scroll">
{#each direction_group.trips.filter((x) => x.departure_schedule > (Date.now() / 1000) - 900) as trip }
<div class="bg-white dark:bg-slate-800 hover:bg-blue-300 hover:dark:bg-blue-900 p-1 rounded-md min-w-24"
on:click={() => {
data_stack_store.update((stack) => {
stack.push(new StackInterface(
new SingleTrip(
route_group.chateau_id,
trip.trip_id,
route_group.route_id,
null,
trip.gtfs_schedule_start_day.replace(/-/g, ""),
null,
route_group.route_type
),
));

return stack;
}

<div class="flex flex-row gap-x-1 overflow-x-auto catenary-scroll">
{#each direction_group.trips.filter((x) => x.departure_schedule > (Date.now() / 1000) - 900) as trip }
<div class="bg-white dark:bg-slate-800 hover:bg-blue-300 hover:dark:bg-blue-900 p-1 rounded-md min-w-24"
on:click={() => {
data_stack_store.update((stack) => {
stack.push(new StackInterface(
new SingleTrip(
route_group.chateau_id,
trip.trip_id,
route_group.route_id,
null,
trip.gtfs_schedule_start_day.replace(/-/g, ""),
null,
route_group.route_type
),
));

return stack;
}


);
}}
>
{#if route_group.route_type == 2 && trip.trip_short_name}
<p class="font-medium text-sm md:text-sm">{trip.trip_short_name}</p>
{/if}

{#if trip.departure_schedule}
<TimeDiff
show_brackets={false}
show_seconds={false}
diff={(trip.departure_realtime || trip.departure_schedule) - current_time / 1000} />
{/if}

<p class="text-xs md:text-sm">


{
new Intl.DateTimeFormat('en-GB', {
hour: "numeric",
minute: "numeric",
timeZone: trip.tz,
}).format(new Date((trip.departure_realtime || trip.departure_schedule) * 1000))
}
</p>

{#if trip.cancelled}
<span class="text-red-500">{$_('cancelled')}</span>
{/if}

{#if trip.departure_realtime != null && trip.departure_schedule != null}

<DelayDiff
diff={trip.departure_schedule - trip.departure_realtime} />
{/if}

);
}}
>
{#if route_group.route_type == 2 && trip.trip_short_name}
<p class="font-medium text-sm md:text-sm">{trip.trip_short_name}</p>
{/if}

{#if trip.departure_schedule}
<TimeDiff diff={(trip.departure_realtime || trip.departure_schedule) - current_time / 1000} show_brackets={true} />
{/if}

<p class="text-xs md:text-sm">
{new Date(
(trip.departure_realtime || trip.departure_schedule) * 1000
).toLocaleTimeString('en-UK', {
timeZone: trip.tz
})}
</p>

{#if trip.cancelled}
<span class="text-red-500">{$_('cancelled')}</span>
{/if}

{#if trip.departure_realtime != null && trip.departure_schedule != null}

<DelayDiff diff={trip.departure_schedule - trip.departure_realtime} />
{/if}

</div>
{/each}
</div>
{/each}
</div>
{/each}
{/each}
{/each}
</div>
{/each}
</div>
</div>
92 changes: 92 additions & 0 deletions src/components/RouteHeading.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
<script lang="ts">
import { fixRouteName, fixRouteNameLong } from './agencyspecific';
import { lightenColour } from './lightenDarkColour';
import {
find_schedule_pdf,
find_schedule_pdf_initial,
has_schedule_pdf,
schedule_pdf_needs_hydration
} from './pdf_schedules';

export let color: string;
export let text_color: string;

export let short_name: string | null;
export let long_name: string | null;
export let url: string | null = null;

export let run_number: string | null = null;
export let icon: string | null = null;

export let route_id: string;
export let chateau_id: string;

export let text: string;

export let compact: boolean = false;
export let darkMode: boolean;

let pdf_url: string | undefined;

if (has_schedule_pdf(chateau_id)) {
pdf_url = find_schedule_pdf_initial(chateau_id, route_id);
}

if (schedule_pdf_needs_hydration(chateau_id)) {
find_schedule_pdf(chateau_id, route_id)
.then((answer) => (pdf_url = answer))
.catch((pdferr) => console.error(pdferr));
}
</script>

{#if !compact}
<h2 class="text-xl mt-2" style={`color: ${darkMode ? lightenColour(color) : color}`}>
{#if run_number}
<span
style={`background-color: ${color}; color: ${text_color};`}
class="font-bold text-md px-1 py-0.5 mr-1 rounded-md w-min">{run_number}</span
>
{/if}

{#if short_name}
<span class="font-bold">{fixRouteName(chateau_id, short_name, route_id)}</span>
{/if}

{#if long_name}
<span class={`${short_name ? 'font-normal ml-1' : 'font-bold'}`}
>{fixRouteNameLong(chateau_id, long_name, route_id)}</span
>
{/if}

{#if icon}
<span class="material-icons-outlined text-2xl align-middle">{icon}</span>
{/if}
</h2>

<h2 class="text-lg font-medium my-1">{text}</h2>

<div class="flex flex-row gap-x-2">
{#if pdf_url != null}
<a target="_blank" href={pdf_url}>
<div
class="px-2 py-0.5 my-1 border-seashore text-seashore flex flex-row align-middle justify-center rounded-xl border-2 hover:text-white hover:bg-seashore hover:transition-colors"
>
<span class="material-symbols-outlined font-medium text-2xl align-middle">
attachment
</span>
<span class="font-medium text-base md:text-lg pl-2">PDF</span>
</div>
</a>
{/if}
{#if url != null}
<a target="_blank" href={url}>
<div
class="px-2 py-0.5 my-1 border-seashore text-seashore flex flex-row align-middle justify-center rounded-xl border-2 hover:text-white hover:bg-seashore hover:transition-colors"
>
<span class="material-symbols-outlined font-medium text-2xl align-middle"> globe </span>
<span class="font-medium text-base md:text-lg pl-2">URL</span>
</div>
</a>
{/if}
</div>
{/if}
Loading
Loading