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

94 lines
2.1 KiB
Svelte

<Nav {active} />
<main>
<svelte:component this={Route} {params} />
</main>
<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);
let w = {
"period": "2020#01",
"workingDays": 20,
"totalHours": "99:00:00",
"overtime": "10:22:00"
};
let weekly = {
"title" : "Wochenansicht",
"records" : [w, w]
};
let m = {
"period": "2020-01",
"workingDays": 20,
"totalHours": "99:00:00",
"overtime": "10:22:00"
};
let monthly = {
"title" : "Monatsansicht",
"records" : [m, m]
};
let y = {
"period": "2020",
"workingDays": 20,
"totalHours": "99:00:00",
"overtime": "10:22:00"
};
let yearly = {
"title" : "Jahresansicht",
"records" : [y, y]
};
let r = {
"workingDay": "2020-01-15",
"workingTime": "09:00:00"
};
let records = {
"title" : "Einträge",
"records" : [r, r]
};
const router = Navaid('/')
.on('/', () => run(import('../routes/Home.svelte'), weekly))
.on('/views/weekly', () => run(import('../routes/Views.svelte'), weekly))
.on('/views/monthly', () => run(import('../routes/Views.svelte'), monthly))
.on('/views/yearly', () => run(import('../routes/Views.svelte'), yearly))
.on('/working-hours', () => run(import('../routes/WorkingHours.svelte'), records))
.listen();
onDestroy(router.unlisten);
</script>