From dd047c0bcf59cf831b9c5ebab2cb673619fb94aa Mon Sep 17 00:00:00 2001
From: Andre Henriques <andr3h3nriqu3s@gmail.com>
Date: Thu, 17 Oct 2024 19:01:11 +0100
Subject: [PATCH] feat: updates to the timeline

---
 site/src/lib/ApplicationsStore.svelte.ts  |  9 ++--
 site/src/routes/AppliyedList.svelte       |  5 +-
 site/src/routes/graphs/+page.svelte       |  6 +++
 site/src/routes/work-area/Timeline.svelte | 59 +++++++++++++++++-----
 site/src/routes/work-area/WorkArea.svelte | 60 ++++++++++++++++-------
 5 files changed, 104 insertions(+), 35 deletions(-)

diff --git a/site/src/lib/ApplicationsStore.svelte.ts b/site/src/lib/ApplicationsStore.svelte.ts
index 90d3b5d..e5124d8 100644
--- a/site/src/lib/ApplicationsStore.svelte.ts
+++ b/site/src/lib/ApplicationsStore.svelte.ts
@@ -12,7 +12,8 @@ export const ApplicationStatus = Object.freeze({
     Expired: 5,
     TasksToDo: 6,
     LinkedApplication: 7,
-    InterviewStep1: 8
+    InterviewStep1: 8,
+    InterviewStep2: 9
 });
 
 export const ApplicationStatusIconMaping: Record<AsEnum<typeof ApplicationStatus>, string> = Object.freeze({
@@ -24,7 +25,8 @@ export const ApplicationStatusIconMaping: Record<AsEnum<typeof ApplicationStatus
     5: 'hourglass-bottom',
     6: 'list-check',
     7: 'link-45deg',
-    8: 'person'
+    8: 'person',
+    9: 'people'
 });
 
 export const ApplicationStatusMaping: Record<AsEnum<typeof ApplicationStatus>, string> = Object.freeze({
@@ -36,7 +38,8 @@ export const ApplicationStatusMaping: Record<AsEnum<typeof ApplicationStatus>, s
     5: 'Expired',
     6: 'Tasks To Do',
     7: 'Linked Application',
-    8: 'Interview 1'
+    8: 'Interview 1',
+    9: 'Interview 2'
 });
 
 export type View = {
diff --git a/site/src/routes/AppliyedList.svelte b/site/src/routes/AppliyedList.svelte
index 92412c4..bceebe9 100644
--- a/site/src/routes/AppliyedList.svelte
+++ b/site/src/routes/AppliyedList.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { applicationStore } from '$lib/ApplicationsStore.svelte';
+	import { get } from '$lib/utils';
 	import { onMount } from 'svelte';
 
 	onMount(() => {
@@ -30,7 +31,9 @@
 		}) as item}
 			<button
 				class="card p-2 my-2 bg-slate-100 w-full text-left"
-				onclick={() => {
+				onclick={async () => {
+                    item.views = await get(`view/${item.id}`);
+                    item.events = await get(`events/${item.id}`);
 					applicationStore.loadItem = item;
 					window.scrollTo({
 						top: 0,
diff --git a/site/src/routes/graphs/+page.svelte b/site/src/routes/graphs/+page.svelte
index 08c662a..10e17d3 100644
--- a/site/src/routes/graphs/+page.svelte
+++ b/site/src/routes/graphs/+page.svelte
@@ -112,6 +112,12 @@
 					return;
 				}
 			}
+			if (history.includes(`${ApplicationStatus.InterviewStep2}`)) {
+				source = addGraph(source, ApplicationStatus.InterviewStep2);
+				if (a.status == ApplicationStatus.InterviewStep2) {
+					return;
+				}
+			}
 			addGraph(source, ApplicationStatus.ApplyedButSaidNo);
 		});
 
diff --git a/site/src/routes/work-area/Timeline.svelte b/site/src/routes/work-area/Timeline.svelte
index 1a46c75..de87d6b 100644
--- a/site/src/routes/work-area/Timeline.svelte
+++ b/site/src/routes/work-area/Timeline.svelte
@@ -5,9 +5,7 @@
 		ApplicationStatus,
 		EventType,
 		ApplicationStatusIconMaping,
-
 		ApplicationStatusMaping
-
 	} from '$lib/ApplicationsStore.svelte';
 
 	let { application }: { application: Application } = $props();
@@ -51,7 +49,6 @@
 
 		for (let event of application.events) {
 			let time = '';
-
 			if (lastEvent) {
 				let d1 = new Date(lastEvent.time).getTime();
 				let d2 = new Date(event.time).getTime();
@@ -62,19 +59,42 @@
 				status = ApplicationStatus.ToApply;
 			}
 			if (event.event_type !== EventType.StatusUpdate) {
-				_events.push({ ...event, timeDiff: time });
+				if (time) {
+					_events[_events.length - 1].timeDiff = time;
+				}
+				_events.push({ ...event, timeDiff: '' });
 				lastEvent = event;
 				continue;
 			}
-			if (checkArray.includes(status) && checkArray.includes(event.new_status) && lastEvent?.event_type !== EventType.Creation ) {
+			if (
+				checkArray.includes(status) &&
+				checkArray.includes(event.new_status) &&
+				lastEvent?.event_type !== EventType.Creation
+			) {
 				continue;
 			}
 
+			if (lastEvent) {
+				let d1 = new Date(lastEvent.time).getTime();
+				let d2 = new Date(event.time).getTime();
+				time = calcDiff(d2 - d1);
+			}
+
+			if (time) {
+				_events[_events.length - 1].timeDiff = time;
+			}
+
 			status = event.new_status;
-			_events.push({ ...event, timeDiff: time });
+			_events.push({ ...event, timeDiff: '' });
 			lastEvent = event;
 		}
 
+		if (_events.length > 0 && !endable.includes(_events[_events.length - 1].new_status)) {
+			let d1 = new Date(_events[_events.length - 1].time).getTime();
+			let d2 = new Date().getTime();
+			_events[_events.length - 1].timeDiff = calcDiff(d2 - d1);
+		}
+
 		events = _events;
 	});
 
@@ -91,9 +111,7 @@
 		<div class="flex p-5 items-center">
 			{#each events as event, i}
 				{#if i === 0 && event.event_type !== EventType.Creation}
-					<div class="min-w-[70px] h-[15px] bg-blue-500 -mx-[10px]">
-						{event.timeDiff}
-					</div>
+					<div class="min-w-[70px] h-[15px] bg-blue-500 -mx-[10px]"></div>
 				{/if}
 
 				<div
@@ -102,14 +120,29 @@
 					{#if event.event_type == EventType.Creation}
 						<span class="bi bi-plus"></span>
 					{:else if event.event_type == EventType.View}
-						<span class="bi bi-eye"></span>
+						<span
+							title="Views {new Date(event.time).toLocaleString()}"
+							class="bi bi-eye"
+						></span>
 					{:else}
-						<span title={ApplicationStatusMaping[event.new_status]} class="bi bi-{ApplicationStatusIconMaping[event.new_status]}"></span>
+						<span
+							title={`${ApplicationStatusMaping[event.new_status]}\n${new Date(
+								event.time
+							).toLocaleString()}`}
+							class="bi bi-{ApplicationStatusIconMaping[event.new_status]}"
+						></span>
 					{/if}
 				</div>
 				{#if i != events.length - 1 || !endable.includes(event.new_status)}
-					<div class="min-w-[70px] h-[13px] bg-blue-500 -mx-[10px] flex-grow">
-						{event.timeDiff}
+					<div
+						class="min-w-[70px] h-[18px] bg-blue-500 -mx-[10px] px-[20px] flex-grow text-center"
+					>
+						{#if event.timeDiff}
+							<div class="-mt-[3px] text-white">
+								<span class="bi bi-clock"></span>
+								{event.timeDiff}
+							</div>
+						{/if}
 					</div>
 					{#if i == events.length - 1}
 						<!--div class="h-[15px] w-[15px] bg-blue-500 rotate-45"></div-->
diff --git a/site/src/routes/work-area/WorkArea.svelte b/site/src/routes/work-area/WorkArea.svelte
index ba3effb..439256d 100644
--- a/site/src/routes/work-area/WorkArea.svelte
+++ b/site/src/routes/work-area/WorkArea.svelte
@@ -449,16 +449,18 @@
 				class="flex w-full flex-grow rounded-lg p-3 gap-2 absolute bottom-0 left-0 right-0 bg-white"
 			>
 				<!-- Do nothing -->
-				<DropZone
-					icon="box-arrow-down"
-					ondrop={() => {
-						moveStatus(ApplicationStatus.ToApply);
-						applicationStore.loadAplyed(true);
-						applicationStore.loadAll(true);
-					}}
-				>
-					To apply
-				</DropZone>
+                {#if activeItem.status === ApplicationStatus.WorkingOnIt}
+                    <DropZone
+                        icon="box-arrow-down"
+                        ondrop={() => {
+                            moveStatus(ApplicationStatus.ToApply);
+                            applicationStore.loadAplyed(true);
+                            applicationStore.loadAll(true);
+                        }}
+                    >
+                        To apply
+                    </DropZone>
+                {/if}
 
 				{#if activeItem.status === ApplicationStatus.WorkingOnIt}
 					<!-- Ignore -->
@@ -537,13 +539,32 @@
 					</DropZone>
 				{/if}
 
-				<!-- Rejected -->
-				<DropZone
-					icon="fire text-danger"
-					ondrop={() => moveStatus(ApplicationStatus.ApplyedButSaidNo)}
-				>
-					I was rejeted :(
-				</DropZone>
+				{#if [ApplicationStatus.InterviewStep1].includes(activeItem.status)}
+					<!-- Tasks to do -->
+					<DropZone
+						icon="server text-confirm"
+						ondrop={async () => {
+							await moveStatus(ApplicationStatus.InterviewStep2);
+							applicationStore.loadAll(true);
+							applicationStore.loadAplyed(true);
+						}}
+					>
+						Interview 2
+					</DropZone>
+				{/if}
+
+				{#if ![ApplicationStatus.ApplyedButSaidNo].includes(activeItem.status)}
+                    <!-- Rejected -->
+                    <DropZone
+                        icon="fire text-danger"
+                        ondrop={() => {
+                            moveStatus(ApplicationStatus.ApplyedButSaidNo)
+                            applicationStore.loadAll(true);
+                        }}
+                    >
+                        I was rejeted :(
+                    </DropZone>
+                {/if}
 			</div>
 		{/if}
 	{:else}
@@ -576,7 +597,10 @@
 	<NewUrlDialog
 		id={activeItem?.id ?? ''}
 		bind:dialog={changeUrl}
-		onreload={(item) => (activeItem = item)}
+		onreload={async (item) => {
+            item.events = await get(`events/${item.id}`);
+            activeItem = item;
+        }}
 	/>
 {/if}