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

174
src/components/Dashboard.svelte
View File

@@ -1,5 +1,9 @@
<script>
import { _ } from "svelte-i18n";
import { active } from "tinro";
import localForage from "localforage";
import { router } from "tinro";
import BreadcrumbNav from "./BreadcrumbNav.svelte";
import DataTable from "./DataTable.svelte";
import FileUpload from "./FileUpload.svelte";
@@ -14,7 +18,11 @@
import Tags from "./Tags.svelte";
import Badges from "./Badges.svelte";
import Avatars from "./Avatars.svelte";
import store from "../store";
import store from "../store";
import NoComponentLoaded from "./NoComponentLoaded.svelte";
//
import Router from "svelte-spa-router";
import { replace } from "svelte-spa-router";
let activePage = "dashboard";
let dropdown1 = false;
@@ -35,6 +43,10 @@ import store from "../store";
return check;
}
$: mobile = ismobile();
function logout() {
localForage.clear();
location.replace("/");
}
</script>
<section class="min-h-screen bg-gray-50">
@@ -50,9 +62,9 @@ import store from "../store";
</a>
<nav class="text-sm font-medium text-gray-600" aria-label="Main Navigation">
<a
class:bg-gray-100={activePage === 'dashboard'}
class:bg-gray-100={$router.path === '/'}
class="flex items-center px-4 py-3 text-gray-900 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
href="#">
href="/">
<svg
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
xmlns="http://www.w3.org/2000/svg"
@@ -64,33 +76,48 @@ import store from "../store";
<span>Dashboard</span>
</a>
<a
class:bg-gray-100={activePage === 'users'}
class:bg-gray-100={$router.path.includes('/orgs/')}
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
href="/#/users/">
href="/orgs/">
<svg
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor">
viewBox="0 0 24 24"
width="24"
height="24"><path fill="none" d="M0 0h24v24H0z" />
<path
d="M5 3a1 1 0 000 2c5.523 0 10 4.477 10 10a1 1 0 102 0C17 8.373 11.627 3 5 3z" />
d="M17 19h2v-8h-6v8h2v-6h2v6zM3 19V4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v5h2v10h1v2H2v-2h1zm4-8v2h2v-2H7zm0 4v2h2v-2H7zm0-8v2h2V7H7z" /></svg>
<span>Orgs</span>
</a>
<a
class:bg-gray-100={$router.path === '/users/'}
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
href="/users/">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
width="24"
fill="currentColor"
height="24"><path fill="none" d="M0 0h24v24H0z" />
<path
d="M4 9a1 1 0 011-1 7 7 0 017 7 1 1 0 11-2 0 5 5 0 00-5-5 1 1 0 01-1-1zM3 15a2 2 0 114 0 2 2 0 01-4 0z" />
</svg>
d="M2 22a8 8 0 1 1 16 0H2zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm7.363 2.233A7.505 7.505 0 0 1 22.983 22H20c0-2.61-1-4.986-2.637-6.767zm-2.023-2.276A7.98 7.98 0 0 0 18 7a7.964 7.964 0 0 0-1.015-3.903A5 5 0 0 1 21 8a4.999 4.999 0 0 1-5.66 4.957z" /></svg>
<span>Users</span>
</a>
<a
class:bg-gray-100={activePage === 'runners'}
class:bg-gray-100={$router.path === '/runners/'}
class="flex items-center px-4 py-3 text-gray-900 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
href="/#/runners/">
href="/runners/">
<svg
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor">
viewBox="0 0 24 24"
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
fill="currentColor"
width="24"
height="24"><path fill="none" d="M0 0h24v24H0z" />
<path
d="M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z" />
</svg>
d="M9.83 8.79L8 9.456V13H6V8.05h.015l5.268-1.918c.244-.093.51-.14.782-.131a2.616 2.616 0 0 1 2.427 1.82c.186.583.356.977.51 1.182A4.992 4.992 0 0 0 19 11v2a6.986 6.986 0 0 1-5.402-2.547l-.581 3.297L15 15.67V23h-2v-5.986l-2.05-1.987-.947 4.298-6.894-1.215.348-1.97 4.924.868L9.83 8.79zM13.5 5.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" /></svg>
<span>Runners</span>
</a>
<a
@@ -173,9 +200,9 @@ import store from "../store";
<span>Changelog</span>
</a>
<a
class:bg-gray-100={activePage === 'settings'}
class:bg-gray-100={$router.path === '/settings/'}
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
href="/#/settings/">
href="/settings/">
<svg
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
xmlns="http://www.w3.org/2000/svg"
@@ -189,8 +216,9 @@ import store from "../store";
<span>Settings</span>
</a>
<a
class:bg-gray-100={$router.path === '/about/'}
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
href="/#/about/">
href="/about/">
<svg
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
xmlns="http://www.w3.org/2000/svg"
@@ -203,6 +231,21 @@ import store from "../store";
<path d="M12 16v-4M12 8h.01" /></svg>
<span>About</span>
</a>
<span
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
on:click={() => {
logout();
}}>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
width="24"
height="24"><path fill="none" d="M0 0h24v24H0z" />
<path
d="M5 22a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v3h-2V4H6v16h12v-2h2v3a1 1 0 0 1-1 1H5zm13-6v-3h-7v-2h7V8l5 4-5 4z" /></svg>
<span>Logout</span>
</span>
</nav>
</nav>
<div class="ml-0 transition md:ml-60">
@@ -252,7 +295,7 @@ import store from "../store";
d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
</svg>
</a>
<a href="/#/profile/" class="ml-4">
<a href="/profile/" class="ml-4">
<img
class="h-8 w-8 rounded-full"
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
@@ -260,92 +303,9 @@ import store from "../store";
</a>
</div>
</header>
<div
class="p-5 overflow-x-hidden"
on:click={() => {
navOpen = false;
}}>
<!-- Add content here, remove div below -->
<!-- <div class="border-4 border-dashed rounded h-96" /> -->
<h1 class="text-3xl leading-tight">
<span class="font-bold">Dashboard</span><span> - hello there, <span class="text-blue-500">{store.state.jwtinfo.userdetails.firstname}</span> 👋</span>
</h1>
<div class="shadow px-6 pt-4 pb-1">
<BreadcrumbNav />
</div>
<StatCards />
<div class="mb-8">
<FileUpload />
</div>
<div class="mb-8">
<DataTable />
</div>
<div class="mb-8">
<Tabs />
</div>
<div class="mb-8">
<Tags />
</div>
<div class="mb-8">
<Badges />
</div>
<div class="mb-8">
<Avatars />
</div>
<div class="mb-8">
<Tracks />
</div>
<Pagination />
<div class="mb-8">
<Table />
</div>
<div
class="widget w-full p-4 mb-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890">
<div class="flex flex-row items-center justify-between mb-6">
<div class="flex flex-col">
<div class="text-sm font-light text-grey-500">Regular</div>
<div class="text-sm font-bold"><span>Text inputs</span></div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:flex-wrap w-full lg:space-x-4">
<div class="w-full lg:w-1/4">
<div class="form-element ">
<div class="form-label">Label</div><input
name="name"
type="text"
class="form-input"
placeholder="Enter something..." />
<div class="form-hint">This is a hint</div>
</div>
</div>
<div class="w-full lg:w-1/4">
<div class="form-element ">
<div class="form-label">First name</div><input
name="name"
type="text"
class="form-input form-input-invalid"
placeholder="john@example.com" />
<div class="form-error">First name is required</div>
</div>
</div>
<div class="w-full lg:w-1/4">
<div class="form-element ">
<div class="form-label">First name</div><input
name="name"
type="text"
class="form-input form-input-valid"
placeholder="john@example.com" />
<div class="form-success">First name is valid</div>
</div>
</div>
</div>
</div>
<div class="mb-8">
<FormLayout />
</div>
<Footer />
<!-- <NotFound /> -->
</div>
<slot>
<NoComponentLoaded />
</slot>
</div>
<!-- Sidebar Backdrop -->
<div