formatting, full migration to svelte-french-toast

src/components/scans/ScanDetail.svelte

@@ -1,11 +1,8 @@
 <script>
   import { _ } from "svelte-i18n";
   import store from "../../store";
-  import {
-    RunnerService,
-    ScanService,
-  } from "@odit/lfk-client-js";
-  import Toastify from "toastify-js";
+  import { RunnerService, ScanService } from "@odit/lfk-client-js";
+  
   import PromiseError from "../base/PromiseError.svelte";
   import Select from "svelte-select";
   let data_loaded = false;
@@ -31,14 +28,12 @@
       original_data = Object.assign(original_data, data);
       original_data.runner = original_data.runner.id;
       editable = Object.assign(editable, original_data);
-      RunnerService.runnerControllerGetAll().then(
-        (val) => {
-          current_runners = val.map((r) => {
-            return { label: getRunnerLabel(r), value: r };
-          });
-          runner = current_runners.find(r => r.value.id == editable.runner);
-        }
-      );
+      RunnerService.runnerControllerGetAll().then((val) => {
+        current_runners = val.map((r) => {
+          return { label: getRunnerLabel(r), value: r };
+        });
+        runner = current_runners.find((r) => r.value.id == editable.runner);
+      });
     }
   );
   const getRunnerLabel = (option) =>
@@ -49,10 +44,7 @@
 
   function submit() {
     if (data_loaded === true && save_enabled) {
-      Toastify({
-        text: $_('scan-is-being-updated'),
-        duration: 2500,
-      }).showToast();
+      toast($_("scan-is-being-updated"));
       let postdata = {};
       if (original_data.responseType === "TRACKSCAN") {
         postdata = Object.assign(postdata, editable);
@@ -61,11 +53,7 @@
           .then((resp) => {
             Object.assign(original_data, editable);
             original_data = original_data;
-            Toastify({
-              text: $_('updated-scan'),
-              duration: 2500,
-              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-            }).showToast();
+            toast.success($_("updated-scan"));
           })
           .catch((err) => {});
       } else {
@@ -74,11 +62,7 @@
           .then((resp) => {
             Object.assign(original_data, editable);
             original_data = original_data;
-            Toastify({
-              text: $_('updated-scan'),
-              duration: 2500,
-              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-            }).showToast();
+            toast.success($_("updated-scan"));
           })
           .catch((err) => {});
       }
@@ -88,11 +72,7 @@
   function deleteScan() {
     ScanService.scanControllerRemove(original_data.id, false)
       .then((resp) => {
-        Toastify({
-          text: $_('deleted-scan'),
-          duration: 500,
-          backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-        }).showToast();
+        toast($_("deleted-scan"));
         location.replace("./");
       })
       .catch((err) => {
@@ -100,11 +80,25 @@
         delete_scan = original_data;
       });
   }
-  function format_laptime(laptime){
-    if(laptime == 0 || laptime == null){return $_('first-scan-of-the-day')}
-    if(laptime < 60){return `${laptime}s`}
-    if(laptime < 3600){return `${Math.floor(laptime / 60)}min ${laptime - (Math.floor(laptime / 60)*60)}s`}
-    return `${Math.floor(laptime / 3600)}h ${laptime - (Math.floor(laptime / 3600)*3600)}min ${laptime - (Math.floor(laptime / 3600)*3600) - (Math.floor(laptime / 60)*60)}`
+  function format_laptime(laptime) {
+    if (laptime == 0 || laptime == null) {
+      return $_("first-scan-of-the-day");
+    }
+    if (laptime < 60) {
+      return `${laptime}s`;
+    }
+    if (laptime < 3600) {
+      return `${Math.floor(laptime / 60)}min ${
+        laptime - Math.floor(laptime / 60) * 60
+      }s`;
+    }
+    return `${Math.floor(laptime / 3600)}h ${
+      laptime - Math.floor(laptime / 3600) * 3600
+    }min ${
+      laptime -
+      Math.floor(laptime / 3600) * 3600 -
+      Math.floor(laptime / 60) * 60
+    }`;
   }
 </script>
 
@@ -122,9 +116,12 @@
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
                 width="24"
-                height="24"><path
+                height="24"
+                ><path
                   fill="currentColor"
-                  d="M2 4h2v16H2V4zm4 0h1v16H6V4zm2 0h2v16H8V4zm3 0h2v16h-2V4zm3 0h2v16h-2V4zm3 0h1v16h-1V4zm2 0h3v16h-3V4z" /></svg>
+                  d="M2 4h2v16H2V4zm4 0h1v16H6V4zm2 0h2v16H8V4zm3 0h2v16h-2V4zm3 0h2v16h-2V4zm3 0h1v16h-1V4zm2 0h3v16h-3V4z"
+                /></svg
+              >
             </li>
             <li class="flex items-center ml-2">
               <a class="mr-2" href="./">Scans</a><svg
@@ -137,12 +134,10 @@
                 class="h-3 w-3 mr-2 stroke-current"
                 height="1em"
                 width="1em"
-                xmlns="http://www.w3.org/2000/svg"><line
-                  x1="5"
-                  y1="12"
-                  x2="19"
-                  y2="12" />
-                <polyline points="12 5 19 12 12 19" /></svg>
+                xmlns="http://www.w3.org/2000/svg"
+                ><line x1="5" y1="12" x2="19" y2="12" />
+                <polyline points="12 5 19 12 12 19" /></svg
+              >
             </li>
             <li class="flex items-center">
               <span class="mr-2">{original_data.id}</span>
@@ -153,20 +148,24 @@
     </div>
     <div class="mb-8 text-3xl font-extrabold leading-tight">
       {runner.value?.firstname}
-      {runner.value?.middlename || ''}
+      {runner.value?.middlename || ""}
       {runner.value?.lastname}
       #{original_data.id}
       <span data-id="donation_actions_${original_data.id}">
-        {#if store.state.jwtinfo.userdetails.permissions.includes('SCAN:DELETE')}
+        {#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:DELETE")}
           {#if delete_triggered}
             <button
               on:click={deleteScan}
-              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:">{$_('confirm-deletion')}</button>
+              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:"
+              >{$_("confirm-deletion")}</button
+            >
             <button
               on:click={() => {
                 delete_triggered = !delete_triggered;
               }}
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:">{$_('cancel')}</button>
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:"
+              >{$_("cancel")}</button
+            >
           {/if}
           {#if !delete_triggered}
             <button
@@ -174,7 +173,9 @@
                 delete_triggered = true;
               }}
               type="button"
-              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:">{$_('delete-scan')}</button>
+              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:"
+              >{$_("delete-scan")}</button
+            >
           {/if}
         {/if}
         {#if !delete_triggered}
@@ -183,13 +184,16 @@
             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:">{$_('save-changes')}</button>
+            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:"
+            >{$_("save-changes")}</button
+          >
         {/if}
       </span>
     </div>
     <!--  -->
     <div class="w-full inline-flex">
-      <label for="valid" class="block font-medium text-gray-700">{$_('status')}:
+      <label for="valid" class="block font-medium text-gray-700"
+        >{$_("status")}:
       </label>
       &nbsp;
       <input
@@ -200,49 +204,57 @@
         name="valid"
         type="checkbox"
         checked={editable.valid}
-        class="focus:ring-indigo-500 align-bottom h-7 w-5font-medium text-indigo-600 border-gray-300 rounded" />
+        class="focus:ring-indigo-500 align-bottom h-7 w-5font-medium text-indigo-600 border-gray-300 rounded"
+      />
       &nbsp;
       <p class="font-medium">
-        {#if editable.valid}{$_('valid')}{:else}{$_('invalid')}{/if}
+        {#if editable.valid}{$_("valid")}{:else}{$_("invalid")}{/if}
       </p>
     </div>
-    {#if editable.responseType === 'TRACKSCAN'}
+    {#if editable.responseType === "TRACKSCAN"}
       <div class="w-full inline-flex">
-        <label for="valid" class="block font-semibold text-gray-700">{$_('track')}:
+        <label for="valid" class="block font-semibold text-gray-700"
+          >{$_("track")}:
         </label>
         <a
           href="../tracks"
-          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{editable.track.name}
+          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
+          >{editable.track.name}
         </a>
       </div>
       <div class="w-full inline-flex pb-3">
-        <label for="valid" class="block font-semibold text-gray-700">{$_('laptime')}: {format_laptime(editable.laptime)}
+        <label for="valid" class="block font-semibold text-gray-700"
+          >{$_("laptime")}: {format_laptime(editable.laptime)}
         </label>
       </div>
     {/if}
     <div class=" w-full">
-      <label
-        for="runner"
-        class="block font-medium text-gray-700">{$_('runner')}</label>
+      <label for="runner" class="block font-medium text-gray-700"
+        >{$_("runner")}</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) => filterRunners(label, filterText, option)}
+        itemFilter={(label, filterText, option) =>
+          filterRunners(label, filterText, option)}
         items={current_runners}
         showChevron={true}
-        isDisabled={editable.responseType === 'TRACKSCAN'}
-        placeholder={$_('search-for-runner-by-name-or-id')}
-        noOptionsMessage={$_('no-runners-found')}
+        isDisabled={editable.responseType === "TRACKSCAN"}
+        placeholder={$_("search-for-runner-by-name-or-id")}
+        noOptionsMessage={$_("no-runners-found")}
         bind:selectedValue={runner}
         on:select={(selectedValue) => {
           editable.runner = selectedValue.detail.value.id;
         }}
-        on:clear={() => (editable.runner = null)} />
+        on:clear={() => (editable.runner = null)}
+      />
     </div>
     <div class=" w-full">
       <label
         for="scan_distance"
-        class="block text-sm font-medium text-gray-700">
-        {$_('distance')}</label>
+        class="block text-sm font-medium text-gray-700"
+      >
+        {$_("distance")}</label
+      >
       <div class="mt-1 flex rounded-md shadow-sm">
         <input
           autocomplete="off"
@@ -250,19 +262,23 @@
           class:focus:border-red-500={!is_distance_valid}
           class:focus:ring-red-500={!is_distance_valid}
           bind:value={editable.distance}
-          disabled={editable.responseType === 'TRACKSCAN'}
+          disabled={editable.responseType === "TRACKSCAN"}
           type="number"
           step="1"
           name="scan_distance"
           class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2"
-          placeholder="400" />
+          placeholder="400"
+        />
         <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>
+          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 !is_distance_valid}
         <span
-          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-          {$_('the-scans-distance-must-be-greater-than-0m')}
+          class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
+        >
+          {$_("the-scans-distance-must-be-greater-than-0m")}
         </span>
       {/if}
     </div>