🌍 translations

ref #11

src/components/AddTrackModal.svelte

@@ -1,16 +1,42 @@
 <script>
   import { _ } from "svelte-i18n";
-  import { onMount } from "svelte";
   let trackname_input;
   let trackname_input_value;
   let tracklength;
+  import { TrackService } from "@odit/lfk-client-js";
   export let modal_open;
-  onMount(() => {
+  let processed_last_submit = true;
-    // trackname_input.focus();
+  import Toastify from "toastify-js";
-  });
+  import "toastify-js/src/toastify.css";
   function submit() {
-    console.log(trackname_input_value);
+    if (processed_last_submit === true) {
-    console.log(tracklength);
+      processed_last_submit = false;
+      const toast = Toastify({
+        text: $_("track-is-being-added"),
+        duration: -1,
+      }).showToast();
+      TrackService.trackControllerPost({
+        distance: parseInt(tracklength),
+        name: trackname_input_value,
+      })
+        .then((result) => {
+          console.log(result);
+          Toastify({
+            text: $_("track-added"),
+            duration: 500,
+            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+          }).showToast();
+          modal_open = false;
+        })
+        .catch((err) => {
+          //
+        })
+        .finally(() => {
+          processed_last_submit = true;
+          //
+          toast.hideToast();
+        });
+    }
   }
 </script>
 
@@ -18,34 +44,12 @@
   <div class="fixed z-10 inset-0 overflow-y-auto">
     <div
       class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-      <!--
-      Background overlay, show/hide based on modal state.
-
-      Entering: "ease-out duration-300"
-        From: "opacity-0"
-        To: "opacity-100"
-      Leaving: "ease-in duration-200"
-        From: "opacity-100"
-        To: "opacity-0"
-    -->
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div class="absolute inset-0 bg-gray-500 opacity-75" />
       </div>
-
-      <!-- This element is to trick the browser into centering the modal contents. -->
       <span
         class="hidden sm:inline-block sm:align-middle sm:h-screen"
         aria-hidden="true">&#8203;</span>
-      <!--
-      Modal panel, show/hide based on modal state.
-
-      Entering: "ease-out duration-300"
-        From: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-        To: "opacity-100 translate-y-0 sm:scale-100"
-      Leaving: "ease-in duration-200"
-        From: "opacity-100 translate-y-0 sm:scale-100"
-        To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-    -->
       <div
         class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
         role="dialog"
@@ -55,7 +59,6 @@
           <div class="sm:flex sm:items-start">
             <div
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
-              <!-- Heroicon name: exclamation -->
               <svg
                 class="h-6 w-6 text-blue-600"
                 xmlns="http://www.w3.org/2000/svg"

src/components/Tracks.svelte

@@ -4,14 +4,21 @@
   import { TrackService } from "@odit/lfk-client-js";
   const tracks_promise = TrackService.trackControllerGetAll();
   import { getlang } from "./datatable_i18n";
-  import { Grid } from "gridjs";
+  import { Grid, html } from "gridjs";
   import "gridjs/dist/theme/mermaid.css";
   //
   let table;
   tracks_promise.then((data) => {
     let tabledata = [];
     data.forEach((track) => {
-      tabledata.push([track.name, track.distance, "TODO: edit,delete"]);
+      tabledata.push([
+        track.name,
+        track.distance,
+        html(`
+        <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-400 text-base font-medium text-white sm:w-auto sm:text-sm">Edit</button>
+        <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-500 text-base font-medium text-white sm:w-auto sm:text-sm">Delete</button>
+      `),
+      ]);
     });
     const datatable = new Grid({
       columns: [$_("track-name"), $_("track-length-in-m"), "Action"],

src/components/TracksEmptyState.svelte

@@ -1,14 +1,7 @@
 <script>
   import { _ } from "svelte-i18n";
-  import store from "../store.js";
-  import { TrackService } from "@odit/lfk-client-js";
   import AddTrackModal from "./AddTrackModal.svelte";
-  let tracks_promise = TrackService.trackControllerGetAll();
   let modal_open = false;
-  function getNewID() {
-    console.log("got new id");
-    return Date.now();
-  }
 </script>
 
 <div class="text-center items-center justify-center">

src/components/TracksOverview.svelte

@@ -1,14 +1,25 @@
 <script>
   import { _ } from "svelte-i18n";
+  import AddTrackModal from "./AddTrackModal.svelte";
+  let modal_open = false;
   import Tracks from "./Tracks.svelte";
 </script>
 
 <section class="container py-10 mx-auto sm:px-2">
   <span class="mb-1 text-3xl font-extrabold leading-tight text-gray-900">
     Tracks
+    <button
+      on:click={() => {
+        modal_open = true;
+      }}
+      type="button"
+      class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
+      Create Track
+    </button>
   </span>
   <p class="mb-16 text-lg text-gray-500">
     configure the tracks/ min-max lap times
   </p>
   <Tracks />
 </section>
+<AddTrackModal bind:modal_open />

src/locales/en.json

@@ -59,5 +59,7 @@
   "please-provide-the-required-information-to-add-a-new-track": "Please provide the required information to add a new track.",
   "create-a-new-track": "Create a new Track",
   "dashboard-greeting": "hello there",
-  "dashboard-title": "Dashboard"
+  "dashboard-title": "Dashboard",
+  "track-added": "Track added",
+  "track-is-being-added": "Track is being added..."
 }