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

Modified the web UI to be less RS orientated

Browse Source
This commit is contained in:
Donny 2024-09-03 15:20:02 -06:00
parent 85120161ba
commit 0282d29f60
4 changed files with 28 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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>

1
src/routes/+layout.svelte
View File

@ -12,7 +12,6 @@
<img class="max-w-36 mr-5 ml-4" src="mpe_logo.png" alt="MPE Logo">
</svelte:fragment>
<svelte:fragment slot="trail">
</svelte:fragment>
</AppBar>
</svelte:fragment>

106
src/routes/+page.svelte
View File

@ -1,8 +1,6 @@
<!--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";
@ -124,6 +122,8 @@
return 'watercad.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
}
@ -132,89 +132,33 @@
</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">
<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>
<h2 class="text-3xl text-gray-600">License Usage</h2>
<br>
<table class="w-1/2 m-auto text-left rounded-lg 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>
</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" 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>
<td>{license.machine.toUpperCase()}</td>
</tr>
{/each}
</table>
</div>

BIN
static/mathcadprime.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 84 KiB