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

Added a button to see currently tracked programs

Browse Source
This commit is contained in:
Donny 2024-09-03 15:45:14 -06:00 committed by donavon04
parent 1780f9760b
commit f29c012bb8
3 changed files with 80 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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>

56
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,9 +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>

44
src/routes/+page.svelte
View File

@ -3,6 +3,7 @@
import { onMount } from 'svelte'; import { onMount } 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");
@ -37,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}`;
} }
@ -135,29 +137,29 @@
</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 text-gray-600">Current License Usage</h2> <h2 class="text-3xl text-gray-600">Current License Usage</h2>
<br> <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"> <tr class="text-xl bg-gray-600 text-white font-thin">
<th>Icon</th> <th class="p-2">Icon</th>
<th>Program Name</th> <th class="py-2">Program Name</th>
<th>Username</th> <th class="py-2">Username</th>
</tr> </tr>
{#each licenses as license, index} {#each licenses as license, index}
<tr class={`${ <tr class={`${
index % 2 === 0 ? 'bg-gray-100 hover:bg-gray-300' : 'bg-gray-200 hover:bg-gray-400' index % 2 === 0 ? 'bg-gray-100 hover:bg-gray-300' : 'bg-gray-200 hover:bg-gray-400'
}`}> }`}>
<td> <td>
<div class="rounded p-1"> <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> </div>
</td> </td>
<td><h2 class="text-lg">{license.program === 'Slide' ? 'Slide2' : (license.program === 'WINPROJ' ? 'Project' : license.program)}</h2></td> <td><h2 class="text-lg">{license.program === 'Slide' ? 'Slide2' : (license.program === 'WINPROJ' ? 'Project' : license.program)}</h2></td>
<td>{license.machine.toUpperCase()}</td> <td>{license.machine.toUpperCase()}</td>
</tr> </tr>
{/each} {/each}
</table> </table>
</div> </div>