Add feature detect information to statistics page

src/lib/scripts/featureDetect.ts

@@ -47,18 +47,3 @@ export function featureDetect(): FeatureDetectionResult {
 
     return result;
 }
-
-/*// Example usage
-      const featureSupport = featureDetect();
-      console.log(featureSupport);
-      
-      if (!featureSupport.critical) {
-        alert('Some critical features required for this application are not supported by your browser.');
-        // Handle lack of critical features appropriately
-      } else if (!featureSupport.nice) {
-        console.warn('Some nice-to-have features are not supported by your browser. The app will still function, but some features may be unavailable.');
-        // Optionally handle lack of nice-to-have features
-      } else {
-        // Proceed with the normal functionality of your app
-      }
-        */

src/routes/+page.svelte

@@ -31,9 +31,9 @@
         console.log(featureSupport);
 
         if (!featureSupport.critical) {
-            toast.error("Your browser is missing critical features, OwlBoard might not work properly.  Consider updating your browser.");
+            toast.error("Your browser is missing critical features, OwlBoard might not work properly.  See `Menu > Statistics` for more information.");
         } else if (!featureSupport.nice) {
-            toast.error("Your browser is missing some features, OwlBoard may run slower or be missing some features.");
+            toast.error("Your browser is missing some features, see `Menu > Statistics` for more information.");
         }
     });
 </script>

src/routes/more/statistics/+page.svelte

@@ -4,6 +4,7 @@
     import Loading from "$lib/navigation/loading.svelte";
     import Nav from "$lib/navigation/nav.svelte";
     import { getApiUrl } from "$lib/scripts/upstream";
+    import { featureDetect } from "$lib/scripts/featureDetect";
     const title = "Statistics";
 
     async function getData() {
@@ -61,6 +62,73 @@
     </Island>
 {/await}
 
+<h2>Browser Features</h2>
+{#await featureDetect()}
+    Checking browser features
+    {:then features}
+    <h3>Critical Features</h3>
+    {#if !features.critical}
+    <p>OwlBoard will not function properly without these browser features.  If you see any crosses here
+        you may need to update your browser or choose another browser.  Chrome, Edge, Firefox, Brave & Samsung Browser 
+        have been tested.
+        </p>
+        {/if}
+    <ul class="feature-list">
+        <li>
+          Fetch <span class="feature-status {features.missing.includes('fetch') ? 'cross' : 'tick'}">
+            {features.missing.includes('fetch') ? '✗' : '✓'}
+          </span>
+        </li>
+        <li>
+          Local Storage <span class="feature-status {features.missing.includes('localStorage') ? 'cross' : 'tick'}">
+            {features.missing.includes('localStorage') ? '✗' : '✓'}
+          </span>
+        </li>
+        <li>
+          Session Storage <span class="feature-status {features.missing.includes('sessionStorage') ? 'cross' : 'tick'}">
+            {features.missing.includes('sessionStorage') ? '✗' : '✓'}
+          </span>
+        </li>
+        <li>
+          Promises <span class="feature-status {features.missing.includes('promise') ? 'cross' : 'tick'}">
+            {features.missing.includes('promise') ? '✗' : '✓'}
+          </span>
+        </li>
+      </ul>
+    
+      <h3>Nice-to-have Features</h3>
+      {#if !features.nice}
+      <p>OwlBoard may run slowly or be missing some functions without these browser features.  If you see any crosses here
+        you may want to update your browser or choose another browser for improved performance.  Chrome, Edge, Firefox, 
+        Brave & Samsung Browser have been tested.
+        </p>
+        {/if}
+      <ul class="feature-list">
+        <li>
+          Geolocation <span class="feature-status {features.missing.includes('geolocation') ? 'cross' : 'tick'}">
+            {features.missing.includes('geolocation') ? '✗' : '✓'}
+          </span>
+        </li>
+        <li>
+          Service Worker <span class="feature-status {features.missing.includes('serviceWorker') ? 'cross' : 'tick'}">
+            {features.missing.includes('serviceWorker') ? '✗' : '✓'}
+          </span>
+        </li>
+        <li>
+          Dialog <span class="feature-status {features.missing.includes('dialog') ? 'cross' : 'tick'}">
+            {features.missing.includes('dialog') ? '✗' : '✓'}
+          </span>
+        </li>
+        <li>
+          Popover API <span class="feature-status {features.missing.includes('popover') ? 'cross' : 'tick'}">
+            {features.missing.includes('popover') ? '✗' : '✓'}
+          </span>
+        </li>
+      </ul>
+  {:catch error}
+    Failed to detect browser features: {error.message}
+  {/await}
+
 <Nav />
 
 <style>
@@ -76,4 +144,35 @@
         margin-bottom: 2px;
         margin-top: 8px;
     }
+    .feature-list {
+    list-style-type: none; /* Remove bullet points */
+    padding: 0;
+    text-align: center; /* Center the list */
+  }
+
+  .feature-list li {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 8px 0;
+  }
+
+  .feature-status {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    line-height: 20px;
+    text-align: center;
+    border-radius: 50%;
+    color: white;
+    margin-left: 8px;
+  }
+
+  .tick {
+    background-color: green;
+  }
+
+  .cross {
+    background-color: red;
+  }
 </style>