Pop up unsupported dialog when Bluetooth and WebUSB are unsupported (#185)

Author: microbit-grace

src/components/LinkOverlay.svelte

@@ -22,23 +22,33 @@
 </style>
 
 <script lang="ts">
-  import { PathType, navigate } from '../router/paths';
+  import { PathType, Paths, navigate } from '../router/paths';
+  export let onClickOrHrefOrPath: string | PathType | (() => void);
 
-  export let href: string | undefined = undefined;
-  export let path: PathType | undefined = undefined;
+  const sharedClass = `overlay outline-none focus-visible:ring-4 focus-visible:ring-offset-1 focus-visible:ring-ring cursor-pointer ${
+    $$restProps.class || ''
+  }`;
 
-  function handleClick(e: Event) {
-    if (path) {
-      e.preventDefault();
-      navigate(path);
-    }
+  function isPathType(x: string | PathType | (() => void)): x is PathType {
+    return Object.values(Paths).includes(x as PathType);
+  }
+
+  function handleClickPath(e: Event) {
+    e.preventDefault();
+    navigate(onClickOrHrefOrPath as PathType);
   }
 </script>
 
-<a
-  href={href ?? path}
-  on:click={handleClick}
-  class="overlay outline-none focus-visible:ring-4 focus-visible:ring-offset-1
-  focus-visible:ring-ring {$$restProps.class || ''}">
-  <slot />
-</a>
+{#if isPathType(onClickOrHrefOrPath)}
+  <a href={onClickOrHrefOrPath} on:click={handleClickPath} class={sharedClass}>
+    <slot />
+  </a>
+{:else if typeof onClickOrHrefOrPath === 'string'}
+  <a href={onClickOrHrefOrPath} class={sharedClass}>
+    <slot />
+  </a>
+{:else}
+  <button on:click={onClickOrHrefOrPath} class={sharedClass}>
+    <slot />
+  </button>
+{/if}

src/pages/Homepage.svelte

@@ -12,7 +12,11 @@
 </style>
 
 <script lang="ts">
-  import { state } from '../script/stores/uiStore';
+  import {
+    compatibility,
+    isCompatibilityWarningDialogOpen,
+    state,
+  } from '../script/stores/uiStore';
   import trainModelImage from '../imgs/TrainModel.svg';
   import inputDataImage from '../imgs/InputData.svg';
   import testModelImage from '../imgs/TestModel.svg';
@@ -25,8 +29,9 @@
   } from '../components/HtmlFormattedMessage.svelte';
   import LinkOverlayContainer from '../components/LinkOverlayContainer.svelte';
   import LinkOverlay from '../components/LinkOverlay.svelte';
-  import { Paths, currentPath, getTitle, navigate } from '../router/paths';
+  import { Paths, getTitle, navigate } from '../router/paths';
   import { gestures } from '../script/stores/Stores';
+  import CompatibilityWarningDialog from '../components/CompatibilityWarningDialog.svelte';
   import StandardDialog from '../components/dialogs/StandardDialog.svelte';
   import { clearGestures } from '../script/stores/mlStore';
   import { get } from 'svelte/store';
@@ -44,7 +49,16 @@
   $: hasExistingSession = $gestures.some(g => g.name || g.recordings.length);
   let showDataLossWarning = false;
 
-  const checkForExistingSession = () => {
+  const { bluetooth, usb } = get(compatibility);
+  const isIncompatible = !bluetooth && !usb;
+
+  const openCompatibityWarningDialog = () => isCompatibilityWarningDialogOpen.set(true);
+
+  const onClickStartNewSession = () => {
+    if (isIncompatible) {
+      openCompatibityWarningDialog();
+      return;
+    }
     if (hasExistingSession) {
       showDataLossWarning = true;
     } else {
@@ -103,7 +117,11 @@
       <div class="grid grid-cols-1 lg:grid-cols-3 p-10 gap-5">
         <LinkOverlayContainer>
           <FrontPageContentTile>
-            <LinkOverlay path={Paths.DATA} class="mb-5">
+            <LinkOverlay
+              onClickOrHrefOrPath={isIncompatible
+                ? openCompatibityWarningDialog
+                : Paths.DATA}
+              class="mb-5">
               <h3 class="text-center text-2xl font-bold">
                 {$t('content.index.toolProcessCards.data.title')}
               </h3>
@@ -117,7 +135,11 @@
 
         <LinkOverlayContainer>
           <FrontPageContentTile>
-            <LinkOverlay path={Paths.TRAINING} class="mb-5">
+            <LinkOverlay
+              onClickOrHrefOrPath={isIncompatible
+                ? openCompatibityWarningDialog
+                : Paths.TRAINING}
+              class="mb-5">
               <h3 class="text-center text-2xl font-bold">
                 {$t('content.index.toolProcessCards.train.title')}
               </h3>
@@ -131,7 +153,11 @@
 
         <LinkOverlayContainer>
           <FrontPageContentTile>
-            <LinkOverlay path={Paths.MODEL} class="mb-5">
+            <LinkOverlay
+              onClickOrHrefOrPath={isIncompatible
+                ? openCompatibityWarningDialog
+                : Paths.MODEL}
+              class="mb-5">
               <h3 class="text-center text-2xl font-bold">
                 {$t('content.index.toolProcessCards.model.title')}
               </h3>
@@ -153,7 +179,7 @@
       <StandardButton
         size="large"
         type={hasExistingSession ? 'secondary' : 'primary'}
-        onClick={checkForExistingSession}>{$t('footer.start')}</StandardButton>
+        onClick={onClickStartNewSession}>{$t('footer.start')}</StandardButton>
     </div>
   </div>
 </main>