stufflog2/svelte-ui/src/App.svelte

<script lang="ts">
	import { Router, Link, Route } from "svelte-routing";
	import { onMount } from "svelte";
	
	import authStore from "./stores/auth";
	import Boi from "./components/Boi.svelte";
	import { signOut } from "./clients/amplify";

	import FrontPage from "./pages/FrontPage.svelte";
	import ProjectPage from "./pages/ProjectPage.svelte";
	import LogsPage from "./pages/LogsPage.svelte";
	import GroupPage from "./pages/GroupPage.svelte";
	import GoalPage from "./pages/GoalPage.svelte";
	import QlPage from "./pages/QLPage.svelte";

	import GroupForm from "./forms/GroupForm.svelte";
	import GoalForm from "./forms/GoalForm.svelte";
	import LogForm from "./forms/LogForm.svelte";
	import ProjectForm from "./forms/ProjectForm.svelte";
	import ProjectGroupForm from "./forms/ProjectGroupForm.svelte";
	import ItemForm from "./forms/ItemForm.svelte";
	import TaskForm from "./forms/TaskForm.svelte";
	import TaskLinkForm from "./forms/TaskLinkForm.svelte";
	import LoginForm from "./forms/LoginForm.svelte";

	import ModalRoute from "./components/ModalRoute.svelte";
	import FocusHandler from "./components/FocusHandler.svelte";
	import Menu from "./components/Menu.svelte";
import markStale from "./stores/markStale";

	async function logout() {
		await signOut();
		await authStore.check();
		markStale("*");
	}

	onMount(() => {
		authStore.check()
	});
</script>

{#if $authStore.checked}
	{#if $authStore.loggedIn}
		<FocusHandler />
		<Router>
			<Menu />
			<main>
				<Route path="/" component={FrontPage} />
				<Route path="/goals/" component={GoalPage} />
				<Route path="/projects/" component={ProjectPage} />
				<Route path="/questlog/:gid/:pid" let:params >
					<QlPage groupId={params.gid} projectId={params.pid} />
				</Route>
				<Route path="/questlog/:gid" let:params >
					<QlPage groupId={params.gid} />
				</Route>
				<Route path="/questlog/" component={QlPage} />
				<Route path="/logs/" component={LogsPage} />
				<Route path="/items/" component={GroupPage} />

				<footer>
					<Boi compact tiny on:click={logout}>Sign out</Boi>
				</footer>
			</main>
		</Router>
		<ModalRoute name="log.add"> <LogForm creation /></ModalRoute>
		<ModalRoute name="log.edit"> <LogForm /></ModalRoute>
		<ModalRoute name="log.delete"> <LogForm deletion /></ModalRoute>
		<ModalRoute name="task.add"> <TaskForm creation /></ModalRoute>
		<ModalRoute name="task.edit"> <TaskForm /></ModalRoute>
		<ModalRoute name="task.delete"> <TaskForm deletion /></ModalRoute>
		<ModalRoute name="project.add"> <ProjectForm creation /></ModalRoute>
		<ModalRoute name="project.edit"> <ProjectForm /></ModalRoute>
		<ModalRoute name="project.delete"> <ProjectForm deletion /></ModalRoute>
		<ModalRoute name="projectgroup.add"> <ProjectGroupForm creation /></ModalRoute>
		<ModalRoute name="projectgroup.edit"> <ProjectGroupForm /></ModalRoute>
		<ModalRoute name="projectgroup.delete"> <ProjectGroupForm deletion /></ModalRoute>
		<ModalRoute name="item.add"> <ItemForm creation /></ModalRoute>
		<ModalRoute name="item.edit"> <ItemForm /></ModalRoute>
		<ModalRoute name="item.delete"> <ItemForm deletion /></ModalRoute>
		<ModalRoute name="group.add"> <GroupForm creation /></ModalRoute>
		<ModalRoute name="group.edit"> <GroupForm /></ModalRoute>
		<ModalRoute name="group.delete"> <GroupForm deletion /></ModalRoute>
		<ModalRoute name="goal.add"> <GoalForm creation /></ModalRoute>
		<ModalRoute name="goal.edit"> <GoalForm /></ModalRoute>
		<ModalRoute name="goal.delete"> <GoalForm deletion /></ModalRoute>
		<ModalRoute name="tasklink.add"> <TaskLinkForm creation /></ModalRoute>
		<ModalRoute name="tasklink.delete"> <TaskLinkForm deletion /></ModalRoute>
	{:else}
		<LoginForm />
	{/if}
{/if}

<style>
	main {
		text-align: left;
		max-width: 99.5%;
		margin: 1em auto;
	}

	footer {
		text-align: left;
		width: 920px;
		max-width: 99.5%;
		margin: 1em auto;
		padding-bottom: 4em;
		text-align: center;
	}
</style>