Add unauthorized message

src/routes/train/+page.svelte

@@ -1,6 +1,7 @@
 <script>
     import Header from '$lib/navigation/header.svelte'
 	  import Loading from '$lib/navigation/loading.svelte';
+    import Island from '$lib/islands/island.svelte';
     import Nav from '$lib/navigation/nav.svelte';
     import { uuid } from '$lib/stores/uuid';
     
@@ -10,6 +11,8 @@
     let id = ""
     let data = [];
     let isLoading = true;
+    let error = false;
+    let errMsg = "";
 
     $: {
       if (id) {
@@ -26,8 +29,11 @@
     onMount(async () => {
         isLoading = true;
         id = await getHeadcode() || "";
-        data = await fetchData(id);
-        await data; isLoading = false;
+        const res = await fetchData(id);
+        if (res) {
+          data = res;
+        }
+        isLoading = false;
     })
 
     async function fetchData(id = "") {
@@ -41,13 +47,30 @@
         }
         const url = `https://owlboard.info/api/v2/timetable/train/${date}/${searchType}/${id}`
         const res = await fetch(url, options);
-        return await res.json();
+        isLoading = false;
+        if (res.status == 200) {
+            return await res.json();
+        } else if (res.status === 401) {
+          error = true;
+          errMsg = "You must be logged into the staff version for this feature"
+          return false;
+        } else {
+          error = true;
+          errMsg = "Unable to connect, check your connection and try again"
+          return false;
+        }
     } 
 
 </script>
 
 <Header {title} />
 
+{#if error}
+<Island>
+  <p class="error">{errMsg}</p>
+</Island>
+{/if}
+
 {#if isLoading}
   <Loading />
 {/if}