feat: updates to the timeline

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 = {

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,

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);
 		});
 

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]">
+					<div class="min-w-[70px] h-[15px] bg-blue-500 -mx-[10px]"></div>
-						{event.timeDiff}
-					</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">
+					<div
-						{event.timeDiff}
+						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-->

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
+                {#if activeItem.status === ApplicationStatus.WorkingOnIt}
-					icon="box-arrow-down"
+                    <DropZone
-					ondrop={() => {
+                        icon="box-arrow-down"
-						moveStatus(ApplicationStatus.ToApply);
+                        ondrop={() => {
-						applicationStore.loadAplyed(true);
+                            moveStatus(ApplicationStatus.ToApply);
-						applicationStore.loadAll(true);
+                            applicationStore.loadAplyed(true);
-					}}
+                            applicationStore.loadAll(true);
-				>
+                        }}
-					To apply
+                    >
-				</DropZone>
+                        To apply
+                    </DropZone>
+                {/if}
 
 				{#if activeItem.status === ApplicationStatus.WorkingOnIt}
 					<!-- Ignore -->
@@ -537,13 +539,32 @@
 					</DropZone>
 				{/if}
 
-				<!-- Rejected -->
+				{#if [ApplicationStatus.InterviewStep1].includes(activeItem.status)}
-				<DropZone
+					<!-- Tasks to do -->
-					icon="fire text-danger"
+					<DropZone
-					ondrop={() => moveStatus(ApplicationStatus.ApplyedButSaidNo)}
+						icon="server text-confirm"
-				>
+						ondrop={async () => {
-					I was rejeted :(
+							await moveStatus(ApplicationStatus.InterviewStep2);
-				</DropZone>
+							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}