Begin migration to new Cards component
This commit is contained in:
parent
e0227516d8
commit
fddf9cbbaf
@ -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>
|
||||||
|
68
src/lib/cards/NearToMeCard.svelte
Normal file
68
src/lib/cards/NearToMeCard.svelte
Normal 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>
|
@ -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 {
|
||||||
|
@ -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 />
|
Loading…
Reference in New Issue
Block a user