I think I want to start from scratch?

src/lib/components/indicatorDot.svelte

@@ -1,11 +1,9 @@
 <script lang="ts">
-    export let status: string
+    export let status: string | undefined
-    // Bind a variable containing a service status message ( OK, Unavailable, Unknown )
     console.log(status)
-    // Create a map which maps the status to a color
 </script>
 
-<span class="dot"></span>
+<span class="dot {status?.toLowerCase() || ''}"></span>
 
 <style>
     .dot {
@@ -15,4 +13,13 @@
         border-radius: 50%;
         background-color: grey;
     }
+    .ok {
+        background-color: green;
+    }
+    .unavailable {
+        background-color: red;
+    }
+    .unknown {
+        background-color: orange;
+    }
 </style>

src/lib/components/itemBox.svelte

@@ -1,38 +1,28 @@
 <script lang="ts">
-    import type { BoxContent } from "$lib/types/boxContent";
     import type { ServiceDetail } from "$lib/types/serviceDetail";
-    import { check } from "$lib/scripts/statusChecks";
 	import IndicatorDot from "./indicatorDot.svelte";
 
-    export let boxData: BoxContent
+    export let detail: ServiceDetail
 
-    let serviceDetail: ServiceDetail = {
+    if (detail.boxContent.img === "auto") {
-        description: "Service Description, this will be a short string describing the service",
+        detail.boxContent.img = `/img/box/${detail.boxContent.name.toLowerCase()}.svg`
-        loginMethod: "FJLA.net login details",
-        statusMessage: "OK"
     }
 
-    if (boxData.img === "auto") {
-        boxData.img = `/img/box/${boxData.name.toLowerCase()}.svg`
-    }
 </script>
 
-<a href="{boxData.link}">
+<a href="{detail.boxContent.link}">
     <div class="box">
-        <img class="logo" src="{boxData.img}" alt="">
+        <img class="logo" src="{detail.boxContent.img}" alt="">
-
         <header>
-            {boxData.name.toUpperCase()}
+            {detail.boxContent.name.toUpperCase()}
             <span class="status">
-                {#await check(boxData.name) then status}
+                <IndicatorDot status={detail.statusMessage} />
-                    <IndicatorDot {status} />
-                {/await}
             </span>
         </header>
         <div class="tooltip">
-            <p>{serviceDetail.description}</p>
+            <p class="tooltipDesc">{detail.description}</p>
-            <p>Login with: {serviceDetail.loginMethod}</p>
+            <p>Login with: {detail.loginMethod}</p>
-            <p>Current status: {serviceDetail.statusMessage}</p>
+            <p>Current status: {detail.statusMessage || "Unknown"}</p>
         </div>
     </div>
 </a>
@@ -75,5 +65,12 @@
        border-radius: 20px;
        transition-property: all;
        transition-duration: 0.2s;
+       width: 35%;
+       max-width: 250px;
+       font-family: sans-serif;
+       font-size: 14px;
+    }
+    .tooltipDesc {
+        font-size: 18px;
     }
 </style>

src/lib/scripts/checks/homeassistant.ts

@@ -0,0 +1,10 @@
+export async function checkHA()/*: Promise<string>*/ {
+    const url = "https://ha.fjla.uk"
+    const data = await fetch(url)
+    const text = await data.text()
+    if ( data.status === 200 && text.includes("ha-launch-screen-info-box")) {
+        return "OK"
+    } else {
+        return "Unavailable"
+    }
+}

src/lib/scripts/checks/jellyfin.ts

@@ -0,0 +1,10 @@
+export async function checkJellyfin()/*: Promise<string>*/ {
+    const url = "https://jf.fjla.uk"
+    const data = await fetch(url)
+    const text = await data.text()
+    if ( data.status === 200 && text.includes("<title>Jellyfin</title>")) {
+        return "OK"
+    } else {
+        return "Unavailable"
+    }
+}

src/lib/scripts/checks/nextcloud.ts

@@ -0,0 +1,10 @@
+export async function checkNextcloud()/*: Promise<string>*/ {
+    const url = "https://cloud.fjla.uk"
+    const data = await fetch(url)
+    const text = await data.text()
+    if ( data.status === 200 && text.includes("Login")) {
+        return "OK"
+    } else {
+        return "Unavailable"
+    }
+}

src/lib/scripts/checks/owlboard.ts

@@ -0,0 +1,10 @@
+export async function checkOwlBoard()/*: Promise<string>*/ {
+    const url = "https://owlboard.info"
+    const data = await fetch(url)
+    const text = await data.text()
+    if ( data.status === 200 && text.includes("Train Details &amp; PIS")) {
+        return "OK"
+    } else {
+        return "Unavailable"
+    }
+}

src/lib/scripts/checks/traccar.ts

@@ -0,0 +1,10 @@
+export async function checkTraccar()/*: Promise<string>*/ {
+    const url = "https://traccar.fjla.uk"
+    const data = await fetch(url)
+    const text = await data.text()
+    if ( data.status === 200 && text.includes("Traccar GPS Tracking System")) {
+        return "OK"
+    } else {
+        return "Unavailable"
+    }
+}

src/lib/scripts/checks/webmail.ts

@@ -0,0 +1,10 @@
+export async function checkWebmail()/*: Promise<string>*/ {
+    const url = "https://mx0123.fb-infra.uk/mail"
+    const data = await fetch(url)
+    const text = await data.text()
+    if ( data.status === 200 && text.includes("rcube")) {
+        return "OK"
+    } else {
+        return "Unavailable"
+    }
+}

src/lib/scripts/serviceDetailMap.ts

@@ -0,0 +1,38 @@
+import type { ServiceDetail } from "$lib/types/serviceDetail"
+
+export const defaultVal: ServiceDetail = {description: "Unknown", loginMethod: "Unknown"}
+
+export const detailMap = new Map <string, ServiceDetail>([
+    ["nextcloud", {
+        description: "Personal Cloud, Organisation and workspace",
+        loginMethod: "FJLA.net Credentials"
+    }],
+    ["gitea", {
+        description: "Git repositories & development tools",
+        loginMethod: "FJLA.net Credentials"
+    }],
+    ["jellyfin", {
+        description: "Music, Film and TV Services",
+        loginMethod: "FJLA.net Credentials"
+    }],
+    ["home assistant", {
+        description: "Smart & Connected Home",
+        loginMethod: "Home Assistant Credentials"
+    }],
+    ["traccar", {
+        description: "Device and Person Tracking",
+        loginMethod: "Traccar Credentials"
+    }],
+    ["owlboard", {
+        description: "Live train service data",
+        loginMethod: "No login required"
+    }],
+    ["webmail", {
+        description: "Mail services for FJLA.net, FJLA.uk, OwlBoard.info & fb-infra.uk",
+        loginMethod: "Email Credentials"
+    }],
+    ["account", {
+        description: "FJLA.net account settings",
+        loginMethod: "FJLA.net Credentials"
+    }]
+])

src/lib/scripts/statusChecks.ts

@@ -1,4 +1,34 @@
+import { checkHA } from "./checks/homeassistant";
+import { checkJellyfin } from "./checks/jellyfin";
+import { checkNextcloud } from "./checks/nextcloud";
+import { checkOwlBoard } from "./checks/owlboard";
+import { checkTraccar } from "./checks/traccar";
+import { checkWebmail } from "./checks/webmail";
+
 export async function check(service: string): Promise<string> {
-    console.log("Check call for: " + service)
+    let result: string
-    return 'not_ok'
+    switch (service) {
+        case "nextcloud":
+            result = await checkNextcloud()
+            break;
+        case "home assistant":
+            result = await checkHA()
+            break;
+        case "jellyfin":
+            result = await checkJellyfin()
+            break;
+        case "traccar":
+            result = await checkTraccar()
+            break;
+        case "owlboard":
+            result = await checkOwlBoard()
+            break;
+        case "webmail":
+            result = await checkWebmail()
+            break;
+        default:
+            result = "Unknown"
+    }
+    console.log(`${service}: ${result}`)
+    return result
 }

src/lib/types/serviceDetail.ts

@@ -1,5 +1,8 @@
+import type { BoxContent } from "./boxContent";
+
 export interface ServiceDetail {
+    boxContent?: BoxContent,
     description: string,
     loginMethod: string,
-    statusMessage: string,
+    statusMessage?: string,
 }

src/routes/+page.server.ts

@@ -0,0 +1,26 @@
+import type { BoxContent } from "$lib/types/boxContent";
+import type { ServiceDetail } from "$lib/types/serviceDetail";
+
+import { check } from "$lib/scripts/statusChecks";
+import { detailMap, defaultVal } from "$lib/scripts/serviceDetailMap";
+
+const boxes: BoxContent[] = [
+    {name: "nextcloud", link: "https://cloud.fjla.uk", img: "auto"},
+    {name: "home assistant", link: "https://ha.fjla.uk", img: "auto"},
+    {name: "jellyfin", link: "https://jf.fjla.uk", img: "auto"},
+    {name: "traccar", link:"https://traccar.fjla.uk", img: "auto"},
+    {name: "owlboard", link:"https://owlboard.info", img:"auto"},
+    {name: "webmail", link:"https://mx0123.fb-infra.uk/mail", img: "auto"},
+    {name: "account", link:"https://ipa0922.fjla.net", img:"auto"}
+]
+
+export async function load() {
+    const data: ServiceDetail[] = []
+    for (const item of boxes) {
+        const svcDetail = detailMap.get(item.name.toLowerCase()) || defaultVal
+        svcDetail.statusMessage = await check(item.name.toLowerCase())
+        svcDetail.boxContent = item
+        data.push(svcDetail)
+    }
+    return {data: data}
+}

src/routes/+page.svelte

@@ -1,23 +1,19 @@
 <script lang="ts">
     import ItemBox from "$lib/components/itemBox.svelte";
-    import type { BoxContent } from "$lib/types/boxContent";
+	import type { ServiceDetail } from "$lib/types/serviceDetail";
 
-    const boxes: BoxContent[] = [
+    interface dataObj {
-        {name: "nextcloud", link: "https://cloud.fjla.uk", img: "auto"},
+        data: ServiceDetail[]
-        {name: "home assistant", link: "https://ha.fjla.uk", img: "auto"},
+    }
-        {name: "jellyfin", link: "https://jf.fjla.uk", img: "auto"},
+
-        {name: "traccar", link:"https://traccar.fjla.uk", img: "auto"},
+    export let data: dataObj
-        {name: "owlboard", link:"https://owlboard.info", img:"auto"},
-        {name: "webmail", link:"https://mx0123.fb-infra.uk/mail", img: "auto"},
-        {name: "account", link:"https://ipa0922.fjla.net", img:"auto"}
-    ]
 </script>
 
 <header>FJLA Gateway</header>
 
 <div id="boxContainer">
-    {#each boxes as boxData}
+    {#each data.data as detail}
-        <ItemBox {boxData} />
+        <ItemBox {detail} />
     {/each}
 </div>