Fred Boniface
40e926bf11
- Add preferences for WakeLock and AutoRefresh - Add WakeLock and AutoRefresh to Board - Attempt adding transitions to Board elements UI: - Add '3D' styling to preference toggles
67 lines
1.7 KiB
Svelte
67 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
|
|
import Button from '$lib/components/ui/form-elements/Button.svelte';
|
|
import Toggle from '$lib/components/ui/form-elements/Toggle.svelte';
|
|
import { quickLinks } from '$lib/quick-links.svelte';
|
|
import { prefs } from '$lib/preferences.svelte';
|
|
</script>
|
|
|
|
<section class="page-body">
|
|
<BaseCard header={'Display Settings'}>
|
|
<section class="card-content">
|
|
<Button onclick={() => quickLinks.reset()}>Reset QuickLinks</Button>
|
|
<div class="toggle-container">
|
|
<Toggle
|
|
label={'Show stations near to you'}
|
|
id={'toggle-nearby-stations'}
|
|
checked={prefs.current.NearToMe}
|
|
onchange={(checked) => prefs.toggleNearToMe(checked)}
|
|
/>
|
|
<Toggle
|
|
label={'Show passsing trains on boards'}
|
|
id={'toggle-passing-trains'}
|
|
checked={prefs.current.ShowPassingTrains}
|
|
onchange={(checked) => prefs.toggleShowPassingTrains(checked)}
|
|
/>
|
|
<Toggle
|
|
label={'Keep screen awake on live pages'}
|
|
id={'toggle-board-wake-lock'}
|
|
checked={prefs.current.BoardWakeLock}
|
|
onchange={(checked) => prefs.toggleBoardWakeLock(checked)}
|
|
/>
|
|
<Toggle
|
|
label={'Auto-refresh data'}
|
|
id={'toggle-auto-refresh'}
|
|
checked={prefs.current.AutoRefresh}
|
|
onchange={(checked) => prefs.toggleAutoRefresh(checked)}
|
|
/>
|
|
</div>
|
|
</section>
|
|
</BaseCard>
|
|
</section>
|
|
|
|
<style>
|
|
.page-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 1rem 0 1rem 0;
|
|
}
|
|
|
|
.card-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 1rem;
|
|
padding: 5px 0 5px 0;
|
|
}
|
|
|
|
.toggle-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
</style>
|