Added basic scan overview

ref #92

src/components/scans/Scans.svelte

@@ -2,8 +2,8 @@
   import { _ } from "svelte-i18n";
   import store from "../../store";
   // import AddDonationModal from "./AddDonationModal.svelte";
-  // import DonationsOverview from "./DonationsOverview.svelte";
+  import ScansOverview from "./ScansOverview.svelte";
-  $: current_donations = [];
+  $: current_scans = [];
   export let modal_open = false;
 </script>
 
@@ -21,9 +21,9 @@
       </button>
     {/if}
   </span>
-  <!-- <DonationsOverview bind:current_donations /> -->
+  <ScansOverview bind:current_scans />
 </section>
 
 {#if store.state.jwtinfo.userdetails.permissions.includes('SCAN:CREATE')}
-  <!-- <AddDonationModal bind:current_donations bind:modal_open /> -->
+  <!-- <AddDonationModal bind:current_scans bind:modal_open /> -->
 {/if}

src/components/scans/ScansOverview.svelte

@@ -1,15 +1,15 @@
 <script>
   import { getLocaleFromNavigator, _ } from "svelte-i18n";
-  import { DonationService, DonorService } from "@odit/lfk-client-js";
+  import { DonationService, DonorService, ScanService } from "@odit/lfk-client-js";
   import store from "../../store";
   import Toastify from "toastify-js";
   import ScansEmptyState from "./ScansEmptyState.svelte";
   $: searchvalue = "";
   $: active_deletes = [];
-  export let current_donations = [];
+  export let current_scans = [];
-  const donations_promise = DonationService.donationControllerGetAll().then(
+  const scans_promise = ScanService.scanControllerGetAll().then(
     (val) => {
-      current_donations = val;
+      current_scans = val;
     }
   );
   function should_display_based_on_id(id) {
@@ -20,16 +20,16 @@
   }
 </script>
 
-{#if store.state.jwtinfo.userdetails.permissions.includes('DONATION:GET')}
+{#if store.state.jwtinfo.userdetails.permissions.includes('SCAN:GET')}
-  {#await donations_promise}
+  {#await scans_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">donations are being loaded</p>
+      <p class="font-bold">Scans are being loaded</p>
       <p class="text-sm">{$_('this-might-take-a-moment')}</p>
     </div>
   {:then}
-    {#if current_donations.length === 0}
+    {#if current_scans.length === 0}
       <ScansEmptyState />
     {:else}
       <input
@@ -43,11 +43,6 @@
         <table class="divide-y divide-gray-200 w-full">
           <thead class="bg-gray-50">
             <tr>
-              <th
-                scope="col"
-                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                {$_('donor')}
-              </th>
               <th
                 scope="col"
                 class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
@@ -56,12 +51,22 @@
               <th
                 scope="col"
                 class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                {$_('amount-per-kilometer')}
+                Distance
               </th>
               <th
                 scope="col"
                 class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                {$_('donation-amount')}
+                Status
+              </th>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Track
+              </th>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Station
               </th>
               <th scope="col" class="relative px-6 py-3">
                 <span class="sr-only">{$_('action')}</span>
@@ -69,95 +74,108 @@
             </tr>
           </thead>
           <tbody class="divide-y divide-gray-200">
-            {#each current_donations as donation}
+            {#each current_scans as scan}
-              {#if donation.donor.firstname
+            <!-- TODO: Build the real filter -->
+              {#if scan.donor.firstname
                 .toLowerCase()
                 .includes(
                   searchvalue.toLowerCase()
-                ) || donation.donor.middlename
+                ) || scan.donor.middlename
                   .toLowerCase()
                   .includes(
                     searchvalue.toLowerCase()
-                  ) || donation.donor.lastname
+                  ) || scan.donor.lastname
                   .toLowerCase()
                   .includes(
                     searchvalue.toLowerCase()
-                  ) || donation.runner?.firstname
+                  ) || scan.runner?.firstname
                   .toLowerCase()
                   .includes(
                     searchvalue.toLowerCase()
-                  ) || donation.runner?.middlename
+                  ) || scan.runner?.middlename
                   .toLowerCase()
                   .includes(
                     searchvalue.toLowerCase()
-                  ) || donation.runner?.lastname
+                  ) || scan.runner?.lastname
                   .toLowerCase()
                   .includes(
                     searchvalue.toLowerCase()
-                  ) || should_display_based_on_id(donation.id)}
+                  ) || should_display_based_on_id(scan.id)}
-                <tr data-rowid="donation_{donation.id}">
+                <tr data-rowid="scan_{scan.id}">
                   <td class="px-6 py-4 whitespace-nowrap">
                     <div class="flex items-center">
                       <a
-                        href="../donors/{donation.donor.id}"
+                        href="../runners/{scan.runner.id}"
-                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{donation.donor.firstname}
+                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{scan.runner.firstname}
-                        {donation.donor.middlename || ''}
+                        {scan.runner.middlename || ''}
-                        {donation.donor.lastname}</a>
+                        {scan.runner.lastname}</a>
                     </div>
                   </td>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    {#if donation.runner}
-                      <div class="text-sm font-medium text-gray-900">
-                        <a
-                          href="../runners/{donation.runner.id}"
-                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{donation.runner.firstname}
-                          {donation.runner.middlename || ''}
-                          {donation.runner.lastname}</a>
-                      </div>
-                    {:else}
-                      <div class="text-sm font-medium text-gray-900">
-                        {$_('fixed-donation')}
-                      </div>
-                    {/if}
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap">
-                    {#if donation.amountPerDistance}
-                      <div class="text-sm font-medium text-gray-900">
-                        {(donation.amountPerDistance / 100)
-                          .toFixed(2)
-                          .toLocaleString('de-DE', { valute: 'EUR' })}€
-                      </div>
-                    {:else}
-                      <div class="text-sm font-medium text-gray-900">
-                        {$_('fixed-donation')}
-                      </div>
-                    {/if}
-                  </td>
                   <td class="px-6 py-4 whitespace-nowrap">
                     <div class="text-sm font-medium text-gray-900">
-                      {(donation.amount / 100)
+                      {#if scan.distance < 1000}
-                        .toFixed(2)
+                      {scan.distance}m
-                        .toLocaleString('de-DE', { valute: 'EUR' })}€
+                      {:else}
+                      {(scan.distance / 1000)}km
+                      {/if}
                     </div>
                   </td>
-                  {#if active_deletes[donation.id] === true}
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="flex items-center">
+                      {#if scan.valid}
+                      <span
+                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Valid</span>
+                    {:else}
+                      <span
+                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Invalid</span>
+                    {/if}
+                      </div>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    {#if scan.track}
+                      <div class="text-sm font-medium text-gray-900">
+                        <a
+                          href="../tracks"
+                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{scan.track.name}
+                      </div>
+                    {:else}
+                      <div class="text-sm font-medium text-gray-900">
+                        Scan with fixed distance
+                      </div>
+                    {/if}
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    {#if scan.station}
+                      <div class="text-sm font-medium text-gray-900">
+                        <a
+                          href="../scanstations/{scan.station.id}"
+                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{scan.station.description || "#"+ scan.station.id}
+                      </div>
+                    {:else}
+                      <div class="text-sm font-medium text-gray-900">
+                        Scan with fixed distance
+                      </div>
+                    {/if}
+                  </td>
+                  
+                  {#if active_deletes[scan.id] === true}
                     <td
                       class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                       <button
                         on:click={() => {
-                          active_deletes[donation.id] = false;
+                          active_deletes[scan.id] = false;
                         }}
                         tabindex="0"
                         class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
                       <button
                         on:click={() => {
-                          DonationService.donationControllerRemove(donation.id, false).then(
+                          ScanService.scanControllerRemove(scan.id, false).then(
                             (resp) => {
-                              current_donations = current_donations.filter(
+                              current_scans = current_scans.filter(
-                                (obj) => obj.id !== donation.id
+                                (obj) => obj.id !== scan.id
                               );
                               Toastify({
-                                text: 'Donation deleted',
+                                text: 'Scan deleted',
                                 duration: 500,
                                 backgroundColor:
                                   'linear-gradient(to right, #00b09b, #96c93d)',
@@ -172,12 +190,12 @@
                     <td
                       class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                       <a
-                        href="./{donation.id}"
+                        href="./{scan.id}"
                         class="text-indigo-600 hover:text-indigo-900">{$_('details')}</a>
-                      {#if store.state.jwtinfo.userdetails.permissions.includes('DONATION:DELETE')}
+                      {#if store.state.jwtinfo.userdetails.permissions.includes('SCAN:DELETE')}
                         <button
                           on:click={() => {
-                            active_deletes[donation.id] = true;
+                            active_deletes[scan.id] = true;
                           }}
                           tabindex="0"
                           class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>