Small improvements

davdiv · Jan 28, 2024 · 0fb902d · 0fb902d
1 parent e41f689
commit 0fb902d
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 21 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -6,9 +6,11 @@
     callReadFromDevice,
     callReadFromFile,
     data$,
+    dataPromise$,
     jsonBlobURL$,
     csvBlobURL$,
     fileName$,
+    reset,
   } from "./data";
   const formatDate = (date: string) =>
     format(parseISO(date), "dd MMM yyyy h'h'mm", { locale: fr });
@@ -34,28 +36,45 @@
     Les données sont traitées directement dans le navigateur web en local et ne
     sont en aucun cas envoyées à un quelconque serveur sur internet.
   </p>
-  {#if navigator.usb}
+  {#if $dataPromise$}
     <button
       type="button"
-      class="btn btn-primary mt-3"
-      on:click={callReadFromDevice}
-      >Extraire depuis le périphérique Accu-Chek</button
+      class="btn btn-outline-secondary mt-3"
+      on:click={reset}>Réinitialiser</button
     >
   {:else}
-    <p>
-      Votre navigateur ne permet pas de se connecter à un périphérique Accu-Chek
-      par connexion USB. Vous pourriez essayer d'utiliser Chrome ou Chromium.
-    </p>
+    {#if navigator.usb}
+      <button
+        type="button"
+        class="btn btn-primary mt-3"
+        on:click={callReadFromDevice}
+        >Extraire depuis le périphérique Accu-Chek</button
+      >
+    {:else}
+      <div class="alert alert-warning mt-3">
+        Votre navigateur ne permet pas de se connecter à un périphérique
+        Accu-Chek par connexion USB. Vous pourriez essayer d'utiliser Chromium,
+        Chrome, Edge ou Opera.
+      </div>
+    {/if}
+    <div class="mt-3">
+      <label for="formFile" class="form-label">Ouvrir un fichier JSON</label>
+      <input
+        class="form-control"
+        type="file"
+        id="formFile"
+        on:change={onFileChange}
+      />
+    </div>
   {/if}
-  <div class="mt-3">
-    <label for="formFile" class="form-label">Ouvrir un fichier JSON</label>
-    <input
-      class="form-control"
-      type="file"
-      id="formFile"
-      on:change={onFileChange}
-    />
-  </div>
+  {#await $dataPromise$}
+    <div class="alert alert-info mt-3">Chargement..</div>
+  {:catch error}
+    <div class="alert alert-danger mt-3">
+      Une erreur s'est produite:<br />
+      <pre>{error}</pre>
+    </div>
+  {/await}
   {#if $data$}
     <a
       class="btn btn-outline-secondary mt-3"

diff --git a/src/data.ts b/src/data.ts
@@ -2,9 +2,9 @@ import { computed, writable } from "@amadeus-it-group/tansu";
 import { readFromDevice } from "./readUSBData";
 import { resolveStorePromise, toBlobURL } from "./storeUtils";
 
-const dataPromise$ = writable<ReturnType<typeof readFromDevice> | undefined>(
-  undefined
-);
+export const dataPromise$ = writable<
+  ReturnType<typeof readFromDevice> | undefined
+>(undefined);
 
 export const data$ = resolveStorePromise(dataPromise$);
 export const jsonBlob$ = computed(
@@ -36,7 +36,17 @@ export const fileName$ = computed(() => {
 });
 
 export async function callReadFromDevice() {
-  dataPromise$.set(readFromDevice());
+  const promise = readFromDevice();
+  dataPromise$.set(promise);
+  try {
+    await promise;
+  } catch (error: any) {
+    if (error.name === "NotFoundError") {
+      if (dataPromise$() === promise) {
+        dataPromise$.set(undefined);
+      }
+    }
+  }
 }
 
 const readFile = (file: File) =>
@@ -60,3 +70,7 @@ const asyncOpenFile = async (file: File | null) => {
 export function callReadFromFile(file: File | null) {
   dataPromise$.set(asyncOpenFile(file));
 }
+
+export function reset() {
+  dataPromise$.set(undefined);
+}