lfk/frontend
2
0
Fork 0
Code Issues 4 Pull Requests Actions Projects Releases Wiki Activity

🚚 move to tinro svelte router

Browse Source 
ref #23
This commit is contained in:
Philipp Dormann
2021-01-02 22:23:13 +01:00
parent 1473267e8c
commit a50ea15b38
13 changed files with 530 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
src/App.svelte
View File

@@ -1,8 +1,12 @@
<script>
import Router from "svelte-spa-router";
import { replace } from "svelte-spa-router";
import { wrap } from "svelte-spa-router/wrap";
// 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";
@@ -22,49 +26,148 @@
//
import Login from "./components/Login.svelte";
import Dashboard from "./components/Dashboard.svelte";
import NotFound from "./components/NotFound.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();
//
const checkAuth = (detail) => {
if (!$store.isLoggedIn) {
console.log("not authed");
replace("/login/");
return false;
}
return true;
};
const routes = {
"/about": About,
"/login": Login,
"/forgot_password": ForgotPassword,
"/dashboard": wrap({ component: Dashboard, conditions: [checkAuth] }),
"/": wrap({ component: Dashboard, conditions: [checkAuth] }),
// Using named parameters, with last being optional
// "/author/:first/:last?": Author,
// Wildcard parameter
// "/book/*": Book,
// Catch-all
// This is optional, but if present it must be the last
"*": NotFound,
};
//
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}`);
}
);
});
}
// 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>
<Router {routes} />
<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>