From e1020fd499ffaa3538c0b8daede9a7b9f6c51132 Mon Sep 17 00:00:00 2001
From: Donny <donavon.mcdowell@lethbridgecollege.ca>
Date: Tue, 3 Sep 2024 15:45:14 -0600
Subject: [PATCH] Updated the sorting of the programs

---
 src/routes/+page.svelte | 39 ++++++++++++++++++++-------------------
 1 file changed, 20 insertions(+), 19 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 970ef0a..ae59c32 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -37,6 +37,7 @@
 
 		const data = await response.json();
 		licenses = data;
+		licenses.sort((a, b) => a.program.localeCompare(b.program));
 		} catch (err) {
 		error = `Failed to fetch licenses: ${err.message}`;
 		}
@@ -139,25 +140,25 @@
     <h2 class="text-3xl text-gray-600">Current License Usage</h2>
     <br>
     <table class="w-1/2 m-auto text-left rounded-lg text-gray-700 shadow-lg">
-        <tr class="text-xl bg-gray-600 text-white font-thin">
-            <th>Icon</th>
-            <th>Program Name</th>
-            <th>Username</th>
-        </tr>
-        {#each licenses as license, index}
-        <tr class={`${
-            index % 2 === 0 ? 'bg-gray-100 hover:bg-gray-300' : 'bg-gray-200 hover:bg-gray-400'
-        }`}>
-            <td>
-                <div class="rounded p-1">
-                    <img class="max-w-10" src={getImageSource(license.program)} alt={license.machine + " Logo"}>
-                </div>
-            </td>
-            <td><h2 class="text-lg">{license.program === 'Slide' ? 'Slide2' : (license.program === 'WINPROJ' ? 'Project' : license.program)}</h2></td>
-            <td>{license.machine.toUpperCase()}</td>
-        </tr>
-        {/each}
-    </table>
+		<tr class="text-xl bg-gray-600 text-white font-thin">
+			<th>Icon</th>
+			<th>Program Name</th>
+			<th>Username</th>
+		</tr>
+		{#each licenses as license, index}
+		<tr class={`${
+			index % 2 === 0 ? 'bg-gray-100 hover:bg-gray-300' : 'bg-gray-200 hover:bg-gray-400'
+		}`}>
+			<td>
+				<div class="rounded p-1">
+					<img class="max-w-10" src={getImageSource(license.program)} alt={license.machine + " Logo"}>
+				</div>
+			</td>
+			<td><h2 class="text-lg">{license.program === 'Slide' ? 'Slide2' : (license.program === 'WINPROJ' ? 'Project' : license.program)}</h2></td>
+			<td>{license.machine.toUpperCase()}</td>
+		</tr>
+		{/each}
+	</table>
 </div>