Merge commit 'bb0eb6d1e276186af2c1e5d26abda4413c278981' into dev

close #11

package.json

@@ -13,6 +13,7 @@
 		"gridjs": "^3.2.1",
 		"localforage": "^1.9.0",
 		"svelte-filepond": "^0.0.1",
+		"svelte-focus-trap": "^1.0.1",
 		"svelte-i18n": "^3.3.0",
 		"tailwindcss": "^2.0.2",
 		"tinro": "^0.5.3",

src/App.svelte

@@ -1,5 +1,6 @@
 <script>
   // import TailwindStyles from "./TailwindStyles.svelte";
+  import "toastify-js/src/toastify.css";
   import { Route, router } from "tinro";
   router.subscribe((routeInfo) => {
     // console.log(routeInfo.path);

src/components/AddTrackModal.svelte

@@ -1,16 +1,24 @@
 <script>
   import { _ } from "svelte-i18n";
+  import { focusTrap } from "svelte-focus-trap";
   import { tracks as tracksstore } from "../store.js";
-  let trackname_input;
-  let trackname_input_value;
-  let track_min_duration;
-  let tracklength;
   import { TrackService } from "@odit/lfk-client-js";
-  export let modal_open;
-  let processed_last_submit = true;
   import Toastify from "toastify-js";
   import "toastify-js/src/toastify.css";
+  export let modal_open;
+  let trackname_input;
+  function focus(el) {
+    el.focus();
+  }
+  $: trackname_input_value = "";
+  $: track_min_duration = 0;
+  $: tracklength = 0;
+  $: processed_last_submit = true;
   $: smart_track_min_duration_placeholder = parseInt(tracklength || 0) * 0.369;
+  $: isTracknameValid = trackname_input_value.trim().length === 0;
+  $: isTracklengthValid = tracklength <= 0;
+  $: trackMintimevalid = track_min_duration >= 0;
+  $: createbtnenabled = !isTracknameValid && !isTracklengthValid;
   function submit() {
     if (processed_last_submit === true) {
       processed_last_submit = false;
@@ -24,12 +32,16 @@
         minimumLapTime: track_min_duration,
       })
         .then((result) => {
+          trackname_input_value = "";
+          track_min_duration = 0;
+          tracklength = 0;
+          modal_open = false;
+          //
           Toastify({
             text: $_("track-added"),
             duration: 500,
             backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
           }).showToast();
-          modal_open = false;
           let storeval = [];
           tracksstore.subscribe((val) => {
             storeval = val;
@@ -50,7 +62,7 @@
 </script>
 
 {#if modal_open}
-  <div class="fixed z-10 inset-0 overflow-y-auto">
+  <div class="fixed z-10 inset-0 overflow-y-auto" use:focusTrap>
     <div
       class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
@@ -70,17 +82,13 @@
               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">
               <svg
                 class="h-6 w-6 text-blue-600"
-                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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-              </svg>
+                width="24"
+                height="24"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 640 512"><path
+                  fill="currentColor"
+                  d="M635.7 167.2L556.1 31.7c-8.8-15-28.3-20.1-43.5-11.5l-69 39.1L503.3 161c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L416 75l-55.2 31.3 27.9 47.4c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L333.2 122 278 153.3 337.8 255c2.2 3.7.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9l-59.7-101.7-55.2 31.3 27.9 47.4c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9l-27.9-47.5-55.2 31.3 59.7 101.7c2.2 3.7.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L84.9 262.9l-69 39.1C.7 310.7-4.6 329.8 4.2 344.8l79.6 135.6c8.8 15 28.3 20.1 43.5 11.5L624.1 210c15.2-8.6 20.4-27.8 11.6-42.8z" /></svg>
             </div>
             <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
@@ -97,11 +105,23 @@
                     for="trackname"
                     class="block text-sm font-medium text-gray-700">{$_('track-name')}</label>
                   <input
+                    use:focus
+                    autocomplete="off"
+                    placeholder={$_('track-name')}
+                    class:border-red-500={isTracknameValid}
+                    class:focus:border-red-500={isTracknameValid}
+                    class:focus:ring-red-500={isTracknameValid}
                     bind:value={trackname_input_value}
                     bind:this={trackname_input}
                     type="text"
                     name="trackname"
                     class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                  {#if isTracknameValid}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      Track name must not be empty
+                    </span>
+                  {/if}
                 </div>
                 <div class="col-span-6">
                   <label
@@ -109,6 +129,10 @@
                     class="block text-sm font-medium text-gray-700">{$_('track-length-in-m')}</label>
                   <div class="mt-1 flex rounded-md shadow-sm">
                     <input
+                      autocomplete="off"
+                      class:border-red-500={isTracklengthValid}
+                      class:focus:border-red-500={isTracklengthValid}
+                      class:focus:ring-red-500={isTracklengthValid}
                       bind:value={tracklength}
                       type="number"
                       name="track_length_m"
@@ -117,6 +141,12 @@
                     <span
                       class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm">m</span>
                   </div>
+                  {#if isTracklengthValid}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      Track length must be greater than 0
+                    </span>
+                  {/if}
                 </div>
                 <div class="col-span-6">
                   <label
@@ -124,6 +154,10 @@
                     class="block text-sm font-medium text-gray-700">{$_('minimum-lap-time-in-s')}</label>
                   <div class="mt-1 flex rounded-md shadow-sm">
                     <input
+                      autocomplete="off"
+                      class:border-red-500={!trackMintimevalid}
+                      class:focus:border-red-500={!trackMintimevalid}
+                      class:focus:ring-red-500={!trackMintimevalid}
                       bind:value={track_min_duration}
                       type="number"
                       name="track_min_duration"
@@ -132,6 +166,12 @@
                     <span
                       class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm">s</span>
                   </div>
+                  {#if !trackMintimevalid}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      minimum lap time must be a positive number or 0
+                    </span>
+                  {/if}
                 </div>
               </div>
             </div>
@@ -139,6 +179,8 @@
         </div>
         <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
           <button
+            disabled={!createbtnenabled}
+            class:opacity-50={!createbtnenabled}
             on:click={submit}
             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">

src/components/Login.svelte

@@ -6,7 +6,6 @@
   import { OpenAPI, AuthService } from "@odit/lfk-client-js";
   OpenAPI.BASE = config.baseurl;
   import Toastify from "toastify-js";
-  import "toastify-js/src/toastify.css";
   // ------
   let username = "demo";
   let password = "demo";

src/components/OrgDetail.svelte

@@ -7,7 +7,7 @@
     Orgs
   </span>
   <p class="mb-8 text-lg text-gray-500">
-    configure the tracks/ min-max lap times
+    configure the tracks & minimum lap times
   </p>
   <div class="flex flex-row mb-4">
     <div class="w-full">

src/components/Tracks.svelte

@@ -1,5 +1,6 @@
 <script>
   import { _, json } from "svelte-i18n";
+  import Toastify from "toastify-js";
   import TracksEmptyState from "./TracksEmptyState.svelte";
   import { TrackService } from "@odit/lfk-client-js";
   const tracks_promise = TrackService.trackControllerGetAll();
@@ -7,24 +8,114 @@
   import { Grid, html } from "gridjs";
   import "gridjs/dist/theme/mermaid.css";
   import { tracks as tracksstore } from "../store.js";
-  let trackscache = [];
+  $: trackscache = [];
+  $: blocked = [];
   let table;
   let datatable;
   let datatable_inited = false;
-  let initial_load_done = false;
+  tracksstore.subscribe((val) => {
+    trackscache = val;
+    setTimeout(() => {
+      if (val.length > 0) {
+        renderdatatable();
+      }
+    }, 100);
+  });
   tracks_promise.then((data) => {
     tracksstore.set(data);
-    tracksstore.subscribe((val) => {
-      trackscache = val;
-      if (initial_load_done === false) {
-        initial_load_done = true;
-      }
-      setTimeout(() => {
-        renderdatatable();
-      }, 100);
-    });
-    table_visible = true;
   });
+  window.track__edit_cancel = () => renderdatatable();
+  window.track__edit_save = () => {
+    const trackid = parseInt(window.event.target.getAttribute("data-trackid"));
+    if (blocked.includes(trackid)) {
+      //
+    } else {
+      blocked.push(trackid);
+      const elem = document.querySelector(
+        `[data-id="triggered_table_actions_${trackid}"]`
+      ).parentNode.parentNode.parentNode;
+      Toastify({
+        text: "Track is being updated...",
+        duration: 500,
+      }).showToast();
+      TrackService.trackControllerPut(trackid, {
+        id: trackid,
+        name: elem.childNodes[0].childNodes[0].value,
+        distance: parseInt(elem.childNodes[1].childNodes[0].value),
+        minimumLapTime: parseInt(elem.childNodes[2].childNodes[0].value),
+      })
+        .then((r) => {
+          Toastify({
+            text: "Track was updated!",
+            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+            duration: 1000,
+          }).showToast();
+          blocked = blocked.filter((e) => e !== trackid);
+          document
+            .querySelector(`[data-id="default_table_actions_${trackid}"]`)
+            .classList.remove("hidden");
+          document
+            .querySelector(`[data-id="triggered_table_actions_${trackid}"]`)
+            .classList.add("hidden");
+          //
+          elem.childNodes[0].innerHTML = `<td data-column-id="trackName" class="gridjs-td">${elem.childNodes[0].childNodes[0].value}</td>`;
+          elem.childNodes[1].innerHTML = `<td data-column-id="trackName" class="gridjs-td">${elem.childNodes[1].childNodes[0].value}</td>`;
+          elem.childNodes[2].innerHTML = `<td data-column-id="trackName" class="gridjs-td">${elem.childNodes[2].childNodes[0].value}</td>`;
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    }
+  };
+  window.track__delete_handler = () => {
+    const trackid = parseInt(window.event.target.getAttribute("data-trackid"));
+    document
+      .querySelector(`[data-id="default_table_actions_${trackid}"]`)
+      .classList.add("hidden");
+    document
+      .querySelector(`[data-id="deleteconfirmation_table_actions_${trackid}"]`)
+      .classList.remove("hidden");
+  };
+  window.track__delete_cancel = () => {
+    const trackid = parseInt(window.event.target.getAttribute("data-trackid"));
+    document
+      .querySelector(`[data-id="default_table_actions_${trackid}"]`)
+      .classList.remove("hidden");
+    document
+      .querySelector(`[data-id="deleteconfirmation_table_actions_${trackid}"]`)
+      .classList.add("hidden");
+  };
+  window.track__delete_confirm = () => {
+    const trackid = parseInt(window.event.target.getAttribute("data-trackid"));
+    TrackService.trackControllerRemove(trackid)
+      .then(() => {
+        const newStoreVal = trackscache.filter((obj) => obj.id !== trackid);
+        tracksstore.set(newStoreVal);
+        renderdatatable();
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+  window.track__edit_handler = () => {
+    const trackid = parseInt(window.event.target.getAttribute("data-trackid"));
+    document
+      .querySelector(`[data-id="default_table_actions_${trackid}"]`)
+      .classList.add("hidden");
+    document
+      .querySelector(`[data-id="triggered_table_actions_${trackid}"]`)
+      .classList.remove("hidden");
+    const elem = document.querySelector(
+      `[data-id="triggered_table_actions_${trackid}"]`
+    ).parentNode.parentNode.parentNode;
+    const trackname = elem.childNodes[0].textContent;
+    const tracklength = parseInt(elem.childNodes[1].textContent);
+    const trackmintime = parseInt(elem.childNodes[2].textContent);
+    elem.childNodes[0].innerHTML = `<input type="text" value="${trackname}" name="trackname" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2">`;
+    elem.childNodes[1].innerHTML = `<input type="text" value="${tracklength}" name="tracklength" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2">`;
+    elem.childNodes[2].innerHTML = `<input type="text" value="${trackmintime}" name="trackmintime" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2">`;
+  };
+  //
   function renderdatatable() {
     let tabledata = [];
     trackscache.forEach((track) => {
@@ -33,11 +124,22 @@
         track.distance,
         track.minimumLapTime || 0,
         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>
+        <div class="hidden" data-id="triggered_table_actions_${track.id}">
+          <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-400 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${track.id}" onclick="track__edit_save()">Save</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" data-trackid="${track.id}" onclick="track__edit_cancel()">Cancel</button>
+        </div>
+        <div data-id="default_table_actions_${track.id}">
+          <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" data-trackid="${track.id}" onclick="track__edit_handler()">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" data-trackid="${track.id}" onclick="track__delete_handler()">Delete</button>
+        </div>
+        <div class="hidden" data-id="deleteconfirmation_table_actions_${track.id}">
+          <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" data-trackid="${track.id}" onclick="track__delete_cancel()">Cancel</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" data-trackid="${track.id}" onclick="track__delete_confirm()">Confirm</button>
+        </div>
       `),
       ]);
     });
+
     if (datatable_inited === false) {
       datatable = new Grid({
         columns: [
@@ -61,10 +163,9 @@
       datatable.updateConfig({ data: tabledata }).forceRender();
     }
   }
-  let table_visible = false;
 </script>
 
-{#if table_visible}
+{#if trackscache.length > 0}
   <div bind:this={table} />
 {/if}
 {#await tracks_promise}
@@ -74,10 +175,8 @@
     <p class="font-bold">{$_('track-data-is-being-loaded')}</p>
     <p class="text-sm">{$_('this-might-take-a-moment')}</p>
   </div>
-{:then tracks}
-  {#if tracks.length > 0}
-    <!--  -->
-  {:else}
+{:then}
+  {#if trackscache.length === 0}
     <TracksEmptyState />
   {/if}
 {:catch error}

src/components/TracksEmptyState.svelte

@@ -253,17 +253,7 @@
       d="M714.88 703.47l18.16-4.26v4.26l-18.16 4.26v-4.26zM931.72 628.54l18.16-4.26v4.26l-18.16 4.25v-4.25z" /></svg>
   <p class="mb-16 text-lg text-gray-500">
     <span class="font-bold">{$_('no-tracks-added-yet')}</span><br />
-    <span
-      on:click={() => {
-        modal_open = true;
-      }}
-      class="underline text-blue-500 cursor-pointer">{$_('add-your-first-track')}</span>
-    <br />
-    <span
-      on:click={() => {
-        modal_open = true;
-      }}
-      class="cursor-pointer inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">{$_('add-your-first-track')}</span>
+    <span>{$_('add-your-first-track')}</span>
   </p>
 </div>
 

src/components/TracksOverview.svelte

@@ -18,7 +18,7 @@
     </button>
   </span>
   <p class="mb-8 text-lg text-gray-500">
-    configure the tracks/ min-max lap times
+    configure the tracks & minimum lap times
   </p>
   <Tracks />
 </section>