Umbrella/frontend/src/App.svelte

<script>
    import { onMount } from 'svelte';
    import { Router, Route } from 'svelte-tiny-router';

    import { loadTranslation } from './translations.svelte.js';
    import { checkUser, user } from './user.svelte.js';

    import AddDoc      from "./routes/document/Add.svelte";
    import AddTask     from "./routes/task/Add.svelte";
    import Bookmark    from "./routes/bookmark/View.svelte";
    import Bookmarks   from "./routes/bookmark/Index.svelte";
    import Callback    from "./routes/user/OidcCallback.svelte";
    import Companies   from "./routes/company/Index.svelte";
    import DocList     from "./routes/document/List.svelte";
    import EditService from "./routes/user/EditService.svelte";
    import EditUser    from "./routes/user/EditUser.svelte";
    import Footer      from "./Components/Footer.svelte";
    import Kanban      from "./routes/project/Kanban.svelte";
    import Login       from "./Components/Login.svelte";
    import Messages    from "./routes/message/Messages.svelte";
    import Menu        from "./Components/Menu.svelte";
    import NewPage     from "./routes/wiki/AddPage.svelte";
    import Notes       from "./routes/notes/Index.svelte";
    import ProjectList from "./routes/project/List.svelte";
    import ProjectAdd  from "./routes/project/Create.svelte";
    import ResetPw     from "./routes/user/ResetPw.svelte";
    import Search      from "./routes/search/Search.svelte";
    import SendDoc     from "./routes/document/Send.svelte";
    import TagUses     from "./routes/tags/TagUses.svelte";
    import TaskList    from "./routes/task/Index.svelte";
    import Times       from "./routes/time/Index.svelte";
    import User        from "./routes/user/User.svelte";
    import ViewDoc     from "./routes/document/View.svelte";
    import ViewPrj     from "./routes/project/View.svelte";
    import ViewTask    from "./routes/task/View.svelte";
    import WikiIndex   from "./routes/wiki/Index.svelte";
    import WikiPage    from "./routes/wiki/View.svelte"

    let translations_ready = $state(false);

    onMount(async () => {
        await loadTranslation('de','Login');
        translations_ready = true;
    });

    function loadTheme(name){
        if (!name) return;
        const url = `${location.protocol}//${location.host.replace('5173','8080')}/css/${name}.css`;
        fetch(url).then(resp => resp.text()).then(css => document.getElementById('usercss').innerText = css);
    }

    async function testGuard({to, from, next}){
        await checkUser();
        next();
    }

    $effect(() => loadTheme(user.theme));
</script>

{#if translations_ready }
    {#if user.name}
        <Router beforeEach={[testGuard]}>
        <!-- https://github.com/notnotsamuel/svelte-tiny-router -->
        <Menu />
        <Route path="/"                            component={User} />
        <Route path="/bookmark"                    component={Bookmarks} />
        <Route path="/bookmark/:id/view"           component={Bookmark} />
        <Route path="/company"                     component={Companies} />
        <Route path="/document"                    component={DocList} />
        <Route path="/document/add"                component={AddDoc} />
        <Route path="/document/:id/send"           component={SendDoc} />
        <Route path="/document/:id/view"           component={ViewDoc} />
        <Route path="/message/settings"            component={Messages} />
        <Route path="/notes"                       component={Notes} />
        <Route path="/project"                     component={ProjectList} />
        <Route path="/project/add"                 component={ProjectAdd} />
        <Route path="/project/:project_id/add_task" component={AddTask} />
        <Route path="/project/:id/kanban"          component={Kanban} />
        <Route path="/project/:id/view"            component={ViewPrj} />
        <Route path="/search"                      component={Search} />
        <Route path="/tags/use/:tag"               component={TagUses} />
        <Route path="/task"                        component={TaskList} />
        <Route path="/task/:parent_task_id/add_subtask" component={AddTask} />
        <Route path="/task/:id/edit"               component={ViewTask} />
        <Route path="/task/:id/view"               component={ViewTask} />
        <Route path="/time"                        component={Times} />
        <Route path="/user"                        component={User} />
        <Route path="/user/create"                 component={EditUser} />
        <Route path="/user/login"                  component={User} />
        <Route path="/user/:user_id/edit"          component={EditUser} />
        <Route path="/user/oidc/add"               component={EditService} />
        <Route path="/user/oidc/edit/:serviceName" component={EditService} />
        <Route path="/wiki"                        component={WikiIndex} />
        <Route path="/wiki/add"                    component={NewPage} />
        <Route path="/wiki/:key/view"              component={WikiPage} />
        <Route path="/wiki/:key/version/:version"  component={WikiPage} />
        <Route>
            Not found!
        </Route>
        </Router>
    {:else}
        <Router>
            <Route path="/user/reset/pw"  component={ResetPw} />
            <Route path="/oidc_callback"  component={Callback} />
            <Route path="/wiki/:key/view" component={WikiPage} />
            <Route>
                <Login />
            </Route>
        </Router>
    {/if}
    <Footer />
{:else}
    <p>Loading translations...</p>
{/if}