Trial date selection in timetable search
This commit is contained in:
parent
29b2054b4c
commit
8b361bb7de
@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { onMount, onDestroy } from "svelte";
|
||||
import { onDestroy } from "svelte";
|
||||
export let text: string;
|
||||
|
||||
let isVisible: boolean = false;
|
||||
@ -44,15 +44,16 @@
|
||||
padding: 5px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 125%;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
right: 125%;
|
||||
transform: translateY(-50%);
|
||||
margin-left: -60px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
|
||||
.tooltip:hover .tooltiptext {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
opacity: 0.8;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,2 +1,2 @@
|
||||
export const version: string = "2024.11.2";
|
||||
export const version: string = "2024.11.3";
|
||||
export const versionTag: string = "";
|
||||
|
||||
@ -10,11 +10,12 @@
|
||||
import TrainIcons from "./trainIcons.svelte";
|
||||
|
||||
export let service: OB_TrainTT_service;
|
||||
export let date: Date;
|
||||
|
||||
let isExpanded = false;
|
||||
|
||||
async function getTrainByUID(tuid = "") {
|
||||
const url = `${getApiUrl()}/api/v2/timetable/train/now/byTrainUid/${tuid}`;
|
||||
const url = `${getApiUrl()}/api/v2/timetable/train/${date.toISOString().split('T')[0]}/byTrainUid/${tuid}`;
|
||||
const options = {
|
||||
method: "GET",
|
||||
headers: {
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
<h1>{$page.status}: {$page?.error?.message}</h1>
|
||||
|
||||
{#if $page.status === 404}
|
||||
<p>This is not the page you're looking for.</p>
|
||||
<p>There's no light at the end of this tunnel</p>
|
||||
<p>The page you are looking for doesn't exist, use the tabs below to find another page.</p>
|
||||
{:else if $page.status === 500}
|
||||
<p>
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
import Header from "$lib/navigation/header.svelte";
|
||||
import Nav from "$lib/navigation/nav.svelte";
|
||||
import {
|
||||
IconCode,
|
||||
IconHelp,
|
||||
IconInfoCircle,
|
||||
IconLocation,
|
||||
|
||||
@ -146,7 +146,10 @@
|
||||
<button id="reset" type="reset" on:click={reset}>Reset</button>
|
||||
{:else}
|
||||
<Card config={findByHeadcodeCard}>
|
||||
Find by Headcode from the homepage
|
||||
<span class="important">Find by Headcode from the homepage</span>
|
||||
<br>
|
||||
The tools below are more helpful if you've been diverted or are not starting your journey at your scheduled origin.
|
||||
<br><br>
|
||||
</Card>
|
||||
<Card config={findByStartEndCard}>
|
||||
<form on:submit={findByStartEnd}>
|
||||
@ -169,6 +172,10 @@
|
||||
<Nav />
|
||||
|
||||
<style>
|
||||
.important {
|
||||
font-weight: 900;
|
||||
color: whitesmoke;
|
||||
}
|
||||
p {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
|
||||
@ -1,39 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type { LookupCardConfig } from "$lib/cards/Card.types";
|
||||
import LookupCard from "$lib/cards/LookupCard.svelte";
|
||||
import NearToMeCard from "$lib/cards/NearToMeCard.svelte";
|
||||
import QuickLinkCard from "$lib/cards/QuickLinkCard.svelte";
|
||||
import Header from "$lib/navigation/header.svelte";
|
||||
import Nav from "$lib/navigation/nav.svelte";
|
||||
import TimeBar from "$lib/navigation/TimeBar.svelte";
|
||||
|
||||
let LookupConfig: LookupCardConfig = {
|
||||
title: "Live Arr/Dep Boards",
|
||||
helpText: "Enter CRS, TIPLOC or STANOX code to see live departures",
|
||||
placeholder: "Enter CRS/TIPLOC",
|
||||
maxLen: 7,
|
||||
formAction: "/ldb/",
|
||||
fieldName: "station",
|
||||
};
|
||||
|
||||
let TimetableConfig: LookupCardConfig = {
|
||||
title: "Timetable & PIS",
|
||||
helpText: "Enter a headcode to search the timetable and check PIS Codes",
|
||||
placeholder: "Enter headcode",
|
||||
maxLen: 4,
|
||||
formAction: "/train/",
|
||||
fieldName: "headcode",
|
||||
};
|
||||
|
||||
function onRefresh() {
|
||||
console.log("Refresh");
|
||||
}
|
||||
</script>
|
||||
|
||||
<Header title={"Test"} />
|
||||
<TimeBar updatedTime={new Date()} />
|
||||
<LookupCard config={LookupConfig} />
|
||||
<LookupCard config={TimetableConfig} />
|
||||
<NearToMeCard />
|
||||
<QuickLinkCard />
|
||||
<Nav />
|
||||
@ -1,6 +1,5 @@
|
||||
<script lang="ts">
|
||||
import Header from "$lib/navigation/header.svelte";
|
||||
import Loading from "$lib/navigation/loading.svelte";
|
||||
import Island from "$lib/islands/island.svelte";
|
||||
import Nav from "$lib/navigation/nav.svelte";
|
||||
import { uuid } from "$lib/stores/uuid";
|
||||
@ -10,14 +9,17 @@
|
||||
import { getApiUrl } from "$lib/scripts/upstream";
|
||||
import toast from "svelte-french-toast";
|
||||
import TimeBar from "$lib/navigation/TimeBar.svelte";
|
||||
import { IconArrowLeft, IconArrowRight, IconCheck } from "@tabler/icons-svelte";
|
||||
|
||||
let title = "Timetable Results";
|
||||
let id = "";
|
||||
let data = [];
|
||||
let isLoading = true;
|
||||
let error = false;
|
||||
let errMsg = "";
|
||||
|
||||
let dateInput: Date = new Date();
|
||||
$: formattedDate = dateInput.toISOString().split('T')[0];
|
||||
|
||||
$: {
|
||||
if (id) {
|
||||
title = id.toUpperCase();
|
||||
@ -30,26 +32,39 @@
|
||||
return new URLSearchParams(window.location.search).get("headcode");
|
||||
}
|
||||
|
||||
function incrementDate() {
|
||||
dateInput.setDate(dateInput.getDate() + 1);
|
||||
dateInput = new Date(dateInput);
|
||||
}
|
||||
|
||||
function decrementDate() {
|
||||
dateInput.setDate(dateInput.getDate() - 1);
|
||||
dateInput = new Date(dateInput);
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
isLoading = true;
|
||||
id = (await getHeadcode()) || "";
|
||||
const res = await fetchData(id);
|
||||
if (res) {
|
||||
data = res;
|
||||
if (!data.length) {
|
||||
error = true;
|
||||
errMsg = "No services found";
|
||||
}
|
||||
}
|
||||
isLoading = false;
|
||||
load();
|
||||
|
||||
toast("Registration soon required for timetable features.\n\nClick 'Register' in the menu.", {
|
||||
duration: 3000,
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
function load() {
|
||||
toast.promise(
|
||||
fetchData(id),
|
||||
{
|
||||
loading: 'Searching Timetable',
|
||||
success: 'Done',
|
||||
error: 'Error'
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
async function fetchData(id = "") {
|
||||
const date = "now";
|
||||
data = [];
|
||||
const searchType = "headcode";
|
||||
const options = {
|
||||
method: "GET",
|
||||
@ -57,44 +72,56 @@
|
||||
uuid: $uuid,
|
||||
},
|
||||
};
|
||||
const url = `${getApiUrl()}/api/v2/timetable/train/${date}/${searchType}/${id}`;
|
||||
const url = `${getApiUrl()}/api/v2/timetable/train/${formattedDate}/${searchType}/${id}`;
|
||||
try {
|
||||
const res = await fetch(url, options);
|
||||
if (res.status == 200) {
|
||||
return await res.json();
|
||||
let services = await res.json();
|
||||
if (!services.length) {
|
||||
error = true;
|
||||
errMsg = "No services found";
|
||||
return Promise.reject(new Error(errMsg));
|
||||
}
|
||||
data = services
|
||||
} else if (res.status === 401) {
|
||||
error = true;
|
||||
errMsg = "You must be logged into the staff version for this feature";
|
||||
return false;
|
||||
return Promise.reject(new Error(errMsg));
|
||||
} else {
|
||||
error = true;
|
||||
errMsg = "Unable to connect, check your connection and try again";
|
||||
return false;
|
||||
return Promise.reject(new Error(errMsg));
|
||||
}
|
||||
} catch (err) {
|
||||
error = true;
|
||||
errMsg = "Connection error, try again later";
|
||||
return Promise.reject(new Error(errMsg));
|
||||
}
|
||||
isLoading = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<Header {title} />
|
||||
<TimeBar updatedTime={undefined} />
|
||||
|
||||
<div id="dateSelector">
|
||||
<button on:click={decrementDate}><IconArrowLeft /></button>
|
||||
<input
|
||||
type="date"
|
||||
id="dateInput"
|
||||
bind:value={formattedDate}
|
||||
on:input={(e) => dateInput = new Date(e.target.value)}
|
||||
/>
|
||||
<button on:click={incrementDate}><IconArrowRight /></button>
|
||||
<button on:click={load}><IconCheck /></button>
|
||||
</div>
|
||||
{#if error}
|
||||
<Island>
|
||||
<p style="font-weight:600">{errMsg}</p>
|
||||
</Island>
|
||||
{/if}
|
||||
|
||||
{#if isLoading}
|
||||
<Loading />
|
||||
{/if}
|
||||
|
||||
{#each data as service}
|
||||
{#if service}
|
||||
<TrainDetail {service} />
|
||||
<TrainDetail {service} date={dateInput} />
|
||||
{/if}
|
||||
{/each}
|
||||
|
||||
@ -106,4 +133,18 @@
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#dateInput {
|
||||
height: 25px;
|
||||
transform: translateY(-7px);
|
||||
}
|
||||
#dateSelector {
|
||||
transform: translateY(3px);
|
||||
transform: translateX(20px);
|
||||
}
|
||||
button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user