Bugfix:
- Update to @tabler/icons-svelte-runes for a more 'Svente 5' experience. - Adjust error handling in load functions, plain error thrown for handling in the error handler. - Fix the warning regarding a click handler attached to an <img> on the About page - Re-organise component directory - Remove unused font declarations from global.css Features: - Add service-worker caching of FilterData API response to allow for filtering to work fully offline -
This commit is contained in:
95
src/lib/components/ui/form-elements/Button.svelte
Normal file
95
src/lib/components/ui/form-elements/Button.svelte
Normal file
@@ -0,0 +1,95 @@
|
||||
<script lang="ts">
|
||||
import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
|
||||
type ButtonColor = 'brand' | 'accent' | 'bg';
|
||||
|
||||
interface Props {
|
||||
children: import('svelte').Snippet;
|
||||
href?: string;
|
||||
color?: ButtonColor;
|
||||
onclick?: (e: MouseEvent) => void;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
let { children, href, color = 'bg', onclick, ...rest }: Props = $props();
|
||||
|
||||
const isLink = $derived(!!href);
|
||||
const isExternal = $derived(href?.startsWith('http'));
|
||||
</script>
|
||||
|
||||
{#if isLink}
|
||||
<a
|
||||
{href}
|
||||
class="hitbox-wrapper"
|
||||
target={isExternal ? '_blank' : undefined}
|
||||
rel={isExternal ? 'noopener noreferrer' : undefined}
|
||||
{...rest}
|
||||
><span class="btn {color}">
|
||||
{@render children?.()}
|
||||
</span>
|
||||
</a>
|
||||
{:else}
|
||||
<button class="hitbox-wrapper" {onclick} {...rest}>
|
||||
<span class="btn {color}">{@render children?.()}</span>
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.hitbox-wrapper {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 48px;
|
||||
min-width: 48px;
|
||||
appearance: none;
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0 4px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: fit-content;
|
||||
flex-shrink: 0;
|
||||
padding: 0 1.2rem;
|
||||
min-width: 40px;
|
||||
height: 36px;
|
||||
border-radius: 20px;
|
||||
border: none;
|
||||
box-shadow: var(--shadow-small);
|
||||
font-family: 'URW Gothic', sans-serif;
|
||||
font-size: 0.93rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.05ch;
|
||||
transition:
|
||||
all 0.1s ease,
|
||||
box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.accent {
|
||||
background-color: var(--color-accent);
|
||||
color: var(--color-title);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.brand {
|
||||
background-color: var(--color-brand);
|
||||
color: rgb(30, 30, 30);
|
||||
}
|
||||
|
||||
.bg {
|
||||
background-color: var(--color-bg-light);
|
||||
color: var(--color-title);
|
||||
}
|
||||
|
||||
.hitbox-wrapper:hover .btn {
|
||||
filter: brightness(1.5);
|
||||
}
|
||||
|
||||
.hitbox-wrapper:active .btn {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
</style>
|
||||
220
src/lib/components/ui/form-elements/LocationSearchBox.svelte
Normal file
220
src/lib/components/ui/form-elements/LocationSearchBox.svelte
Normal file
@@ -0,0 +1,220 @@
|
||||
<script lang="ts">
|
||||
import Textbox from '$lib/components/ui/form-elements/Textbox.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import { fade } from 'svelte/transition';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
import { LOCATIONS } from '$lib/locations-object.svelte';
|
||||
import type { ApiLocationFilter } from '@owlboard/api-schema-types';
|
||||
|
||||
let { value = $bindable() } = $props();
|
||||
|
||||
let showResults = $state(false);
|
||||
let selectedIndex = $state(-1);
|
||||
|
||||
const MAX_RESULTS = 5;
|
||||
|
||||
function tokenize(query: string) {
|
||||
return query.toLowerCase().trim().split(/\s+/).filter(Boolean);
|
||||
}
|
||||
|
||||
let results = $derived.by(() => {
|
||||
if (value.length < 3) return [];
|
||||
|
||||
const tokens = tokenize(value);
|
||||
const lowerQuery = value.toLowerCase().trim();
|
||||
|
||||
return LOCATIONS.data
|
||||
.filter((r) => tokens.every((t) => r.s.includes(t)))
|
||||
.sort((a, b) => {
|
||||
// Priority One - Exact CRS Match
|
||||
const aExactCrs = a.c?.toLowerCase() === lowerQuery;
|
||||
const bExactCrs = b.c?.toLowerCase() === lowerQuery;
|
||||
if (aExactCrs && !bExactCrs) return -1;
|
||||
if (!aExactCrs && bExactCrs) return 1;
|
||||
|
||||
// Priority Two - Exact Name Match
|
||||
const aNameLow = a.n.toLowerCase();
|
||||
const bNameLow = b.n.toLowerCase();
|
||||
const aExactName = aNameLow === lowerQuery;
|
||||
const bExactName = bNameLow === lowerQuery;
|
||||
if (aExactName !== bExactName) return aExactName ? -1 : 1;
|
||||
|
||||
// Priority Three - Name starts with Query
|
||||
const aStarts = aNameLow.startsWith(lowerQuery);
|
||||
const bStarts = bNameLow.startsWith(lowerQuery);
|
||||
if (aStarts !== bStarts) return aStarts ? -1 : 1;
|
||||
|
||||
// Priority Four - 'Stations' with CRS
|
||||
if (!!a.c && !b.c) return -1;
|
||||
if (!a.c && !!b.c) return 1;
|
||||
|
||||
// Alphabetical Sort
|
||||
return a.n.localeCompare(b.n);
|
||||
})
|
||||
.slice(0, MAX_RESULTS);
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
if (results) selectedIndex = -1;
|
||||
});
|
||||
|
||||
// Hide results when click outside of container
|
||||
$effect(() => {
|
||||
if (showResults) {
|
||||
const onClick = (e: MouseEvent) => {
|
||||
const target = e.target as HTMLElement;
|
||||
if (!target.closest('.location-search')) {
|
||||
showResults = false;
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('click', onClick);
|
||||
return () => document.removeEventListener('click', onClick);
|
||||
}
|
||||
});
|
||||
|
||||
function choose(loc: ApiLocationFilter.LocationFilterObject) {
|
||||
showResults = false;
|
||||
selectedIndex = -1;
|
||||
value = '';
|
||||
console.log('Selected Location: ', JSON.stringify(loc));
|
||||
const queryString = loc.c || loc.t;
|
||||
goto(`/board?loc=${queryString.toLowerCase()}`);
|
||||
}
|
||||
|
||||
function handleKey(e: KeyboardEvent) {
|
||||
if (!results.length) return;
|
||||
|
||||
if (e.key === 'ArrowDown') {
|
||||
e.preventDefault();
|
||||
selectedIndex = Math.min(selectedIndex + 1, results.length - 1);
|
||||
}
|
||||
|
||||
if (e.key === 'ArrowUp') {
|
||||
e.preventDefault();
|
||||
selectedIndex = Math.max(selectedIndex - 1, 0);
|
||||
}
|
||||
|
||||
if (e.key === 'Enter' && selectedIndex >= 0) {
|
||||
choose(results[selectedIndex]);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="location-search">
|
||||
<Textbox
|
||||
bind:value
|
||||
placeholder="Enter Location"
|
||||
oninput={() => (showResults = true)}
|
||||
onkeydown={handleKey}
|
||||
capital
|
||||
/>
|
||||
|
||||
{#if showResults && results.length}
|
||||
<ul
|
||||
id="location-results"
|
||||
popover={showResults && results.length ? 'manual' : null}
|
||||
role="listbox"
|
||||
class="suggestions"
|
||||
transition:fade={{ duration: 200 }}
|
||||
>
|
||||
{#each results as loc, i}
|
||||
<li class="result-item" class:selected={i === selectedIndex} onclick={() => choose(loc)}>
|
||||
<div class="crs-badge-container">
|
||||
{#if loc.c}
|
||||
<span class="crs-badge">{loc.c}</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="details">
|
||||
<span class="name">{loc.n || loc.t}</span>
|
||||
<span class="tiploc">{loc.t}</span>
|
||||
</div>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.location-search {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.suggestions[popover] {
|
||||
position: absolute;
|
||||
inset: unset;
|
||||
margin: 0;
|
||||
margin-top: 3px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
max-height: 350px;
|
||||
top: 100%;
|
||||
background-color: var(--color-title);
|
||||
color: var(--color-bg-dark);
|
||||
box-shadow: var(--shadow-std);
|
||||
display: block;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.suggestions:not([popover]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.result-item {
|
||||
font-family: 'URW Gothic', sans-serif;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.5rem 1rem;
|
||||
cursor: pointer;
|
||||
min-height: 48px;
|
||||
transition: all 0.15s;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.result-item.selected,
|
||||
.result-item:hover {
|
||||
background-color: var(--color-accent);
|
||||
color: var(--color-title);
|
||||
}
|
||||
|
||||
.crs-badge {
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
background: var(--color-accent);
|
||||
color: var(--color-title);
|
||||
padding: 3px 6px;
|
||||
border-radius: 10px;
|
||||
transition: all 0.1s;
|
||||
}
|
||||
|
||||
.crs-badge.empty {
|
||||
filter: opacity(0);
|
||||
}
|
||||
|
||||
.result-item:hover .crs-badge {
|
||||
filter: brightness(1.3);
|
||||
}
|
||||
|
||||
.details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
text-align: right;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.tiploc {
|
||||
text-align: right;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
</style>
|
||||
171
src/lib/components/ui/form-elements/Textbox.svelte
Normal file
171
src/lib/components/ui/form-elements/Textbox.svelte
Normal file
@@ -0,0 +1,171 @@
|
||||
<script lang="ts">
|
||||
import { fade } from 'svelte/transition';
|
||||
import type { HTMLInputAttributes } from 'svelte/elements';
|
||||
|
||||
import { IconChevronRightFilled } from '@tabler/icons-svelte-runes';
|
||||
|
||||
interface Props extends HTMLInputAttributes {
|
||||
value?: string;
|
||||
label?: string;
|
||||
placeholder?: string;
|
||||
type?: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url';
|
||||
error?: string;
|
||||
uppercase?: boolean;
|
||||
onsubmit?: (val: string) => void | Promise<void>;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
let {
|
||||
value = $bindable(''),
|
||||
label,
|
||||
placeholder = '',
|
||||
type = 'text',
|
||||
error = '',
|
||||
uppercase = false,
|
||||
onsubmit,
|
||||
...rest
|
||||
}: Props = $props();
|
||||
|
||||
let isFocussed = $state(false);
|
||||
|
||||
const handleSubmit = (e: Event) => {
|
||||
e.preventDefault();
|
||||
if (onsubmit && value) {
|
||||
onsubmit(value);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="input-wrapper" class:focussed={isFocussed} class:has-error={!!error}>
|
||||
{#if label}
|
||||
<label for="adaptive-input">{label}</label>
|
||||
{/if}
|
||||
|
||||
<form onsubmit={handleSubmit} class="input-container">
|
||||
<input
|
||||
id="adaptive-input"
|
||||
class:all-caps={uppercase}
|
||||
{type}
|
||||
{placeholder}
|
||||
bind:value
|
||||
onfocus={() => (isFocussed = true)}
|
||||
onblur={() => (isFocussed = false)}
|
||||
{...rest}
|
||||
/>
|
||||
|
||||
{#if onsubmit}
|
||||
<button
|
||||
type="submit"
|
||||
class="submit-icon"
|
||||
transition:fade
|
||||
disabled={!value}
|
||||
aria-label="Submit"
|
||||
>
|
||||
<IconChevronRightFilled />
|
||||
</button>
|
||||
{/if}
|
||||
</form>
|
||||
|
||||
{#if error}
|
||||
<span class="error-message" transition:fade>{error}</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.input-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
width: 100%;
|
||||
font-family: 'URW Gothic', sans-serif;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
background-color: var(--color-title);
|
||||
border-radius: 5000px;
|
||||
transition: all 0.2s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 400;
|
||||
color: var(--color-title);
|
||||
}
|
||||
|
||||
input[type='number']::-webkit-outer-spin-button,
|
||||
input[type='number']::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input[type='number'] {
|
||||
-moz-appearance: textfield;
|
||||
appearance: textfield;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
min-height: 40px;
|
||||
height: 100%;
|
||||
line-height: normal;
|
||||
padding: 0 48px;
|
||||
border: none;
|
||||
color: var(--color-bg-dark);
|
||||
font-size: 1.2rem;
|
||||
transition: all 0.2s ease-in-out;
|
||||
outline: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.submit-icon {
|
||||
position: absolute;
|
||||
background: transparent;
|
||||
right: 0;
|
||||
border: none;
|
||||
color: var(--color-bg-dark);
|
||||
cursor: pointer;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0.75;
|
||||
transition:
|
||||
opacity 0.2s,
|
||||
transform 0.2s;
|
||||
}
|
||||
|
||||
.submit-icon:hover:not(:disabled) {
|
||||
opacity: 1;
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
.submit-icon:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.all-caps {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.focussed input {
|
||||
border-color: var(--color-bg-light);
|
||||
}
|
||||
|
||||
.has-error input {
|
||||
border-color: #ff4d4d;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: #ff4d4d;
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user