From 85120161ba3bbf202f9c9b7b95dcfe92b58ab404 Mon Sep 17 00:00:00 2001
From: Donny <donavon.mcdowell@lethbridgecollege.ca>
Date: Fri, 30 Aug 2024 15:22:53 -0600
Subject: [PATCH] Capitalized usernames

---
 src/lib/components/graph/graph.svelte         | 31 -------------------
 src/lib/components/stats/used_licenses.svelte | 18 +++++++++++
 src/routes/+page.svelte                       |  4 +--
 3 files changed, 20 insertions(+), 33 deletions(-)
 delete mode 100644 src/lib/components/graph/graph.svelte
 create mode 100644 src/lib/components/stats/used_licenses.svelte

diff --git a/src/lib/components/graph/graph.svelte b/src/lib/components/graph/graph.svelte
deleted file mode 100644
index b642684..0000000
--- a/src/lib/components/graph/graph.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script>
-	import chartjs from 'chart.js/auto';
-	import { onMount } from 'svelte';
-
-	const chartValues = [20, 10, 5, 2, 20, 30, 45];
-	const chartLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
-	let ctx;
-	let chartCanvas;
-	let chartData;
-
-	onMount(async (promise) => {
-		  ctx = chartCanvas.getContext('2d');
-			var chart = new chartjs(ctx, {
-				type: 'line',
-				data: {
-						labels: chartLabels,
-						datasets: [{
-								label: 'Revenue',
-								backgroundColor: 'rgb(255, 99, 132)',
-								borderColor: 'rgb(255, 99, 132)',
-								data: chartValues
-						}]
-				}
-		});
-
-	});
-</script>
-
-<div class="w-fill m-auto px-60  mt-10">
-	<canvas class="w-1/2" bind:this={chartCanvas} id="myChart"></canvas>
-</div>
\ No newline at end of file
diff --git a/src/lib/components/stats/used_licenses.svelte b/src/lib/components/stats/used_licenses.svelte
new file mode 100644
index 0000000..28b4f36
--- /dev/null
+++ b/src/lib/components/stats/used_licenses.svelte
@@ -0,0 +1,18 @@
+<script>
+    let total = "0";
+</script>
+
+<div class="rounded shadow-lg w-full bg-blue-500 text-white flex flex-col h-25">
+    <div class="w-full flex justify-between items-center p-4">
+        <div>
+            <h2 class="font-bold text-4xl">{total}</h2>
+            <h3 class="font-bold text-xl">Used Licenses</h3>
+        </div>
+        <div> 
+            <i class="fa-solid fa-ticket"></i>
+        </div>
+    </div>
+    <div class="w-full bg-blue-600 h-2 mt-auto rounded"> <!--Bottom bar of color-->
+
+    </div>
+</div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 9fcc724..fc65f33 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,8 +1,8 @@
 <!--apilicenses.mpe.ca/api/licenses-->
 <script>
 	import { onMount } from 'svelte';
+	import UsedLicenses from '$lib/components/stats/used_licenses.svelte';
 	import { createEventDispatcher } from 'svelte';
-	import Chart from '$lib/components/graph/graph.svelte'
 
 	let homeBase = "https://apilicenses.mpe.ca";
 
@@ -212,7 +212,7 @@
 			</div>
 			<div class="w-1/2 flex flex-row-reverse">
 				<div class="flex flex-col justify-center">
-					<h3 class="mr-1">{license.machine}</h3>
+					<h3 class="mr-1">{license.machine.toUpperCase()}</h3>
 				</div>
 			</div>
 		</div>