Support adding notes

Author: 333fred

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

@@ -1,6 +1,6 @@
 import createClient, { type Middleware } from 'openapi-fetch';
 import type { paths, components } from '../../fms/fms-api';
-import { TournamentLevel } from '../../fms/fms-api';
+import { TournamentLevel, EventNoteIssueTypes, EventNoteResolutionTypes } from '../../fms/fms-api';
 import { settingsStore } from '$lib/settings-store';
 import { get } from 'svelte/store';
 
@@ -27,6 +27,37 @@ export type MatchNote = components['schemas']['MatchNoteModel'];
 export type ScheduledMatch = components['schemas']['ScheduledMatchModel'];
 export type EventSchedule = components['schemas']['EventScheduleModel'];
 
+// Create/Modify model types
+export type EventNoteCreateRequest = components['schemas']['EventNoteCreateModifyModel'];
+export type MatchNoteCreateRequest = components['schemas']['MatchNoteCreateModifyModel'];
+export type TeamIssueCreateRequest = components['schemas']['TeamIssueCreateModifyModel'];
+
+// Additional type exports for note creation (legacy - keeping for backward compatibility)
+export type CreateEventNoteRequest = {
+	note: string;
+};
+
+export type CreateMatchNoteRequest = {
+	note: string;
+	tournamentLevel: string;
+	matchNumber: number;
+	playNumber?: number;
+	teamNumber?: number;
+};
+
+export type CreateTeamNoteRequest = {
+	noteText: string;
+	teamNumber: number;
+	tournamentLevel?: components['schemas']['TournamentLevel'];
+	matchNumber?: number;
+	playNumber?: number;
+	issueType: components['schemas']['EventNoteIssueTypes'];
+	resolutionStatus: components['schemas']['EventNoteResolutionTypes'];
+};
+
+// Export enums for use in components
+export { EventNoteIssueTypes, EventNoteResolutionTypes, TournamentLevel };
+
 // Team Issues/Notes API
 export async function getTeamNotes(
 	fetch: typeof globalThis.fetch,
@@ -225,3 +256,176 @@ export function countTeamGeneralNotes(teamNotes: TeamIssue[], teamNumber: number
 			!note.isDeleted
 	).length;
 }
+
+export async function createEventNote(
+	fetch: typeof globalThis.fetch,
+	noteData: CreateEventNoteRequest
+) {
+	const settings = get(settingsStore);
+
+	// Log the note data for debugging
+	console.log('Creating event note:', {
+		note: noteData.note,
+		eventCode: settings.eventCode,
+		username: settings.username,
+		realName: settings.realName
+	});
+
+	const { data, error, response } = await fmsClient.POST(
+		'/api/v1.0/FTA/{season}/{eventCode}/eventNotes',
+		{
+			params: {
+				path: {
+					season: season,
+					eventCode: settings.eventCode
+				},
+				header: {
+					'FMS-UsersRealName': settings.realName || settings.username,
+					'FMS-DeviceIdentification': getDeviceName()
+				}
+			},
+			body: { noteText: noteData.note },
+			fetch
+		}
+	);
+
+	return { data, error, response };
+}
+
+export async function createMatchNote(
+	fetch: typeof globalThis.fetch,
+	noteData: CreateMatchNoteRequest
+) {
+	const settings = get(settingsStore);
+
+	// Log the note data for debugging
+	console.log('Creating match note:', {
+		note: noteData.note,
+		tournamentLevel: noteData.tournamentLevel,
+		matchNumber: noteData.matchNumber,
+		playNumber: noteData.playNumber,
+		teamNumber: noteData.teamNumber,
+		eventCode: settings.eventCode,
+		username: settings.username,
+		realName: settings.realName
+	});
+
+	const { data, error, response } = await fmsClient.POST(
+		'/api/v1.0/FTA/{season}/{eventCode}/matchNotes',
+		{
+			params: {
+				path: {
+					season: season,
+					eventCode: settings.eventCode
+				},
+				header: {
+					'FMS-UsersRealName': settings.realName || settings.username,
+					'FMS-DeviceIdentification': getDeviceName()
+				}
+			},
+			body: {
+				noteText: noteData.note,
+				tournamentLevel: noteData.tournamentLevel,
+				matchNumber: noteData.matchNumber,
+				playNumber: noteData.playNumber,
+				teamNumber: noteData.teamNumber
+			},
+			fetch
+		}
+	);
+
+	return { data, error, response };
+}
+
+export async function createTeamNote(
+	fetch: typeof globalThis.fetch,
+	noteData: CreateTeamNoteRequest
+) {
+	const settings = get(settingsStore);
+
+	// Log the note data for debugging
+	console.log('Creating team note:', {
+		note: noteData.noteText,
+		teamNumber: noteData.teamNumber,
+		tournamentLevel: noteData.tournamentLevel,
+		matchNumber: noteData.matchNumber,
+		playNumber: noteData.playNumber,
+		issueType: noteData.issueType,
+		resolutionStatus: noteData.resolutionStatus,
+		eventCode: settings.eventCode,
+		username: settings.username,
+		realName: settings.realName
+	});
+
+	const { data, error, response } = await fmsClient.POST(
+		'/api/v1.0/FTA/{season}/{eventCode}/teamIssues',
+		{
+			params: {
+				path: {
+					season: season,
+					eventCode: settings.eventCode
+				},
+				header: {
+					'FMS-UsersRealName': settings.realName || settings.username,
+					'FMS-DeviceIdentification': getDeviceName()
+				}
+			},
+			body: {
+				noteText: noteData.noteText,
+				teamNumber: noteData.teamNumber,
+				tournamentLevel: noteData.tournamentLevel,
+				matchNumber: noteData.matchNumber,
+				playNumber: noteData.playNumber,
+				issueType: noteData.issueType,
+				resolutionStatus: noteData.resolutionStatus
+			},
+			fetch
+		}
+	);
+
+	return { data, error, response };
+}
+
+// Helper to get current username
+export function getCurrentUsername(): string {
+	return get(settingsStore).username || 'Unknown User';
+}
+
+// Function to generate a device name using browser APIs
+export function getDeviceName(): string {
+	const userAgent = navigator.userAgent;
+	let browserName = 'Unknown Browser';
+	let osName = 'Unknown OS';
+
+	// Detect browser
+	if (userAgent.includes('Chrome') && !userAgent.includes('Edg')) {
+		browserName = 'Chrome';
+	} else if (userAgent.includes('Firefox')) {
+		browserName = 'Firefox';
+	} else if (userAgent.includes('Safari') && !userAgent.includes('Chrome')) {
+		browserName = 'Safari';
+	} else if (userAgent.includes('Edg')) {
+		browserName = 'Edge';
+	} else if (userAgent.includes('Opera') || userAgent.includes('OPR')) {
+		browserName = 'Opera';
+	}
+
+	// Detect OS
+	if (userAgent.includes('Windows NT')) {
+		osName = 'Windows';
+	} else if (userAgent.includes('Mac OS X')) {
+		osName = 'macOS';
+	} else if (userAgent.includes('Linux')) {
+		osName = 'Linux';
+	} else if (userAgent.includes('Android')) {
+		osName = 'Android';
+	} else if (userAgent.includes('iOS')) {
+		osName = 'iOS';
+	}
+
+	// Try to get hostname if available
+	const hostname = window.location.hostname;
+	const deviceId = hostname !== 'localhost' && hostname !== '127.0.0.1' ? hostname : 'local-device';
+
+	return `${browserName} on ${osName} (${deviceId})`;
+}

ui/src/lib/components/Button.svelte

@@ -9,6 +9,7 @@
 		disabled?: boolean;
 		class?: string;
 		defaultClass?: string;
+		onclick?: (event: MouseEvent) => void;
 		children: any;
 	}
 
@@ -18,6 +19,7 @@
 		color = 'primary',
 		inline = true,
 		disabled = false,
+		onclick,
 		defaultClass = 'items-center justify-center gap-x-2 rounded-lg px-3.5 py-2.5 text-sm font-semibold shadow-sm hover:bg-gray-100 p-2 text-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2',
 		children,
 		...restProps
@@ -35,13 +37,15 @@
 		white: 'bg-white hover:bg-gray-100 text-black focus-visible:bg-white'
 	};
 
-	let buttonClass = '';
-	buttonClass = twMerge(
-		defaultClass,
-		inline ? 'inline-flex' : '',
-		colorClass[color],
-		disabled && 'cursor-not-allowed opacity-50',
-		restProps.class
+	let disabledClass = 'cursor-not-allowed opacity-50 bg-gray-400 hover:bg-gray-400 text-gray-200';
+
+	let buttonClass = $derived(
+		twMerge(
+			defaultClass,
+			inline ? 'inline-flex' : '',
+			disabled ? disabledClass : colorClass[color],
+			restProps.class
+		)
 	);
 </script>
 
@@ -50,7 +54,7 @@
 		{@render children()}
 	</a>
 {:else}
-	<button {type} {...restProps} class={buttonClass} on:click>
+	<button {type} {onclick} class={buttonClass} {...restProps}>
 		{@render children()}
 	</button>
 {/if}

ui/src/lib/components/MatchCard.svelte

@@ -8,9 +8,11 @@
 		match: ScheduledMatch;
 		matchNotes: MatchNote[];
 		teamNotes: TeamIssue[];
+		onAddMatchNote?: (matchNumber: number, tournamentLevel: string) => void;
+		onAddTeamNote?: (teamNumber: number, matchNumber?: number, tournamentLevel?: string) => void;
 	}
 
-	let { match, matchNotes, teamNotes }: MatchCardProps = $props();
+	let { match, matchNotes, teamNotes, onAddMatchNote, onAddTeamNote }: MatchCardProps = $props();
 
 	let matchNoteCount = $derived(
 		countMatchNotes(matchNotes, match.matchNumber || 0, match.level || '')
@@ -24,11 +26,17 @@
 
 	// Split teams by alliance
 	let blueTeams = $derived(
-		match.teams?.filter(team => team.station?.toLowerCase().includes('blue')) || []
+		match.teams?.filter((team) => team.station?.toLowerCase().includes('blue')) || []
 	);
 	let redTeams = $derived(
-		match.teams?.filter(team => team.station?.toLowerCase().includes('red')) || []
+		match.teams?.filter((team) => team.station?.toLowerCase().includes('red')) || []
 	);
+
+	function handleAddMatchNote() {
+		if (onAddMatchNote && match.matchNumber && match.level) {
+			onAddMatchNote(match.matchNumber, match.level);
+		}
+	}
 </script>
 
 <div class="border border-gray-200 rounded-lg p-4 bg-gray-50 dark:border-gray-700 dark:bg-gray-900">
@@ -49,7 +57,12 @@
 			{#if startTime}
 				<span>{startTime}</span>
 			{/if}
-			<NoteCount count={matchNoteCount} label="Match Notes" variant="match" />
+			<NoteCount
+				count={matchNoteCount}
+				label="Match Notes"
+				variant="match"
+				onAddNote={handleAddMatchNote}
+			/>
 		</div>
 	</div>
 
@@ -70,10 +83,13 @@
 							{teamNotes}
 							matchNumber={match.matchNumber}
 							tournamentLevel={match.level || undefined}
+							onAddNote={onAddTeamNote}
 						/>
 					{/each}
 					{#if blueTeams.length === 0}
-						<div class="text-center py-2 text-xs text-gray-400 border border-dashed border-gray-300 rounded dark:border-gray-600">
+						<div
+							class="text-center py-2 text-xs text-gray-400 border border-dashed border-gray-300 rounded dark:border-gray-600"
+						>
 							No teams assigned
 						</div>
 					{/if}
@@ -95,10 +111,13 @@
 							{teamNotes}
 							matchNumber={match.matchNumber}
 							tournamentLevel={match.level || undefined}
+							onAddNote={onAddTeamNote}
 						/>
 					{/each}
 					{#if redTeams.length === 0}
-						<div class="text-center py-2 text-xs text-gray-400 border border-dashed border-gray-300 rounded dark:border-gray-600">
+						<div
+							class="text-center py-2 text-xs text-gray-400 border border-dashed border-gray-300 rounded dark:border-gray-600"
+						>
 							No teams assigned
 						</div>
 					{/if}

ui/src/lib/components/NoteCount.svelte

@@ -3,9 +3,10 @@
 		count: number;
 		label: string;
 		variant?: 'default' | 'match' | 'team';
+		onAddNote?: () => void;
 	}
 
-	let { count = 0, label, variant = 'default' }: NoteCountProps = $props();
+	let { count = 0, label, variant = 'default', onAddNote }: NoteCountProps = $props();
 
 	const getVariantClasses = (variant: string) => {
 		switch (variant) {
@@ -19,13 +20,27 @@
 	};
 </script>
 
-<div class="inline-flex items-center gap-1">
-	<span class="text-sm text-gray-600 dark:text-gray-400">{label}:</span>
-	<span
-		class="inline-flex items-center rounded-full px-2 py-1 text-xs font-medium {getVariantClasses(
-			variant
-		)}"
-	>
-		{count}
-	</span>
+<div class="inline-flex items-center gap-2">
+	<div class="inline-flex items-center gap-1">
+		<span class="text-sm text-gray-600 dark:text-gray-400">{label}:</span>
+		<span
+			class="inline-flex items-center rounded-full px-2 py-1 text-xs font-medium {getVariantClasses(
+				variant
+			)}"
+		>
+			{count}
+		</span>
+	</div>
+	{#if onAddNote}
+		<button
+			onclick={onAddNote}
+			class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 transition-colors"
+			title="Add Note"
+			aria-label="Add Note"
+		>
+			<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+			</svg>
+		</button>
+	{/if}
 </div>