frontend/src/App.svelte

<script>
  // import TailwindStyles from "./TailwindStyles.svelte";
  import { Route, router } from "tinro";
  router.subscribe((routeInfo) => {
    console.log(routeInfo.path);
    window.scrollTo(0, 0);
  });
  console.log($router.path);
  console.log(config);
  import localForage from "localforage";
  import { addMessages, init, getLocaleFromNavigator } from "svelte-i18n";
  import en from "./locales/en.json";
  import de from "./locales/de.json";
  addMessages("en", en);
  addMessages("de", de);
  init({
    fallbackLocale: "en",
    initialLocale: getLocaleFromNavigator(),
  });
  localForage.config({
    name: "lfk_admin",
    version: 1.0,
    storeName: "lfk_admin",
    description: "LfK! admin dashbaord",
  });
  //
  import Login from "./components/Login.svelte";
  import Dashboard from "./components/Dashboard.svelte";
  import store from "./store.js";
  import NotFound from "./components/NotFound.svelte";
  import ForgotPassword from "./components/ForgotPassword.svelte";
  import MainDashContent from "./components/MainDashContent.svelte";
  import Users from "./components/Users.svelte";
  import About from "./components/About.svelte";
  import Settings from "./components/Settings.svelte";
  import Transition from "./components/Transition.svelte";
  import Orgs from "./components/Orgs.svelte";
  import Runners from "./components/Runners.svelte";
  store.init();

  // if ("serviceWorker" in navigator) {
  //   window.addEventListener("load", () => {
  //     navigator.serviceWorker.register("/sw.js").then(
  //       (registration) => {
  //         console.log(`sw successful with scope: ${registration.scope}`);
  //       },
  //       (err) => {
  //         console.log(`sw failed: ${err}`);
  //       }
  //     );
  //   });
  // }
</script>

<button
  on:click={() => {
    $store.isLoggedIn = true;
  }}>login</button>
<!--  -->
<Route>
  {#if $router.path === '/forgot_password'}
    <Route path="/forgot_password">
      <ForgotPassword />
    </Route>
  {:else if $router.path === '/about'}
    <Route path="/about">
      <About />
    </Route>
  {:else if $store.isLoggedIn}
    <Dashboard>
      <Transition>
        <Route path="/">
          <MainDashContent />
        </Route>
        <Route path="/users">
          <Users />
        </Route>
        <Route path="/runners">
          <Runners />
        </Route>
        <Route path="/orgs/*">
          <Route path="/">
            <h1>Portfolio introduction</h1>
            <nav><a class="underline" href="./1">Org 1</a></nav>
            <Orgs />
          </Route>
          <Route path="/:orgid" let:params>
            <div class="flex flex-row mb-4">
              <div class="w-full">
                <nav class="w-full flex">
                  <ol
                    class="list-none flex flex-row items-center justify-start">
                    <li class="mr-2 flex items-center">
                      <svg
                        stroke="currentColor"
                        fill="none"
                        stroke-width="2"
                        viewBox="0 0 24 24"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        class="h-3 w-3 stroke-current"
                        height="1em"
                        width="1em"
                        xmlns="http://www.w3.org/2000/svg"><path
                          d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
                        <polyline points="9 22 9 12 15 12 15 22" /></svg>
                    </li>
                    <li class="flex items-center">
                      <a class="mr-2" href="/">Home</a><svg
                        stroke="currentColor"
                        fill="none"
                        stroke-width="2"
                        viewBox="0 0 24 24"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        class="h-3 w-3 mr-2 stroke-current"
                        height="1em"
                        width="1em"
                        xmlns="http://www.w3.org/2000/svg"><line
                          x1="5"
                          y1="12"
                          x2="19"
                          y2="12" />
                        <polyline points="12 5 19 12 12 19" /></svg>
                    </li>
                    <li class="mr-2 flex items-center">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 24 24"
                        width="24"
                        height="24"><path fill="none" d="M0 0h24v24H0z" />
                        <path
                          d="M21 20h2v2H1v-2h2V3a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v17zm-2 0V4H5v16h14zM8 11h3v2H8v-2zm0-4h3v2H8V7zm0 8h3v2H8v-2zm5 0h3v2h-3v-2zm0-4h3v2h-3v-2zm0-4h3v2h-3V7z" /></svg>
                    </li>
                    <li class="flex items-center">
                      <a class="mr-2" href="./">Orgs</a><svg
                        stroke="currentColor"
                        fill="none"
                        stroke-width="2"
                        viewBox="0 0 24 24"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        class="h-3 w-3 mr-2 stroke-current"
                        height="1em"
                        width="1em"
                        xmlns="http://www.w3.org/2000/svg"><line
                          x1="5"
                          y1="12"
                          x2="19"
                          y2="12" />
                        <polyline points="12 5 19 12 12 19" /></svg>
                    </li>
                    <li class="flex items-center">
                      <span class="mr-2">Org-Details #{params.orgid}</span>
                    </li>
                  </ol>
                </nav>
              </div>
            </div>
          </Route>
        </Route>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/settings">
          <Settings />
        </Route>
      </Transition>
    </Dashboard>
  {:else}
    <Login />
  {/if}
</Route>