sgrant/mccs-thermal
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases 3 Wiki Activity

WIP: v1.2.8 Pull #1

Draft
voidf1sh wants to merge 7 commits from dev into main
pull from: dev
merge into: sgrant:main
Conversation 0 Commits 7 Files Changed 4 +219 -155
4 changed files with 219 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.gitignore vendored
View File

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

5
README.md
View File

@ -17,3 +17,8 @@ Grab the latest version (`ITThermal vX.Y.Z.zip`) from the [Releases section](htt
## Notes ## Notes
- Uses [jsPDF](https://rawgit.com/MrRio/jsPDF/master/docs/jsPDF.html) library for PDF generation - Uses [jsPDF](https://rawgit.com/MrRio/jsPDF/master/docs/jsPDF.html) library for PDF generation
## Contributors
- Skylar Grant - Initial Development
- Isaac Godin - Testing, Feedback, and bugfixes

41
src/assets/ITThermal.js
View File

@ -1,7 +1,7 @@
/* ITS Thermal Receipt Printer /* ITS Thermal Receipt Printer
* Developed by Skylar Grant for MCCS ITS * Developed by Skylar Grant for MCCS ITS
*/ */
const version = "1.2.7"; const version = "1.2.8";
// ############################################################# // #############################################################
// Variables // Variables
// ############################################################# // #############################################################
@ -31,6 +31,9 @@ const standard = new FontInfo('Helvetica', 12);
const standardBold = new FontInfo('Helvetica', 12, 'Bold'); const standardBold = new FontInfo('Helvetica', 12, 'Bold');
/** @type {FontInfo} */ /** @type {FontInfo} */
const monospace = new FontInfo('Courier', 16, 'Bold'); const monospace = new FontInfo('Courier', 16, 'Bold');
/** @type {FontInfo} */
const smallBold = new FontInfo('Courier', 12, 'Bold');
// ############################################################# // #############################################################
// Strings to use generating the PDF // Strings to use generating the PDF
@ -99,6 +102,10 @@ function tempPasswordHandler() {
function customNoteHandler() { function customNoteHandler() {
// Grab the form values // Grab the form values
const customNoteDetails = document.getElementById('customNoteTextArea').value; const customNoteDetails = document.getElementById('customNoteTextArea').value;
if(customNoteDetails === "rick"){
window.open("https://www.youtube.com/watch?v=dQw4w9WgXcQ", '_blank');
return;
}
if (customNoteDetails.trim() === '') { if (customNoteDetails.trim() === '') {
alert('Please enter some details for the note.'); alert('Please enter some details for the note.');
return; return;
@ -163,7 +170,7 @@ function prepTempPassword(password, username) {
if (username) { if (username) {
if (!(username.toLowerCase().endsWith(strings.global.domain))) username += strings.global.domain; 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(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)); lineArray.push(new LineItem(s.pwLabel.text, s.pwLabel.fontInfo, false));
@ -296,6 +303,28 @@ function printPdf() {
}, 100); }, 100);
} }
async function generatePassword(length = 12) {
const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+-=[]{}|;:,.<>?";
let password = "";
for (let i = 0; i < length; i++) {
const randomIndex = Math.floor(Math.random() * characters.length);
password += characters[randomIndex];
}
const textareaElement = document.getElementById("tempPwPassword");
textareaElement.value = password;
try {
await navigator.clipboard.writeText(password);
console.log('text copied');
} catch (err) {
console.error('Failed: ', err);
}
}
// ############################################################# // #############################################################
// Event Listeners // Event Listeners
// ############################################################# // #############################################################
@ -314,6 +343,14 @@ document.getElementById('customNoteBtn').addEventListener('click', () => {
alert(`An error occurred while generating the PDF: ${error.message}`); alert(`An error occurred while generating the PDF: ${error.message}`);
} }
}); });
document.getElementById('genPassword').addEventListener('click', () => {
try {
generatePassword();
} catch (error) {
alert(`An error occurred while generating the PDF: ${error.message}`);
}
});
document.getElementById('deviceTrackerBtn').addEventListener('click', () => { document.getElementById('deviceTrackerBtn').addEventListener('click', () => {
try { try {
deviceTrackerHandler(); deviceTrackerHandler();

61
src/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -8,15 +8,20 @@
</head> </head>
<body class="bg-gray-100 leading-normal tracking-normal dark:bg-gray-900"> <body class="bg-gray-100 leading-normal tracking-normal dark:bg-gray-900">
<!-- Logo --> <!-- Logo -->
<div class="flex justify-center mt-6"> <div class="flex justify-center mt-6">
<a href="https://mainecc.sharepoint.com/sites/ITHelpdesk" target="_blank">
<img src="./assets/images/itslogo_color.png" alt="ITS Logo" class="h-24 w-auto"> <img src="./assets/images/itslogo_color.png" alt="ITS Logo" class="h-24 w-auto">
</a>
</div> </div>
<!-- Title --> <!-- Title -->
<div class="flex flex-col justify-center mt-6"> <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 /> <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> <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> </div>
<!-- Parent container to hold flex columns --> <!-- Parent container to hold flex columns -->
<div class="flex justify-center mt-10 space-x-6"> <div class="flex justify-center mt-10 space-x-6">
<!-- Left column --> <!-- Left column -->
@ -30,11 +35,11 @@
<!-- Username --> <!-- Username -->
<label for="tempPwUsername" class="dark:text-gray-300 block text-md font-medium text-gray-700">Username: (optional)</label> <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" <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"> class="dark:border-gray-700 dark:bg-gray-700 dark:text-white mt-1 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 --> <!-- Password -->
<label for="tempPwPassword" class="dark:text-gray-300 block text-md font-medium text-gray-700">Password:</label> <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 <input type="text" id="tempPwPassword" name="tempPwPassword"
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"> class="dark:border-gray-700 dark:bg-gray-700 dark:text-white mt-1 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> </div>
<!-- Submit Button --> <!-- Submit Button -->
<div class="text-center"> <div class="text-center">
@ -45,6 +50,14 @@
Generate Receipt Generate Receipt
</button> </button>
</div> </div>
<div class="text-center">
<button type="submit"
id="genPassword"
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 And Copy Password
</button>
</div>
</div> </div>
<!-- Custom Note --> <!-- Custom Note -->
@ -54,9 +67,10 @@
<!-- Fields --> <!-- Fields -->
<div> <div>
<!-- Notes --> <!-- 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> <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 <textarea id="customNoteTextArea" name="customNoteTextArea" cols="35" rows="10" maxlength="1000" 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> class="dark:border-gray-700 dark:bg-gray-700 dark:text-white mt-1 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> </div>
<!-- Submit Button --> <!-- Submit Button -->
<div class="text-center"> <div class="text-center">
@ -80,54 +94,54 @@
<div> <div>
<!-- Ticket field --> <!-- Ticket field -->
<label for="dtticket" class="dark:text-gray-300 block text-md font-medium text-gray-700">Ticket:</label> <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 <input type="text" id="dtticket" name="dtticket"
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"> class="dark:border-gray-700 dark:bg-gray-700 dark:text-white mt-1 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 --> <!-- User field -->
<label for="dtuser" class="dark:text-gray-300 block text-md font-medium text-gray-700">User:</label> <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 <input type="text" id="dtuser" name="dtuser"
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"> class="dark:border-gray-700 dark:bg-gray-700 dark:text-white mt-1 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" --> <!-- 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> <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-row space-x-20 pl-2">
<div class="flex flex-col space-y-2"> <div class="flex flex-col space-y-2">
<label class="inline-flex items-center"> <label class="inline-flex items-center">
<input type="radio" name="dtservice" value="Stock" required <input type="radio" name="dtservice" value="Stock"
class="dark:bg-gray-700 dark:border-gray-700 dark:text-white text-indigo-600 focus:ring-indigo-500"> 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> <span class=" dark:text-gray-300">Stock</span>
</label> </label>
<label class="inline-flex items-center"> <label class="inline-flex items-center">
<input type="radio" name="dtservice" value="Deploy" <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"> 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> <span class=" dark:text-gray-300">Deploy</span>
</label> </label>
<label class="inline-flex items-center"> <label class="inline-flex items-center">
<input type="radio" name="dtservice" value="Image" <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"> 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> <span class=" dark:text-gray-300">Image</span>
</label> </label>
</div> </div>
<div class="flex flex-col space-y-2"> <div class="flex flex-col space-y-2">
<label class="inline-flex items-center"> <label class="inline-flex items-center">
<input type="radio" name="dtservice" value="E-Waste" <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"> 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> <span class=" dark:text-gray-300">E-Waste</span>
</label> </label>
<label class="inline-flex items-center"> <label class="inline-flex items-center">
<input type="radio" name="dtservice" value="Repair/Parts" <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"> 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> <span class=" dark:text-gray-300">Repair/Parts</span>
</label> </label>
<label class="inline-flex items-center"> <label class="inline-flex items-center">
<input type="radio" name="dtservice" value="Other" <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"> 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> <span class=" dark:text-gray-300">Other</span>
</label> </label>
</div> </div>
</div> </div>
<!-- Notes field --> <!-- Notes field -->
<label for="dtnotes" class="dark:text-gray-300 block text-md font-medium text-gray-700">Notes: (optional)</label> <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" <textarea id="dtnotes" name="dtnotes" cols="35" rows="6" 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> class="dark:border-gray-700 dark:bg-gray-700 dark:text-white mt-1 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> </div>
<!-- Submit Button --> <!-- Submit Button -->
<div class="text-center"> <div class="text-center">
@ -161,4 +175,7 @@
<script src="./assets/ITThermal.js"></script> <script src="./assets/ITThermal.js"></script>
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
</body> </body>
</html> </html>