From 089efada5d5374602a9888fd477714d33e3b921b Mon Sep 17 00:00:00 2001
From: Jacob Morgan <jtuba05@gmail.com>
Date: Sat, 9 Mar 2024 23:02:28 +0100
Subject: [PATCH] maybe a working page

---
 frontend/src/config.ts           |  1 +
 frontend/src/routes/+page.svelte | 31 +++++++++++++++++++++++++++----
 frontend/src/routes/+page.ts     | 12 +++++-------
 3 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/frontend/src/config.ts b/frontend/src/config.ts
index 55c2a9b..ef6432d 100644
--- a/frontend/src/config.ts
+++ b/frontend/src/config.ts
@@ -1 +1,2 @@
 export const BE_BASE_URL = "http://slackwatch-be-svc.slackwatch.svc.cluster.local/";
+//export const BE_BASE_URL = "http://localhost:8080/";
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index b4425da..db6f5ff 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -1,12 +1,35 @@
 <script lang="ts">
-    export let podsInfo: Array<{ name: string; timeScanned: string }> = [];
+	export let podsInfo: Array<{ name: string; timeScanned: string }> = [];
+	export let data;
+	console.log(podsInfo);
+	console.log(data);
 </script>
+
 <main>
 	<h1>Pods Information</h1>
-	{#each podsInfo as { name, timeScanned }}
+	{#each data.podsInfo as { name, timeScanned }}
 		<div>
-			<p>Image Name: {name}</p>
-			<p>Time Scanned: {timeScanned}</p>
+			<article class="pod-info">
+				<h2>{name}</h2>
+				<time datetime="{timeScanned}">{timeScanned}</time>
+			</article>
+			<style>
+				.pod-info {
+					background-color: #f0f0f0;
+					border-radius: 8px;
+					padding: 20px;
+					margin-bottom: 10px;
+					box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+				}
+				.pod-info h2 {
+					color: #333;
+					font-size: 1.2rem;
+				}
+				.pod-info time {
+					font-size: 0.9rem;
+					color: #666;
+				}
+			</style>
 		</div>
 	{/each}
 </main>
diff --git a/frontend/src/routes/+page.ts b/frontend/src/routes/+page.ts
index 7ffda0b..746dc40 100644
--- a/frontend/src/routes/+page.ts
+++ b/frontend/src/routes/+page.ts
@@ -1,14 +1,12 @@
+import { BE_BASE_URL } from "../config";
+
 	console.log('before');
 	export async function load({
 		fetch
 	}: {
 		fetch: (input: RequestInfo, init?: RequestInit) => Promise<Response>;
 	}) {
-		console.log('inside');
-		const response = await fetch('http://localhost:8080/api/pods');
-		const text = await response.text(); // Get the raw response text
-		console.log('Raw response:', text);
-		const podsInfo = await response.json(); // Parse the response as JSON
-		console.log(podsInfo);
-		return { props: { podsInfo } }; // Return podsInfo for Svelte to use
+    const response = await fetch(`${BE_BASE_URL}api/pods`);
+    const podsInfo = await response.json(); // Parse the response as JSON
+    return { podsInfo };
 	}