merge changes from master

add taskList.html for task list popup

manifest.json

@@ -1,15 +1,31 @@
-{
+{
-	"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.3",
-	"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"
+			],
+			"matches": ["<all_urls>"],
+			"extensions": ["lmeeejhdmpakenhgdfmgjcbdmeppjpam"]
+		}
+	],
+
+	"permissions": ["storage", "activeTab", "scripting"]
+}

script.js

@@ -0,0 +1,32 @@
+"use strict";
+
+/*
+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: implement facebook-style notifications
+*/
+
+// Warranty Highlight
+const isWarranty = document.getElementById("chkWarrantee");
+isWarranty.addEventListener("change", updateBackground);
+updateBackground();
+function updateBackground() {
+	isWarranty.nextElementSibling.style.backgroundColor = isWarranty.checked
+		? "red"
+		: "transparent";
+	isWarranty.nextElementSibling.style.color = isWarranty.checked
+		? "white"
+		: "black";
+}
+
+// Notification system
+// 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
+
+// Insert notification button
+const insertButton = document.getElementById("exitBtn");
+insertButton.innerHTML = `<div id='newBtn'><a href='#' id='notification-button'><span class='material-icons-outlined notification-icon'>notifications</span></a><span id='notification-badge'>${notifCountNew}</span></div>`;

style.css

@@ -1,125 +1,211 @@
-/* 
+/* 
-
+
-	TODO float buttons on bottom of RO
+	TODO float buttons on bottom of RO
-	TODO float location entry on RO (sidebar?)
+	TODO float location entry on RO (sidebar?)
-	TODO style individual buttons
+	TODO style individual buttons
-	TODO options page
+	TODO options page
-		- move parts list buttons top or bottom
+		- move parts list buttons top or bottom
-		- color themes?
+		- color themes?
-	BUG close button on photo pages is styled along with the btnCancel
+	BUG close button on photo pages is styled along with the btnCancel
-	HACK display tiny images next to parts list?
+	HACK display tiny images next to parts list?
-	TODO shrink navbar/header/location on scroll
+	TODO shrink navbar/header/location on scroll
-	TODO fancy button animations
+	TODO fancy button animations
-*/
+	TODO choose file on upload window
-
+*/
-@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
+
-
+@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
-:root {
+
-	--white: #f4f4f9;
+@font-face {
-	--darkgray: #696969;
+	font-family: "Material Icons Outlined";
-	--lightgray: #857f74;
+	font-style: normal;
-	--darkblue: #0f2137;
+	font-weight: 400;
-	--lightblue: #0ebbfe;
+	src: url("chrome-extension://__MSG_@@extension_id__/fonts/MaterialIconsOutlined-Regular.otf");
-	--green: #c1d830;
+}
-	--darkgreen: #103900;
+
-	--black: #000;
+@font-face {
-}
+	font-family: "Material Icons";
-
+	font-style: normal;
-/* General Styles */
+	font-weight: 700;
-
+	src: url("chrome-extension://__MSG_@@extension_id__/fonts/MaterialIcons-Regular.ttf");
-/* Buttons */
+}
-
+
-input[type="button"] {
+:root {
-	font-family: Roboto, sans-serif;
+	--white: #f4f4f9;
-	background-color: var(--darkgray);
+	--darkgray: #696969;
-	color: var(--white);
+	--lightgray: #857f74;
-	border-radius: 5px;
+	--darkblue: #0f2137;
-	padding: 0.55em 1.25em;
+	--lightblue: #0ebbfe;
-	text-decoration: none;
+	--green: #c1d830;
-	font-size: 0.9em;
+	--darkgreen: #103900;
-	cursor: pointer;
+	--black: #000;
-	border: none;
+}
-	transition: color 250ms ease-in, background-color 250ms ease-in;
+
-}
+/* General Styles */
-
+
-input[type="button"]:hover {
+/* Buttons */
-	background-color: var(--lightgray);
+
-}
+input[type="button"] {
-
+	font-family: Roboto, sans-serif;
-input[type="button"]:disabled {
+	background-color: var(--darkgray);
-	opacity: 0.3;
+	color: var(--white);
-	cursor: default;
+	border-radius: 5px;
-}
+	padding: 0.55em 1.25em;
-
+	text-decoration: none;
-input[name="btnCancel"] + input[name="btnSave"] {
+	font-size: 0.9em;
-	position: fixed;
+	cursor: pointer;
-	bottom: 20px;
+	border: none;
-	right: 20px;
+	transition: color 250ms ease-in, background-color 250ms ease-in;
-}
+}
-
+
-input[name="btnCancel"] {
+input[type="button"]:hover {
-	background-color: lightcoral;
+	background-color: var(--lightgray);
-	color: var(--white);
+}
-	position: fixed;
+
-	bottom: 20px;
+input[type="button"]:disabled {
-	right: 90px;
+	opacity: 0.3;
-}
+	cursor: default;
-
+}
-input[id="btnSubmitForApproval"]:hover {
+
-	background-color: var(--darkblue);
+input[name="btnCancel"] + input[name="btnSave"] {
-	color: var(--lightblue);
+	position: fixed;
-}
+	bottom: 20px;
-
+	right: 20px;
-input[value="Mark Complete"]:hover {
+}
-	background-color: var(--green);
+
-	color: var(--darkgray);
+input[name="btnCancel"] {
-	/*font-weight: bolder;*/
+	background-color: lightcoral;
-}
+	color: var(--white);
-
+	position: fixed;
-input[name="btnParts"] {
+	bottom: 20px;
-	margin: 0;
+	right: 90px;
-	padding: 0 1em;
+}
-}
+
-
+input[id="btnSubmitForApproval"]:hover {
-input[name="btnIssue4Eval"] {
+	background-color: var(--darkblue);
-	background-color: var(--darkgreen);
+	color: var(--lightblue);
-	color: var(--lightgray);
+}
-}
+
-
+input[value="Mark Complete"]:hover {
-input[name="btnContract"] {
+	background-color: var(--green);
-	padding: .3em 0;
+	color: var(--darkgray);
-	background-color: var(--green);
+}
-	color: var(--darkgray);
+
-}
+input[name="btnParts"] {
-
+	margin: 0;
-input[name="btnExpandRepairHistory"] {
+	padding: 0 1em;
-	padding: 0.25em 0;
+}
-}
+
-
+input[name="btnIssue4Eval"] {
-input[name="btnRepairCodes"] {
+	background-color: var(--darkgreen);
-	padding: 0.5em 0;
+	color: var(--green);
-	font-size: 1em;
+}
-}
+
-
+input[name="btnContract"] {
-input[value="Exit"] {
+	padding: 0.3em 0;
-	margin-right: 8px;
+	background-color: var(--green);
-}
+	color: var(--darkgray);
-
+}
-input[value="View Repair"] {
+
-	margin-bottom: 2px;
+input[name="btnExpandRepairHistory"] {
-}
+	padding: 0.25em 0;
-
+}
-input[value="View Repair"],
+
-input[value="Remove Repair"] {
+input[name="btnRepairCodes"] {
-	padding: 4px 0;
+	padding: 0.5em 0;
-}
+	font-size: 1em;
-
+}
-/* Images */
+
-
+input[value="Exit"] {
-img[id="Img1"],
+	margin-right: 8px;
-img[id="Img2"] {
+}
-	position: absolute;
+
-	content: url("https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Plus_symbol.svg/500px-Plus_symbol.svg.png");
+input[value="View Repair"] {
-	width: 20px;
+	margin-bottom: 2px;
-	height: 20px;
+}
-}
+
+input[value="View Repair"],
+input[value="Remove Repair"] {
+	padding: 4px 0;
+}
+
+label {
+	transition: background-color 250ms ease;
+}
+
+/* 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;
+}
+
+label[for="chkWarrantee"] {
+	padding: 0.35em;
+}
+
+/* Fancy Notifications */
+
+#div_task {
+	display: none;
+	visibility: hidden;
+}
+
+#newBtn {
+	position: relative;
+}
+
+.material-icons-outlined {
+	font-family: "Material Icons Outlined";
+}
+
+#notification-button {
+	position: relative;
+	color: var(--lightblue);
+	cursor: pointer;
+	text-decoration: none;
+	outline: none;
+}
+
+#notification-button:hover {
+	color: var(--lightgray);
+}
+
+.notification-icon {
+	font-size: 2.5em;
+	position: absolute;
+	top: 5;
+	right: 3;
+}
+
+#notification-badge {
+	position: absolute;
+	top: 0;
+	right: 0;
+}
+
+/* Top bar */
+
+#div_location {
+	/* position: relative;
+	width: 80%; */
+}
+
+#frmLocation {
+	/* position: absolute;
+	top: -40;
+	right: 370; */
+}

taskList.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<link rel="stylesheet" href="style.css" />
+		<title>Tasks for {username}</title>
+	</head>
+	<body></body>
+</html>