basic dependencies + first layout

package.json

@@ -6,7 +6,8 @@
     "build": "svite build"
   },
   "dependencies": {
-    "@odit/lfk-client": "^0.0.3"
+    "@odit/lfk-client-js": "^0.0.3",
+    "toastify-js": "^1.9.3"
   },
   "devDependencies": {
     "svelte": "^3.29.7",

src/components/Dashboard.svelte

@@ -38,6 +38,35 @@
               <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>
+              <form class="w-full max-w-xs mr-2 navbar-search">
+                <div class="relative">
+                  <input
+                    type="search"
+                    name="search"
+                    placeholder="Search..."
+                    class="pl-10 pr-5 appearance-none h-10 w-full rounded-full text-sm focus:outline-none" /><button
+                    type="submit"
+                    class="absolute top-0 mt-3 left-0 ml-4"><svg
+                      stroke="currentColor"
+                      fill="none"
+                      stroke-width="2"
+                      viewBox="0 0 24 24"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      class="stroke-current h-4 w-4"
+                      height="1em"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"><circle
+                        cx="11"
+                        cy="11"
+                        r="8" />
+                      <line
+                        x1="21"
+                        y1="21"
+                        x2="16.65"
+                        y2="16.65" /></svg></button>
+                </div>
+              </form>
             </div>
           </div>
         </div>
@@ -250,7 +279,7 @@
       <StatCards />
       <!--  -->
 
-      <!-- <div class="mb-8">
+      <div class="mb-8">
         <Tracks />
       </div>
       <Pagination />
@@ -259,7 +288,7 @@
       </div>
       <div class="mb-8">
         <FormLayout />
-      </div> -->
+      </div>
     </div>
   </main>
 </div>

src/components/LoginAlt.svelte

@@ -12,8 +12,8 @@
     <div>
       <img
         class="mx-auto h-12 w-auto"
-        src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg"
+        src="https://lauf-fuer-kaya.de/Bilder/kaya-logo-quadrat.png"
-        alt="Workflow" />
+        alt="" />
       <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
         Sign in to your account
       </h2>

src/components/Tmp.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { OpenAPI, TrackService } from "@odit/lfk-client";
+  import { OpenAPI, TrackService } from "@odit/lfk-client-js";
   OpenAPI.BASE = "http://localhost:4010";
   let tracks_promise = TrackService.trackControllerGetAll();
 </script>

src/components/Tracks.svelte

@@ -1,11 +1,18 @@
 <script>
-  import { OpenAPI, TrackService } from "@odit/lfk-client";
+  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}
+{#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"
+    role="alert">
+    <p class="font-bold">track data is being loaded...</p>
+    <p class="text-sm">This might take a moment 👀</p>
+  </div>
+{:then tracks}
   <h4>{tracks.length}</h4>
   <hr />
   {#if tracks.length % 2 == 0}
@@ -18,5 +25,10 @@
     {#each tracks as item}<span>{item.distance}</span><br />{/each}
   {/if}
 {:catch error}
-  ERORRRRR
+  <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
+    <span class="inline-block align-middle mr-8">
+      <b class="capitalize">😢 Error</b>
+      {error}
+    </span>
+  </div>
 {/await}

yarn.lock

@@ -65,10 +65,10 @@
     "@nodelib/fs.scandir" "2.1.3"
     fastq "^1.6.0"
 
-"@odit/lfk-client@^0.0.3":
+"@odit/lfk-client-js@^0.0.3":
   version "0.0.3"
-  resolved "https://registry.yarnpkg.com/@odit/lfk-client/-/lfk-client-0.0.3.tgz#26d5ecdb0baaa3afc514659fe51147115da113d3"
+  resolved "https://registry.yarnpkg.com/@odit/lfk-client-js/-/lfk-client-js-0.0.3.tgz#a356f8db6891f51ba11ffb17141f372ebd25d019"
-  integrity sha512-6458HB0dwqqIBkW0XVesg+n5MFDTcIUztISy4FxX/CAKJo3wGG+T2Njn9BOYS5mOv7pQcpxIDYASUKEc0d3ZlA==
+  integrity sha512-FmowcYFeun4us1JEudvPOOsEFd2v2UNhWMIjolXK4sEQ0EcqcuU68ErPZv1ugA4SQUOASSxf1cRNORwNTX2jBw==
   dependencies:
     form-data "^3.0.0"
     node-fetch "^2.6.1"
@@ -2415,6 +2415,11 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
+toastify-js@^1.9.3:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/toastify-js/-/toastify-js-1.9.3.tgz#cab81e077b8a3fa8ee602a7f054568c42a49a516"
+  integrity sha512-v0aXGUy6IbEBWxmoKx7ZCou00dQqEAsjJF86f8b8dNCH4O4L6iEkX3d3WRMVDirBJ+8CxQcHDZuAFD47J/imEw==
+
 toidentifier@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"