Files
PHP-App-Timekeeping/ui/src/components/App.svelte
T

57 lines
1.3 KiB
Svelte

<header>
Arbeitszeiten
</header>
<Nav {active} />
<main>
<svelte:component this={Route} {params} />
</main>
<footer><p>© Torsten Lücke 2021</p></footer>
<script>
import Navaid from 'navaid';
import { onDestroy } from 'svelte';
import Nav from './Nav.svelte';
let Route, params={}, active;
let uri = location.pathname;
$: active = uri.split('/').pop() || 'home';
function run(thunk, obj) {
const target = uri;
thunk.then(m => {
if (target !== uri) return;
params = obj || {};
if (m.preload) {
m.preload({ params }).then(() => {
if (target !== uri) return;
Route = m.default;
window.scrollTo(0, 0);
});
} else {
Route = m.default;
window.scrollTo(0, 0);
}
});
}
function track(obj) {
uri = obj.state || obj.uri || location.pathname;
}
addEventListener('replacestate', track);
addEventListener('pushstate', track);
addEventListener('popstate', track);
const router = Navaid('/')
.on('/', () => run(import('../routes/Home.svelte')))
.on('/views/weekly', () => run(import('../routes/WeeklyViews.svelte')))
.on('/views/monthly', () => run(import('../routes/MonthlyViews.svelte')))
.on('/views/yearly', () => run(import('../routes/YearlyViews.svelte')))
.on('/working-hours', () => run(import('../routes/WorkingHours.svelte')))
.listen();
onDestroy(router.unlisten);
</script>