From 4633a9b3aeec136ad6f434fa46a3925b37ac5524 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Sat, 19 Dec 2020 16:09:22 +0100
Subject: [PATCH] i18n fix + more pages

---
 src/App.svelte                  |  5 ++-
 src/components/Dashboard.svelte | 72 ++++++++++++++++++++++++++++-----
 src/components/Footer.svelte    | 13 ++++++
 src/components/Login.svelte     |  5 ++-
 src/components/NotFound.svelte  | 13 ++++--
 src/components/Tracks.svelte    |  2 +-
 src/locales/en.json             |  6 ++-
 7 files changed, 97 insertions(+), 19 deletions(-)
 create mode 100644 src/components/Footer.svelte

diff --git a/src/App.svelte b/src/App.svelte
index 843bb950..67bf245d 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -11,6 +11,7 @@
   //
   import Login from "./components/Login.svelte";
   import Dashboard from "./components/Dashboard.svelte";
+  import Footer from "./components/Footer.svelte";
   import Tracks from "./components/Tracks.svelte";
   // import Profile from "./components/Profile.svelte";
   import store from "./store.js";
@@ -19,8 +20,8 @@
 </script>
 
 {#if logged_in === true}
-  <Tracks />
-  <!-- <Dashboard /> -->
+  <Dashboard />
+  <Footer />
   <!-- <Profile /> -->
 {:else}
   <Login />
diff --git a/src/components/Dashboard.svelte b/src/components/Dashboard.svelte
index 01497d4b..51fe508f 100644
--- a/src/components/Dashboard.svelte
+++ b/src/components/Dashboard.svelte
@@ -1,11 +1,12 @@
 <script>
   import { _ } from "svelte-i18n";
-  // import StatCards from "./StatCards.svelte";
+  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;
@@ -133,17 +134,17 @@
                   <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">{$_('signout')}</a>
                 </div>
               {/if}
             </div>
@@ -203,7 +204,10 @@
 
       Open: "block", closed: "hidden"
     -->
-    <div class="md:hidden" class:block={mobile_menu_opened === true} class:hidden={mobile_menu_opened === false}>
+    <div
+      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">
         <a
           href="/"
@@ -289,11 +293,61 @@
   </div>
   <main>
     <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
-      <!-- <StatCards /> -->
-      <div class="mb-8"><Tracks /></div>
+      <StatCards />
+      <div class="mb-8">
+        <Tracks />
+      </div>
       <Pagination />
-      <div class="mb-8"><Table /></div>
-      <div class="mb-8"><FormLayout /></div>
+      <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>
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
new file mode 100644
index 00000000..005b904c
--- /dev/null
+++ b/src/components/Footer.svelte
@@ -0,0 +1,13 @@
+<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>
diff --git a/src/components/Login.svelte b/src/components/Login.svelte
index dea508d6..0b6ff21f 100644
--- a/src/components/Login.svelte
+++ b/src/components/Login.svelte
@@ -64,11 +64,12 @@
 <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"
+      style="height:10rem;"
+      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">
-      {$_('log_in_to_your_account')}
+      {$_('application_name')}
     </p>
     <p class="mt-6 text-sm text-center text-gray-900">
       {$_('log_in_to_your_account')}
diff --git a/src/components/NotFound.svelte b/src/components/NotFound.svelte
index b7887739..863c7f0b 100644
--- a/src/components/NotFound.svelte
+++ b/src/components/NotFound.svelte
@@ -1,16 +1,21 @@
+<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">404</div>
+        <div class="text-black text-5xl md:text-15xl font-black">
+          {$_('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">
-          Sorry, the page you are looking for could not be found.
+          {$_('404message')}
         </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">Go
-          Home</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>
       </div>
     </div>
     <div
diff --git a/src/components/Tracks.svelte b/src/components/Tracks.svelte
index fc2abca6..0f833042 100644
--- a/src/components/Tracks.svelte
+++ b/src/components/Tracks.svelte
@@ -5,7 +5,7 @@
   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"
diff --git a/src/locales/en.json b/src/locales/en.json
index 559decce..8a3ebcb0 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -12,5 +12,9 @@
   "email_address_or_username": "Email / username",
   "tracks": "Tracks",
   "signout": "Sign out",
-  "hallo": "hallo"
+  "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"
 }