Compare commits
7 Commits
dependabot
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
| d922274cd1 | |||
|
f29c012bb8 | ||
| 4b9679dca2 | |||
| d34682c8b5 | |||
| 9fc6ce29d3 | |||
| 720c255bbd | |||
| 56eebdba27 |
8
package-lock.json
generated
8
package-lock.json
generated
@ -35,7 +35,7 @@
|
||||
"svelte": "^4.2.7",
|
||||
"svelte-check": "^3.8.6",
|
||||
"tailwindcss": "3.4.3",
|
||||
"tslib": "^2.8.1",
|
||||
"tslib": "^2.4.1",
|
||||
"typescript": "^5.0.0",
|
||||
"vite": "^5.0.3",
|
||||
"vite-plugin-tailwind-purgecss": "0.3.3"
|
||||
@ -6395,9 +6395,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/tslib": {
|
||||
"version": "2.8.1",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
|
||||
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
|
||||
"version": "2.6.2",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
|
||||
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
|
||||
},
|
||||
"node_modules/type-check": {
|
||||
"version": "0.4.0",
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
"svelte": "^4.2.7",
|
||||
"svelte-check": "^3.8.6",
|
||||
"tailwindcss": "3.4.3",
|
||||
"tslib": "^2.8.1",
|
||||
"tslib": "^2.4.1",
|
||||
"typescript": "^5.0.0",
|
||||
"vite": "^5.0.3",
|
||||
"vite-plugin-tailwind-purgecss": "0.3.3"
|
||||
|
||||
@ -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 = [];
|
||||
@ -122,7 +123,9 @@
|
||||
case 'WaterCAD':
|
||||
return 'watercad.png';
|
||||
case 'pix4dmapper':
|
||||
return 'Pix4Dmapper.png';
|
||||
return 'pix4d.png';
|
||||
case 'AGI32-21':
|
||||
return 'AGi32.png';
|
||||
case 'VirtualSurveyor':
|
||||
return 'virtual_surveyor.png';
|
||||
case 'MathcadPrime':
|
||||
@ -138,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={`${
|
||||
@ -153,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>
|
||||
|
||||
BIN
static/AGi32.png
Normal file
BIN
static/AGi32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
BIN
static/tbc.png
Normal file
BIN
static/tbc.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 219 KiB |
Loading…
Reference in New Issue
Block a user