Merge pull request #70 from hmcalister/Update-frontend-components

Update frontend components

frontend/src/lib/EventDisplay.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	import { fade } from "svelte/transition";
+
+	const dispatch = createEventDispatcher();
+
+	// PROPS AND MODELS
+	import { models } from "$lib/wailsjs/go/models";
+	import { UpdateEvent, DismissEvent, DeleteEvent } from "$lib/wailsjs/go/main/App";
+	export let event: models.Event;
+	const currentTime: Date = new Date();
+	const EVENT_TIMEOUT_DURATION_SCALE_FACTOR: number = 1000000;
+	let previousTriggerDate = new Date(event.StartTime);
+	let nextTriggerTime = event.TimeoutDuration / EVENT_TIMEOUT_DURATION_SCALE_FACTOR;
+
+	async function updateEvent(r: models.Event) {
+		if (r !== undefined) {
+			event = new models.Event(await UpdateEvent(r));
+		}
+	}
+
+	async function dismissEvent() {
+		var dismissResult = await DismissEvent(event);
+		if (dismissResult !== null) {
+			event = new models.Event(dismissResult);
+		} else {
+			dispatch("eventDeleted");
+		}
+	}
+
+	async function deleteEvent() {
+		var dismissResult = await DeleteEvent(event);
+		if (dismissResult !== null) {
+			event = new models.Event(dismissResult);
+		} else {
+			dispatch("eventDeleted");
+		}
+	}
+
+	// MODAL SETTINGS
+	import { getModalStore } from "@skeletonlabs/skeleton";
+	import type { ModalSettings, ModalComponent } from "@skeletonlabs/skeleton";
+	import EventForm from "./EventForm.svelte";
+	const modalStore = getModalStore();
+	const eventFormModalComponent: ModalComponent = {
+		ref: EventForm,
+		props: { event: event },
+	};
+	function eventFormModal(): void {
+		const modal: ModalSettings = {
+			type: "component",
+			title: "Edit Event",
+			component: eventFormModalComponent,
+			response: (r: models.Event) => updateEvent(r),
+		};
+		modalStore.trigger(modal);
+	}
+
+	// PROGRESS BAR SETTINGS
+	import ProgressBar from "@okrad/svelte-progressbar";
+	import { cssVarToHexString } from "$lib/cssColorVariableParsing";
+	const PROGRESS_BAR_1_COLOR_HEX = cssVarToHexString("--color-secondary-500");
+	const PROGRESS_BAR_2_COLOR_HEX = cssVarToHexString("--color-primary-500");
+
+	// Time difference between now and the event start time, in milliseconds
+	let timeDifference = Math.max(Math.min(currentTime.getTime() - event.StartTime.getTime(), nextTriggerTime), 0);
+
+	// Time between interval triggers, in millisecond
+	const INTERVAL_PERIOD = 100;
+	let timeIncrementInterval = setInterval(function () {
+		if (timeDifference <= 0) {
+			return;
+		}
+		if (timeDifference / nextTriggerTime >= 1) {
+			timeDifference = nextTriggerTime+1;
+			clearInterval(timeIncrementInterval);
+			return;
+		}
+		timeDifference = timeDifference + INTERVAL_PERIOD;
+	}, INTERVAL_PERIOD);
+
+	$: backgroundColorClass = timeDifference / nextTriggerTime < 1 ? "variant-ghost" : "variant-ghost-primary";
+</script>
+
+{#if event !== null}
+	<div transition:fade class="eventGridContainer px-5 pt-2 pb-5 h-full w-full {backgroundColorClass} rounded-lg gap-x-5 items-center">
+		<div>
+			{#if event.IsRecurring}
+				<img src="/recurringIcon.svg" alt="Recurring Event" class="w-8" />
+			{/if}
+		</div>
+		<div class="text-sm">Last Triggered</div>
+		<div class="text-sm justify-self-center">Progress</div>
+		<div class="text-sm justify-self-end"><img src="/bin.png" alt="Recurring Event" class="w-8 cursor-pointer" on:click={deleteEvent}/></div>
+
+		<div>{event.Name}</div>
+		<div>{previousTriggerDate.toLocaleString()}</div>
+		<div class="justify-self-center">
+			<ProgressBar
+				style="radial"
+				thickness={20}
+				series={(100 * timeDifference) / nextTriggerTime}
+				valueLabel=" "
+				cls="w-16 pt-5 h-auto mx-auto"
+				addBackground={false}
+				thresholds={[
+					{
+						till: 100,
+						color: PROGRESS_BAR_1_COLOR_HEX,
+					},
+					{
+						till: 101,
+						color: PROGRESS_BAR_2_COLOR_HEX,
+					},
+				]}
+			/>
+		</div>
+		<div class="flex gap-2">
+			<button class="btn variant-filled" on:click={eventFormModal}>Edit</button>
+			<button class="btn variant-filled" on:click={dismissEvent}>Dismiss</button>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.eventGridContainer {
+		display: grid;
+		grid-template-rows: 1fr 3fr;
+		grid-template-columns: 5fr 4fr 3fr 1fr;
+	}
+</style>

frontend/src/lib/Header.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+    import { createEventDispatcher } from "svelte";
+	import { models } from "$lib/wailsjs/go/models";
+	import { CreateEvent } from "$lib/wailsjs/go/main/App";
+
+	const dispatch = createEventDispatcher();
+
+	// MODAL SETTINGS
+	import { getModalStore } from "@skeletonlabs/skeleton";
+	import type { ModalSettings, ModalComponent } from "@skeletonlabs/skeleton";
+	import EventForm from "./EventForm.svelte";
+	const modalStore = getModalStore();
+
+	async function createEvent(r: models.Event) {
+		if (r !== undefined) {
+			dispatch('eventCreated', new models.Event(await CreateEvent(r)));
+		}
+	}
+
+	const eventFormModalComponent: ModalComponent = {
+		ref: EventForm,
+		props: { event: new models.Event({
+			"Name": "",
+			"StartTime": new Date(),
+			"TimeoutDuration": 0,
+			"IsRecurring": false,
+		}) },
+	};
+	function eventFormModal(): void {
+		const modal: ModalSettings = {
+			type: "component",
+			title: "Create Event",
+			component: eventFormModalComponent,
+			response: (r: models.Event) => createEvent(r),
+		};
+		modalStore.trigger(modal);
+	}
+</script>
+
+<div id="header" class="h-full space-y-5">
+	<div class="h-full mx-auto flex justify-start">
+		<h1 class="h1">Event Tracker App</h1>
+		<div class="flex-grow" />
+		<!-- <h4 class="text-right">Developed by<br>Hayden McAlister</h4> -->
+	</div>
+
+	<div id="navDiv" class="h-full mx-auto flex justify-center gap-5">
+		<button class="w-full btn variant-filled-primary" on:click={eventFormModal}>New Event</button>
+	</div>
+</div>
+
+<style>
+</style>

frontend/src/routes/+page.svelte

@@ -1,39 +1,42 @@
 <script lang="ts">
 	import { Modal } from "@skeletonlabs/skeleton";
 	import { initializeStores } from "@skeletonlabs/skeleton";
-	import type { models } from "$lib/wailsjs/go/models";
+	import { models } from "$lib/wailsjs/go/models";
 	initializeStores();
 
 	import { fade } from "svelte/transition";
 	const MODAL_TRANSITION_DURATION = 200;
 
-	import Header from "$lib/header.svelte";
-	import Event from "$lib/event.svelte";
+	import Header from "$lib/Header.svelte";
+	import EventDisplay from "$lib/EventDisplay.svelte";
 	import { GetAllEvents } from "$lib/wailsjs/go/main/App";
 
 	var allEvents: models.Event[] = [];
 	async function AsyncGetEventsDummyFunction() {
-		allEvents = await GetAllEvents();
+		var asyncResponse = await GetAllEvents();
+		allEvents = asyncResponse.map((x) => new models.Event(x));
 	}
 </script>
 
-<Modal
-	transitionIn={fade}
-	transitionInParams={{ duration: MODAL_TRANSITION_DURATION }}
-	transitionOut={fade}
-	transitionOutParams={{ duration: MODAL_TRANSITION_DURATION }}
-/>
+<Modal transitionIn={fade} transitionInParams={{ duration: MODAL_TRANSITION_DURATION }} transitionOut={fade} transitionOutParams={{ duration: MODAL_TRANSITION_DURATION }} />
 
 <div id="appContainer" class="h-full w-full p-12">
-	<Header />
+	<Header
+		on:eventCreated={(r) => {
+			allEvents.push(r.detail);
+			allEvents = allEvents;
+		}}
+	/>
 
 	<div id="body" class="h-full w-full mx-auto flex justify-center items-center pt-12">
 		<div class="space-y-5 mx-auto w-full">
 			{#await AsyncGetEventsDummyFunction()}
 				<h4>Loading Events</h4>
-			{:then _} 
-				{#each allEvents as event}
-					<Event unparsedEventData={event} />
+			{:then _}
+				{#each allEvents as event (event)}
+					<EventDisplay bind:event on:eventDeleted={(r) => {
+						allEvents = allEvents.filter((e) => e.ID != event.ID);
+					}}/>
 				{/each}
 			{:catch}
 				<h4>Could not get Events from backend!</h4>