Begin migration to new Cards component

This commit is contained in:
Fred Boniface 2024-07-02 21:02:28 +01:00
parent e0227516d8
commit fddf9cbbaf
4 changed files with 79 additions and 6 deletions

View File

@ -61,13 +61,14 @@
.actions { .actions {
display: flex; display: flex;
position: absolute; position: absolute;
top: 5px;
right: 0; right: 0;
display: flex; display: flex;
gap: 1px gap: 0px
} }
.content { .content {
margin-top: 16px; margin-top: 5px;
} }
button { button {
@ -75,5 +76,10 @@
color: white; color: white;
background: none; background: none;
border: none; border: none;
transition: all 0.3s ease;
}
button:hover {
color: var(--island-header-color);
} }
</style> </style>

View File

@ -0,0 +1,68 @@
<script lang="ts">
import { getCurrentLocation } from "$lib/scripts/getLocation";
import toast from "svelte-french-toast";
import Card from "./Card.svelte";
import type { CardConfig } from "./Card.types";
import type { NearestStationResponse } from "@owlboard/ts-types";
import { uuid } from "$lib/stores/uuid";
import { location } from "$lib/stores/location";
let stations: NearestStationResponse[];
let config: CardConfig = {
title: "Near to Me",
showHelp: true,
showRefresh: true,
helpText: "Your location may not be accurate, particularly on desktop and laptop devices.",
onRefresh: refresh
}
function turnOnLocation() {
location.set(true)
getCurrentLocation();
toast.success("Done\nTo disable location, go to settings")
}
function refresh() {getNearestStations()}
async function getNearestStations() {
// Get location, then fetch nearest stations and push to `stations` variable
}
</script>
<Card {config}>
{#if !$uuid || $uuid === "null"}
<p><a href="/more/reg">Register to use this feature</a></p>
{:else}
{#if $location}
{#if !stations}
<p>Fetching locations...</p>
{:else}
{#each stations as station}
<a href="/ldb?station={station["3ALPHA"]}">{station.NLCDESC} - {station.miles}mi</a>
{/each}
{/if}
{:else}
<p><button on:click={turnOnLocation}>Turn on Location</button></p>
{/if}
{/if}
</Card>
<style>
a, button {
color: aliceblue;
text-decoration: none;
margin: auto;
padding: 5px 10px;
background-color: var(--island-button-color);
border: none;
border-radius: 20px;
box-shadow: var(--box-shadow);
transition: all 0.3s ease;
}
a:hover, button:hover {
background-color: rgb(45, 45, 45);
box-shadow: var(--box-shadow-dark);
}
</style>

View File

@ -46,6 +46,7 @@
margin-top: 7px; margin-top: 7px;
margin-left: 20px; margin-left: 20px;
font-size: 15pt; font-size: 15pt;
text-shadow: 0 3px 3px var(--box-shadow-color);
} }
.headerBlock { .headerBlock {

View File

@ -2,6 +2,7 @@
import Card from "$lib/cards/Card.svelte"; import Card from "$lib/cards/Card.svelte";
import type { LookupCardConfig } from "$lib/cards/Card.types"; import type { LookupCardConfig } from "$lib/cards/Card.types";
import LookupCard from "$lib/cards/LookupCard.svelte"; import LookupCard from "$lib/cards/LookupCard.svelte";
import NearToMeCard from "$lib/cards/NearToMeCard.svelte";
let CardConfig = { let CardConfig = {
title: "Near to Me", title: "Near to Me",
@ -34,9 +35,6 @@
} }
</script> </script>
<Card config={CardConfig}>
<p>content</p>
</Card>
<LookupCard config={LookupConfig} /> <LookupCard config={LookupConfig} />
<LookupCard config={TimetableConfig} /> <LookupCard config={TimetableConfig} />
<NearToMeCard />