Umbrella/frontend/src/App.svelte

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

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

    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 ContactList from "./routes/contact/Index.svelte";
    import DocList     from "./routes/document/List.svelte";
    import EasyList    from "./routes/task/EasyList.svelte";
    import EditService from "./routes/user/EditService.svelte";
    import EditUser    from "./routes/user/EditUser.svelte";
    import FileIndex   from "./routes/files/Index.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 MsgSettings from "./routes/message/Settings.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 Stock       from './routes/stock/Index.svelte';
    import TagList     from "./routes/tags/Index.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"
    import WikiGuest   from "./routes/wiki/GuestView.svelte"

    let translations_ready = $state(false);

    async function load(){
        await loadTranslation(user.language?user.language:'de');
        translations_ready = true;
    }

    async function testGuard({to, from, next}){
        await checkUser();
        window.scrollTo(0,0);
        next();
    }

    $effect(load);
    let origin = window.location.origin.replace(':5173',':8080');
</script>

<svelte:head>
    {#if user}
    <link rel="stylesheet" href="{origin}/css/{user.theme}.css" />
    <link rel="stylesheet" href="{origin}/css/{user.theme}-color.css" />
    {:else}
    <link rel="stylesheet" href="{origin}/css/default.css" />
    <link rel="stylesheet" href="{origin}/css/default-color.css" />
    {/if}
</svelte:head>


{#if translations_ready }
    {#if user.name}
        <Router beforeEach={[testGuard]}>
        <!-- https://github.com/notnotsamuel/svelte-tiny-router -->
        <Menu />
        {#if messages.error}
        <span class="error">{@html messages.error}</span>
        {/if}
        {#if messages.warning}
        <span class="warn">{@html messages.warning}</span>
        {/if}
        <Route path="/"                            component={User} />
        <Route path="/bookmark"                    component={Bookmarks} />
        <Route path="/bookmark/:id/view"           component={Bookmark} />
        <Route path="/company"                     component={Companies} />
        <Route path="/contact"                     component={ContactList} />
        <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="/files/*"                     component={FileIndex} />
        <Route path="/message"                     component={Messages} />
        <Route path="/message/settings"            component={MsgSettings} />
        <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="/stock"                       component={Stock} />
        <Route path="/stock/location/:location_id" component={Stock} />
        <Route path="/stock/:owner/:owner_id/item/:item_id" component={Stock} />
        <Route path="/tags"                        component={TagList} />
        <Route path="/tags/use/:tag"               component={TagUses} />
        <Route path="/task"                        component={TaskList} />
        <Route path="/tags/easylist/:tag"          component={EasyList} />
        <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>
            {#if messages.error}
            <span class="error">{@html messages.error}</span>
            {/if}
            {#if messages.warning}
            <span class="warn">{@html messages.warning}</span>
            {/if}
            <Route path="/user/reset/pw"  component={ResetPw} />
            <Route path="/oidc_callback"  component={Callback} />
            <Route path="/wiki/:key/view" component={WikiGuest} />
            <Route>
                <Login />
            </Route>
        </Router>
    {/if}
    <Footer />
{:else}
    <p>Loading translations...</p>
{/if}