OwlBoard/route-maps
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add station modal logic and station data for part of route 0210

Browse Source
This commit is contained in:
Fred Boniface
2026-03-12 00:54:42 +00:00
parent 06861f4037
commit 0fc2c0177b
33 changed files with 2394 additions and 2045 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
src/lib/components/RouteRow.svelte
View File

@@ -2,25 +2,55 @@
import { components } from '$lib/mapRegistry';
import type { ElecType } from '$lib/railStyles';
import { IconArrowNarrowRight, IconInfoCircle } from '@tabler/icons-svelte';
import StationInfo from '$lib/components/StationInfo.svelte';
type featureType = "station" | "junction" | "crossovers" | "siteof" | "bridge" | "minorBridge" | "crossover" | "crossing" | "loop" | "loops" | "signallerChange" | "electrificationChange" | "default" | "tunnel";
export let feature: {name: string; type: featureType; goto?: string; entryPoint?: string; miles: number; chains: number; description?: string}; // Raw Object
export let activeElec: ElecType; // Active Electrification Type
export let reversed: boolean = false;
type featureType =
| 'station'
| 'junction'
| 'crossovers'
| 'siteof'
| 'bridge'
| 'minorBridge'
| 'crossover'
| 'crossing'
| 'loop'
| 'loops'
| 'signallerChange'
| 'electrificationChange'
| 'default'
| 'tunnel';
$: Icon = components[feature.type] || components.default;
let {
feature,
activeElec,
reversed = false,
onShowInfo
}: {
feature: {
name: string;
type: featureType;
goto?: string;
entryPoint?: string;
miles: number;
chains: number;
description?: string;
stationInfo?: boolean;
crs?: string;
};
activeElec: ElecType;
reversed?: boolean;
onShowInfo: (crs: string) => void;
} = $props();
let Icon = $derived(components[feature.type] || components.default);
// Linking Logic
$: isLinkable = !!(feature.goto && feature.entryPoint);
$: href = `/map/${feature.goto}#${feature.entryPoint}`;
$: stationInfo = (feature.type === "station" && feature.stationInfo && feature.crs);
let isLinkable = $derived(!!(feature?.goto && feature?.entryPoint));
let href = $derived(`/map/${feature.goto}#${feature.entryPoint}`);
let stationInfo = $derived(feature.type === 'station' && feature.stationInfo && feature.crs);
const slugify = (str?: string) =>
str?.toLocaleLowerCase().trim().replace(/\s+/g, '-') ?? 'unknown';
function stationInfo(crs) {
console.log(`Date requested for CRS: ${crs}`)
}
</script>
<div class="row-container" id={slugify(feature.name)}>
@@ -30,39 +60,42 @@
</div>
<div class="icon-col">
<svelte:component this={Icon} feature={feature as any} {activeElec} {reversed} />
<svelte:component this={Icon} {feature} {activeElec} {reversed} />
</div>
<svelte:element this={isLinkable ? 'a' : 'div'} {...(isLinkable ? { href } : {})} class="link-wrapper">
<div class="label-col">
{#if feature.name}
<div class="feature-name">{feature.name}</div>
{/if}
{#if feature.description}
<div class="feature-desc">{feature.description}</div>
{/if}
</div>
<svelte:element
this={isLinkable ? 'a' : 'div'}
{...isLinkable ? { href } : {}}
class="link-wrapper"
>
<div class="label-col">
{#if feature.name}
<div class="feature-name">{feature.name}</div>
{/if}
{#if feature.description}
<div class="feature-desc">{feature.description}</div>
{/if}
</div>
{#if isLinkable}
{#if isLinkable}
<div class="link-indicator">
<IconArrowNarrowRight />
</div>
{/if}
{#if stationInfo}
<div class="info-indicator" onclick={() => onShowInfo(feature.crs)}>
<IconInfoCircle />
</div>
{/if}
</svelte:element>
<!-- {#if stationInfo}
<div class="link-indicator" on:click={stationInfo(feature.crs)}>
<IconInfoCircle />
</div>
{/if} -->
</div>
<style>
a {
cursor: pointer;
text-decoration: none;
}
a {
cursor: pointer;
text-decoration: none;
}
.row-container {
display: grid;
grid-template-columns: 3.5rem 64px 1fr;
@@ -73,6 +106,7 @@ a {
margin: 0;
padding: 0;
overflow: hidden;
scroll-padding: 80px;
}
.mileage-col {
@@ -94,7 +128,6 @@ a {
font-size: 0.7rem;
}
.icon-col {
width: 64px;
height: 64px;
@@ -104,7 +137,6 @@ a {
overflow: visible;
}
.link-wrapper {
display: flex;
flex-direction: row;
@@ -136,6 +168,24 @@ a {
transform: rotate(-45deg);
}
.info-indicator {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.info-indicator::before {
content: '';
position: absolute;
width: 44px;
height: 44px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.label-col {
padding-left: 16px;
display: flex;