init
This commit is contained in:
parent
4bb3bae4e6
commit
32357ece0a
@ -5,6 +5,7 @@
|
||||
<link rel="icon" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Svelte App</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.2/dist/tailwind.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<script type="module" src="/src/index.js"></script>
|
||||
|
||||
7889
package-lock.json
generated
7889
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -5,7 +5,9 @@
|
||||
"dev": "svite",
|
||||
"build": "svite build"
|
||||
},
|
||||
"dependencies": {},
|
||||
"dependencies": {
|
||||
"@odit/lfk-client": "^0.0.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"svelte": "^3.29.7",
|
||||
"svelte-hmr": "^0.11.6",
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
<script>
|
||||
const world = 'world'; // edit world and save to see hmr update
|
||||
import Login from "./components/Login.svelte";
|
||||
import Dashboard from "./components/Dashboard.svelte";
|
||||
import store from "./store.js";
|
||||
store.init();
|
||||
$: logged_in = $store.isLoggedIn;
|
||||
</script>
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
color: orangered; /* change color an save to see hmr update */
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Hello {world}</h1>
|
||||
<p>Open App.svelte in your editor and change something to see HMR in action</p>
|
||||
{#if logged_in === true}
|
||||
<Dashboard />
|
||||
{:else}
|
||||
<Login />
|
||||
{/if}
|
||||
|
||||
281
src/components/ConversionsChart.svelte
Normal file
281
src/components/ConversionsChart.svelte
Normal file
@ -0,0 +1,281 @@
|
||||
<div class="w-full p-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">Conversions</div>
|
||||
<div class="text-sm font-bold"><span>This year</span></div>
|
||||
</div>
|
||||
<div class="relative"><button
|
||||
class="btn btn-default btn-circle btn-icon bg-transparent hover:bg-transparent active:bg-transparent relative"><svg
|
||||
stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
|
||||
stroke-linejoin="round" class="stroke-current stroke-1" size="18" height="18" width="18"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="12" cy="12" r="1"></circle>
|
||||
<circle cx="12" cy="5" r="1"></circle>
|
||||
<circle cx="12" cy="19" r="1"></circle>
|
||||
</svg></button>
|
||||
<div class="dropdown absolute top-0 right-0 mt-8 ">
|
||||
<div class="dropdown-content w-48 bottom-start">
|
||||
<div class="flex flex-col w-full">
|
||||
<ul class="list-none">
|
||||
<li><a
|
||||
class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
|
||||
href="/">Today</a></li>
|
||||
<li><a
|
||||
class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
|
||||
href="/">This week</a></li>
|
||||
<li><a
|
||||
class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
|
||||
href="/">This month</a></li>
|
||||
<li><a
|
||||
class="flex flex-row items-center justify-start h-10 w-full px-2 bg-white hover:bg-grey-100 dark:bg-grey-895 dark:hover:bg-grey-890"
|
||||
href="/">This year</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row w-full">
|
||||
<div style="width:100%;height:240px">
|
||||
<div class="recharts-responsive-container" style="width:100%;height:100%">
|
||||
<div class="recharts-wrapper"
|
||||
style="position: relative; cursor: default; width: 704px; height: 240px;"><svg
|
||||
class="recharts-surface" width="704" height="240" viewBox="0 0 704 240" version="1.1">
|
||||
<defs>
|
||||
<clipPath id="recharts3-clip">
|
||||
<rect x="40" y="10" height="190" width="654"></rect>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis">
|
||||
<g class="recharts-cartesian-axis-ticks">
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30" x="67.25"
|
||||
y="208" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value"
|
||||
text-anchor="middle">
|
||||
<tspan x="67.25" dy="0.71em">Jan</tspan>
|
||||
</text></g>
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
||||
x="121.75" y="208" stroke="none" fill="#666"
|
||||
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
||||
<tspan x="121.75" dy="0.71em">Feb</tspan>
|
||||
</text></g>
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
||||
x="176.25" y="208" stroke="none" fill="#666"
|
||||
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
||||
<tspan x="176.25" dy="0.71em">Mar</tspan>
|
||||
</text></g>
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
||||
x="230.75" y="208" stroke="none" fill="#666"
|
||||
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
||||
<tspan x="230.75" dy="0.71em">Apr</tspan>
|
||||
</text></g>
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
||||
x="285.25" y="208" stroke="none" fill="#666"
|
||||
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
||||
<tspan x="285.25" dy="0.71em">May</tspan>
|
||||
</text></g>
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
||||
x="339.75" y="208" stroke="none" fill="#666"
|
||||
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
||||
<tspan x="339.75" dy="0.71em">Jun</tspan>
|
||||
</text></g>
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
||||
x="394.25" y="208" stroke="none" fill="#666"
|
||||
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
||||
<tspan x="394.25" dy="0.71em">Jul</tspan>
|
||||
</text></g>
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
||||
x="448.75" y="208" stroke="none" fill="#666"
|
||||
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
||||
<tspan x="448.75" dy="0.71em">Aug</tspan>
|
||||
</text></g>
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
||||
x="503.25" y="208" stroke="none" fill="#666"
|
||||
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
||||
<tspan x="503.25" dy="0.71em">Sep</tspan>
|
||||
</text></g>
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
||||
x="557.75" y="208" stroke="none" fill="#666"
|
||||
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
||||
<tspan x="557.75" dy="0.71em">Oct</tspan>
|
||||
</text></g>
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
||||
x="612.25" y="208" stroke="none" fill="#666"
|
||||
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
||||
<tspan x="612.25" dy="0.71em">Nov</tspan>
|
||||
</text></g>
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="654" height="30"
|
||||
x="666.75" y="208" stroke="none" fill="#666"
|
||||
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
|
||||
<tspan x="666.75" dy="0.71em">Dec</tspan>
|
||||
</text></g>
|
||||
</g>
|
||||
</g>
|
||||
<g class="recharts-layer recharts-cartesian-axis recharts-yAxis yAxis">
|
||||
<g class="recharts-cartesian-axis-ticks">
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="30" height="190" x="32"
|
||||
y="200" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value"
|
||||
text-anchor="end">
|
||||
<tspan x="32" dy="0.355em">0</tspan>
|
||||
</text></g>
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="30" height="190" x="32"
|
||||
y="152.5" stroke="none" fill="#666"
|
||||
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end">
|
||||
<tspan x="32" dy="0.355em">65</tspan>
|
||||
</text></g>
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="30" height="190" x="32"
|
||||
y="105" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value"
|
||||
text-anchor="end">
|
||||
<tspan x="32" dy="0.355em">130</tspan>
|
||||
</text></g>
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="30" height="190" x="32"
|
||||
y="57.5" stroke="none" fill="#666"
|
||||
class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end">
|
||||
<tspan x="32" dy="0.355em">195</tspan>
|
||||
</text></g>
|
||||
<g class="recharts-layer recharts-cartesian-axis-tick"><text width="30" height="190" x="32"
|
||||
y="10" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value"
|
||||
text-anchor="end">
|
||||
<tspan x="32" dy="0.355em">260</tspan>
|
||||
</text></g>
|
||||
</g>
|
||||
</g>
|
||||
<g class="recharts-layer recharts-bar">
|
||||
<g class="recharts-layer recharts-bar-rectangles">
|
||||
<g class="recharts-layer">
|
||||
<g class="recharts-layer recharts-bar-rectangle">
|
||||
<path fill="#90caf9" width="10" height="119.11538461538461" x="55" y="80.88461538461539"
|
||||
radius="0" class="recharts-rectangle"
|
||||
d="M 55,80.88461538461539 h 10 v 119.11538461538461 h -10 Z"></path>
|
||||
</g>
|
||||
<g class="recharts-layer recharts-bar-rectangle">
|
||||
<path fill="#90caf9" width="10" height="95" x="109.5" y="105" radius="0"
|
||||
class="recharts-rectangle" d="M 109.5,105 h 10 v 95 h -10 Z"></path>
|
||||
</g>
|
||||
<g class="recharts-layer recharts-bar-rectangle">
|
||||
<path fill="#90caf9" width="10" height="122.03846153846155" x="164" y="77.96153846153845"
|
||||
radius="0" class="recharts-rectangle"
|
||||
d="M 164,77.96153846153845 h 10 v 122.03846153846155 h -10 Z"></path>
|
||||
</g>
|
||||
<g class="recharts-layer recharts-bar-rectangle">
|
||||
<path fill="#90caf9" width="10" height="81.11538461538461" x="218.5"
|
||||
y="118.88461538461539" radius="0" class="recharts-rectangle"
|
||||
d="M 218.5,118.88461538461539 h 10 v 81.11538461538461 h -10 Z"></path>
|
||||
</g>
|
||||
<g class="recharts-layer recharts-bar-rectangle">
|
||||
<path fill="#90caf9" width="10" height="114" x="273" y="86" radius="0"
|
||||
class="recharts-rectangle" d="M 273,86 h 10 v 114 h -10 Z"></path>
|
||||
</g>
|
||||
<g class="recharts-layer recharts-bar-rectangle">
|
||||
<path fill="#90caf9" width="10" height="117.65384615384616" x="327.5"
|
||||
y="82.34615384615384" radius="0" class="recharts-rectangle"
|
||||
d="M 327.5,82.34615384615384 h 10 v 117.65384615384616 h -10 Z"></path>
|
||||
</g>
|
||||
<g class="recharts-layer recharts-bar-rectangle">
|
||||
<path fill="#90caf9" width="10" height="103.76923076923076" x="382" y="96.23076923076924"
|
||||
radius="0" class="recharts-rectangle"
|
||||
d="M 382,96.23076923076924 h 10 v 103.76923076923076 h -10 Z"></path>
|
||||
</g>
|
||||
<g class="recharts-layer recharts-bar-rectangle">
|
||||
<path fill="#90caf9" width="10" height="92.80769230769232" x="436.5"
|
||||
y="107.19230769230768" radius="0" class="recharts-rectangle"
|
||||
d="M 436.5,107.19230769230768 h 10 v 92.80769230769232 h -10 Z"></path>
|
||||
</g>
|
||||
<g class="recharts-layer recharts-bar-rectangle">
|
||||
<path fill="#90caf9" width="10" height="92.80769230769232" x="491" y="107.19230769230768"
|
||||
radius="0" class="recharts-rectangle"
|
||||
d="M 491,107.19230769230768 h 10 v 92.80769230769232 h -10 Z"></path>
|
||||
</g>
|
||||
<g class="recharts-layer recharts-bar-rectangle">
|
||||
<path fill="#90caf9" width="10" height="127.8846153846154" x="545.5" y="72.1153846153846"
|
||||
radius="0" class="recharts-rectangle"
|
||||
d="M 545.5,72.1153846153846 h 10 v 127.8846153846154 h -10 Z"></path>
|
||||
</g>
|
||||
<g class="recharts-layer recharts-bar-rectangle">
|
||||
<path fill="#90caf9" width="10" height="105.23076923076924" x="600" y="94.76923076923076"
|
||||
radius="0" class="recharts-rectangle"
|
||||
d="M 600,94.76923076923076 h 10 v 105.23076923076924 h -10 Z"></path>
|
||||
</g>
|
||||
<g class="recharts-layer recharts-bar-rectangle">
|
||||
<path fill="#90caf9" width="10" height="115.46153846153845" x="654.5"
|
||||
y="84.53846153846155" radius="0" class="recharts-rectangle"
|
||||
d="M 654.5,84.53846153846155 h 10 v 115.46153846153845 h -10 Z"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g class="recharts-layer recharts-bar">
|
||||
<g class="recharts-layer recharts-bar-rectangles">
|
||||
<g class="recharts-layer">
|
||||
<g class="recharts-layer recharts-bar-rectangle">
|
||||
<path fill="#1e88e5" width="10" height="112.53846153846155" x="69" y="87.46153846153845"
|
||||
radius="0" class="recharts-rectangle"
|
||||
d="M 69,87.46153846153845 h 10 v 112.53846153846155 h -10 Z"></path>
|
||||
</g>
|
||||
<g class="recharts-layer recharts-bar-rectangle">
|
||||
<path fill="#1e88e5" width="10" height="151.26923076923077" x="123.5"
|
||||
y="48.730769230769226" radius="0" class="recharts-rectangle"
|
||||
d="M 123.5,48.730769230769226 h 10 v 151.26923076923077 h -10 Z"></path>
|
||||
</g>
|
||||
<g class="recharts-layer recharts-bar-rectangle">
|
||||
<path fill="#1e88e5" width="10" height="181.23076923076923" x="178" y="18.769230769230774"
|
||||
radius="0" class="recharts-rectangle"
|
||||
d="M 178,18.769230769230774 h 10 v 181.23076923076923 h -10 Z"></path>
|
||||
</g>
|
||||
<g class="recharts-layer recharts-bar-rectangle">
|
||||
<path fill="#1e88e5" width="10" height="165.8846153846154" x="232.5" y="34.11538461538461"
|
||||
radius="0" class="recharts-rectangle"
|
||||
d="M 232.5,34.11538461538461 h 10 v 165.8846153846154 h -10 Z"></path>
|
||||
</g>
|
||||
<g class="recharts-layer recharts-bar-rectangle">
|
||||
<path fill="#1e88e5" width="10" height="156.38461538461536" x="287" y="43.61538461538464"
|
||||
radius="0" class="recharts-rectangle"
|
||||
d="M 287,43.61538461538464 h 10 v 156.38461538461536 h -10 Z"></path>
|
||||
</g>
|
||||
<g class="recharts-layer recharts-bar-rectangle">
|
||||
<path fill="#1e88e5" width="10" height="118.38461538461539" x="341.5"
|
||||
y="81.61538461538461" radius="0" class="recharts-rectangle"
|
||||
d="M 341.5,81.61538461538461 h 10 v 118.38461538461539 h -10 Z"></path>
|
||||
</g>
|
||||
<g class="recharts-layer recharts-bar-rectangle">
|
||||
<path fill="#1e88e5" width="10" height="138.84615384615384" x="396" y="61.15384615384616"
|
||||
radius="0" class="recharts-rectangle"
|
||||
d="M 396,61.15384615384616 h 10 v 138.84615384615384 h -10 Z"></path>
|
||||
</g>
|
||||
<g class="recharts-layer recharts-bar-rectangle">
|
||||
<path fill="#1e88e5" width="10" height="175.3846153846154" x="450.5"
|
||||
y="24.615384615384613" radius="0" class="recharts-rectangle"
|
||||
d="M 450.5,24.615384615384613 h 10 v 175.3846153846154 h -10 Z"></path>
|
||||
</g>
|
||||
<g class="recharts-layer recharts-bar-rectangle">
|
||||
<path fill="#1e88e5" width="10" height="155.65384615384613" x="505" y="44.34615384615387"
|
||||
radius="0" class="recharts-rectangle"
|
||||
d="M 505,44.34615384615387 h 10 v 155.65384615384613 h -10 Z"></path>
|
||||
</g>
|
||||
<g class="recharts-layer recharts-bar-rectangle">
|
||||
<path fill="#1e88e5" width="10" height="179.76923076923077" x="559.5"
|
||||
y="20.230769230769226" radius="0" class="recharts-rectangle"
|
||||
d="M 559.5,20.230769230769226 h 10 v 179.76923076923077 h -10 Z"></path>
|
||||
</g>
|
||||
<g class="recharts-layer recharts-bar-rectangle">
|
||||
<path fill="#1e88e5" width="10" height="173.19230769230768" x="614" y="26.80769230769232"
|
||||
radius="0" class="recharts-rectangle"
|
||||
d="M 614,26.80769230769232 h 10 v 173.19230769230768 h -10 Z"></path>
|
||||
</g>
|
||||
<g class="recharts-layer recharts-bar-rectangle">
|
||||
<path fill="#1e88e5" width="10" height="146.15384615384616" x="668.5"
|
||||
y="53.84615384615384" radius="0" class="recharts-rectangle"
|
||||
d="M 668.5,53.84615384615384 h 10 v 146.15384615384616 h -10 Z"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="recharts-tooltip-wrapper"
|
||||
style="pointer-events: none; visibility: hidden; position: absolute; top: 0px; transform: translate(538.875px, 126px);">
|
||||
</div>
|
||||
</div>
|
||||
<div style="position:absolute;width:0;height:0;visibility:hidden;display:none"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
1852
src/components/Dash.svelte
Normal file
1852
src/components/Dash.svelte
Normal file
File diff suppressed because it is too large
Load Diff
265
src/components/Dashboard.svelte
Normal file
265
src/components/Dashboard.svelte
Normal file
@ -0,0 +1,265 @@
|
||||
<script>
|
||||
import StatCards from "./StatCards.svelte";
|
||||
import Table from "./Table.svelte";
|
||||
import Pagination from "./Pagination.svelte";
|
||||
import FormLayout from "./FormLayout.svelte";
|
||||
import Tracks from "./Tracks.svelte";
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<nav class="bg-gray-800">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex items-center justify-between h-16">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<img
|
||||
class="h-8 w-8"
|
||||
src="https://tailwindui.com/img/logos/workflow-mark-indigo-500.svg"
|
||||
alt="Workflow" />
|
||||
</div>
|
||||
<div class="hidden md:block">
|
||||
<div class="ml-10 flex items-baseline space-x-4">
|
||||
<a
|
||||
href="#"
|
||||
class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium">Dashboard</a>
|
||||
|
||||
<a
|
||||
href="#"
|
||||
class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Team</a>
|
||||
|
||||
<a
|
||||
href="#"
|
||||
class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Projects</a>
|
||||
|
||||
<a
|
||||
href="#"
|
||||
class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Calendar</a>
|
||||
|
||||
<a
|
||||
href="#"
|
||||
class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Reports</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden md:block">
|
||||
<div class="ml-4 flex items-center md:ml-6">
|
||||
<button
|
||||
class="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
|
||||
<span class="sr-only">View notifications</span>
|
||||
<!-- Heroicon name: bell -->
|
||||
<svg
|
||||
class="h-6 w-6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Profile dropdown -->
|
||||
<div class="ml-3 relative">
|
||||
<div>
|
||||
<button
|
||||
class="max-w-xs bg-gray-800 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
|
||||
id="user-menu"
|
||||
aria-haspopup="true">
|
||||
<span class="sr-only">Open user menu</span>
|
||||
<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"
|
||||
alt="" />
|
||||
</button>
|
||||
</div>
|
||||
<!--
|
||||
Profile dropdown panel, show/hide based on dropdown state.
|
||||
|
||||
Entering: "transition ease-out duration-100"
|
||||
From: "transform opacity-0 scale-95"
|
||||
To: "transform opacity-100 scale-100"
|
||||
Leaving: "transition ease-in duration-75"
|
||||
From: "transform opacity-100 scale-100"
|
||||
To: "transform opacity-0 scale-95"
|
||||
-->
|
||||
<div
|
||||
class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5"
|
||||
role="menu"
|
||||
aria-orientation="vertical"
|
||||
aria-labelledby="user-menu">
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
||||
role="menuitem">Your Profile</a>
|
||||
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
||||
role="menuitem">Settings</a>
|
||||
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
||||
role="menuitem">Sign out</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="-mr-2 flex md:hidden">
|
||||
<!-- Mobile menu button -->
|
||||
<button
|
||||
class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<!--
|
||||
Heroicon name: menu
|
||||
|
||||
Menu open: "hidden", Menu closed: "block"
|
||||
-->
|
||||
<svg
|
||||
class="block h-6 w-6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
<!--
|
||||
Heroicon name: x
|
||||
|
||||
Menu open: "block", Menu closed: "hidden"
|
||||
-->
|
||||
<svg
|
||||
class="hidden h-6 w-6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
Mobile menu, toggle classes based on menu state.
|
||||
|
||||
Open: "block", closed: "hidden"
|
||||
-->
|
||||
<div class="hidden md:hidden">
|
||||
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
|
||||
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
|
||||
<a
|
||||
href="#"
|
||||
class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium">Dashboard</a>
|
||||
|
||||
<a
|
||||
href="#"
|
||||
class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Team</a>
|
||||
|
||||
<a
|
||||
href="#"
|
||||
class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Projects</a>
|
||||
|
||||
<a
|
||||
href="#"
|
||||
class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Calendar</a>
|
||||
|
||||
<a
|
||||
href="#"
|
||||
class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Reports</a>
|
||||
</div>
|
||||
<div class="pt-4 pb-3 border-t border-gray-700">
|
||||
<div class="flex items-center px-5">
|
||||
<div class="flex-shrink-0">
|
||||
<img
|
||||
class="h-10 w-10 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"
|
||||
alt="" />
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<div class="text-base font-medium leading-none text-white">
|
||||
Tom Cook
|
||||
</div>
|
||||
<div class="text-sm font-medium leading-none text-gray-400">
|
||||
tom@example.com
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="ml-auto bg-gray-800 flex-shrink-0 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
|
||||
<span class="sr-only">View notifications</span>
|
||||
<!-- Heroicon name: bell -->
|
||||
<svg
|
||||
class="h-6 w-6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mt-3 px-2 space-y-1">
|
||||
<a
|
||||
href="#"
|
||||
class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Your
|
||||
Profile</a>
|
||||
|
||||
<a
|
||||
href="#"
|
||||
class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Settings</a>
|
||||
|
||||
<a
|
||||
href="#"
|
||||
class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Sign
|
||||
out</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<header class="bg-white shadow">
|
||||
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
|
||||
<h1 class="text-3xl leading-tight">
|
||||
<span class="font-bold">Dashboard</span><span> - hello there 👋</span>
|
||||
</h1>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
|
||||
<!-- -->
|
||||
<StatCards />
|
||||
<!-- -->
|
||||
|
||||
<!-- <div class="mb-8">
|
||||
<Tracks />
|
||||
</div>
|
||||
<Pagination />
|
||||
<div class="mb-8">
|
||||
<Table />
|
||||
</div>
|
||||
<div class="mb-8">
|
||||
<FormLayout />
|
||||
</div> -->
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
272
src/components/FormLayout.svelte
Normal file
272
src/components/FormLayout.svelte
Normal file
@ -0,0 +1,272 @@
|
||||
<!--
|
||||
This example requires Tailwind CSS v2.0+
|
||||
|
||||
This example requires some changes to your config:
|
||||
|
||||
```
|
||||
// tailwind.config.js
|
||||
module.exports = {
|
||||
// ...
|
||||
plugins: [
|
||||
// ...
|
||||
require('@tailwindcss/forms'),
|
||||
]
|
||||
}
|
||||
```
|
||||
-->
|
||||
<div>
|
||||
<div class="md:grid md:grid-cols-3 md:gap-6">
|
||||
<div class="md:col-span-1">
|
||||
<div class="px-4 sm:px-0">
|
||||
<h3 class="text-lg font-medium leading-6 text-gray-900">Profile</h3>
|
||||
<p class="mt-1 text-sm text-gray-600">
|
||||
This information will be displayed publicly so be careful what you share.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5 md:mt-0 md:col-span-2">
|
||||
<form action="#" method="POST">
|
||||
<div class="shadow sm:rounded-md sm:overflow-hidden">
|
||||
<div class="px-4 py-5 bg-white space-y-6 sm:p-6">
|
||||
<div class="grid grid-cols-3 gap-6">
|
||||
<div class="col-span-3 sm:col-span-2">
|
||||
<label for="company_website" class="block text-sm font-medium text-gray-700">
|
||||
Website
|
||||
</label>
|
||||
<div class="mt-1 flex rounded-md shadow-sm">
|
||||
<span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm">
|
||||
http://
|
||||
</span>
|
||||
<input type="text" name="company_website" id="company_website" class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-r-md sm:text-sm border-gray-300" placeholder="www.example.com">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="about" class="block text-sm font-medium text-gray-700">
|
||||
About
|
||||
</label>
|
||||
<div class="mt-1">
|
||||
<textarea id="about" name="about" rows="3" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="you@example.com"></textarea>
|
||||
</div>
|
||||
<p class="mt-2 text-sm text-gray-500">
|
||||
Brief description for your profile. URLs are hyperlinked.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700">
|
||||
Photo
|
||||
</label>
|
||||
<div class="mt-2 flex items-center">
|
||||
<span class="inline-block h-12 w-12 rounded-full overflow-hidden bg-gray-100">
|
||||
<svg class="h-full w-full text-gray-300" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
</span>
|
||||
<button type="button" class="ml-5 bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||
Change
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700">
|
||||
Cover photo
|
||||
</label>
|
||||
<div class="mt-2 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
|
||||
<div class="space-y-1 text-center">
|
||||
<svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
|
||||
<path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
<div class="flex text-sm text-gray-600">
|
||||
<label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500">
|
||||
<span>Upload a file</span>
|
||||
<input id="file-upload" name="file-upload" type="file" class="sr-only">
|
||||
</label>
|
||||
<p class="pl-1">or drag and drop</p>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500">
|
||||
PNG, JPG, GIF up to 10MB
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
|
||||
<button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hidden sm:block" aria-hidden="true">
|
||||
<div class="py-5">
|
||||
<div class="border-t border-gray-200"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 sm:mt-0">
|
||||
<div class="md:grid md:grid-cols-3 md:gap-6">
|
||||
<div class="md:col-span-1">
|
||||
<div class="px-4 sm:px-0">
|
||||
<h3 class="text-lg font-medium leading-6 text-gray-900">Personal Information</h3>
|
||||
<p class="mt-1 text-sm text-gray-600">
|
||||
Use a permanent address where you can receive mail.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5 md:mt-0 md:col-span-2">
|
||||
<form action="#" method="POST">
|
||||
<div class="shadow overflow-hidden sm:rounded-md">
|
||||
<div class="px-4 py-5 bg-white sm:p-6">
|
||||
<div class="grid grid-cols-6 gap-6">
|
||||
<div class="col-span-6 sm:col-span-3">
|
||||
<label for="first_name" class="block text-sm font-medium text-gray-700">First name</label>
|
||||
<input type="text" name="first_name" id="first_name" autocomplete="given-name" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
|
||||
</div>
|
||||
|
||||
<div class="col-span-6 sm:col-span-3">
|
||||
<label for="last_name" class="block text-sm font-medium text-gray-700">Last name</label>
|
||||
<input type="text" name="last_name" id="last_name" autocomplete="family-name" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
|
||||
</div>
|
||||
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<label for="email_address" class="block text-sm font-medium text-gray-700">Email address</label>
|
||||
<input type="text" name="email_address" id="email_address" autocomplete="email" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
|
||||
</div>
|
||||
|
||||
<div class="col-span-6 sm:col-span-3">
|
||||
<label for="country" class="block text-sm font-medium text-gray-700">Country / Region</label>
|
||||
<select id="country" name="country" autocomplete="country" class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
|
||||
<option>United States</option>
|
||||
<option>Canada</option>
|
||||
<option>Mexico</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="col-span-6">
|
||||
<label for="street_address" class="block text-sm font-medium text-gray-700">Street address</label>
|
||||
<input type="text" name="street_address" id="street_address" autocomplete="street-address" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
|
||||
</div>
|
||||
|
||||
<div class="col-span-6 sm:col-span-6 lg:col-span-2">
|
||||
<label for="city" class="block text-sm font-medium text-gray-700">City</label>
|
||||
<input type="text" name="city" id="city" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
|
||||
</div>
|
||||
|
||||
<div class="col-span-6 sm:col-span-3 lg:col-span-2">
|
||||
<label for="state" class="block text-sm font-medium text-gray-700">State / Province</label>
|
||||
<input type="text" name="state" id="state" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
|
||||
</div>
|
||||
|
||||
<div class="col-span-6 sm:col-span-3 lg:col-span-2">
|
||||
<label for="postal_code" class="block text-sm font-medium text-gray-700">ZIP / Postal</label>
|
||||
<input type="text" name="postal_code" id="postal_code" autocomplete="postal-code" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
|
||||
<button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hidden sm:block" aria-hidden="true">
|
||||
<div class="py-5">
|
||||
<div class="border-t border-gray-200"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 sm:mt-0">
|
||||
<div class="md:grid md:grid-cols-3 md:gap-6">
|
||||
<div class="md:col-span-1">
|
||||
<div class="px-4 sm:px-0">
|
||||
<h3 class="text-lg font-medium leading-6 text-gray-900">Notifications</h3>
|
||||
<p class="mt-1 text-sm text-gray-600">
|
||||
Decide which communications you'd like to receive and how.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5 md:mt-0 md:col-span-2">
|
||||
<form action="#" method="POST">
|
||||
<div class="shadow overflow-hidden sm:rounded-md">
|
||||
<div class="px-4 py-5 bg-white space-y-6 sm:p-6">
|
||||
<fieldset>
|
||||
<legend class="text-base font-medium text-gray-900">By Email</legend>
|
||||
<div class="mt-4 space-y-4">
|
||||
<div class="flex items-start">
|
||||
<div class="flex items-center h-5">
|
||||
<input id="comments" name="comments" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
|
||||
</div>
|
||||
<div class="ml-3 text-sm">
|
||||
<label for="comments" class="font-medium text-gray-700">Comments</label>
|
||||
<p class="text-gray-500">Get notified when someones posts a comment on a posting.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start">
|
||||
<div class="flex items-center h-5">
|
||||
<input id="candidates" name="candidates" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
|
||||
</div>
|
||||
<div class="ml-3 text-sm">
|
||||
<label for="candidates" class="font-medium text-gray-700">Candidates</label>
|
||||
<p class="text-gray-500">Get notified when a candidate applies for a job.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start">
|
||||
<div class="flex items-center h-5">
|
||||
<input id="offers" name="offers" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
|
||||
</div>
|
||||
<div class="ml-3 text-sm">
|
||||
<label for="offers" class="font-medium text-gray-700">Offers</label>
|
||||
<p class="text-gray-500">Get notified when a candidate accepts or rejects an offer.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<div>
|
||||
<legend class="text-base font-medium text-gray-900">Push Notifications</legend>
|
||||
<p class="text-sm text-gray-500">These are delivered via SMS to your mobile phone.</p>
|
||||
</div>
|
||||
<div class="mt-4 space-y-4">
|
||||
<div class="flex items-center">
|
||||
<input id="push_everything" name="push_notifications" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
||||
<label for="push_everything" class="ml-3 block text-sm font-medium text-gray-700">
|
||||
Everything
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<input id="push_email" name="push_notifications" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
||||
<label for="push_email" class="ml-3 block text-sm font-medium text-gray-700">
|
||||
Same as email
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<input id="push_nothing" name="push_notifications" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
||||
<label for="push_nothing" class="ml-3 block text-sm font-medium text-gray-700">
|
||||
No push notifications
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
|
||||
<button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
81
src/components/Login.svelte
Normal file
81
src/components/Login.svelte
Normal file
@ -0,0 +1,81 @@
|
||||
<script>
|
||||
import store from "../store.js";
|
||||
store.init();
|
||||
const login = () => {
|
||||
store.login();
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="min-h-screen flex items-center justify-center bg-gray-100">
|
||||
<div class="max-w-md w-full py-12 px-6">
|
||||
<img class="mx-auto h-20 w-auto" src="https://lauf-fuer-kaya.de/Bilder/kaya-logo-quadrat.png" alt="" />
|
||||
<p class="mt-6 text-sm text-center text-gray-900">Log in to your account</p>
|
||||
<div>
|
||||
<div class="rounded-md shadow-sm">
|
||||
<div>
|
||||
<input
|
||||
aria-label="Email address"
|
||||
name="email"
|
||||
type="email"
|
||||
required=""
|
||||
class="border-gray-300 placeholder-gray-500 appearance-none rounded-none relative block w-full px-3 py-2 border text-gray-900 rounded-t-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm"
|
||||
placeholder="Email address"
|
||||
value="" />
|
||||
</div>
|
||||
<div class="-mt-px relative">
|
||||
<input
|
||||
aria-label="Password"
|
||||
name="password"
|
||||
type="password"
|
||||
required=""
|
||||
class="border-gray-300 placeholder-gray-500 appearance-none rounded-none relative block w-full px-3 py-2 border text-gray-900 rounded-b-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm"
|
||||
placeholder="Password" />
|
||||
<div
|
||||
class="absolute inset-y-0 right-0 pr-3 flex items-center text-sm">
|
||||
<a
|
||||
href="https://tailwindui.com/password/reset"
|
||||
class="text-gray-900 underline">Forgot?</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-5">
|
||||
<button
|
||||
on:click={login}
|
||||
type="submit"
|
||||
class="relative block w-full py-2 px-3 border border-transparent rounded-md text-white font-semibold bg-gray-800 hover:bg-gray-700 focus:bg-gray-900 focus:outline-none focus:shadow-outline sm:text-sm">
|
||||
<span class="absolute left-0 inset-y pl-3">
|
||||
<svg
|
||||
class="h-5 w-5 text-gray-500"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
Log in
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 flex items-center">
|
||||
<div class="w-full border-t border-gray-300" />
|
||||
</div>
|
||||
<div class="relative flex justify-center text-sm">
|
||||
<span class="px-2 bg-gray-100 text-gray-500">Don't have an account?</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<a
|
||||
href="/pricing"
|
||||
class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md text-gray-900 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm">
|
||||
Register
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
97
src/components/LoginAlt.svelte
Normal file
97
src/components/LoginAlt.svelte
Normal file
@ -0,0 +1,97 @@
|
||||
<script>
|
||||
import store from "../store.js";
|
||||
store.init();
|
||||
const login = () => {
|
||||
store.login();
|
||||
};
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-md w-full space-y-8">
|
||||
<div>
|
||||
<img
|
||||
class="mx-auto h-12 w-auto"
|
||||
src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg"
|
||||
alt="Workflow" />
|
||||
<h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
|
||||
Sign in to your account
|
||||
</h2>
|
||||
<p class="mt-2 text-center text-sm text-gray-600">
|
||||
Or
|
||||
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">
|
||||
start your 14-day free trial
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<input type="hidden" name="remember" value="true" />
|
||||
<div class="rounded-md shadow-sm -space-y-px">
|
||||
<div>
|
||||
<label for="email-address" class="sr-only">Email address</label>
|
||||
<input
|
||||
id="email-address"
|
||||
name="email"
|
||||
type="email"
|
||||
autocomplete="email"
|
||||
required
|
||||
class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
|
||||
placeholder="Email address" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="password" class="sr-only">Password</label>
|
||||
<input
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
autocomplete="current-password"
|
||||
required
|
||||
class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
|
||||
placeholder="Password" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<input
|
||||
id="remember_me"
|
||||
name="remember_me"
|
||||
type="checkbox"
|
||||
class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" />
|
||||
<label for="remember_me" class="ml-2 block text-sm text-gray-900">
|
||||
Remember me
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="text-sm">
|
||||
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">
|
||||
Forgot your password?
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button
|
||||
on:click="{login}"
|
||||
type="submit"
|
||||
class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||
<span class="absolute left-0 inset-y-0 flex items-center pl-3">
|
||||
<!-- Heroicon name: lock-closed -->
|
||||
<svg
|
||||
class="h-5 w-5 text-indigo-500 group-hover:text-indigo-400"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
Sign in
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
103
src/components/Pagination.svelte
Normal file
103
src/components/Pagination.svelte
Normal file
@ -0,0 +1,103 @@
|
||||
<!-- This example requires Tailwind CSS v2.0+ -->
|
||||
<div
|
||||
class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
|
||||
<div class="flex-1 flex justify-between sm:hidden">
|
||||
<a
|
||||
href="#"
|
||||
class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:text-gray-500">
|
||||
Previous
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:text-gray-500">
|
||||
Next
|
||||
</a>
|
||||
</div>
|
||||
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-gray-700">
|
||||
Showing
|
||||
<span class="font-medium">1</span>
|
||||
to
|
||||
<span class="font-medium">10</span>
|
||||
of
|
||||
<span class="font-medium">97</span>
|
||||
results
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<nav
|
||||
class="relative z-0 inline-flex shadow-sm -space-x-px"
|
||||
aria-label="Pagination">
|
||||
<a
|
||||
href="#"
|
||||
class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
|
||||
<span class="sr-only">Previous</span>
|
||||
<!-- Heroicon name: chevron-left -->
|
||||
<svg
|
||||
class="h-5 w-5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
|
||||
1
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
|
||||
2
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="hidden md:inline-flex relative items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
|
||||
3
|
||||
</a>
|
||||
<span
|
||||
class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
|
||||
...
|
||||
</span>
|
||||
<a
|
||||
href="#"
|
||||
class="hidden md:inline-flex relative items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
|
||||
8
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
|
||||
9
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
|
||||
10
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
|
||||
<span class="sr-only">Next</span>
|
||||
<!-- Heroicon name: chevron-right -->
|
||||
<svg
|
||||
class="h-5 w-5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
aria-hidden="true">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
104
src/components/StatCards.svelte
Normal file
104
src/components/StatCards.svelte
Normal file
@ -0,0 +1,104 @@
|
||||
<div
|
||||
class="flex flex-col lg:flex-row w-full lg:space-x-2 space-y-2 lg:space-y-0 mb-2 lg:mb-4">
|
||||
<div class="w-full lg:w-1/4">
|
||||
<div
|
||||
class="widget w-full p-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">
|
||||
<div class="flex flex-col">
|
||||
<div class="text-xs uppercase font-light text-grey-500">Users</div>
|
||||
<div class="text-xl font-bold">588</div>
|
||||
</div><svg
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
size="24"
|
||||
class="stroke-current text-grey-500"
|
||||
height="24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"><path
|
||||
d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
|
||||
<circle cx="9" cy="7" r="4" />
|
||||
<path d="M23 21v-2a4 4 0 0 0-3-3.87" />
|
||||
<path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full lg:w-1/4">
|
||||
<div
|
||||
class="widget w-full p-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">
|
||||
<div class="flex flex-col">
|
||||
<div class="text-xs uppercase font-light text-grey-500">Sessions</div>
|
||||
<div class="text-xl font-bold">435</div>
|
||||
</div><svg
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
size="24"
|
||||
class="stroke-current text-grey-500"
|
||||
height="24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"><polyline
|
||||
points="22 12 18 12 15 21 9 3 6 12 2 12" /></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full lg:w-1/4">
|
||||
<div
|
||||
class="widget w-full p-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">
|
||||
<div class="flex flex-col">
|
||||
<div class="text-xs uppercase font-light text-grey-500">
|
||||
Bounce rate
|
||||
</div>
|
||||
<div class="text-xl font-bold">40.5%</div>
|
||||
</div><svg
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
size="24"
|
||||
class="stroke-current text-grey-500"
|
||||
height="24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"><path
|
||||
d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
|
||||
<polyline points="15 3 21 3 21 9" />
|
||||
<line x1="10" y1="14" x2="21" y2="3" /></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full lg:w-1/4">
|
||||
<div
|
||||
class="widget w-full p-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">
|
||||
<div class="flex flex-col">
|
||||
<div class="text-xs uppercase font-light text-grey-500">
|
||||
Session duration
|
||||
</div>
|
||||
<div class="text-xl font-bold">1m 24s</div>
|
||||
</div><svg
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
size="24"
|
||||
class="stroke-current text-grey-500"
|
||||
height="24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10" />
|
||||
<polyline points="12 6 12 12 16 14" /></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
84
src/components/Table.svelte
Normal file
84
src/components/Table.svelte
Normal file
@ -0,0 +1,84 @@
|
||||
<!-- This example requires Tailwind CSS v2.0+ -->
|
||||
<div class="flex flex-col">
|
||||
<div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
|
||||
<div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
|
||||
<div
|
||||
class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Name
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Title
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Status
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Role
|
||||
</th>
|
||||
<th scope="col" class="relative px-6 py-3">
|
||||
<span class="sr-only">Edit</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-200">
|
||||
<tr>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-shrink-0 h-10 w-10">
|
||||
<img
|
||||
class="h-10 w-10 rounded-full"
|
||||
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60"
|
||||
alt="" />
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<div class="text-sm font-medium text-gray-900">
|
||||
Jane Cooper
|
||||
</div>
|
||||
<div class="text-sm text-gray-500">
|
||||
jane.cooper@example.com
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="text-sm text-gray-900">
|
||||
Regional Paradigm Technician
|
||||
</div>
|
||||
<div class="text-sm text-gray-500">Optimization</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
|
||||
Active
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
Admin
|
||||
</td>
|
||||
<td
|
||||
class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||
<a
|
||||
href="#"
|
||||
class="text-indigo-600 hover:text-indigo-900">Edit</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- More rows... -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
22
src/components/Tmp.svelte
Normal file
22
src/components/Tmp.svelte
Normal file
@ -0,0 +1,22 @@
|
||||
<script>
|
||||
import { OpenAPI, TrackService } from "@odit/lfk-client";
|
||||
OpenAPI.BASE = "http://localhost:4010";
|
||||
let tracks_promise = TrackService.trackControllerGetAll();
|
||||
</script>
|
||||
|
||||
<h1>Tracks</h1>
|
||||
{#await tracks_promise then tracks}
|
||||
<h4>{tracks.length}</h4>
|
||||
<hr />
|
||||
{#if tracks.length % 2 == 0}
|
||||
<ul>
|
||||
{#each tracks as item}
|
||||
<li>{item.distance}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{:else}
|
||||
{#each tracks as item}<span>{item.distance}</span><br />{/each}
|
||||
{/if}
|
||||
{:catch error}
|
||||
ERORRRRR
|
||||
{/await}
|
||||
22
src/components/Tracks.svelte
Normal file
22
src/components/Tracks.svelte
Normal file
@ -0,0 +1,22 @@
|
||||
<script>
|
||||
import { OpenAPI, TrackService } from "@odit/lfk-client";
|
||||
OpenAPI.BASE = "http://localhost:4010";
|
||||
let tracks_promise = TrackService.trackControllerGetAll();
|
||||
</script>
|
||||
|
||||
<h1>Tracks</h1>
|
||||
{#await tracks_promise then tracks}
|
||||
<h4>{tracks.length}</h4>
|
||||
<hr />
|
||||
{#if tracks.length % 2 == 0}
|
||||
<ul>
|
||||
{#each tracks as item}
|
||||
<li>{item.distance}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{:else}
|
||||
{#each tracks as item}<span>{item.distance}</span><br />{/each}
|
||||
{/if}
|
||||
{:catch error}
|
||||
ERORRRRR
|
||||
{/await}
|
||||
@ -1,7 +1,7 @@
|
||||
import App from './App.svelte';
|
||||
|
||||
const app = new App({
|
||||
target: document.body,
|
||||
target: document.body
|
||||
});
|
||||
|
||||
export default app;
|
||||
|
||||
42
src/store.js
Normal file
42
src/store.js
Normal file
@ -0,0 +1,42 @@
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
const store = () => {
|
||||
const state = {
|
||||
isLoggedIn: false
|
||||
};
|
||||
|
||||
const { subscribe, set, update } = writable(state);
|
||||
|
||||
const methods = {
|
||||
init() {
|
||||
console.log('*: playerStore -> init()');
|
||||
update((state) => {
|
||||
state.isLoggedIn = false;
|
||||
return state;
|
||||
});
|
||||
},
|
||||
|
||||
login() {
|
||||
update((state) => {
|
||||
state.isLoggedIn = true;
|
||||
console.log('login performed');
|
||||
return state;
|
||||
});
|
||||
},
|
||||
logout() {
|
||||
update((state) => {
|
||||
state.isLoggedIn = false;
|
||||
return state;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
subscribe,
|
||||
set,
|
||||
update,
|
||||
...methods
|
||||
};
|
||||
};
|
||||
|
||||
export default store();
|
||||
Loading…
x
Reference in New Issue
Block a user