src/App.svelte

@@ -11,9 +11,7 @@
   //
   import Login from "./components/Login.svelte";
   import Dashboard from "./components/Dashboard.svelte";
-  import Footer from "./components/Footer.svelte";
+  import Profile from "./components/Profile.svelte";
-  import Tracks from "./components/Tracks.svelte";
-  // import Profile from "./components/Profile.svelte";
   import store from "./store.js";
   store.init();
   $: logged_in = $store.isLoggedIn;
@@ -21,7 +19,6 @@
 
 {#if logged_in === true}
   <Dashboard />
-  <Footer />
   <!-- <Profile /> -->
 {:else}
   <Login />

src/components/Dashboard.svelte

@@ -1,15 +1,12 @@
 <script>
-  import { _ } from "svelte-i18n";
   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";
   import BreadcrumbNav from "./BreadcrumbNav.svelte";
-import NotFound from "./NotFound.svelte";
   //
   let isProfileActionsVisible = false;
-  let mobile_menu_opened = false;
 </script>
 
 <div>
@@ -134,17 +131,17 @@ import NotFound from "./NotFound.svelte";
                   <a
                     href="/profile"
                     class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
-                    role="menuitem">{$_('your_profile')}</a>
+                    role="menuitem">$_('your_profile')</a>
 
                   <a
                     href="/profile/settings"
                     class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
-                    role="menuitem">{$_('settings')}</a>
+                    role="menuitem">$_('settings')</a>
 
                   <a
                     href="/logout"
                     class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
-                    role="menuitem">{$_('signout')}</a>
+                    role="menuitem">$_('sign-out')</a>
                 </div>
               {/if}
             </div>
@@ -153,9 +150,6 @@ import NotFound from "./NotFound.svelte";
         <div class="-mr-2 flex md:hidden">
           <!-- Mobile menu button -->
           <button
-            on:click={() => {
-              mobile_menu_opened = !mobile_menu_opened;
-            }}
             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>
             <!--
@@ -204,13 +198,11 @@ import NotFound from "./NotFound.svelte";
 
       Open: "block", closed: "hidden"
     -->
-    <div
+    <div class="hidden md:hidden">
-      class="md:hidden"
-      class:block={mobile_menu_opened === true}
-      class:hidden={mobile_menu_opened === false}>
       <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="/"
+          href="#"
           class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium">Dashboard</a>
 
         <a
@@ -276,24 +268,27 @@ import NotFound from "./NotFound.svelte";
 
           <a
             href="#"
-            class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">$_('signout')</a>
+            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">
+
+  <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> -->
+  </header>
-  <div class="shadow px-6 pt-4 pb-1">
-    <BreadcrumbNav />
-  </div>
   <main>
     <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
+      <BreadcrumbNav/>
+      <!--  -->
       <StatCards />
+      <!--  -->
+
       <div class="mb-8">
         <Tracks />
       </div>
@@ -301,53 +296,9 @@ import NotFound from "./NotFound.svelte";
       <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>
-      <NotFound />
     </div>
   </main>
 </div>

src/components/Footer.svelte

@@ -1,13 +0,0 @@
-<script>
-  import { _ } from "svelte-i18n";
-</script>
-
-<footer class="text-gray-700 body-font">
-  <div
-    class="container px-5 py-8 mx-auto flex items-center sm:flex-row flex-col">
-    <p
-      class="text-sm text-gray-500 sm:ml-4 sm:pl-4 sm:py-2 sm:mt-0 mt-4">
-      proudly powered by <a class="underline" href="https://odit.services" rel="noopener,noreferrer" target="_blank">ODIT.Services</a>
-    </p>
-  </div>
-</footer>

src/components/Login.svelte

@@ -1,11 +1,11 @@
 <script>
   import { _ } from "svelte-i18n";
   import store from "../store.js";
-  store.init();
   //
-  import { OpenAPI, AuthService } from "@odit/lfk-client-js";
+  import { OpenAPI, AuthService, TrackService } from "@odit/lfk-client-js";
   OpenAPI.BASE = "http://localhost:4010";
   //
+  store.init();
   //
   import Toastify from "toastify-js";
   import "toastify-js/src/toastify.css";
@@ -19,7 +19,7 @@
       last_loginclick_processed = false;
       Toastify({
         text: $_("login_is_checked"),
-        duration: 500,
+        duration: 1500,
       }).showToast();
       console.log(usersUsername);
       console.log(usersPassword);
@@ -34,14 +34,14 @@
           store.login(result.access_token);
           Toastify({
             text: $_("welcome_wavinghand"),
-            duration: 500,
+            duration: 1500,
             backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
           }).showToast();
         })
         .catch((err) => {
           Toastify({
             text: $_("error_on_login"),
-            duration: 500,
+            duration: 1500,
             backgroundColor:
               "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
           }).showToast();
@@ -64,12 +64,11 @@
 <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
-      style="height:10rem;"
+      class="mx-auto h-20 w-auto"
-      class="mx-auto"
       src="https://lauf-fuer-kaya.de/Bilder/kaya-logo-quadrat.png"
       alt="" />
     <p class="mt-6 text-lg text-center font-bold text-gray-900">
-      {$_('application_name')}
+      {$_('log_in_to_your_account')}
     </p>
     <p class="mt-6 text-sm text-center text-gray-900">
       {$_('log_in_to_your_account')}

src/components/NotFound.svelte

@@ -1,21 +1,16 @@
-<script>
-  import { _ } from "svelte-i18n";
-</script>
-
 <body class="antialiased font-sans">
   <div class="md:flex min-h-screen">
     <div class="w-full md:w-1/2 bg-white flex items-center justify-center ">
       <div class="max-w-sm m-8">
-        <div class="text-black text-5xl md:text-15xl font-black">
+        <div class="text-black text-5xl md:text-15xl font-black">404</div>
-          {$_('404title')}
-        </div>
         <div class="w-16 h-1 bg-purple-light my-3 md:my-6" />
         <p
           class="text-grey-darker text-2xl md:text-3xl font-light mb-8 leading-normal">
-          {$_('404message')}
+          Sorry, the page you are looking for could not be found.
         </p>
         <button
-          class="bg-transparent text-grey-darkest font-bold uppercase tracking-wide py-3 px-6 border-2 border-grey-light hover:border-grey rounded-lg">{$_('goback')}</button>
+          class="bg-transparent text-grey-darkest font-bold uppercase tracking-wide py-3 px-6 border-2 border-grey-light hover:border-grey rounded-lg">Go
+          Home</button>
       </div>
     </div>
     <div

src/components/Test.svelte

@@ -1,5 +0,0 @@
-<script>
-  import { _, locale } from "svelte-i18n";
-</script>
-
-<div>$locale $_('hallo')</div>

src/components/Tmp.svelte

@@ -0,0 +1,22 @@
+<script>
+  import { OpenAPI, TrackService } from "@odit/lfk-client-js";
+  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}

src/components/Tracks.svelte

@@ -1,11 +1,10 @@
 <script>
-  import { _ } from "svelte-i18n";
+  import { OpenAPI, TrackService } from "@odit/lfk-client-js";
-  import store from "../store.js";
+  OpenAPI.BASE = "http://localhost:4010";
-  import { TrackService } from "@odit/lfk-client-js";
   let tracks_promise = TrackService.trackControllerGetAll();
 </script>
 
-<h1>{$_('tracks')}</h1>
+<h1>Tracks</h1>
 {#await tracks_promise}
   <div
     class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
@@ -15,6 +14,7 @@
   </div>
 {:then tracks}
   {#if tracks.length > 0}
+    <!-- content here -->
     <h4>{tracks.length}</h4>
     <hr />
     <ul>

src/locales/de.json

@@ -6,8 +6,8 @@
   "welcome_wavinghand": "Willkommen 👋",
   "error_on_login": "😢Fehler beim Login",
   "settings": "Einstellungen",
+  "sign-out": "Abmelden",
   "your_profile": "Dein Profil",
   "password": "Passwort",
-  "email_address_or_username": "E-Mail-Addresse/ Benutzername",
+  "email_address_or_username": "E-Mail-Addresse/ Benutzername"
-  "signout": "Abmelden"
 }

src/locales/en.json

@@ -8,13 +8,7 @@
   "login_is_checked": "Login is being checked...",
   "error_on_login": "Error on login",
   "settings": "Settings",
+  "sign-out": "Sign out",
   "your_profile": "Your Profile",
-  "email_address_or_username": "Email / username",
+  "email_address_or_username": "Email / username"
-  "tracks": "Tracks",
-  "signout": "Sign out",
-  "hallo": "hallo",
-  "404message": "Sorry, the page you are looking for could not be found.",
-  "404title": "Error 404",
-  "goback": "Go Home",
-  "application_name": "Lauf für Kaya! - Admin"
 }