Redo?

src/lib/components/itemBox.svelte

@@ -1,28 +1,23 @@
 <script lang="ts">
-    import type { ServiceDetail } from "$lib/types/serviceDetail";
+	import { detailMap } from "$lib/scripts/serviceMap";
-	import IndicatorDot from "./indicatorDot.svelte";
+	import type { ServiceData } from "$lib/types/serviceData";
 
-    export let detail: ServiceDetail
+    export let detail: string
 
-    if (detail.boxContent.img === "auto") {
+    const service: ServiceData = detailMap.get(detail)
-        detail.boxContent.img = `/img/box/${detail.boxContent.name.toLowerCase()}.svg`
-    }
 
 </script>
 
-<a href="{detail.boxContent.link}">
+<a href="{service.url}">
     <div class="box">
-        <img class="logo" src="{detail.boxContent.img}" alt="">
+        <img class="logo" src="/img/box/{service.imgPath}" alt="">
         <header>
-            {detail.boxContent.name.toUpperCase()}
+            {service.formattedName}
-            <span class="status">
-                <IndicatorDot status={detail.statusMessage} />
-            </span>
         </header>
         <div class="tooltip">
-            <p class="tooltipDesc">{detail.description}</p>
+            <p class="tooltipDesc">{service.description}</p>
-            <p>Login with: {detail.loginMethod}</p>
+            <p>Login with: {service.loginMethod}</p>
-            <p>Current status: {detail.statusMessage || "Unknown"}</p>
+            <!--<p>Current status: {detail.statusMessage || "Unknown"}</p>-->
         </div>
     </div>
 </a>

src/lib/scripts/serviceDetailMap.ts

@@ -1,38 +0,0 @@
-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/serviceMap.ts

@@ -5,13 +5,15 @@ export const detailMap = new Map <string, ServiceData>([
         url: "https://cloud.fjla.uk",
         checkString: "Login -",
         description: "Personal cloud, organiser and workspace",
-        imgPath: "nextcloud.svg"
+        imgPath: "nextcloud.svg",
+        loginMethod: "FJLA.net Credentials"
     }],
     ["gitea", {
         formattedName: "Gitea",
         url: "https://git.fjla.uk",
         checkString: "--??--",
         description: "Git Repository & Development tools",
-        imgPath: ""
+        imgPath: "",
+        loginMethod: "FJLA.net Credentials"
     }]
 ])

src/lib/types/boxContent.ts

@@ -1,5 +0,0 @@
-export interface BoxContent {
-    name: string,
-    link: string,
-    img : string,
-}

src/lib/types/serviceData.ts

@@ -4,4 +4,5 @@ export interface ServiceData {
     checkString: string,
     imgPath: string,
     description: string,
+    loginMethod: string
 }

src/lib/types/serviceDetail.ts

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

src/routes/+page.server.ts

@@ -1,26 +0,0 @@
-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,18 +1,16 @@
 <script lang="ts">
     import ItemBox from "$lib/components/itemBox.svelte";
-	import type { ServiceDetail } from "$lib/types/serviceDetail";
 
-    interface dataObj {
+    const homeLinks: string[] = [
-        data: ServiceDetail[]
+    "nextcloud",
-    }
+    "gitea"
-
+]
-    export let data: dataObj
 </script>
 
 <header>FJLA Gateway</header>
 
 <div id="boxContainer">
-    {#each data.data as detail}
+    {#each homeLinks as detail}
         <ItemBox {detail} />
     {/each}
 </div>