Merge pull request #21 from bherbst/team_issue_api

Connect team issue list to API

ui/src/lib/api-client/fms-client.ts

@@ -3,8 +3,11 @@ import type { paths, components } from '../../fms/fms-api';
 import { settingsStore } from '$lib/settings-store';
 import { get } from 'svelte/store';
 
-// TODO configure with real FMS URL (and local dev option)
-export const fmsClient = createClient<paths>({ baseUrl: 'http://localhost' });
+export const fmsClient = createClient<paths>({ baseUrl: get(settingsStore).fmsUrl });
+
+// TODO sync with FMS - not sure which API to use for that at the moment since `/FTA` seems to only
+// return 0 for currentSeason
+const season = 2025;
 
 const authMiddleware: Middleware = {
 	async onRequest({ request }) {
@@ -15,3 +18,39 @@ const authMiddleware: Middleware = {
 	}
 };
 fmsClient.use(authMiddleware);
+
+export type TeamIssue = components['schemas']['TeamIssueModel'];
+export async function getTeamNotes(
+	fetch: any,
+	options: {
+		noteId?: string;
+		teamNumber?: number;
+		issueType?: components['schemas']['EventNoteIssueTypes'];
+		resolutionStatus?: components['schemas']['EventNoteResolutionTypes'];
+	}
+) {
+	const { data, error, response } = await fmsClient.GET(
+		'/api/v1.0/FTA/{season}/{eventCode}/teamIssues',
+		{
+			params: {
+				query: options,
+				path: {
+					season: season,
+					eventCode: get(settingsStore).eventCode
+				}
+			},
+			fetch
+		}
+	);
+
+	return {
+		notes: data?.teamIssues,
+		error: error,
+		response
+	};
+}
+
+export async function getCurrentEventCode(): Promise<string | null | undefined> {
+	const { data } = await fmsClient.GET('/api/v1.0/FTAAppApi/CurrentEventStatus', { fetch });
+	return data?.eventCode;
+}

ui/src/lib/components/Button.svelte

@@ -50,7 +50,7 @@
 		{@render children()}
 	</a>
 {:else}
-	<button {type} {...restProps} class={buttonClass}>
+	<button {type} {...restProps} class={buttonClass} on:click>
 		{@render children()}
 	</button>
 {/if}

ui/src/lib/components/dialogs/SettingsModal.svelte

@@ -6,10 +6,10 @@
 	import Toggle from '../Toggle.svelte';
 	import { settingsStore } from '../../settings-store';
 	import TextInput from '../TextInput.svelte';
-	import { fmsClient } from '$lib/api-client/fms-client';
+	import { fmsClient, getCurrentEventCode } from '$lib/api-client/fms-client';
 	import { onMount } from 'svelte';
 	import { Icon } from '@steeze-ui/svelte-icon';
-	import { CheckCircle, ExclamationTriangle, SignalSlash } from '@steeze-ui/heroicons';
+	import { CheckCircle, ExclamationTriangle, SignalSlash, ArrowPath } from '@steeze-ui/heroicons';
 
 	export let settingsOpen = false;
 
@@ -53,6 +53,15 @@
 			});
 	}
 
+	function syncCurrentEventCode() {
+		getCurrentEventCode().then((fmsEventCode) => {
+			if (fmsEventCode) {
+				settings.eventCode = fmsEventCode;
+				updateSettings();
+			}
+		});
+	}
+
 	function clearStorage() {
 		localStorage.clear();
 		window.location.reload();
@@ -72,7 +81,7 @@
 			</Toggle>
 
 			<div
-				class="flex mt-3 items-center mx-auto space-x-2 sm:mt-0 sm:text-left md:mx-0 md:col-span-2"
+				class="flex pt-4 items-center mx-auto space-x-2 sm:pt-1 sm:text-left md:mx-0 md:col-span-2"
 			>
 				<h3 class="text-base font-semibold leading-6">Credentials</h3>
 				{#if credentialsState === CredentialsState.Valid}
@@ -100,6 +109,22 @@
 				FMS URL
 			</TextInput>
 
+			<div
+				class="flex pt-4 items-center mx-auto space-x-2 sm:pt-1 sm:text-left md:mx-0 md:col-span-2"
+			>
+				<h3 class="text-base font-semibold leading-6">Event configuration</h3>
+			</div>
+
+			<div class="flex space-x-2 md:col-span-2">
+				<TextInput bind:text={settings.eventCode} placeholder="ABCD" onblur={updateSettings}>
+					Event code
+				</TextInput>
+				<Button color="primary" on:click={syncCurrentEventCode}>
+					<Icon src={ArrowPath} theme="solid" size="24" />
+					Sync
+				</Button>
+			</div>
+
 			<div class="grid gap-2 md:col-span-2 mt-2">
 				{#if installPrompt}
 					<Button

ui/src/lib/components/notes/TeamMatchNote.svelte

@@ -1,13 +1,12 @@
 <script lang="ts">
-	import type { components } from '../../../fms/fms-api';
+	import type { TeamIssue } from '$lib/api-client/fms-client';
 
-	type MatchNote = components['schemas']['MatchNoteModel'];
-
-	export let note: MatchNote;
+	export let note: TeamIssue;
 
 	const updateDate = new Date(note.timeUpdated ?? '');
 	const updateDateString = updateDate.toLocaleDateString();
 	const updateTimeString = updateDate.toLocaleTimeString();
+	const author = note.whoUpdated ?? note.whoAdded;
 </script>
 
 <li class="py-5">
@@ -23,7 +22,7 @@
 		</div>
 		<p class="text-base">{note.note}</p>
 		<p class="text-xs italic text-gray-400 justify-self-end">
-			Last updated: {updateDateString} at {updateTimeString}
+			Last updated: {updateDateString} at {updateTimeString} by {author}
 		</p>
 	</div>
 </li>

ui/src/lib/settings-store.ts

@@ -8,6 +8,7 @@ export interface Settings {
 	username: string;
 	key: string;
 	fmsUrl: string;
+	eventCode: string;
 }
 
 let initialSettings = browser ? window.localStorage.getItem('settings') : null;
@@ -18,7 +19,8 @@ const defaultSettings: Settings = {
 	darkMode: true,
 	username: '',
 	key: '',
-	fmsUrl: 'http://10.0.100.5'
+	fmsUrl: 'http://10.0.100.5',
+	eventCode: ''
 };
 
 if (!initialSettings) {

ui/src/routes/notes/[teamNumber]/+page.svelte

@@ -1,50 +1,27 @@
 <script lang="ts">
 	import { page } from '$app/stores';
+	import type { PageData } from './$types';
 	import TeamMatchNote from '$lib/components/notes/TeamMatchNote.svelte';
-	import type { components } from '../../../fms/fms-api';
-
-	type MatchNoteModel = components['schemas']['MatchNoteModel'];
 
 	const params = $page.params;
 
-	const notes: MatchNoteModel[] = [
-		{
-			note: 'Hungry for carpet',
-			noteId: '1',
-			tournamentLevel: 'Practice',
-			matchNumber: 1,
-			playNumber: 1,
-			teamNumber: parseInt(params.teamNumber!),
-			timeAdded: 'Wed Aug 7 2024 00:00:00 GMT+0000 (Coordinated Universal Time)',
-			timeUpdated: 'Wed Aug 7 2024 00:00:00 GMT+0000 (Coordinated Universal Time)',
-			isDeleted: false,
-			whoAdded: '', // TODO will this be a usable format?
-			whoUpdated: '', // TODO will this be a usable format?
-			recordVersion: 1
-		},
-		{
-			note: 'Fire! 🔥',
-			noteId: '1',
-			tournamentLevel: 'Qualification',
-			matchNumber: 23,
-			playNumber: 8,
-			teamNumber: parseInt(params.teamNumber!),
-			timeAdded: 'Wed Aug 7 2024 00:00:00 GMT+0000 (Coordinated Universal Time)',
-			timeUpdated: 'Wed Aug 7 2024 00:00:00 GMT+0000 (Coordinated Universal Time)',
-			isDeleted: false,
-			whoAdded: '', // TODO will this be a usable format?
-			whoUpdated: '', // TODO will this be a usable format?
-			recordVersion: 1
-		}
-	];
+	export let data: PageData;
 </script>
 
 <div>
 	<h1 class="text-2xl font-semibold leading-7">Team {params.teamNumber}</h1>
 </div>
 
-<ul role="list" class="divide-y divide-gray-100">
-	{#each notes as note}
-		<TeamMatchNote {note} />
-	{/each}
-</ul>
+{#if data.notes}
+	{#if data.notes.length > 0}
+		<ul role="list" class="divide-y divide-gray-100">
+			{#each data.notes as note}
+				<TeamMatchNote {note} />
+			{/each}
+		</ul>
+	{:else}
+		<p>No notes yet</p>
+	{/if}
+{:else}
+	<p>Error loading notes: {data.notesError.status}</p>
+{/if}

ui/src/routes/notes/[teamNumber]/+page.ts

@@ -0,0 +1,15 @@
+import { getTeamNotes } from '$lib/api-client/fms-client.js';
+
+export async function load({ fetch, params }) {
+	const { notes, error, response } = await getTeamNotes(fetch, {
+		teamNumber: parseInt(params.teamNumber)
+	});
+
+	return {
+		notes,
+		notesError: {
+			status: response.status,
+			message: error
+		}
+	};
+}