From 245dcf43b55bc02531f300109300ee39296130e2 Mon Sep 17 00:00:00 2001
From: Sebastian Pravda <sebastian.pravda@gmail.com>
Date: Sun, 4 Dec 2022 14:01:26 +0100
Subject: [PATCH] feat: login, basic admin dashboard

---
 frontend/src/lib/stores/candidate.ts          |  8 +--
 .../(authenticated)/dashboard/+page.svelte    | 61 +++++++++++++++++++
 .../(admin)/admin/auth/login/+page.svelte     | 12 ++++
 3 files changed, 77 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/routes/(admin)/admin/(authenticated)/dashboard/+page.svelte

diff --git a/frontend/src/lib/stores/candidate.ts b/frontend/src/lib/stores/candidate.ts
index 31886d0..0d152af 100644
--- a/frontend/src/lib/stores/candidate.ts
+++ b/frontend/src/lib/stores/candidate.ts
@@ -19,10 +19,10 @@ export interface CandidateData {
 }
 
 export interface CandidatePreview {
-	applicationId: number;
-	name: string;
-	surname: string;
-	study: string;
+	applicationId?: number;
+	name?: string;
+	surname?: string;
+	study?: string;
 }
 
 export interface CandidateLogin {
diff --git a/frontend/src/routes/(admin)/admin/(authenticated)/dashboard/+page.svelte b/frontend/src/routes/(admin)/admin/(authenticated)/dashboard/+page.svelte
new file mode 100644
index 0000000..fb9e351
--- /dev/null
+++ b/frontend/src/routes/(admin)/admin/(authenticated)/dashboard/+page.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { apiFetchCandidate, apiListCandidates } from "$lib/@api/admin";
+	import type { CandidatePreview } from "$lib/stores/candidate";
+
+
+    let candidates: [CandidatePreview] = [{}];
+    let candidateDetails: { [id: number] : CandidatePreview } = {};
+    let currentCandidateId: number = 0;
+
+    getCandidates();
+
+    async function getCandidates() {
+        try {
+            candidates = await apiListCandidates();
+        } catch {
+            console.log("error");
+        }
+    }
+
+    async function getCandidateDetails(id: number) {
+        currentCandidateId = id;
+        candidateDetails[id] = await apiFetchCandidate(id);
+    }
+</script>
+<div>
+    <div class="flex flex-row">
+        <div class="list">
+            {#each candidates as candidate}
+                <div class="candidatePreview flex flex-row">
+                    <h1 class="ml-5 text-2xl font-bold self-center">{candidate.applicationId}</h1>
+                    <div class="flex flex-col ml-12 mt-4">
+                        <h3 class="text-lg font-bold">{candidate.name} {candidate.surname?.toUpperCase()}</h3>
+                        <div class="relative">
+                            <h3 class="text-lg absolute right-0">Obor: {candidate.study}</h3>
+                        </div>
+                    </div>
+                </div>
+            {/each}
+        </div>
+        <div class="detail">
+            <h1>Details here</h1>
+        </div>
+    </div>
+</div>
+
+<style>
+    .list {
+        @apply h-[100vh] w-96;
+        @apply overflow-scroll float-left;
+    }
+
+    .detail {
+        @apply h-[100vh] w-[calc(100vw-96px)] bg-yellow-300;
+        @apply float-left overflow-hidden;
+    }
+    
+    .candidatePreview {
+        @apply h-20 w-full bg-gray-200 rounded-xl mt-5;
+        @apply hover:cursor-pointer;
+    }
+</style>
\ No newline at end of file
diff --git a/frontend/src/routes/(admin)/admin/auth/login/+page.svelte b/frontend/src/routes/(admin)/admin/auth/login/+page.svelte
index de1160e..b29a942 100644
--- a/frontend/src/routes/(admin)/admin/auth/login/+page.svelte
+++ b/frontend/src/routes/(admin)/admin/auth/login/+page.svelte
@@ -5,9 +5,20 @@
 
 	import background from '$lib/assets/background2.jpg';
 	import Lock from '$lib/components/icons/Lock.svelte';
+	import { apiLogin } from '$lib/@api/admin';
+	import { goto } from '$app/navigation';
 
 	let adminIdValue = '';
 	let adminPasswordValue = '';
+
+	const login = async () => {
+		try {
+			await apiLogin({adminId: Number(adminIdValue), password: adminPasswordValue});
+			goto("/admin/dashboard");
+		} catch (e) {
+			console.log(e);
+		}
+	};
 </script>
 
 <SplitLayout backgroundImage={background} backgroundPosition="30%">
@@ -37,6 +48,7 @@
 			class="bg-sspsBlue hover:bg-sspsBlueDark mt-8 w-3/5 rounded-lg p-3 text-xl font-semibold text-white transition-colors duration-300"
 			type="submit"
 			value="Odeslat"
+			on:click={login}
 		/>
 	</div>
 </SplitLayout>