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

Complete map display page

Browse Source
This commit is contained in:
Fred Boniface
2026-02-05 20:00:28 +00:00
parent 2fa8a7872e
commit 221159433c
11 changed files with 338 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app.html
View File

@@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">

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

@@ -34,9 +34,11 @@
</div> </div>
<style> <style>
.row-container { .row-container {
display: grid; display: grid;
grid-template-columns: 80px 64px 1fr; /* Balanced columns: 1fr on both sides keeps the 64px icon in the dead center */
grid-template-columns: 3.5rem 64px 1fr;
width: 100%;
height: 64px; height: 64px;
align-items: center; align-items: center;
margin: 0; margin: 0;
@@ -50,7 +52,7 @@
padding-right: 12px; padding-right: 12px;
font-family: 'Courier New', Courier, monospace; font-family: 'Courier New', Courier, monospace;
font-size: 0.85rem; font-size: 0.85rem;
color: #54748b; color: #64748b; /* Adjusted slightly for contrast */
} }
.miles { .miles {
@@ -62,29 +64,70 @@
font-size: 0.7rem; font-size: 0.7rem;
} }
.icon-col { .icon-col {
width: 64px; width: 64px;
height: 64px; height: 64px;
overflow: visible; /* Ensure the icon itself is centered if the SVG is smaller than 64px */
display: flex;
justify-content: center;
align-items: center;
} }
.label-col { .label-col {
padding-left: 16px; padding-left: 16px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
}
.feature-name { /* FIX: Allow children to manage their own wrapping */
overflow: hidden;
/* min-width: 0 is critical for flex children to allow truncation */
min-width: 0;
}
.feature-name {
font-weight: 700; font-weight: 700;
color: #1e293b; color: #1e293b;
font-size: 1rem; font-size: 0.8rem;
text-transform: capitalize; text-transform: capitalize;
/* Allow the title to wrap naturally onto multiple lines */
white-space: normal;
line-height: 1.2;
margin-bottom: 2px;
}
.feature-desc {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
/* Firefox Fix: Ensure white-space is normal here too */
white-space: normal;
line-height: 1.2rem;
max-height: 2.4rem;
font-size: 0.75rem;
color: #64748b;
word-break: break-word;
}
/* Tablet and Desktop scaling */
@media (min-width: 480px) {
.feature-name {
font-size: 1rem; /* The larger title you requested */
margin-bottom: 4px;
} }
.feature-desc { .feature-desc {
font-size: 0.75rem; font-size: 0.85rem; /* Slightly larger desc to match */
color: #94a3b8; line-height: 1.3rem;
font-style: italic; max-height: 2.6rem;
} }
.label-col {
padding-left: 24px; /* More "breathing room" on big screens */
}
}
</style> </style>

6
src/lib/components/mapIcons/Bridge.svelte
View File

@@ -19,7 +19,7 @@
pipeline: { color: '#334155', stroke: '#1e293b', width: 4, text: '#334155'}, pipeline: { color: '#334155', stroke: '#1e293b', width: 4, text: '#334155'},
} }
$: s = bridgeStyles[feature.category] || styles.minorRoad; $: s = bridgeStyles[feature.category] || bridgeStyles.minorRoad;
$: isOver = feature.position === 'over'; $: isOver = feature.position === 'over';
$: topY = 32 - (s.width / 2); $: topY = 32 - (s.width / 2);
@@ -36,9 +36,9 @@
<path d={bodyPath} fill={s.color} /> <path d={bodyPath} fill={s.color} />
<path d={`M 0 ${topY} L 64 ${topY}`} stroke={s.stroke} stroke-width="2" /> <path d={`M 0 ${topY} L 64 ${topY}`} stroke={s.stroke} stroke-width="2" />
<path d={`M 0 ${bottomY} L 64 ${bottomY}`} stroke={s.stroke} stroke-width="2" /> <path d={`M 0 ${bottomY} L 64 ${bottomY}`} stroke={s.stroke} stroke-width="2" />
<BaseTrack elec={activeElec} height={64} /> <BaseTrack {activeElec} height={64} />
{:else} {:else}
<BaseTrack elec={activeElec} height={64} /> <BaseTrack {activeElec} height={64} />
<path d={bodyPath} fill="white" /> <path d={bodyPath} fill={s.color} /> <path d={bodyPath} fill="white" /> <path d={bodyPath} fill={s.color} />

2
src/lib/components/mapIcons/Crossover.svelte
View File

@@ -14,5 +14,5 @@
<line x1="16" y1="52" x2="48" y2="20" /> <line x1="16" y1="52" x2="48" y2="20" />
</g> </g>
<BaseTrack elec={activeElec} height={64} /> <BaseTrack {activeElec} height={64} />
</svg> </svg>

4
src/lib/components/mapIcons/Junction.svelte
View File

@@ -16,8 +16,8 @@
$: isRight = feature.diverges === 'right'; $: isRight = feature.diverges === 'right';
$: yStart = visualUp ? 64 : 0; $: yStart = visualUp ? 64 : 0;
$: yEnd = visualUp ? 0 : 64; $: yEnd = visualUp ? 8 : 56;
$: xEnd = isRight ? 64 : 0; $: xEnd = isRight ? 56 : 8;
$: branchColour = getElecColour(feature.elecBranch || activeElec); $: branchColour = getElecColour(feature.elecBranch || activeElec);
$: branchPath = `M 32 ${yStart} Q 32 32 ${xEnd} ${yEnd}`; $: branchPath = `M 32 ${yStart} Q 32 32 ${xEnd} ${yEnd}`;

11
src/lib/components/mapIcons/Loop.svelte
View File

@@ -3,7 +3,7 @@
import BaseTrack from '$lib/components/mapIcons/BaseTrack.svelte'; import BaseTrack from '$lib/components/mapIcons/BaseTrack.svelte';
export let feature: { export let feature: {
side: 'left' | 'right' | 'both'; position: 'left' | 'right' | 'both';
elecLoop?: string; elecLoop?: string;
}; };
@@ -12,17 +12,22 @@
$: loopColour = getElecColour(feature.elecLoop || activeElec); $: loopColour = getElecColour(feature.elecLoop || activeElec);
$: effectivePosition = (() => {
if (!reversed || feature.position === 'both') return feature.position;
return feature.position === 'left' ? 'right' : 'left';
})();
const leftPath = `M 32 0 Q 8 32 32 64`; const leftPath = `M 32 0 Q 8 32 32 64`;
const rightPath = `M 32 0 Q 56 32 32 64`; const rightPath = `M 32 0 Q 56 32 32 64`;
</script> </script>
<svg viewBox="0 0 64 64" width="64" height="64" class="loops"> <svg viewBox="0 0 64 64" width="64" height="64" class="loops">
<g fill="none" stroke={loopColour} stroke-width="4" stroke-linecap="round"> <g fill="none" stroke={loopColour} stroke-width="4" stroke-linecap="round">
{#if feature.side === 'left' || feature.side === 'both'} {#if effectivePosition === 'left' || feature.position === 'both'}
<path d={leftPath} /> <path d={leftPath} />
{/if} {/if}
{#if feature.side === 'right' || feature.side === 'both'} {#if effectivePosition === 'right' || feature.position === 'both'}
<path d={rightPath} /> <path d={rightPath} />
{/if} {/if}
</g> </g>

11
src/lib/components/mapIcons/SiteOf.svelte Normal file
View File

@@ -0,0 +1,11 @@
<script lang="ts">
import BaseTrack from '$lib/components/mapIcons/BaseTrack.svelte';
export let activeElec: string;
export let feature: any;
export let reversed: boolean;
</script>
<svg viewBox="0 0 64 64" width="64" height="64" class="loops">
<BaseTrack {activeElec} height={64} />
</svg>

7
src/lib/mapRegistry.ts
View File

@@ -7,17 +7,20 @@ import Crossing from '$lib/components/mapIcons/Crossing.svelte';
import Loop from '$lib/components/mapIcons/Loop.svelte'; import Loop from '$lib/components/mapIcons/Loop.svelte';
import SignallerChange from '$lib/components/mapIcons/SignallerChange.svelte'; import SignallerChange from '$lib/components/mapIcons/SignallerChange.svelte';
import ElectrificationChange from '$lib/components/mapIcons/ElectrificationChange.svelte'; import ElectrificationChange from '$lib/components/mapIcons/ElectrificationChange.svelte';
import SiteOf from '$lib/components/mapIcons/SiteOf.svelte';
export const components = { export const components = {
station: Station, station: Station,
junction: Junction, junction: Junction,
crossovers: BaseTrack, crossovers: Crossover,
siteof: BaseTrack, siteof: SiteOf,
bridge: Bridge, bridge: Bridge,
crossover: Crossover, crossover: Crossover,
crossing: Crossing, crossing: Crossing,
loop: Loop, loop: Loop,
loops: Loop,
signallerChange: SignallerChange, signallerChange: SignallerChange,
electrificationChange: ElectrificationChange, electrificationChange: ElectrificationChange,
default: BaseTrack,
} }

2
src/routes/+page.svelte
View File

@@ -36,12 +36,14 @@
category: 'pipeline', category: 'pipeline',
name: 'Waterway Bridge', name: 'Waterway Bridge',
roadName: "TfL (LU)", roadName: "TfL (LU)",
elec: '25kvac',
miles: 1, miles: 1,
chains: 41, chains: 41,
}, },
{ {
type: 'crossover', type: 'crossover',
name: 'Dolphin junction', name: 'Dolphin junction',
elec: '25kvac',
miles: 1, miles: 1,
chains: 42, chains: 42,
}, },

235
src/routes/map/[slug]/+page.svelte
View File

@@ -1,11 +1,238 @@
<script lang="ts"> <script lang="ts">
import RouteRow from "$lib/components/RouteRow.svelte"; import RouteRow from '$lib/components/RouteRow.svelte';
import { slide } from 'svelte/transition';
// data.route contains: routeName, routeId, elecStart, elecEnd, routeDetail[]
export let data; export let data;
let reversed = false; let reversed = false; // Reverses Array, and passes value down to children
$: proceccedFeatures = (() => { let visibleTypes = {
const list = reversed ? [...data.route].reverse() : [...data.route]; station: true,
bridge: true,
crossovers: true,
loop: true,
signallerChange: true,
electrificationChange: true,
siteof: true,
junction: true,
}
let showFilters = false;
// Toggle feature types
const toggleFilter = (type: string) => {
visibleTypes[type] = !visibleTypes[type];
visibleTypes = visibleTypes;
};
// Helper to prettify 'types'
const formatLabel = (str: string) => str.replace(/([A-Z])/g, ' $1').replace(/^./, (s) => s.toUpperCase());
$: processedFeatures = (() => {
const list = reversed
? [...data.route.routeDetail].reverse()
: [...data.route.routeDetail];
// Seed currentElec from the YAML header boundary
let currentElec = reversed
? data.route.elecEnd.elec
: data.route.elecStart.elec;
return list.map(f => {
if (f.type === 'electrificationChange') {
// Transition state: this tile and everything after it
// adopts the new electrification.
currentElec = reversed ? f.from.elec : f.to.elec;
}
return {
...f,
activeElec: currentElec
};
});
})();
$: filteredFeatures = processedFeatures.filter(f => {
return visibleTypes[f.type] ?? true;
}) })
</script> </script>
<div class="map-layout">
<header class="top-nav">
<h1>{data.route.routeName}</h1>
<span class="route-code">{data.route.routeId}</span>
<div class="quick-actions">
<button class="icon-btn" on:click={() => reversed = !reversed}>
⇄ {reversed ? 'UP' : 'DN'}
</button>
<button class="icon-btn" on:click={() => showFilters = !showFilters}>
Settings
</button>
</div>
</header>
{#if showFilters}
<div class="backdrop" on:click={() => showFilters = false}></div>
<div class="filter-drawer" transition:slide>
<div class="drawer-header">
<h3>Visibility Filters</h3>
<button class="close-icon" on:click={() => showFilters = false} aria-label="Close">
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5">
<path d="M18 6L6 18M6 6l12 12" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</div>
<div class="drawer-content">
<div class="filter-flex">
{#each Object.keys(visibleTypes) as type}
<button
class="filter-chip"
class:active={visibleTypes[type]}
on:click={() => toggleFilter(type)}
>
{formatLabel(type)}
</button>
{/each}
</div>
</div>
</div>
{/if}
<main class="map-spine">
<div class="container">
{#each filteredFeatures as f, i (`${f.type}-${f.miles}-${f.chains}-${i}`)}
<RouteRow feature={f} activeElec={f.activeElec} {reversed} />
{/each}
</div>
</main>
</div>
<style>
.map-layout {
display: flex;
flex-direction: column;
background: #ffffff;
min-height: 100vh;
}
.top-nav {
position: sticky;
top: 0;
z-index: 100;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
border-bottom: 1px solid #e2e8f0;
padding: 0.75rem 1rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
h1 {
flex: 1;
min-width: 0;
margin: 0;
font-size: 1.1rem;
font-weight: 800;
line-height: 1.2;
color: #0f172a;
letter-spacing: -0.02em;
white-space: normal;
overflow-wrap: break-word;
}
@media (min-width: 768px) {
.top-nav {
padding: 1rem 2rem;
}
h1 {
font-size: 1.5rem;
letter-spacing: -0.03em;
}
}
.container {
width: 100%;
max-width: 500px;
margin: 0 auto;
padding-top: 1rem;
}
.backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 150;
}
.filter-drawer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: white;
z-index: 200;
border-radius: 20px 20px 0 0;
box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.15);
/* Ensure it handles iOS home bar spacing */
padding-bottom: env(safe-area-inset-bottom, 1rem);
}
.drawer-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.25rem 1.5rem 0.75rem;
border-bottom: 1px solid #f1f5f9;
}
.drawer-header h3 {
margin: 0;
font-size: 1rem;
color: #1e293b;
}
.close-icon {
background: #f1f5f9;
border: none;
border-radius: 50%;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #64748b;
}
.drawer-content {
padding: 1.25rem 1.5rem;
}
.filter-flex {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.filter-chip {
padding: 0.5rem 1rem;
border-radius: 999px;
border: 1px solid #e2e8f0;
background: #f8fafc;
font-size: 0.875rem;
cursor: pointer;
transition: all 0.2s;
}
.filter-chip.active {
background: #1e293b;
color: white;
border-color: #1e293b;
}
</style>

14
static/mapFiles/yaml/0001.yaml
View File

@@ -12,13 +12,13 @@ elecEnd:
routeDetail: routeDetail:
- type: station - type: station
name: Paddington name: Paddington
isTerminus: true terminus: true
miles: 0 miles: 0
chains: 5 chains: 5
- type: bridge - type: bridge
name: Westbourne name: Westbourne
description: Westbourne Avenue? description: Westbourne Avenue
position: over position: over
category: aroad category: aroad
roadName: A412 roadName: A412
@@ -195,6 +195,8 @@ routeDetail:
- type: signallerChange - type: signallerChange
from: TVSC Paddington WS from: TVSC Paddington WS
to: TVSC Acton WS to: TVSC Acton WS
miles: 300
chains: 3000
- type: junction - type: junction
name: Acton East Junction name: Acton East Junction
@@ -333,6 +335,8 @@ routeDetail:
- type: signallerChange - type: signallerChange
from: TVSC Acton WS from: TVSC Acton WS
to: TVSC Hayes WS to: TVSC Hayes WS
miles: 300
chains: 4000
- type: bridge - type: bridge
name: Wharncliffe Viaduct name: Wharncliffe Viaduct
@@ -550,6 +554,8 @@ routeDetail:
- type: signallerChange - type: signallerChange
from: TVSC Hayes WS from: TVSC Hayes WS
to: TVSC Slough WS to: TVSC Slough WS
miles: 300
chains: 5000
- type: bridge - type: bridge
name: Market Lane name: Market Lane
@@ -877,6 +883,8 @@ routeDetail:
- type: signallerChange - type: signallerChange
from: TVSC Slough WS from: TVSC Slough WS
to: TVSC Twyford WS to: TVSC Twyford WS
miles: 300
chains: 6000
- type: bridge - type: bridge
name: Pipeline name: Pipeline
@@ -1073,6 +1081,8 @@ routeDetail:
- type: signallerChange - type: signallerChange
from: TVSC Twyford WS from: TVSC Twyford WS
to: TVSC Reading WS to: TVSC Reading WS
miles: 300
chains: 7000
- type: crossovers - type: crossovers
name: Kennet Bridge Junction name: Kennet Bridge Junction