Minor bug fix for the Skylar Grant redirect site. Also changed the ui slightly for the text boxes

This commit is contained in:
Isaac Godin 2026-01-09 10:54:10 -05:00
parent fa25f3856e
commit 6dabf32d2b
3 changed files with 176 additions and 155 deletions

5
.gitignore vendored
View File

@ -133,3 +133,8 @@ dist
.yarn/install-state.gz
.pnp.*
edits.txt

View File

@ -31,6 +31,9 @@ const standard = new FontInfo('Helvetica', 12);
const standardBold = new FontInfo('Helvetica', 12, 'Bold');
/** @type {FontInfo} */
const monospace = new FontInfo('Courier', 16, 'Bold');
/** @type {FontInfo} */
const smallBold = new FontInfo('Courier', 12, 'Bold');
// #############################################################
// Strings to use generating the PDF
@ -82,9 +85,16 @@ function setVersionNumber() {
function tempPasswordHandler() {
// Grab the form values
const username = document.getElementById('tempPwUsername').value;
let username = document.getElementById('tempPwUsername').value;
const password = document.getElementById('tempPwPassword').value;
//Going to test and see if having @mainecc.edu auto added is better or if pasting the full email instead is better.
if (password.trim() === '') {
alert('Please enter a temporary password.');
return;
@ -163,7 +173,7 @@ function prepTempPassword(password, username) {
if (username) {
if (!(username.toLowerCase().endsWith(strings.global.domain))) username += strings.global.domain;
lineArray.push(new LineItem(s.unLabel.text, s.unLabel.fontInfo, false));
lineArray.push(new LineItem(username, monospace, true));
lineArray.push(new LineItem(username, smallBold, true));
}
lineArray.push(new LineItem(s.pwLabel.text, s.pwLabel.fontInfo, false));

View File

@ -1,164 +1,170 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ITS Thermal Printer</title>
<link rel="icon" type="image/x-icon" href="./assets/images/favicon.ico">
</head>
<body class="bg-gray-100 leading-normal tracking-normal dark:bg-gray-900">
<!-- Logo -->
<div class="flex justify-center mt-6">
<img src="./assets/images/itslogo_color.png" alt="ITS Logo" class="h-24 w-auto">
</div>
<!-- Title -->
<div class="flex flex-col justify-center mt-6">
<h1 class="dark:text-gray-300 text-4xl font-bold text-center">ITS Thermal Printer</h1><br />
<h4 class="dark:text-gray-300 text-lg text-center">v<span id="versionNumber"></span> Developed for MCCS by <a href="https://git.vfsh.dev/helpd_admin/it-thermal/src/branch/client-only" class="text-blue-700">Skylar Grant</a></h4>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ITS Thermal Printer</title>
<link rel="icon" type="image/x-icon" href="./assets/images/favicon.ico">
</head>
<body class="bg-gray-100 leading-normal tracking-normal dark:bg-gray-900">
<!-- Logo -->
<!-- Parent container to hold flex columns -->
<div class="flex justify-center mt-10 space-x-6">
<!-- Left column -->
<div class="flex flex-col space-y-6 w-full max-w-md">
<!-- Temporary Password -->
<div class="bg-white dark:bg-gray-800 p-5 rounded-lg shadow-lg">
<!-- Title -->
<h1 class="dark:text-gray-300 text-2xl font-bold text-center mb-4">Temporary Password</h1>
<!-- Fields -->
<div>
<!-- Username -->
<label for="tempPwUsername" class="dark:text-gray-300 block text-md font-medium text-gray-700">Username: (optional)</label>
<input type="text" id="tempPwUsername" name="tempPwUsername"
class="dark:border-gray-700 dark:bg-gray-700 dark:text-white mt-1 ml-2 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
<!-- Password -->
<label for="tempPwPassword" class="dark:text-gray-300 block text-md font-medium text-gray-700">Password:</label>
<input type="text" id="tempPwPassword" name="tempPwPassword" required
class="dark:border-gray-700 dark:bg-gray-700 dark:text-white mt-1 ml-2 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
</div>
<!-- Submit Button -->
<div class="text-center">
<button type="submit"
id="tempPasswordBtn"
style="background-color: #4b7839;"
class="dark:bg-indigo-600 dark:hover:bg-indigo-700 w-full text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 mt-4">
Generate Receipt
</button>
</div>
</div>
<!-- Custom Note -->
<div class="bg-white dark:bg-gray-800 p-5 rounded-lg shadow-lg">
<!-- Title -->
<h1 class="dark:text-gray-300 text-2xl font-bold text-center mb-4">Custom Note</h1>
<!-- Fields -->
<div>
<!-- Notes -->
<label for="customNoteTextArea" class="dark:text-gray-300 block text-md font-medium text-gray-700">Notes:</label>
<textarea id="customNoteTextArea" name="customNoteTextArea" cols="35" rows="10" required
class="dark:border-gray-700 dark:bg-gray-700 dark:text-white mt-1 ml-2 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"></textarea>
</div>
<!-- Submit Button -->
<div class="text-center">
<button type="submit"
id="customNoteBtn"
style="background-color: #4b7839;"
class="dark:bg-indigo-600 dark:hover:bg-indigo-700 w-full text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 mt-4">
Generate Receipt
</button>
</div>
</div>
<div class="flex justify-center mt-6">
<a href="https://www.mccs.me.edu/">
<img src="./assets/images/itslogo_color.png" alt="ITS Logo" class="h-24 w-auto">
</a>
</div>
<!-- Title -->
<div class="flex flex-col justify-center mt-6">
<h1 class="dark:text-gray-300 text-4xl font-bold text-center">ITS Thermal Printer</h1><br />
<h4 class="dark:text-gray-300 text-lg text-center">v<span id="versionNumber"></span> Developed for MCCS by <a href="https://git.vfsh.dev/sgrant/mccs-thermal" class="text-blue-700">Skylar Grant</a></h4>
</div>
<!-- Right column -->
<div class="flex flex-col space-y-6 w-full max-w-md">
<!-- Device Tracker -->
<div class="bg-white dark:bg-gray-800 p-5 rounded-lg shadow-lg">
<!-- Title -->
<h1 class="dark:text-gray-300 text-2xl font-bold text-center mb-4">Device Tracker</h1>
<!-- Fields -->
<div>
<!-- Ticket field -->
<label for="dtticket" class="dark:text-gray-300 block text-md font-medium text-gray-700">Ticket:</label>
<input type="text" id="dtticket" name="dtticket" required
class="dark:border-gray-700 dark:bg-gray-700 dark:text-white mt-1 ml-2 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
<!-- User field -->
<label for="dtuser" class="dark:text-gray-300 block text-md font-medium text-gray-700">User:</label>
<input type="text" id="dtuser" name="dtuser" required
class="dark:border-gray-700 dark:bg-gray-700 dark:text-white mt-1 ml-2 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
<!-- Radio buttons to pick from "Stock", "Deploy", "Image", "E-Waste", "Repair/Parts" and "Other" -->
<label for="dtservice" class="dark:text-gray-300 block text-md font-medium text-gray-700 mb-2">Service:</label>
<div class="flex flex-row space-x-20 pl-2">
<div class="flex flex-col space-y-2">
<label class="inline-flex items-center">
<input type="radio" name="dtservice" value="Stock" required
class="dark:bg-gray-700 dark:border-gray-700 dark:text-white text-indigo-600 focus:ring-indigo-500">
<span class="ml-2 dark:text-gray-300">Stock</span>
</label>
<label class="inline-flex items-center">
<input type="radio" name="dtservice" value="Deploy"
class="dark:bg-gray-700 dark:border-gray-700 dark:text-white text-indigo-600 focus:ring-indigo-500">
<span class="ml-2 dark:text-gray-300">Deploy</span>
</label>
<label class="inline-flex items-center">
<input type="radio" name="dtservice" value="Image"
class="dark:bg-gray-700 dark:border-gray-700 dark:text-white text-indigo-600 focus:ring-indigo-500">
<span class="ml-2 dark:text-gray-300">Image</span>
</label>
</div>
<div class="flex flex-col space-y-2">
<label class="inline-flex items-center">
<input type="radio" name="dtservice" value="E-Waste"
class="dark:bg-gray-700 dark:border-gray-700 dark:text-white text-indigo-600 focus:ring-indigo-500">
<span class="ml-2 dark:text-gray-300">E-Waste</span>
</label>
<label class="inline-flex items-center">
<input type="radio" name="dtservice" value="Repair/Parts"
class="dark:bg-gray-700 dark:border-gray-700 dark:text-white text-indigo-600 focus:ring-indigo-500">
<span class="ml-2 dark:text-gray-300">Repair/Parts</span>
</label>
<label class="inline-flex items-center">
<input type="radio" name="dtservice" value="Other"
class="dark:bg-gray-700 dark:border-gray-700 dark:text-white text-indigo-600 focus:ring-indigo-500">
<span class="ml-2 dark:text-gray-300">Other</span>
</label>
</div>
<!-- Parent container to hold flex columns -->
<div class="flex justify-center mt-10 space-x-6">
<!-- Left column -->
<div class="flex flex-col space-y-6 w-full max-w-md">
<!-- Temporary Password -->
<div class="bg-white dark:bg-gray-800 p-5 rounded-lg shadow-lg">
<!-- Title -->
<h1 class="dark:text-gray-300 text-2xl font-bold text-center mb-4">Temporary Password</h1>
<!-- Fields -->
<div>
<!-- Username -->
<label for="tempPwUsername" class="dark:text-gray-300 block text-md font-medium text-gray-700">Username: (optional)</label>
<input type="text" id="tempPwUsername" name="tempPwUsername"
class="dark:border-gray-700 dark:bg-gray-700 dark:text-white mt-1 ml-2 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
<!-- Password -->
<label for="tempPwPassword" class="dark:text-gray-300 block text-md font-medium text-gray-700">Password:</label>
<input type="text" id="tempPwPassword" name="tempPwPassword" required
class="dark:border-gray-700 dark:bg-gray-700 dark:text-white mt-1 ml-2 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
</div>
<!-- Notes field -->
<label for="dtnotes" class="dark:text-gray-300 block text-md font-medium text-gray-700">Notes: (optional)</label>
<textarea id="dtnotes" name="dtnotes" cols="35" rows="4"
<!-- Submit Button -->
<div class="text-center">
<button type="submit"
id="tempPasswordBtn"
style="background-color: #4b7839;"
class="dark:bg-indigo-600 dark:hover:bg-indigo-700 w-full text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 mt-4">
Generate Receipt
</button>
</div>
</div>
<!-- Custom Note -->
<div class="bg-white dark:bg-gray-800 p-5 rounded-lg shadow-lg">
<!-- Title -->
<h1 class="dark:text-gray-300 text-2xl font-bold text-center mb-4">Custom Note</h1>
<!-- Fields -->
<div>
<!-- Notes -->
<!-- max size added and removed resizing -->
<label for="customNoteTextArea" class="dark:text-gray-300 block text-md font-medium text-gray-700">Notes:</label>
<textarea id="customNoteTextArea" name="customNoteTextArea" cols="35" rows="10" required maxlength="500" style="resize: none;"
class="dark:border-gray-700 dark:bg-gray-700 dark:text-white mt-1 ml-2 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"></textarea>
</div>
<!-- Submit Button -->
<div class="text-center">
<button type="submit"
id="customNoteBtn"
style="background-color: #4b7839;"
class="dark:bg-indigo-600 dark:hover:bg-indigo-700 w-full text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 mt-4">
Generate Receipt
</button>
</div>
</div>
<!-- Submit Button -->
<div class="text-center">
<button type="submit"
id="deviceTrackerBtn"
style="background-color: #4b7839;"
class="dark:bg-indigo-600 dark:hover:bg-indigo-700 w-full text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 mt-4">
Generate Receipt
</button>
</div>
<!-- Right column -->
<div class="flex flex-col space-y-6 w-full max-w-md">
<!-- Device Tracker -->
<div class="bg-white dark:bg-gray-800 p-5 rounded-lg shadow-lg">
<!-- Title -->
<h1 class="dark:text-gray-300 text-2xl font-bold text-center mb-4">Device Tracker</h1>
<!-- Fields -->
<div>
<!-- Ticket field -->
<label for="dtticket" class="dark:text-gray-300 block text-md font-medium text-gray-700">Ticket:</label>
<input type="text" id="dtticket" name="dtticket" required
class="dark:border-gray-700 dark:bg-gray-700 dark:text-white mt-1 ml-2 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
<!-- User field -->
<label for="dtuser" class="dark:text-gray-300 block text-md font-medium text-gray-700">User:</label>
<input type="text" id="dtuser" name="dtuser" required
class="dark:border-gray-700 dark:bg-gray-700 dark:text-white mt-1 ml-2 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
<!-- Radio buttons to pick from "Stock", "Deploy", "Image", "E-Waste", "Repair/Parts" and "Other" -->
<label for="dtservice" class="dark:text-gray-300 block text-md font-medium text-gray-700 mb-2">Service:</label>
<div class="flex flex-row space-x-20 pl-2">
<div class="flex flex-col space-y-2">
<label class="inline-flex items-center">
<input type="radio" name="dtservice" value="Stock" required
class="dark:bg-gray-700 dark:border-gray-700 dark:text-white text-indigo-600 focus:ring-indigo-500">
<span class="ml-2 dark:text-gray-300">Stock</span>
</label>
<label class="inline-flex items-center">
<input type="radio" name="dtservice" value="Deploy"
class="dark:bg-gray-700 dark:border-gray-700 dark:text-white text-indigo-600 focus:ring-indigo-500">
<span class="ml-2 dark:text-gray-300">Deploy</span>
</label>
<label class="inline-flex items-center">
<input type="radio" name="dtservice" value="Image"
class="dark:bg-gray-700 dark:border-gray-700 dark:text-white text-indigo-600 focus:ring-indigo-500">
<span class="ml-2 dark:text-gray-300">Image</span>
</label>
</div>
<div class="flex flex-col space-y-2">
<label class="inline-flex items-center">
<input type="radio" name="dtservice" value="E-Waste"
class="dark:bg-gray-700 dark:border-gray-700 dark:text-white text-indigo-600 focus:ring-indigo-500">
<span class="ml-2 dark:text-gray-300">E-Waste</span>
</label>
<label class="inline-flex items-center">
<input type="radio" name="dtservice" value="Repair/Parts"
class="dark:bg-gray-700 dark:border-gray-700 dark:text-white text-indigo-600 focus:ring-indigo-500">
<span class="ml-2 dark:text-gray-300">Repair/Parts</span>
</label>
<label class="inline-flex items-center">
<input type="radio" name="dtservice" value="Other"
class="dark:bg-gray-700 dark:border-gray-700 dark:text-white text-indigo-600 focus:ring-indigo-500">
<span class="ml-2 dark:text-gray-300">Other</span>
</label>
</div>
</div>
<!-- Notes field -->
<label for="dtnotes" class="dark:text-gray-300 block text-md font-medium text-gray-700">Notes: (optional)</label>
<textarea id="dtnotes" name="dtnotes" cols="35" rows="6" required maxlength="300" style="resize: none;"
class="dark:border-gray-700 dark:bg-gray-700 dark:text-white mt-1 ml-2 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"></textarea>
</div>
<!-- Submit Button -->
<div class="text-center">
<button type="submit"
id="deviceTrackerBtn"
style="background-color: #4b7839;"
class="dark:bg-indigo-600 dark:hover:bg-indigo-700 w-full text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 mt-4">
Generate Receipt
</button>
</div>
</div>
</div>
<!-- (Hidden) PDF Viewer -->
<div class="flex flex-col space-y-6 w-full max-w-md" id="pdfViewerContainer" style="display:none">
<div class="rounded-md">
<iframe id="pdfViewer" src="" width="400px" height="500px"
class="rounded-md"></iframe>
</div>
</div>
</div>
<!-- (Hidden) PDF Viewer -->
<div class="flex flex-col space-y-6 w-full max-w-md" id="pdfViewerContainer" style="display:none">
<div class="rounded-md">
<iframe id="pdfViewer" src="" width="400px" height="500px"
class="rounded-md"></iframe>
</div>
<!-- Version / Footer -->
<div id="footer" class="flex justify-center">
<span id="version"
class="dark:text-gray-300 text-sm text-center mt-8">(c) 2025 Skylar Grant</span>
</div>
</div>
<!-- Version / Footer -->
<div id="footer" class="flex justify-center">
<span id="version"
class="dark:text-gray-300 text-sm text-center mt-8">(c) 2025 Skylar Grant</span>
</div>
<!-- Script Calls -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>
<script src="./assets/Classes.js"></script>
<script src="./assets/ITThermal.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
</body>
</html>
<!-- Script Calls -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>
<script src="./assets/Classes.js"></script>
<script src="./assets/ITThermal.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
</body>
</html>