Compare commits
2 Commits
dependabot
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
| d922274cd1 | |||
|
f29c012bb8 |
44
package-lock.json
generated
44
package-lock.json
generated
@ -17,7 +17,7 @@
|
||||
"@skeletonlabs/tw-plugin": "0.4.0",
|
||||
"@sveltejs/adapter-auto": "^3.0.0",
|
||||
"@sveltejs/adapter-node": "^5.0.1",
|
||||
"@sveltejs/kit": "^2.8.4",
|
||||
"@sveltejs/kit": "^2.0.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^3.0.0",
|
||||
"@tailwindcss/forms": "0.5.7",
|
||||
"@tailwindcss/typography": "0.5.13",
|
||||
@ -1143,11 +1143,10 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@polka/url": {
|
||||
"version": "1.0.0-next.28",
|
||||
"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.28.tgz",
|
||||
"integrity": "sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
"version": "1.0.0-next.25",
|
||||
"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.25.tgz",
|
||||
"integrity": "sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@rollup/plugin-commonjs": {
|
||||
"version": "25.0.8",
|
||||
@ -1551,16 +1550,15 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@sveltejs/kit": {
|
||||
"version": "2.8.4",
|
||||
"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.8.4.tgz",
|
||||
"integrity": "sha512-oDSBHPokbP2iaQlHiEWAkVLsIugsXve8YtABtlyHBUljA63Wgx0UtV8MSOQOGpRft1M+Cd5rzer+0SFlppQwOg==",
|
||||
"version": "2.5.10",
|
||||
"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.5.10.tgz",
|
||||
"integrity": "sha512-OqoyTmFG2cYmCFAdBfW+Qxbg8m23H4dv6KqwEt7ofr/ROcfcIl3Z/VT56L22H9f0uNZyr+9Bs1eh2gedOCK9kA==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/cookie": "^0.6.0",
|
||||
"cookie": "^0.6.0",
|
||||
"devalue": "^5.1.0",
|
||||
"devalue": "^5.0.0",
|
||||
"esm-env": "^1.0.0",
|
||||
"import-meta-resolve": "^4.1.0",
|
||||
"kleur": "^4.1.5",
|
||||
@ -1568,7 +1566,7 @@
|
||||
"mrmime": "^2.0.0",
|
||||
"sade": "^1.8.1",
|
||||
"set-cookie-parser": "^2.6.0",
|
||||
"sirv": "^3.0.0",
|
||||
"sirv": "^2.0.4",
|
||||
"tiny-glob": "^0.2.9"
|
||||
},
|
||||
"bin": {
|
||||
@ -1578,7 +1576,7 @@
|
||||
"node": ">=18.13"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@sveltejs/vite-plugin-svelte": "^3.0.0 || ^4.0.0-next.1",
|
||||
"@sveltejs/vite-plugin-svelte": "^3.0.0",
|
||||
"svelte": "^4.0.0 || ^5.0.0-next.0",
|
||||
"vite": "^5.0.3"
|
||||
}
|
||||
@ -3423,11 +3421,10 @@
|
||||
}
|
||||
},
|
||||
"node_modules/devalue": {
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmjs.org/devalue/-/devalue-5.1.1.tgz",
|
||||
"integrity": "sha512-maua5KUiapvEwiEAe+XnlZ3Rh0GD+qI1J/nb9vrJc3muPXvcF/8gXYTWF76+5DAqHyDUtOIImEuo0YKE9mshVw==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/devalue/-/devalue-5.0.0.tgz",
|
||||
"integrity": "sha512-gO+/OMXF7488D+u3ue+G7Y4AA3ZmUnB3eHJXmBTgNHvr4ZNzl36A0ZtG+XCRNYCkYx/bFmw4qtkoFLa+wSrwAA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/didyoumean": {
|
||||
"version": "1.2.2",
|
||||
@ -4798,7 +4795,6 @@
|
||||
"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz",
|
||||
"integrity": "sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
@ -5710,18 +5706,17 @@
|
||||
}
|
||||
},
|
||||
"node_modules/sirv": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/sirv/-/sirv-3.0.0.tgz",
|
||||
"integrity": "sha512-BPwJGUeDaDCHihkORDchNyyTvWFhcusy1XMmhEVTQTwGeybFbp8YEmB+njbPnth1FibULBSBVwCQni25XlCUDg==",
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.4.tgz",
|
||||
"integrity": "sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@polka/url": "^1.0.0-next.24",
|
||||
"mrmime": "^2.0.0",
|
||||
"totalist": "^3.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/slash": {
|
||||
@ -6377,7 +6372,6 @@
|
||||
"resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
|
||||
"integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
"@skeletonlabs/tw-plugin": "0.4.0",
|
||||
"@sveltejs/adapter-auto": "^3.0.0",
|
||||
"@sveltejs/adapter-node": "^5.0.1",
|
||||
"@sveltejs/kit": "^2.8.4",
|
||||
"@sveltejs/kit": "^2.0.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^3.0.0",
|
||||
"@tailwindcss/forms": "0.5.7",
|
||||
"@tailwindcss/typography": "0.5.13",
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
<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>
|
||||
|
||||
@ -1,6 +1,30 @@
|
||||
<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 -->
|
||||
@ -12,9 +36,41 @@
|
||||
<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>
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
|
||||
let homeBase = "https://apilicenses.mpe.ca";
|
||||
|
||||
|
||||
console.log("Made by: Donavon McDowell");
|
||||
|
||||
let licenses = [];
|
||||
@ -140,14 +141,15 @@
|
||||
</div>
|
||||
|
||||
<!-- 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 text-gray-600">Current License Usage</h2>
|
||||
<br>
|
||||
<table class="w-1/2 m-auto text-left rounded-lg text-gray-700 shadow-lg">
|
||||
<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>Icon</th>
|
||||
<th>Program Name</th>
|
||||
<th>Username</th>
|
||||
<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={`${
|
||||
@ -155,7 +157,7 @@
|
||||
}`}>
|
||||
<td>
|
||||
<div class="rounded p-1">
|
||||
<img class="max-w-10" src={getImageSource(license.program)} alt={license.machine + " Logo"}>
|
||||
<img class="max-w-10 rounded" 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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user