Modified the web UI to be less RS orientated

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

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>

View File

@ -12,7 +12,6 @@
<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">
</svelte:fragment> </svelte:fragment>
</AppBar> </AppBar>
</svelte:fragment> </svelte:fragment>

View File

@ -1,8 +1,6 @@
<!--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";
@ -124,6 +122,8 @@
return 'watercad.png'; return 'watercad.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 +132,33 @@
</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">
<h2 class="text-3xl">Currently using licenses</h2> <h2 class="text-3xl text-gray-600">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-1/2 m-auto text-left rounded-lg 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>Icon</th>
<div class="flex flex-col ml-5 justify-center"> <th>Program Name</th>
<h2 class="text-lg">{license.program === 'Slide' ? 'Slide2' : (license.program === 'WINPROJ' ? 'Project' : license.program)}</h2> <th>Username</th>
</div> </tr>
</div> {#each licenses as license, index}
<div class="w-1/2 flex flex-row-reverse"> <tr class={`${
<div class="flex flex-col justify-center"> index % 2 === 0 ? 'bg-gray-100 hover:bg-gray-300' : 'bg-gray-200 hover:bg-gray-400'
<h3 class="mr-1">{license.machine.toUpperCase()}</h3> }`}>
</div> <td>
</div> <div class="rounded p-1">
</div> <img class="max-w-10" src={getImageSource(license.program)} alt={license.machine + " Logo"}>
{/each} </div>
</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

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 KiB