feat: background and navbar

minor style tweaks
added overrides.js
manifest updated

manifest.json

@@ -1,15 +1,33 @@
-{
+{
-	"manifest_version": 3,
+	"manifest_version": 3,
-
+
-	"name": "ServiceHub Plus",
+	"name": "ServiceHub+",
-	"version": "0.1.2",
+	"author": "Charles Danesi",
-	"description": "Improvements to Service Hub for TRG techs",
+	"homepage_url": "https://charlesdanesi.net",
-
+	"version": "0.1.4",
-	"content_scripts": [
+	"description": "Improvements to Service Hub for TRG techs",
-		{
+
-			"css": ["style.css"],
+	"content_scripts": [
-			"js": ["script.js"],
+		{
-			"matches": ["https://portal.trgrepair.com/*"]
+			"css": ["style.css"],
-		}
+			"js": ["script.js"],
-	]
+			"matches": ["https://portal.trgrepair.com/*"]
-}
+		}
+	],
+
+	"web_accessible_resources": [
+		{
+			"resources": [
+				"fonts/MaterialIcons-Regular.ttf",
+				"fonts/MaterialIconsOutlined-Regular.otf",
+				"img/autorenew.png",
+				"overrides.js"
+			],
+			"matches": ["<all_urls>"],
+			"extensions": ["lmeeejhdmpakenhgdfmgjcbdmeppjpam"],
+			"run_at": "document_end"
+		}
+	],
+
+	"permissions": ["storage", "activeTab", "scripting", "nativeMessaging"]
+}

overrides.js

@@ -0,0 +1,23 @@
+// Fix that annoying BS where the ID takes focus CONSTANTLY
+
+console.log("Injection succeeded!");
+
+function checkLoc() {
+	var sLoc = document.getElementById("txtTRG_Loc").value;
+	var sUsr = document.getElementById("txtTRG_User").value;
+	if (sLoc.length == 0) {
+		alert("You need to enter a location.");
+    sLoc.focus();
+	} else {
+		if (sUsr.length == 0) {
+			//alert("We suck at writing proper code.");
+			console.log("Override successful");
+			document.getElementById("txtTRG_User").value = "20539";
+			// document.querySelectorAll["txtTRG_User"].focus();
+		}
+	}
+	resetTimeout();
+}
+
+var bfTest = document.getElementById("txtTRG_Bin");
+bfTest.onfocus();

script.js

@@ -0,0 +1,66 @@
+"use strict";
+
+/*
+	TODO style individual buttons
+	TODO options page (set UID)
+	TODO move parts list buttons top or bottom (form name='frmPartsSelection'), btnSave, btnCancel
+	NOTE color themes?
+	BUG close button on photo pages is styled along with the btnCancel
+	NOTE display tiny images next to parts list?
+	TODO shrink navbar/header/location on scroll
+	TODO fancy button animations
+	TODO choose file on upload window
+	TODO insert a reset button into search form
+	TODO style menubar and keep it sticky on the window
+	TODO style/move the location scan to float with the RO
+	TODO color bg to bin color
+*/
+
+// temporarily override stupid alerts that happen randomly all day long
+//document.getElementById("txtTRG_User").value = "20539";
+
+// Warranty Highlight
+const isWarranty = document.getElementById("chkWarrantee");
+if (isWarranty != null) {
+	isWarranty.addEventListener("change", updateBackground);
+	updateBackground();
+	function updateBackground() {
+		isWarranty.nextElementSibling.style.backgroundColor = isWarranty.checked
+			? "red"
+			: "transparent";
+		isWarranty.nextElementSibling.style.color = isWarranty.checked
+			? "white"
+			: "black";
+	}
+}
+
+// TODO highlight change case label if SN updated
+const newSN = document.getElementById("txtNewBoardSN"); // this is the new SN field
+const snWasUpdated = document.getElementById("chkCaseSNUpdate"); // this is the checkbox
+
+// if (newSN.length != null) {
+// 	newSN.addEventListener("change", updateSNBackground, false);
+// 	updateSNBackground();
+// }
+// function updateSNBackground() {
+// 	alert("test");
+// }
+
+// TODO add current location to a floating modal (or something)
+
+// Notification system
+// TODO implement facebook-style notifications
+// https://portal.trgrepair.com/task_manager.asp?rnd=0.9996227368620352
+
+// const notifCountStr = document.getElementById("lblTask").innerText;
+// const notifCount = parseInt(notifCountStr.split(" ")[2]); // Total task count
+// const notifCountNew = parseInt(notifCountStr.split(" ")[5].slice(1)); // New task count
+
+// Code injection
+var s = document.createElement("script");
+s.src = chrome.runtime.getURL("overrides.js");
+(document.head || document.documentElement).appendChild(s);
+
+s.onload = function () {
+	this.remove();
+};

style.css

@@ -1,125 +1,161 @@
-/* 
+@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
-
+
-	TODO float buttons on bottom of RO
+@font-face {
-	TODO float location entry on RO (sidebar?)
+	font-family: "Material Icons Outlined";
-	TODO style individual buttons
+	font-style: normal;
-	TODO options page
+	font-weight: 400;
-		- move parts list buttons top or bottom
+	src: url("chrome-extension://__MSG_@@extension_id__/fonts/MaterialIconsOutlined-Regular.otf");
-		- color themes?
+}
-	BUG close button on photo pages is styled along with the btnCancel
+
-	HACK display tiny images next to parts list?
+@font-face {
-	TODO shrink navbar/header/location on scroll
+	font-family: "Material Icons";
-	TODO fancy button animations
+	font-style: normal;
-*/
+	font-weight: 700;
-
+	src: url("chrome-extension://__MSG_@@extension_id__/fonts/MaterialIcons-Regular.ttf");
-@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
+}
-
+
-:root {
+:root {
-	--white: #f4f4f9;
+	--white: #f4f4f9;
-	--darkgray: #696969;
+	--darkgray: #696969;
-	--lightgray: #857f74;
+	--lightgray: #857f74;
-	--darkblue: #0f2137;
+	--darkblue: #0f2137;
-	--lightblue: #0ebbfe;
+	--lightblue: #0ebbfe;
-	--green: #c1d830;
+	--green: #c1d830;
-	--darkgreen: #103900;
+	--darkgreen: #103900;
-	--black: #000;
+	--black: #000;
-}
+}
-
+
-/* General Styles */
+/* General Styles */
-
+body {
-/* Buttons */
+   background-color: #303030;
-
+}
-input[type="button"] {
+
-	font-family: Roboto, sans-serif;
+/* Navbar */
-	background-color: var(--darkgray);
+#td_nav1,
-	color: var(--white);
+#td_nav2,
-	border-radius: 5px;
+#td_nav3,
-	padding: 0.55em 1.25em;
+#td_nav4,
-	text-decoration: none;
+#td_nav5,
-	font-size: 0.9em;
+#td_nav6,
-	cursor: pointer;
+#td_nav7,
-	border: none;
+#td_nav8,
-	transition: color 250ms ease-in, background-color 250ms ease-in;
+#td_nav9,
-}
+.nav_btn_td {
-
+   background-color: #606060;
-input[type="button"]:hover {
+   color: #C0C0C0;
-	background-color: var(--lightgray);
+}
-}
+
-
+/* Buttons */
-input[type="button"]:disabled {
+
-	opacity: 0.3;
+input[type="button"] {
-	cursor: default;
+	font-family: Roboto, sans-serif;
-}
+	background-color: var(--darkgray);
-
+	color: var(--white);
-input[name="btnCancel"] + input[name="btnSave"] {
+	border-radius: 5px;
-	position: fixed;
+	padding: 0.55em 1.25em;
-	bottom: 20px;
+	text-decoration: none;
-	right: 20px;
+	font-size: 0.9em;
-}
+	cursor: pointer;
-
+	border: none;
-input[name="btnCancel"] {
+	transition: color 250ms ease-in, background-color 250ms ease-in;
-	background-color: lightcoral;
+}
-	color: var(--white);
+
-	position: fixed;
+input[type="button"]:hover {
-	bottom: 20px;
+	background-color: var(--lightgray);
-	right: 90px;
+}
-}
+
-
+input[type="button"]:disabled {
-input[id="btnSubmitForApproval"]:hover {
+	opacity: 0.3;
-	background-color: var(--darkblue);
+	cursor: default;
-	color: var(--lightblue);
+}
-}
+
-
+input[name="btnCancel"] + input[name="btnSave"] {
-input[value="Mark Complete"]:hover {
+	position: fixed;
-	background-color: var(--green);
+	bottom: 20px;
-	color: var(--darkgray);
+	right: 20px;
-	/*font-weight: bolder;*/
+}
-}
+
-
+input[name="btnCancel"] {
-input[name="btnParts"] {
+	background-color: var(--lightblue);
-	margin: 0;
+	color: var(--white);
-	padding: 0 1em;
+	position: fixed;
-}
+	bottom: 20px;
-
+	right: 90px;
-input[name="btnIssue4Eval"] {
+}
-	background-color: var(--darkgreen);
+
-	color: var(--lightgray);
+input[id="btnSubmitForApproval"]:hover {
-}
+	background-color: var(--darkblue);
-
+	color: var(--lightblue);
-input[name="btnContract"] {
+}
-	padding: .3em 0;
+
-	background-color: var(--green);
+input[value="Mark Complete"]:hover {
-	color: var(--darkgray);
+	background-color: var(--green);
-}
+	color: var(--darkgray);
-
+}
-input[name="btnExpandRepairHistory"] {
+
-	padding: 0.25em 0;
+input[name="btnParts"] {
-}
+	margin: 0;
-
+	padding: 0 1em;
-input[name="btnRepairCodes"] {
+}
-	padding: 0.5em 0;
+
-	font-size: 1em;
+input[name="btnIssue4Eval"] {
-}
+	background-color: var(--darkgreen);
-
+	color: var(--green);
-input[value="Exit"] {
+}
-	margin-right: 8px;
+
-}
+input[name="btnContract"] {
-
+	padding: 0.3em 0;
-input[value="View Repair"] {
+	background-color: var(--darkgray);
-	margin-bottom: 2px;
+	color: var(--white);
-}
+}
-
+
-input[value="View Repair"],
+input[name="btnExpandRepairHistory"] {
-input[value="Remove Repair"] {
+	padding: 0.25em 0;
-	padding: 4px 0;
+}
-}
+
-
+input[name="btnRepairCodes"] {
-/* Images */
+	padding: 0.5em 0;
-
+	font-size: 1em;
-img[id="Img1"],
+}
-img[id="Img2"] {
+
-	position: absolute;
+input[value="Exit"] {
-	content: url("https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Plus_symbol.svg/500px-Plus_symbol.svg.png");
+	margin-right: 8px;
-	width: 20px;
+}
-	height: 20px;
+
-}
+input[value="View Repair"] {
+	margin-bottom: 2px;
+}
+
+input[value="View Repair"],
+input[value="Remove Repair"] {
+	padding: 4px 0;
+}
+
+label {
+	transition: background-color 250ms ease-in, color 250ms ease-in;
+}
+
+label[for="chkWarrantee"] {
+	padding: 0.35em;
+}
+
+/* Images */
+
+img[id="Img1"],
+img[id="Img2"] {
+	position: absolute;
+	content: url("chrome-extension://__MSG_@@extension_id__/img/autorenew.png");
+	width: 18px;
+	height: 18px;
+	/* BUG: The below lines aren't working.. */
+	outline: none;
+	border: none;
+}
+
+img[id="Img3"] {
+	content: url("chrome-extension://__MSG_@@extension_id__/img/autorenew.png");
+	width: 16px;
+	height: 16px;
+	outline: none;
+	border: none;
+}