Show grade percentage changes

src/lib/AppSidebar.svelte → src/lib/components/AppSidebar.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { browser } from '$app/environment';
 	import { page } from '$app/stores';
+	import { loadStudentInfo } from '$lib/cache';
+	import { studentInfo } from '$lib/stores';
 	import {
 		Sidebar,
 		SidebarBrand,
@@ -18,8 +20,6 @@
 		MailBoxOutline,
 		UserCircleOutline
 	} from 'flowbite-svelte-icons';
-	import { loadStudentInfo } from './cache';
-	import { studentInfo } from './stores';
 
 	function logOut() {
 		localStorage.clear();

src/lib/Assignment.svelte → src/lib/components/Assignment.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import DateBadge from '$lib/DateBadge.svelte';
-	import { getColorForGrade } from '$lib/index';
-	import { hypotheticalGradebook } from '$lib/stores';
+	import { getColorForGrade } from '$lib';
+	import DateBadge from '$lib/components/DateBadge.svelte';
 	import {
 		Badge,
 		Button,
@@ -10,23 +9,23 @@
 		Dropdown,
 		DropdownItem,
 		Input,
+		NumberInput,
 		Progressbar
 	} from 'flowbite-svelte';
 	import { ChevronDownOutline, InfoCircleOutline } from 'flowbite-svelte-icons';
-	import { onDestroy } from 'svelte';
-	import { writable } from 'svelte/store';
 
 	export let name: string;
 	export let pointsEarned: number;
 	export let pointsPossible: number;
-	export let id: string;
-	export let category: string | undefined = undefined;
-	export let date: Date | undefined = undefined;
-	export let hypotheticalMode = false;
-	export let hidden = false;
+	export let gradePercentageChange: number;
 	export let notForGrade = false;
+	export let hidden = false;
 	export let hypothetical = false;
-	export let hypotheticalCategoryOptions: string[] = [];
+	export let category: string | undefined = undefined;
+	export let categoryDropdownOptions: string[] = [];
+	export let date: Date | undefined = undefined;
+	export let editable = false;
+	export let recalculateGradePercentage: () => void;
 
 	let categoryDropdownOpen = false;
 
@@ -38,61 +37,32 @@
 		return 'primary';
 	};
 
-	$: percentage = hypotheticalMode
-		? ($hypotheticalGradebook[id].pointsEarned / $hypotheticalGradebook[id].pointsPossible) * 100
-		: (pointsEarned / pointsPossible) * 100;
-
-	let pointsEarnedInput = writable($hypotheticalGradebook[id].pointsEarned.toString());
-	let pointsPossibleInput = writable($hypotheticalGradebook[id].pointsPossible.toString());
-
-	const earnedUnsubscribe = pointsEarnedInput.subscribe((pointsEarned) => {
-		$hypotheticalGradebook[id].pointsEarned = parseFloat(pointsEarned);
-	});
+	$: percentage = (pointsEarned / pointsPossible) * 100;
 
-	const possibleUnsubscribe = pointsPossibleInput.subscribe((pointsPossible) => {
-		$hypotheticalGradebook[id].pointsPossible = parseFloat(pointsPossible);
-	});
-
-	const hypotheticalUnsubscribe = hypotheticalGradebook.subscribe((gradebook) => {
-		if (!gradebook[id]) {
-			console.error(`Missing expected hypothetical assignment ${id} with name ${name}`);
-			return;
-		}
-
-		if (gradebook[id].pointsEarned !== parseFloat($pointsEarnedInput))
-			$pointsEarnedInput = gradebook[id].pointsEarned.toString();
-
-		if (gradebook[id].pointsPossible !== parseFloat($pointsPossibleInput))
-			$pointsPossibleInput = gradebook[id].pointsPossible.toString();
-	});
-
-	onDestroy(() => {
-		earnedUnsubscribe();
-		possibleUnsubscribe();
-		hypotheticalUnsubscribe();
-	});
+	$: percentageChange = Math.round(gradePercentageChange * 100) / 100;
 </script>
 
 <Card class="dark:text-white max-w-none flex flex-row items-center sm:p-4">
 	<div class="mr-2">
-		{#if hypotheticalMode && hypothetical}
+		{#if editable && hypothetical}
 			<Input bind:value={name} class="w-48 inline" />
 
-			{#if hypotheticalCategoryOptions.length > 0}
+			{#if categoryDropdownOptions.length > 0}
 				<Button color="light">
 					{category ?? 'Category'}
 					<ChevronDownOutline size="xs" class="ml-2 focus:outline-none" />
 				</Button>
 
 				<Dropdown bind:open={categoryDropdownOpen}>
-					{#each hypotheticalCategoryOptions as category}
+					{#each categoryDropdownOptions as categoryOption}
 						<DropdownItem
 							on:click={() => {
-								$hypotheticalGradebook[id].category = category;
+								category = categoryOption;
 								categoryDropdownOpen = false;
+								recalculateGradePercentage();
 							}}
 						>
-							{category}
+							{categoryOption}
 						</DropdownItem>
 					{/each}
 				</Dropdown>
@@ -108,13 +78,13 @@
 		{#if percentage == Infinity}
 			<Badge border color="indigo">Extra Credit</Badge>
 		{/if}
-		{#if hypotheticalMode ? isNaN($hypotheticalGradebook[id].pointsEarned) : isNaN(pointsEarned)}
+		{#if isNaN(pointsEarned)}
 			<Badge border color="purple">Not Graded</Badge>
 		{/if}
 		{#if notForGrade}
 			<Badge border color="pink">
-				{#if hypotheticalMode}
-					<Checkbox bind:checked={$hypotheticalGradebook[id].notForGrade}>
+				{#if editable}
+					<Checkbox bind:checked={notForGrade} on:change={recalculateGradePercentage}>
 						<span class="text-xs">Not For Grade</span>
 					</Checkbox>
 				{:else}
@@ -135,12 +105,24 @@
 		{/if}
 	</div>
 
-	<div class="ml-auto mr-2 shrink-0">
-		{#if hypotheticalMode}
+	<div class="ml-auto mr-2 shrink-0 flex items-center gap-2">
+		{#if percentageChange < 0}
+			<span class="text-red-500">
+				{percentageChange}%
+			</span>
+		{:else if percentageChange > 0}
+			<span class="text-green-500">
+				+{percentageChange}%
+			</span>
+		{:else if !notForGrade && !isNaN(pointsEarned)}
+			<span class="text-gray-500">+0%</span>
+		{/if}
+
+		{#if editable}
 			<div class="w-32 flex items-center">
-				<Input type="number" size="sm" bind:value={$pointsEarnedInput} />
+				<NumberInput type="number" size="sm" bind:value={pointsEarned} on:input={recalculateGradePercentage}/>
 				<span class="mx-1"> / </span>
-				<Input type="number" size="sm" bind:value={$pointsPossibleInput} />
+				<NumberInput type="number" size="sm" bind:value={pointsPossible} on:input={recalculateGradePercentage} />
 			</div>
 		{:else if isNaN(pointsEarned)}
 			{pointsPossible}
@@ -151,6 +133,7 @@
 			{/if}
 		{/if}
 	</div>
+
 	<Progressbar
 		color={getColorForGrade(percentage)}
 		progress={Math.min(isNaN(percentage) ? 0 : percentage, 100)}

src/lib/Course.svelte → src/lib/components/Course.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getColorForGrade } from '$lib/index';
+	import { getColorForGrade } from '$lib';
 	import { Card, Progressbar } from 'flowbite-svelte';
 
 	export let href: string;

src/lib/DateBadge.svelte → src/lib/components/DateBadge.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { fullDateFormatter, getRelativeTime, shortDateFormatter } from '$lib/index';
+	import { fullDateFormatter, getRelativeTime, shortDateFormatter } from '$lib';
 	import { Badge, Popover } from 'flowbite-svelte';
 
 	export let date: Date;

src/lib/stores.ts

@@ -1,30 +1,20 @@
-import { writable } from 'svelte/store';
 import type { Writable } from 'svelte/store';
+import { writable } from 'svelte/store';
 
 import type { StudentAccount } from '$lib/synergy';
-import type { Gradebook } from '$lib/Gradebook';
-import type { Attendance } from '$lib/Attendance';
-import type { StudentInfo } from '$lib/StudentInfo';
-import type { ReportCardListEntity } from '$lib/ReportCardListEntity';
-import type { DocumentsList } from './DocumentsList';
-import type { Message } from './Message';
+import type { Attendance } from '$lib/types/Attendance';
+import type { Gradebook } from '$lib/types/Gradebook';
+import type { ReportCardListEntity } from '$lib/types/ReportCardListEntity';
+import type { StudentInfo } from '$lib/types/StudentInfo';
+import type { DocumentsList } from '$lib/types/DocumentsList';
+import type { Message } from './types/Message';
 
 export const studentAccount: Writable<StudentAccount | undefined> = writable();
 
 export const gradebook: Writable<Gradebook | undefined> = writable();
 
 export const gradebookLoaded = writable(false);
 
-export const hypotheticalGradebook: Writable<{
-	[id: string]: {
-		pointsEarned: number;
-		pointsPossible: number;
-		notForGrade: boolean;
-		category?: string;
-		name?: string;
-	};
-}> = writable({});
-
 export const attendance: Writable<Attendance | undefined> = writable();
 
 export const attendanceLoaded = writable(false);

src/lib/synergy.ts

@@ -1,10 +1,10 @@
-import type { Attendance } from '$lib/Attendance';
-import type { DocumentsList } from '$lib/DocumentsList';
-import type { Gradebook } from '$lib/Gradebook';
-import type { Message } from '$lib/Message';
-import type { ReportCardDocument } from '$lib/ReportCardDocument';
-import type { ReportCardListEntity } from '$lib/ReportCardListEntity';
-import type { StudentInfo } from '$lib/StudentInfo';
+import type { Attendance } from '$lib/types/Attendance';
+import type { DocumentsList } from '$lib/types/DocumentsList';
+import type { Gradebook } from '$lib/types/Gradebook';
+import type { Message } from '$lib/types/Message';
+import type { ReportCardDocument } from '$lib/types/ReportCardDocument';
+import type { ReportCardListEntity } from '$lib/types/ReportCardListEntity';
+import type { StudentInfo } from '$lib/types/StudentInfo';
 import { XMLBuilder, XMLParser } from 'fast-xml-parser';
 
 const alwaysArray = [

src/lib/Attendance.d.ts → src/lib/types/Attendance.d.ts

@@ -1,10 +1,10 @@
 export interface Attendance {
 	Absences: Absences;
-	TotalExcused: TotalExcusedOrTotalTardiesOrTotalUnexcusedOrTotalActivitiesOrTotalUnexcusedTardies;
-	TotalTardies: TotalExcusedOrTotalTardiesOrTotalUnexcusedOrTotalActivitiesOrTotalUnexcusedTardies;
-	TotalUnexcused: TotalExcusedOrTotalTardiesOrTotalUnexcusedOrTotalActivitiesOrTotalUnexcusedTardies;
-	TotalActivities: TotalExcusedOrTotalTardiesOrTotalUnexcusedOrTotalActivitiesOrTotalUnexcusedTardies;
-	TotalUnexcusedTardies: TotalExcusedOrTotalTardiesOrTotalUnexcusedOrTotalActivitiesOrTotalUnexcusedTardies;
+	TotalExcused: TotalAttendanceEvents;
+	TotalTardies: TotalAttendanceEvents;
+	TotalUnexcused: TotalAttendanceEvents;
+	TotalActivities: TotalAttendanceEvents;
+	TotalUnexcusedTardies: TotalAttendanceEvents;
 	ConcurrentSchoolsLists: string;
 	'_xmlns:xsd': string;
 	'_xmlns:xsi': string;
@@ -41,7 +41,7 @@ export interface PeriodEntity {
 	_StaffGU: string;
 	_OrgYearGU: string;
 }
-export interface TotalExcusedOrTotalTardiesOrTotalUnexcusedOrTotalActivitiesOrTotalUnexcusedTardies {
+export interface TotalAttendanceEvents {
 	PeriodTotal?: PeriodTotalEntity[] | null;
 }
 export interface PeriodTotalEntity {

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

@@ -2,7 +2,7 @@
 	import { browser } from '$app/environment';
 	import { goto } from '$app/navigation';
 	import { navigating } from '$app/stores';
-	import AppSidebar from '$lib/AppSidebar.svelte';
+	import AppSidebar from '$lib/components/AppSidebar.svelte';
 	import { studentAccount } from '$lib/stores';
 	import { StudentAccount } from '$lib/synergy';
 	import { Drawer, Navbar, NavBrand, NavHamburger } from 'flowbite-svelte';

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

@@ -1,18 +1,18 @@
 <script lang="ts">
 	import { browser } from '$app/environment';
 	import { fullDateFormatter, removeClassID } from '$lib';
-	import type { PeriodEntity } from '$lib/Attendance';
-	import LoadingBanner from '$lib/LoadingBanner.svelte';
 	import { loadAttendance } from '$lib/cache';
+	import LoadingBanner from '$lib/components/LoadingBanner.svelte';
 	import { attendance, attendanceLoaded } from '$lib/stores';
+	import type { PeriodEntity } from '$lib/types/Attendance';
 	import { Accordion, AccordionItem, Badge } from 'flowbite-svelte';
 
 	if (!$attendance && browser) loadAttendance();
 
 	function getAbsenceType(periods: PeriodEntity[]) {
 		const reasons = periods.map((period: PeriodEntity) => period._Name);
 
-		if (reasons.some((reason) => reason === 'Absent')) return 'Absent';
+		if (reasons.some((reason) => reason === 'Absent' || reason === 'Non ADA')) return 'Absent';
 
 		if (reasons.some((reason) => reason.match(/Tardy/))) return 'Tardy';
 

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

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { browser } from '$app/environment';
-	import DateBadge from '$lib/DateBadge.svelte';
-	import LoadingBanner from '$lib/LoadingBanner.svelte';
 	import { loadDocumentsList } from '$lib/cache';
+	import DateBadge from '$lib/components/DateBadge.svelte';
+	import LoadingBanner from '$lib/components/LoadingBanner.svelte';
 	import { documentsList, documentsListLoaded } from '$lib/stores';
 	import { Badge, Card, TabItem, Tabs } from 'flowbite-svelte';
 

src/routes/(authed)/documents/[documentGU]/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { page } from '$app/stores';
-	import LoadingBanner from '$lib/LoadingBanner.svelte';
+	import LoadingBanner from '$lib/components/LoadingBanner.svelte';
 	import { studentAccount } from '$lib/stores';
 
 	const reportCardPromise = $studentAccount?.reportCard($page.params.documentGU);

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { browser } from '$app/environment';
-	import LoadingBanner from '$lib/LoadingBanner.svelte';
 	import { loadGradebook } from '$lib/cache';
+	import LoadingBanner from '$lib/components/LoadingBanner.svelte';
 	import { gradebook, gradebookLoaded } from '$lib/stores';
 
 	if (!$gradebook && browser) loadGradebook();