deps: bump @unovis/svelte from 1.4.1 to 1.4.4

Bumps [@unovis/svelte](https://github.com/f5/unovis/tree/HEAD/packages/svelte) from 1.4.1 to 1.4.4. - [Release notes](https://github.com/f5/unovis/releases) - [Commits](https://github.com/f5/unovis/commits/1.4.4/packages/svelte) --- updated-dependencies: - dependency-name: "@unovis/svelte" dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com>
2024-09-02 19:46:55 +00:00
10 changed files with 112 additions and 103 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -7,7 +7,7 @@
    "": {
      "version": "0.0.1",
      "dependencies": {
-        "@unovis/svelte": "^1.4.1",
+        "@unovis/svelte": "^1.4.4",
        "@unovis/ts": "^1.4.1",
        "chart.js": "^4.4.4",
        "chartjs": "^0.3.24"
@ -2323,20 +2323,18 @@
      }
    },
    "node_modules/@unovis/svelte": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@unovis/svelte/-/svelte-1.4.1.tgz",
-      "integrity": "sha512-NIwJnQ652yk64jOM4x1pXvHP+mAbNCfoSLESQv2AeoWAGCO2Yd1sQ8/Wy8Od66jsEKwDnU10r448aGrF3OAT5g==",
-      "license": "Apache-2.0",
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/@unovis/svelte/-/svelte-1.4.4.tgz",
+      "integrity": "sha512-hxWWE1QPsqc9w+UeRZ13XLxtZjd26tlyQGtgX65MfO716Hhbtim6rgIXtILfHHPuPxLaVCzwz1hO1dCb3LMPBw==",
      "peerDependencies": {
-        "@unovis/ts": "1.4.1",
+        "@unovis/ts": "1.4.4",
        "svelte": "^3.48.0 || ^4.0.0"
      }
    },
    "node_modules/@unovis/ts": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@unovis/ts/-/ts-1.4.1.tgz",
-      "integrity": "sha512-U0CoVWmLFTU/olNWNQT7Q9Ws0nTQRwd7jimITs7xxrKKj0M4ZHMHl4YaMTe6dY7UIhhxSSOh8K4LPEy6lCo1bg==",
-      "license": "Apache-2.0",
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/@unovis/ts/-/ts-1.4.4.tgz",
+      "integrity": "sha512-OoAbCdxSq3tvEKDUDkWNIkPWJ1tnjklWR+8W3zhVqUkOvpqTYW8IjAl+07dPS9/qv+mtjZry5zOt1aBCMPCfdA==",
      "dependencies": {
        "@emotion/css": "^11.7.1",
        "@juggle/resize-observer": "^3.3.1",
--- a/package.json
+++ b/package.json
@ -41,7 +41,7 @@
  },
  "type": "module",
  "dependencies": {
-    "@unovis/svelte": "^1.4.1",
+    "@unovis/svelte": "^1.4.4",
    "@unovis/ts": "^1.4.1",
    "chart.js": "^4.4.4",
    "chartjs": "^0.3.24"
--- a/src/app.html
+++ b/src/app.html
@ -3,7 +3,6 @@
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" integrity="sha512-5Hs3dF2AEPkpNAR7UiOHba+lRSJNeM2ECkwxUIxC1Q/FLycGTbNapWXB4tP889k5T5Ju8fs4b1P5z/iB4nMfSQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 		<meta name="viewport" content="width=device-width" />
 		%sveltekit.head%
 	</head>
--- a/src/lib/components/stats/used_licenses.svelte
+++ 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>
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -1,30 +1,6 @@
 <script lang="ts">
 	import '../app.postcss';
 	import { AppShell, AppBar } from '@skeletonlabs/skeleton';
-
-	let asideVisible = false; // State to track visibility of the aside
-	let programs = []; // Array to store program names
-	const apiUrl = 'https://apilicenses.mpe.ca/api/programs'; // Replace with your API URL
-
-	// Function to fetch program names from the API
-	async function fetchPrograms() {
-		try {
-			const response = await fetch(apiUrl);
-			if (!response.ok) {
-				throw new Error(`Error fetching programs: ${response.statusText}`);
-			}
-			const data = await response.json();
-			// Assuming the API returns an array of program names
-			programs = data;
-		} catch (error) {
-			console.error(error);
-		}
-	}
-
-	// Watch for changes to `asideVisible` and fetch programs when the aside becomes visible
-	$: if (asideVisible) {
-		fetchPrograms();
-	}
 </script>

 <!-- App Shell -->
@ -36,41 +12,10 @@
 				<img class="max-w-36 mr-5 ml-4" src="mpe_logo.png" alt="MPE Logo">
 			</svelte:fragment>
 			<svelte:fragment slot="trail">
-				<button 
-					class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-full" 
-					on:click={() => asideVisible = !asideVisible}
-				>
-					{#if asideVisible}
-					<i class="fa-solid fa-x fa-lg"></i>
-					{:else}
-					View Tracked Programs
-					{/if}
-				</button>
+				
 			</svelte:fragment>
 		</AppBar>
 	</svelte:fragment>
-	{#if asideVisible}
-	<div class="fixed top-0 left-0 h-screen w-screen bg-slate-400 opacity-25"></div>
-	{/if}
-
 	<!-- Page Route Content -->
 	<slot />
-
-	<!-- Sidebar -->
-	<aside class="h-screen fixed top-0 right-0 bg-gray-100 shadow-lg transition-transform duration-300 overflow-y-auto" style:transform={`translateX(${asideVisible ? '0' : '100%'})`}>
-		<!-- Content inside the aside -->
-		<div class="py-32 px-4">
-			<h2 class="text-xl font-bold text-blue-500 text-2xl">Tracked Programs</h2>
-			<ul class="mt-4 space-y-2">
-				{#if programs.length > 0}
-					{#each programs as program, index}
-						<li class="${index % 2 === 0 ? 'bg-gray-100 hover:bg-gray-300' : 'bg-gray-200 hover:bg-gray-400'} p-2 px-4 rounded shadow hover:bg-blue-300 text-gray-600">
-					<b>{program.toUpperCase()}<b/></li>
-					{/each}
-				{:else}
-					<p class="text-gray-500">Loading programs...</p>
-				{/if}
-			</ul>
-		</div>
-	</aside>
 </AppShell>
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -1,10 +1,11 @@
 <!--apilicenses.mpe.ca/api/licenses-->
 <script>
 	import { onMount } from 'svelte';
+	import UsedLicenses from '$lib/components/stats/used_licenses.svelte';
+	import { createEventDispatcher } from 'svelte';

 	let homeBase = "https://apilicenses.mpe.ca";

-
 	console.log("Made by: Donavon McDowell");

 	let licenses = [];
@ -38,7 +39,6 @@

 		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}`;
 		}
@ -122,14 +122,8 @@
 			return 'sewergems.png';
 		case 'WaterCAD':
 			return 'watercad.png';
-		case 'pix4dmapper':
-                        return 'pix4d.png';
-		case 'AGI32-21':
-                        return 'AGi32.png';
 		case 'VirtualSurveyor':
 			return 'virtual_surveyor.png';
-			case 'MathcadPrime':
-			return 'mathcadprime.png';
 		default:
 			return 'mpe_logo.png'; // Default image if program name doesn't match
    }
@ -138,34 +132,89 @@
 </script>
 <title>MPE | Licenses</title>
 <div class="flex flex-col md:flex-col lg:flex-row justify-center p-4">
+	<!--Start of software card -->
+	<div class="card shadow-xl md:w-4/5 lg:w-1/2 mt-3 p-8 flex flex-row m-2 hover:bg-gray-400 bg-gray-300">
+		<div class="w-1/2 flex flex-row">
+			<img class="max-w-20" src="RS2.png" alt="RS2 Logo">
+			<div class="flex flex-col ml-5">
+				<h2 class="text-3xl">RS2</h2>
+				{#if isAvailable(RS2, RS2Seats)}
+                    <h2 class="text-xl mt-4 text-green-500">Available</h2>
+                {:else}
+                    <h2 class="text-xl mt-4 text-red-500">Not Available</h2>
+                {/if}
+			</div>
+		</div>
+		<div class="w-1/2 flex flex-row-reverse">
+			<div class="flex flex-col">
+				<h2 class="text-2xl">Seats</h2>
+				<h2 class="text-2xl mt-4">{RS2}/{RS2Seats}</h2>
+			</div>
+		</div>
+	</div>
+	<!-- End of software card -->
+
+	<!--Start of software card -->
+	<div class="card shadow-xl md:w-4/5 lg:w-1/2 mt-3 p-8 flex flex-row m-2 hover:bg-gray-400 bg-gray-300">
+		<div class="w-1/2 flex flex-row">
+			<img class="max-w-20" src="Slide2.png" alt="slide2 Logo">
+			<div class="flex flex-col ml-5">
+				<h2 class="text-3xl">Slide2</h2>
+				{#if isAvailable(Slide2, Slide2Seats)}
+                    <h2 class="text-xl mt-4 text-green-500">Available</h2>
+                {:else}
+                    <h2 class="text-xl mt-4 text-red-500">Not Available</h2>
+                {/if}
+			</div>
+		</div>
+		<div class="w-1/2 flex flex-row-reverse">
+			<div class="flex flex-col">
+				<h2 class="text-2xl">Seats</h2>
+				<h2 class="text-2xl mt-4">{Slide2}/{Slide2Seats}</h2>
+			</div>
+		</div>
+	</div>
+	<!-- End of software card -->
+
+	<!--Start of software card -->
+	<div class="card shadow-xl md:w-4/5 lg:w-1/2 mt-3 p-8 flex flex-row m-2 hover:bg-gray-400 bg-gray-300">
+		<div class="w-1/2 flex flex-row">
+			<img class="max-w-20" src="Slide3.png" alt="slide2 Logo">
+			<div class="flex flex-col ml-5">
+				<h2 class="text-3xl">Slide3</h2>
+				{#if isAvailable(Slide3, Slide3Seats)}
+                    <h2 class="text-xl mt-4 text-green-500">Available</h2>
+                {:else}
+                    <h2 class="text-xl mt-4 text-red-500">Not Available</h2>
+                {/if}
+			</div>
+		</div>
+		<div class="w-1/2 flex flex-row-reverse">
+			<div class="flex flex-col">
+				<h2 class="text-2xl">Seats</h2>
+				<h2 class="text-2xl mt-4">{Slide3}/{Slide3Seats}</h2>
+			</div>
+		</div>
+	</div>
+<!-- End of software card -->
 </div>

 <!-- Container for the license cards -->
-<div class="flex flex-col justify-center text-center p-2 m-auto w-1/2">
-    <h2 class="text-3xl text-gray-600">Current License Usage</h2>
-    <br>
-    <table class="w-full m-auto text-left text-gray-700 shadow-lg">
-		<tr class="text-xl bg-gray-600 text-white font-thin">
-			<th class="p-2">Icon</th>
-			<th class="py-2">Program Name</th>
-			<th class="py-2">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 rounded" src={getImageSource(license.program)} alt={license.machine + " Logo"}>
+<div class="flex flex-col justify-center text-center">
+	<h2 class="text-3xl">Currently using licenses</h2>
+	{#each licenses as license}
+		<div class="card shadow-xl m-auto w-5/6 sm:w-5/6 md:w-4/5 lg:w-1/2 mt-3 p-2 flex flex-row hover:bg-gray-400 bg-gray-300">
+			<div class="w-1/2 flex flex-row">
+				<img class="max-w-7" src={getImageSource(license.program)} alt={license.machine + " Logo"}>
+				<div class="flex flex-col ml-5 justify-center">
+					<h2 class="text-lg">{license.program === 'Slide' ? 'Slide2' : (license.program === 'WINPROJ' ? 'Project' : license.program)}</h2>
+				</div>
+			</div>
+			<div class="w-1/2 flex flex-row-reverse">
+				<div class="flex flex-col justify-center">
+					<h3 class="mr-1">{license.machine.toUpperCase()}</h3>
+				</div>
+			</div>
 		</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>
-
-
-
--- a/static/AGi32.png
+++ b/static/AGi32.png
--- a/static/mathcadprime.png
+++ b/static/mathcadprime.png
--- a/static/pix4d.png
+++ b/static/pix4d.png
--- a/static/tbc.png
+++ b/static/tbc.png