IT/licensetrackerfrontend
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: IT:dependabot/npm_and_yarn/unovis/svelte-1.4.4
Branches Tags
IT:master
IT:dependabot/npm_and_yarn/types/node-22.9.3
IT:dependabot/npm_and_yarn/sveltejs/kit-2.8.4
IT:dependabot/npm_and_yarn/svelte-5.2.8
IT:dependabot/npm_and_yarn/tslib-2.8.1
IT:dependabot/npm_and_yarn/unovis/svelte-1.4.4
..
compare: IT:master
Branches Tags
IT:master
IT:dependabot/npm_and_yarn/types/node-22.9.3
IT:dependabot/npm_and_yarn/sveltejs/kit-2.8.4
IT:dependabot/npm_and_yarn/svelte-5.2.8
IT:dependabot/npm_and_yarn/tslib-2.8.1
IT:dependabot/npm_and_yarn/unovis/svelte-1.4.4

13 Commits
dependabot ... master

Author SHA1 Message Date
donavon04
d922274cd1 Merge branch 'master' of https://github.com/donavon04/licensetrackerfrontend 2024-11-29 11:38:03 -07:00
Donny
f29c012bb8 Added a button to see currently tracked programs 2024-11-29 11:36:33 -07:00
donavon04
4b9679dca2
Update +page.svelte 2024-11-19 16:49:26 -07:00
donavon04
d34682c8b5
Add files via upload 2024-11-19 16:48:21 -07:00
donavon04
9fc6ce29d3
Add files via upload 2024-11-04 15:40:15 -07:00
donavon04
720c255bbd
Update +page.svelte 2024-11-04 13:01:19 -07:00
donavon04
56eebdba27
Rename Pix4Dmapper.png to pix4d.png 2024-11-04 13:00:51 -07:00
donavon04
0b839fa043
Update +page.svelte 2024-11-04 12:00:56 -07:00
donavon04
3d13e9dc2e
Update +page.svelte 2024-11-04 11:50:11 -07:00
donavon04
9b22c71e72
Add files via upload 2024-11-04 11:49:10 -07:00
Donny
e1020fd499 Updated the sorting of the programs 2024-09-03 15:45:14 -06:00
Donny
1780f9760b Modified title 2024-09-03 15:24:35 -06:00
Donny
0282d29f60 Modified the web UI to be less RS orientated 2024-09-03 15:20:02 -06:00
10 changed files with 103 additions and 112 deletions
Show Stats Expand all files Collapse all files

18
package-lock.json generated
View File

@ -7,7 +7,7 @@
"": { "": {
"version": "0.0.1", "version": "0.0.1",
"dependencies": { "dependencies": {
"@unovis/svelte": "^1.4.4", "@unovis/svelte": "^1.4.1",
"@unovis/ts": "^1.4.1", "@unovis/ts": "^1.4.1",
"chart.js": "^4.4.4", "chart.js": "^4.4.4",
"chartjs": "^0.3.24" "chartjs": "^0.3.24"
@ -2323,18 +2323,20 @@
} }
}, },
"node_modules/@unovis/svelte": { "node_modules/@unovis/svelte": {
"version": "1.4.4", "version": "1.4.1",
"resolved": "https://registry.npmjs.org/@unovis/svelte/-/svelte-1.4.4.tgz", "resolved": "https://registry.npmjs.org/@unovis/svelte/-/svelte-1.4.1.tgz",
"integrity": "sha512-hxWWE1QPsqc9w+UeRZ13XLxtZjd26tlyQGtgX65MfO716Hhbtim6rgIXtILfHHPuPxLaVCzwz1hO1dCb3LMPBw==", "integrity": "sha512-NIwJnQ652yk64jOM4x1pXvHP+mAbNCfoSLESQv2AeoWAGCO2Yd1sQ8/Wy8Od66jsEKwDnU10r448aGrF3OAT5g==",
"license": "Apache-2.0",
"peerDependencies": { "peerDependencies": {
"@unovis/ts": "1.4.4", "@unovis/ts": "1.4.1",
"svelte": "^3.48.0 || ^4.0.0" "svelte": "^3.48.0 || ^4.0.0"
} }
}, },
"node_modules/@unovis/ts": { "node_modules/@unovis/ts": {
"version": "1.4.4", "version": "1.4.1",
"resolved": "https://registry.npmjs.org/@unovis/ts/-/ts-1.4.4.tgz", "resolved": "https://registry.npmjs.org/@unovis/ts/-/ts-1.4.1.tgz",
"integrity": "sha512-OoAbCdxSq3tvEKDUDkWNIkPWJ1tnjklWR+8W3zhVqUkOvpqTYW8IjAl+07dPS9/qv+mtjZry5zOt1aBCMPCfdA==", "integrity": "sha512-U0CoVWmLFTU/olNWNQT7Q9Ws0nTQRwd7jimITs7xxrKKj0M4ZHMHl4YaMTe6dY7UIhhxSSOh8K4LPEy6lCo1bg==",
"license": "Apache-2.0",
"dependencies": { "dependencies": {
"@emotion/css": "^11.7.1", "@emotion/css": "^11.7.1",
"@juggle/resize-observer": "^3.3.1", "@juggle/resize-observer": "^3.3.1",

2
package.json
View File

@ -41,7 +41,7 @@
}, },
"type": "module", "type": "module",
"dependencies": { "dependencies": {
"@unovis/svelte": "^1.4.4", "@unovis/svelte": "^1.4.1",
"@unovis/ts": "^1.4.1", "@unovis/ts": "^1.4.1",
"chart.js": "^4.4.4", "chart.js": "^4.4.4",
"chartjs": "^0.3.24" "chartjs": "^0.3.24"

1
src/app.html
View File

@ -3,6 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <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" /> <meta name="viewport" content="width=device-width" />
%sveltekit.head% %sveltekit.head%
</head> </head>

18
src/lib/components/stats/used_licenses.svelte
View File

@ -1,18 +0,0 @@
<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>

57
src/routes/+layout.svelte
View File

@ -1,6 +1,30 @@
<script lang="ts"> <script lang="ts">
import '../app.postcss'; import '../app.postcss';
import { AppShell, AppBar } from '@skeletonlabs/skeleton'; 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> </script>
<!-- App Shell --> <!-- App Shell -->
@ -12,10 +36,41 @@
<img class="max-w-36 mr-5 ml-4" src="mpe_logo.png" alt="MPE Logo"> <img class="max-w-36 mr-5 ml-4" src="mpe_logo.png" alt="MPE Logo">
</svelte:fragment> </svelte:fragment>
<svelte:fragment slot="trail"> <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> </svelte:fragment>
</AppBar> </AppBar>
</svelte:fragment> </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 --> <!-- Page Route Content -->
<slot /> <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> </AppShell>

117
src/routes/+page.svelte
View File

@ -1,11 +1,10 @@
<!--apilicenses.mpe.ca/api/licenses--> <!--apilicenses.mpe.ca/api/licenses-->
<script> <script>
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import UsedLicenses from '$lib/components/stats/used_licenses.svelte';
import { createEventDispatcher } from 'svelte';
let homeBase = "https://apilicenses.mpe.ca"; let homeBase = "https://apilicenses.mpe.ca";
console.log("Made by: Donavon McDowell"); console.log("Made by: Donavon McDowell");
let licenses = []; let licenses = [];
@ -39,6 +38,7 @@
const data = await response.json(); const data = await response.json();
licenses = data; licenses = data;
licenses.sort((a, b) => a.program.localeCompare(b.program));
} catch (err) { } catch (err) {
error = `Failed to fetch licenses: ${err.message}`; error = `Failed to fetch licenses: ${err.message}`;
} }
@ -122,8 +122,14 @@
return 'sewergems.png'; return 'sewergems.png';
case 'WaterCAD': case 'WaterCAD':
return 'watercad.png'; return 'watercad.png';
case 'pix4dmapper':
return 'pix4d.png';
case 'AGI32-21':
return 'AGi32.png';
case 'VirtualSurveyor': case 'VirtualSurveyor':
return 'virtual_surveyor.png'; return 'virtual_surveyor.png';
case 'MathcadPrime':
return 'mathcadprime.png';
default: default:
return 'mpe_logo.png'; // Default image if program name doesn't match return 'mpe_logo.png'; // Default image if program name doesn't match
} }
@ -132,89 +138,34 @@
</script> </script>
<title>MPE | Licenses</title> <title>MPE | Licenses</title>
<div class="flex flex-col md:flex-col lg:flex-row justify-center p-4"> <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> </div>
<!-- Container for the license cards --> <!-- Container for the license cards -->
<div class="flex flex-col justify-center text-center"> <div class="flex flex-col justify-center text-center p-2 m-auto w-1/2">
<h2 class="text-3xl">Currently using licenses</h2> <h2 class="text-3xl text-gray-600">Current License Usage</h2>
{#each licenses as license} <br>
<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"> <table class="w-full m-auto text-left text-gray-700 shadow-lg">
<div class="w-1/2 flex flex-row"> <tr class="text-xl bg-gray-600 text-white font-thin">
<img class="max-w-7" src={getImageSource(license.program)} alt={license.machine + " Logo"}> <th class="p-2">Icon</th>
<div class="flex flex-col ml-5 justify-center"> <th class="py-2">Program Name</th>
<h2 class="text-lg">{license.program === 'Slide' ? 'Slide2' : (license.program === 'WINPROJ' ? 'Project' : license.program)}</h2> <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> </div>
</div> </td>
<div class="w-1/2 flex flex-row-reverse"> <td><h2 class="text-lg">{license.program === 'Slide' ? 'Slide2' : (license.program === 'WINPROJ' ? 'Project' : license.program)}</h2></td>
<div class="flex flex-col justify-center"> <td>{license.machine.toUpperCase()}</td>
<h3 class="mr-1">{license.machine.toUpperCase()}</h3> </tr>
</div> {/each}
</div> </table>
</div>
{/each}
</div> </div>

BIN
static/AGi32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

BIN
static/mathcadprime.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 84 KiB

BIN
static/pix4d.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
static/tbc.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 219 KiB