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

Add PIS Data formatting to TrainService expander

Browse Source
This commit is contained in:
Fred Boniface
2026-05-05 19:24:31 +01:00
parent 3b91fad590
commit 05a04ec922
3 changed files with 85 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/lib/components/ui/TrainService.svelte
View File

@@ -93,7 +93,7 @@
};
</script>
<div class="train-service" class:isExpanded={isExpanded}>
<div class="train-service" class:isExpanded>
<button class="summary" onclick={toggleExpand} type="button" aria-expanded={isExpanded}>
{#if loadingDetails}
<div class="loading-state"><div class="loading-spinner"></div></div>
@@ -147,7 +147,15 @@
{/if}
{#if details.pis}
<div class="pis-detail">
{details.pis.code}
<span class="pis-code">PIS: {details.Pis.code}</span>
{#if details.Pis.skip?.skip > 0}
<span class="pis-skip">
(skip {details.Pis.skip.position === 'head' ? 'first' : 'last'}
{details.Pis.skip.skip}
{details.Pis.skip.skip === 1 ? 'stop' : 'stops'}
)
</span>
{/if}
</div>
{/if}
</div>
@@ -173,8 +181,7 @@
</tr>
</thead>
{#each details.locations as loc}
<tbody class="location-group">
<tbody class="location-group">
<tr class:pass-loc={loc.r === 'PASS'} class:can-loc={loc.can}>
<td class="tpl-cell" class:tpl-stop={loc.r != 'PASS'}>
{loc.t}
@@ -202,18 +209,17 @@
{/if}
</tr>
{#if loc.act && getRelevantActivities(loc.act).length > 0}
<tr class="activity-row">
<td colspan="7">
<div class="activity-container">
{#each getRelevantActivities(loc.act) as note}
<span class="activity-tag">{note}</span>
{/each}
</div>
</td>
</tr>
<tr class="activity-row">
<td colspan="7">
<div class="activity-container">
{#each getRelevantActivities(loc.act) as note}
<span class="activity-tag">{note}</span>
{/each}
</div>
</td>
</tr>
{/if}
</tbody>{/each}
</tbody>{/each}
</table>
</div>
</div>
@@ -318,6 +324,29 @@
color: red;
}
/*
PIS Data
*/
.pis-detail {
display: flex;
align-items: center;
flex-direction: column;
gap: 0.2rem;
padding: 8px 0;
width: 100%;
}
.pis-code {
font-weight: 600;
font-size: 1.1rem;
letter-spacing: 0.05em;
}
.pis-skip {
font-size: 0.85rem;
opacity: 0.75;
font-style: oblique;
}
/*
Box Extention
*/
@@ -416,9 +445,9 @@
.activity-tag {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.05);
padding: 2px 6px;
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.05);
padding: 2px 6px;
border-radius: 4px;
}
.tpl-cell {