Show unseen assignments (#114)

* Show unseen assignments

* Don't create ids for non-real assignments

src/lib/assignments.ts

@@ -11,6 +11,7 @@ export interface Category {
 
 interface Assignment {
 	name: string;
+	id: string | undefined;
 	pointsEarned: number | undefined;
 	pointsPossible: number | undefined;
 	unscaledPoints: { pointsEarned: number; pointsPossible: number } | undefined;
@@ -24,13 +25,15 @@ interface Assignment {
 }
 
 export interface RealAssignment extends Assignment {
+	id: string;
 	hidden: false;
 	category: string;
 	date: Date;
 	newHypothetical: false;
 }
 
 export interface HiddenAssignment extends Assignment {
+	id: undefined;
 	pointsEarned: number;
 	pointsPossible: number;
 	unscaledPoints: undefined;
@@ -47,6 +50,7 @@ export interface ReactiveAssignment extends Assignment {
 }
 
 export interface NewHypotheticalAssignment extends ReactiveAssignment {
+	id: undefined;
 	newHypothetical: true;
 	unscaledPoints: undefined;
 	extraCredit: false;
@@ -286,6 +290,7 @@ export function getHiddenAssignmentsFromCategories(
 
 			const hiddenAssignment: Flowed<HiddenAssignment> = {
 				name: `Hidden ${category.name} Assignments`,
+				id: undefined,
 				pointsEarned: hiddenPointsEarned,
 				pointsPossible: hiddenPointsPossible,
 				unscaledPoints: undefined,
@@ -515,6 +520,7 @@ export function parseSynergyAssignment(synergyAssignment: AssignmentEntity) {
 
 	const assignment: RealAssignment = {
 		name: _Measure,
+		id: synergyAssignment._GradebookID,
 		pointsEarned,
 		pointsPossible,
 		unscaledPoints,

src/lib/index.ts

@@ -67,7 +67,7 @@ export async function getBlobURLFromBase64String(base64: string) {
 export enum LocalStorageKey {
 	token = 'token',
 	gradebook = 'gradebook2',
-	periodOverrideState = 'periodOverrideState',
+	seenAssignmentIDs = 'seenAssignmentIDs',
 	attendance = 'attendance',
 	documents = 'documents',
 	mailData = 'mailData',
@@ -115,15 +115,19 @@ export const loadRecord = async <T>(
 	}
 
 	if (refresh || forceRefresh) {
-		recordState.data = await loadFunc();
-		recordState.lastRefresh = Date.now();
+		try {
+			recordState.data = await loadFunc();
+			recordState.lastRefresh = Date.now();
 
-		const newCache: LocalStorageCache<T> = {
-			data: recordState.data,
-			lastRefresh: recordState.lastRefresh
-		};
+			const newCache: LocalStorageCache<T> = {
+				data: recordState.data,
+				lastRefresh: recordState.lastRefresh
+			};
 
-		localStorage.setItem(localStorageKey, JSON.stringify(newCache));
+			localStorage.setItem(localStorageKey, JSON.stringify(newCache));
+		} catch (err) {
+			console.error(err);
+		}
 	}
 
 	recordState.loaded = true;

src/lib/types/Gradebook.ts

@@ -49,7 +49,7 @@ export interface Mark {
 }
 
 export interface Assignments {
-	Assignment: AssignmentEntity[];
+	Assignment?: AssignmentEntity[];
 }
 
 export interface AssignmentEntity {

src/routes/(authed)/+layout.svelte

@@ -46,7 +46,7 @@
 			class="ml-0 text-white"
 		/>
 		<a href="/grades" class="mr-auto text-xl text-white">GradeVue</a>
-		<div>{studentInfoState.studentInfo?.FormattedName}</div>
+		<div>{studentInfoState.data?.FormattedName}</div>
 	</div>
 
 	<div class="overflow-y-auto">

src/routes/(authed)/documents/documents.svelte.ts

@@ -15,4 +15,4 @@ export const loadDocuments = async (forceRefresh = false) => {
 		1000 * 60 * 60 * 24,
 		forceRefresh
 	);
-}
+};

src/routes/(authed)/grades/+layout.svelte

@@ -39,7 +39,9 @@
 			Viewing reporting period {currentGradebookState.data.ReportingPeriod._GradePeriod}
 		</span>
 
-		<Button onclick={() => showGradebook()} color="light">Return to {activeReportingPeriodName}</Button>
+		<Button onclick={() => showGradebook()} color="light">
+			Return to {activeReportingPeriodName}
+		</Button>
 	</Alert>
 {/if}
 

src/routes/(authed)/grades/+page.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
 	import { getColorForGrade, removeClassID } from '$lib';
+	import { parseSynergyAssignment } from '$lib/assignments';
+	import type { AssignmentEntity } from '$lib/types/Gradebook';
 	import NumberFlow from '@number-flow/svelte';
-	import { Alert, Button, Card, Dropdown, DropdownItem, Progressbar } from 'flowbite-svelte';
+	import { Alert, Badge, Button, Card, Dropdown, DropdownItem, Progressbar } from 'flowbite-svelte';
 	import ChevronDownOutline from 'flowbite-svelte-icons/ChevronDownOutline.svelte';
 	import ChevronUpOutline from 'flowbite-svelte-icons/ChevronUpOutline.svelte';
 	import CloseCircleOutline from 'flowbite-svelte-icons/CloseCircleOutline.svelte';
@@ -10,6 +12,7 @@
 		getCurrentGradebookState,
 		getPeriodIndex,
 		gradebooksState,
+		seenAssignmentIDs,
 		showGradebook
 	} from './gradebook.svelte';
 
@@ -29,6 +32,9 @@
 		if (currentPeriodIndex === -1)
 			throw new Error('Could not find index of current reporting period');
 	});
+
+	const getUnseenAssignmentsCount = (assignments: AssignmentEntity[]) =>
+		assignments.map(parseSynergyAssignment).filter(({ id }) => !seenAssignmentIDs.has(id)).length;
 </script>
 
 <svelte:head>
@@ -82,20 +88,25 @@
 		{/if}
 
 		<ol class="space-y-4">
-			{#each currentGradebookState.data.Courses.Course ?? [] as { _Title: title, Marks: { Mark: { _CalculatedScoreString: grade, _CalculatedScoreRaw: percent } } }, index}
+			{#each currentGradebookState.data.Courses.Course ?? [] as { _Title: title, Marks: { Mark: { _CalculatedScoreString: grade, _CalculatedScoreRaw: percent, Assignments } } }, index}
 				<li>
 					<Card
-						class="flex max-w-none flex-row items-center justify-between text-xl dark:text-white"
+						class="flex max-w-none flex-row items-center gap-2 text-xl dark:text-white"
 						href="/grades/{index.toString()}"
 					>
-						<span class="mr-2 line-clamp-1">{removeClassID(title)}</span>
-						<span class="ml-auto mr-2 shrink-0">
-							<NumberFlow
-								prefix={grade + ' '}
-								value={parseFloat(percent) / 100}
-								format={{ style: 'percent', maximumFractionDigits: 3 }}
-							/>
-						</span>
+						<span class="mr-auto line-clamp-1">{removeClassID(title)}</span>
+
+						{#if Assignments.Assignment && getUnseenAssignmentsCount(Assignments.Assignment) > 0}
+							<Badge color="green" class="text-center shrink-0">
+								{getUnseenAssignmentsCount(Assignments.Assignment)} new
+							</Badge>
+						{/if}
+
+						<NumberFlow
+							prefix={grade + ' '}
+							value={parseFloat(percent) / 100}
+							format={{ style: 'percent', maximumFractionDigits: 3 }}
+						/>
 
 						<Progressbar
 							color={getColorForGrade(grade)}

src/routes/(authed)/grades/[index]/+page.svelte

@@ -44,7 +44,12 @@
 	import InfoCircleOutline from 'flowbite-svelte-icons/InfoCircleOutline.svelte';
 	import { untrack } from 'svelte';
 	import { fade } from 'svelte/transition';
-	import { getCurrentGradebookState, gradebooksState } from '../gradebook.svelte';
+	import {
+		getCurrentGradebookState,
+		gradebooksState,
+		saveSeenAssignments,
+		seenAssignmentIDs
+	} from '../gradebook.svelte';
 	import AssignmentCard from './AssignmentCard.svelte';
 
 	const gradebookState = $derived(getCurrentGradebookState(gradebooksState));
@@ -148,6 +153,7 @@
 	function addHypotheticalAssignment() {
 		const newHypotheticalAssignment: NewHypotheticalAssignment = $state({
 			name: 'Hypothetical Assignment',
+			id: undefined,
 			pointsEarned: undefined,
 			pointsPossible: undefined,
 			unscaledPoints: undefined,
@@ -181,6 +187,10 @@
 	// https://github.com/barvian/number-flow/blob/e9fc6999417df7cb7e7b290f7f2019f570c18cc7/packages/number-flow/src/index.ts#L73
 	const easing =
 		'linear(0,.005,.019,.039,.066,.096,.129,.165,.202,.24,.278,.316,.354,.39,.426,.461,.494,.526,.557,.586,.614,.64,.665,.689,.711,.731,.751,.769,.786,.802,.817,.831,.844,.856,.867,.877,.887,.896,.904,.912,.919,.925,.931,.937,.942,.947,.951,.955,.959,.962,.965,.968,.971,.973,.976,.978,.98,.981,.983,.984,.986,.987,.988,.989,.99,.991,.992,.992,.993,.994,.994,.995,.995,.996,.996,.9963,.9967,.9969,.9972,.9975,.9977,.9979,.9981,.9982,.9984,.9985,.9987,.9988,.9989,1)';
+
+	const unseenAssignments = $derived(
+		realAssignments.filter(({ id }) => !seenAssignmentIDs.has(id))
+	);
 </script>
 
 <svelte:head>
@@ -297,6 +307,24 @@
 		</Alert>
 	{/if}
 
+	{#if unseenAssignments.length > 0 && !hypotheticalMode}
+		<div transition:fade={{ duration: 200 }} class="mt-4">
+			<Alert color="green" border class="mx-4 flex items-center justify-between p-2 text-base">
+				{unseenAssignments.length} new assignments
+				<Button
+					color="green"
+					size="sm"
+					onclick={() => {
+						unseenAssignments.forEach(({ id }) => seenAssignmentIDs.add(id));
+						saveSeenAssignments();
+					}}
+				>
+					Mark as seen
+				</Button>
+			</Alert>
+		</div>
+	{/if}
+
 	<div class="flex flex-wrap items-center justify-between">
 		<Checkbox bind:checked={hypotheticalMode} class="m-4">
 			<div id="hypothetical-toggle" class="mr-2 flex items-center">
@@ -345,7 +373,7 @@
 								</li>
 							{/each}
 						{:else}
-							{#each assignments as { name, pointsEarned, pointsPossible, unscaledPoints, extraCredit, gradePercentageChange, notForGrade, hidden, category, date }}
+							{#each assignments as { name, id, pointsEarned, pointsPossible, unscaledPoints, extraCredit, gradePercentageChange, notForGrade, hidden, category, date }}
 								<li>
 									<AssignmentCard
 										{name}
@@ -358,6 +386,7 @@
 										{hidden}
 										{category}
 										{date}
+										unseen={id ? !seenAssignmentIDs.has(id) : false}
 									/>
 								</li>
 							{/each}
@@ -395,7 +424,7 @@
 									{/if}
 								{/each}
 							{:else}
-								{#each assignments as { name, pointsEarned, pointsPossible, unscaledPoints, extraCredit, gradePercentageChange, notForGrade, hidden, category, date }}
+								{#each assignments as { name, id, pointsEarned, pointsPossible, unscaledPoints, extraCredit, gradePercentageChange, notForGrade, hidden, category, date }}
 									{#if category === categoryName}
 										<li>
 											<AssignmentCard
@@ -410,6 +439,7 @@
 												{notForGrade}
 												{hidden}
 												{date}
+												unseen={id ? !seenAssignmentIDs.has(id) : false}
 											/>
 										</li>
 									{/if}

src/routes/(authed)/grades/[index]/AssignmentCard.svelte

@@ -31,6 +31,7 @@
 		categoryDropdownOptions?: string[];
 		date?: Date | undefined;
 		editable?: boolean;
+		unseen?: boolean;
 		recalculateGradePercentage?: () => void;
 	}
 
@@ -48,6 +49,7 @@
 		categoryDropdownOptions = [],
 		date = undefined,
 		editable = false,
+		unseen = false,
 		recalculateGradePercentage = () => {}
 	}: Props = $props();
 
@@ -66,9 +68,13 @@
 	);
 
 	let percentageChange = $derived(Math.round((gradePercentageChange ?? 0) * 100) / 100);
+
+	const border = $derived(unseen ? 'dark:border-t-green-600 border-t-4' : '');
 </script>
 
-<Card class="flex max-w-none flex-row items-center dark:text-white sm:p-4">
+<Card
+	class="flex max-w-none flex-row items-center transition duration-500 dark:text-white sm:p-4 {border}"
+>
 	<div class="mr-2">
 		{#if editable}
 			<Input bind:value={name} class="inline w-48" />