Basic statsclient detail

ref #143

src/App.svelte

@@ -73,6 +73,7 @@
   import ScanDetail from "./components/scans/ScanDetail.svelte";
   import Cards from "./components/cards/Cards.svelte";
 	import StatsClients from "./components/statsclients/StatsClients.svelte";
+	import StatsClientDetail from "./components/statsclients/StatsClientDetail.svelte";
   store.init();
 </script>
 
@@ -212,7 +213,7 @@
             <StatsClients />
           </Route>
           <Route path="/:clientid" let:params>
-            <ScanStationDetail {params} />
+            <StatsClientDetail {params} />
           </Route>
         </Route>
         <Route path="/about">

src/components/statsclients/StatsClientDetail.svelte

@@ -1,63 +1,27 @@
 <script>
   import { t, _ } from "svelte-i18n";
   import store from "../../store";
-  import { ScanStationService, TrackService } from "@odit/lfk-client-js";
   import Toastify from "toastify-js";
   import PromiseError from "../base/PromiseError.svelte";
-  import ConfirmScanStationDeletion from "./ConfirmScanStationDeletion.svelte";
-  import Select from "svelte-select";
+  import ConfirmStatsClientDeletion from "./ConfirmStatsClientDeletion.svelte";
+	import { StatsClientService } from "@odit/lfk-client-js";
   let data_loaded = false;
   let modal_open;
-  let delete_station;
+  let delete_client;
   export let params;
   $: delete_triggered = false;
   $: original_data = {};
-  $: editable = {};
-  $: tracks = [];
-  $: track = {};
-  $: changes_performed = !(
-    JSON.stringify(original_data) === JSON.stringify(editable)
-  );
-  $: save_enabled = changes_performed;
-  const promise = ScanStationService.scanStationControllerGetOne(
-    params.stationid
+  const promise = StatsClientService.statsClientControllerGetOne(
+    params.clientid
   ).then((data) => {
     data_loaded = true;
-    data.track = data.track.id;
     original_data = Object.assign(original_data, data);
-    editable = Object.assign(editable, original_data);
-    TrackService.trackControllerGetAll().then((val) => {
-      tracks = val.map((t) => {
-        return { label: t.name || `#{t.id}`, value: t };
-      });
-      track = tracks.find((t) => t.value.id == editable.track);
-    });
   });
-  function submit() {
-    if (data_loaded === true && save_enabled) {
-      Toastify({
-        text: $_("station-is-being-updated"),
-        duration: 2500,
-      }).showToast();
-      ScanStationService.scanStationControllerPut(original_data.id, editable)
-        .then((resp) => {
-          Object.assign(original_data, editable);
-          original_data = original_data;
-          Toastify({
-            text: $_("updated-station"),
-            duration: 2500,
-            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-          }).showToast();
-        })
-        .catch((err) => {});
-    } else {
-    }
-  }
-  function deleteStation() {
-    ScanStationService.scanStationControllerRemove(original_data.id, false)
+  function deleteClient() {
+    StatsClientService.statsClientControllerRemove(original_data.id, false)
       .then((resp) => {
         Toastify({
-          text: $_("station-deleted"),
+          text: $_("statsclient-deleted"),
           duration: 500,
           backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
         }).showToast();
@@ -65,14 +29,14 @@
       })
       .catch((err) => {
         modal_open = true;
-        delete_station = original_data;
+        delete_client = original_data;
       });
   }
 </script>
 
-<ConfirmScanStationDeletion bind:modal_open bind:delete_station />
+<ConfirmStatsClientDeletion bind:modal_open bind:delete_client />
 {#await promise}
-  {$_('loading-station-details')}
+  {$_('loading-statsclient-details')}
 {:then}
   <section class="container p-5 select-none">
     <div class="flex flex-row mb-4">
@@ -90,7 +54,7 @@
                   d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z" /></svg>
             </li>
             <li class="flex items-center ml-2">
-              <a class="mr-2" href="./">{$_('scanstation')}</a><svg
+              <a class="mr-2" href="./">{$_('statsclient')}</a><svg
                 stroke="currentColor"
                 fill="none"
                 stroke-width="2"
@@ -117,10 +81,10 @@
     <div class="mb-8 text-3xl font-extrabold leading-tight">
       #{original_data.id}
       <span data-id="stations_actions_${editable.id}">
-        {#if store.state.jwtinfo.userdetails.permissions.includes('STATION:DELETE')}
+        {#if store.state.jwtinfo.userdetails.permissions.includes('STATSCLIENT:DELETE')}
           {#if delete_triggered}
             <button
-              on:click={deleteStation}
+              on:click={deleteClient}
               class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('confirm-deletion')}</button>
             <button
               on:click={() => {
@@ -137,68 +101,17 @@
               class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('delete-station')}</button>
           {/if}
         {/if}
-        {#if !delete_triggered}
-          <button
-            disabled={!save_enabled}
-            class:opacity-50={!save_enabled}
-            type="button"
-            on:click={submit}
-            class="w-full 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">{$_('save-changes')}</button>
-        {/if}
       </span>
     </div>
     <!--  -->
-    <div class="text-sm w-full">
-      <label
-        for="track"
-        class="block text-sm font-medium text-gray-700">Track</label>
-      <Select
-        containerClasses="rounded-l-md 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"
-        itemFilter={(label, filterText, option) => label
-            .toLowerCase()
-            .includes(
-              filterText.toLowerCase()
-            ) || option.value.id
-            .toString()
-            .startsWith(filterText.toLowerCase())}
-        items={tracks}
-        showChevron={true}
-        placeholder="Search for a track (by name or id)."
-        noOptionsMessage="No track found"
-        bind:selectedValue={track}
-        on:select={(selectedValue) => (editable.track = selectedValue.detail.value.id)}
-        on:clear={() => (track = null)} />
-    </div>
     <div class="text-sm w-full">
       <label
         for="description"
         class="font-medium text-gray-700">{$_('description')}</label>
-      <input
-        autocomplete="off"
-        placeholder={$_('description')}
-        type="text"
-        bind:value={editable.description}
+      <p
         name="description"
-        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" />
-    </div>
-    <div class="text-sm w-full">
-      <label
-        for="enabled"
-        class="ml-1 font-medium text-gray-700">{$_('enabled')}</label>
-      <br />
-      <p class="text-gray-500">
-        <input
-          id="enabled"
-          on:change={() => {
-            editable.enabled = !editable.enabled;
-          }}
-          name="enabled"
-          type="checkbox"
-          checked={editable.enabled}
-          class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
-        {$_('this-scanstation-is')}
-        {#if editable.enabled}{$_('enabled')}{:else}{$_('disabled')}{/if}
-      </p>
+        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" >
+        {original_data.description}</p>
     </div>
   </section>
 {:catch error}