Update to v7.2.0: Improve extension usability

PrinterPiExtension/CHANGELOG.md

@@ -7,3 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [7.1.1] - 2021-01-17
 ### Changed
 - Fixed rounding error with tax field when on eBay Regular page (causing incorrect values to be present in resulting receipt)
+
+## [7.2.0] - 2021-01-17
+### Changed
+- Fixed bug with new eBay update
+- Changed extension logo
+- Improved interface for adding/removing orders (changed to more logical labelling system and increment/decrement when removing orders)
+- Added bulk printing for envelopes

PrinterPiExtension/js/background.js

@@ -22,12 +22,13 @@
 	 */
 	const parseEbayRegular = () => {
 		let address = document.querySelector("#shipToAddress").innerText;
-		let shipping = document.querySelectorAll("._1nhS6BoY")[3].children[1].innerText;
+		let shipping = document.querySelectorAll("._35lSuob7")[3].children[1].innerText;
 		shipping = parseFloat(shipping.substring(shipping.indexOf("$")+1)); //Shipping as a float
-		let grandTotal = document.querySelectorAll("._1nhS6BoY")[2].children[1].innerText; //Shipping+items+tax
+		let grandTotal = document.querySelectorAll("._35lSuob7")[2].children[1].innerText; //Shipping+items+tax
 		grandTotal = parseFloat(grandTotal.substring(grandTotal.indexOf("$")+1));
+
 		let itemTotal = 0; //Total cost of items
-		let items = document.querySelectorAll(".-CkHbnvR");
+		let items = document.querySelectorAll("._2A-ocLMX");
 		let item_arr = [];
 		for (let i=0; i<items.length; i++) { //Iterate through the items
 			let itm = items[i].children[1];
@@ -165,7 +166,7 @@
 	console.log("[PrinterPi] Parsing data...");
 	try { //Try eBay Regular
 		let data = parseEbayRegular();
-		console.log("Data:", data);
+		console.log("Parsed data:", data);
 		chrome.runtime.sendMessage({
 			orders: [data]
 		});

PrinterPiExtension/js/main.js

@@ -102,7 +102,7 @@ let readStorageData = (onFinish) => {
       document.getElementById('envelope-button').disabled = true;
       document.getElementById('save-button').disabled = true;
     }
-    onFinish();
+    if (onFinish) onFinish();
   });
 }
 
@@ -339,7 +339,7 @@ let getData = () => { //Read the data from the HTML page
  * @param {number} orderIndex 
  */
 let selectOrder = (orderIndex) => {
-  console.log(orders);
+  document.getElementById('order-select').value = orderIndex;
   setData({
       to: orders[orderIndex]?.to || "",
       shipping: orders[orderIndex]?.shipping || "0",
@@ -354,9 +354,13 @@ let selectOrder = (orderIndex) => {
  * Remove the current order (from global orders)
  */
 const removeCurrentOrder = () => {
+  let nextIndex = parseInt(document.getElementById("order-select").value);
   orders.splice(document.getElementById("order-select").value, 1);
   showOrders();
-  selectOrder(0);
+  console.log(orders, nextIndex);
+  if (nextIndex >= orders.length) nextIndex -= 1; //Ensure index isn't too large
+  if (nextIndex < 0) nextIndex = 0; //Ensure index isn't before first element
+  console.log(nextIndex);selectOrder(nextIndex);
 }
 
 /**
@@ -367,7 +371,7 @@ const showOrders = () => {
   orders.forEach((_, i) => {
     let opt = document.createElement("OPTION");
     opt.value = i;
-    opt.innerHTML = `Order ${i+1}`;
+    opt.innerHTML = `${i+1}: ${orders[i].to.split("\n")?.[0] || "Order" + (i+1)}`;
     opt.selected = i==0;
     document.getElementById('order-select').appendChild(opt);
   });
@@ -622,7 +626,7 @@ window.onload = () => { //Add event listeners, etc.
       let pkt = getPacket(settings);
       if (pkt) sendData(pkt);
     });
-    document.getElementById('print-all-button').addEventListener('click', () => { //Get the data packet and send it
+    document.getElementById('print-all-button').addEventListener('click', () => { //Get the data packets and send them
       for (let orderIndex in orders) {
         selectOrder(orderIndex);
         let pkt = getPacket(settings);
@@ -633,6 +637,13 @@ window.onload = () => { //Add event listeners, etc.
       let pkt = getPacket(settings);
       if (pkt) printEnvelope(pkt);
     });
+    document.getElementById('envelope-all-button').addEventListener('click', () => { //Get the data packets and print them
+      for (let orderIndex in orders) {
+        selectOrder(orderIndex);
+        let pkt = getPacket(settings);
+        if (pkt) printEnvelope(pkt);
+      }
+    });
 
     if (settings.autoParse == "Y") {
       parsePage();
@@ -645,10 +656,12 @@ window.onload = () => { //Add event listeners, etc.
     done_msg.innerHTML = "Please configure the printer settings in the Setting page (via the button PrinterPi Settings below)";
     done_msg.classList = "text-danger";
   });
+
   document.getElementById('order-select').addEventListener("change", (e) => selectOrder(e.target.value));
   document.getElementById('remove-button').addEventListener("click", removeCurrentOrder);
-  document.getElementById('save-button').addEventListener('click', setStorageData);
   document.getElementById('parse-button').addEventListener('click', parsePage); //Execute the background parsing script
+  document.getElementById('restore-button').addEventListener('click', readStorageData);
+  document.getElementById('save-button').addEventListener('click', setStorageData);
   document.getElementById('file-button').addEventListener('click', () => document.getElementById('file-dialog').click()); //Parse a file for the receipt
   document.getElementById('file-dialog').addEventListener('change', parseFile)
   document.getElementById("items-row-btn").addEventListener("click", addRowItems);
@@ -662,13 +675,15 @@ window.onload = () => { //Add event listeners, etc.
 }
 
 chrome.runtime.onMessage.addListener((msg) => { //Listen for messages and set the data accordingly
-  if (msg.error != null) { //Error message from background script
+  if (msg.error != null || msg.orders?.length == 0) { //Error message from background script
     console.log("ERR: error received from background script: ", msg);
     readStorageData(() => { //Default to storage
       document.getElementById("more-info").innerHTML += ". Not a valid page to parse."; //Show the error message
     });
     document.getElementById('parse-button').disabled = true;
   } else if (msg.orders) {
+    document.getElementById("more-info").innerHTML = "Read data from page"; //Show the error message
+    console.log("Parsed orders: ", msg.orders);
     if (msg.orders.length >= 1) {
       setData({ //Set the data packet
         to: msg.orders[0].to,

PrinterPiExtension/main.html

@@ -14,45 +14,56 @@ <h5 class="text-center h5">
 					Not connected
 				</p>
 			</h5>
-			<hr class="py-1 my-1">
+			<hr class="w-25 py-1 my-1">
 			<h6 class="text-info text-center" id="more-info"></h6>
+			<div class="px-3 pt-2 pb-1 row">
+				<button class="btn btn-sm btn-warning col mx-2" id='parse-button'>Parse Page</button>
+				<button class="btn btn-sm btn-warning col mx-2" id='restore-button'>Show Saved</button>
+				<button class="btn btn-sm btn-warning col mx-2" id='file-button'>Parse File</button>
+			</div>
+			<hr class="py-1 my-1">
+
 			<div class="px-3 py-1 row">
-				<button class="btn btn-primary col mx-2" id='print-button'>Print Receipt</button>
 				<button class="btn btn-primary col mx-2" id='print-all-button'>Print All Receipts</button>
 			</div>
 			<div class="px-3 py-1 row">
-				<button class="btn btn-sm btn-primary col mx-2" id='envelope-button'>Print Envelope</button>
-			</div>
-			<div class="px-3 pt-2 pb-1 row">
-				<button class="btn btn-sm btn-warning col mx-2" id='parse-button'>Parse Page</button>
-				<button class="btn btn-sm btn-warning col mx-2" id='file-button'>Parse Receipt File</button>
+				<button class="btn btn-sm btn-primary col mx-2" id='envelope-all-button'>Print All Envelopes</button>
 			</div>
 			<div class="px-3 py-1 row">
-				<button class="btn btn-sm btn-success col mx-2" id='save-button'>Store Data</button>
+				<button class="btn btn-sm btn-warning col mx-2" id='save-button'>Save</button>
 			</div>
+
 			<input type="file" style="display: none" id="file-dialog" accept=".json" />
 
-			<hr class="py-1 my-1">
-			<h5 class="text-center p-0 pt-1 m-0">Current Order</h5>
-			<select class="form-control" id="order-select">
+			<hr class="p-0 m-0 pt-1 mt-1">
+
+			<select class="form-control m-0 mt-1 mb-2" id="order-select">
 			</select>
-			<button class="btn btn-sm btn-warning col mx-2" id='remove-button'>Remove order</button>
+
+			<hr class="p-0 m-0 pt-1 mt-1">
+
+			<h5 class="text-center p-0 pb-1 m-0">Current Order</h5>
+			<div class="px-3 pt-2 pb-1 row">
+				<button class="btn btn-sm btn-primary col mx-1" id='print-button'>Print Receipt</button>
+				<button class="btn btn-sm btn-primary col mx-1" id='envelope-button'>Print Envelope</button>
+				<button class="btn btn-sm btn-warning col mx-1" id='remove-button'>Remove order</button>
+			</div>
 			<hr class="py-1 my-1">
-			<h5 class="text-center p-0 pt-1 m-0">Address</h5>
+			<h6 class="text-center p-0 py-1 m-0">Address</h6>
 			<textarea class="form-control h-100" rows="4" id="Address"></textarea>
-			<h5 class="text-center p-0 pt-1 m-0">Shipping</h5>
+			<h6 class="text-center p-0 pt-1 m-0">Shipping</h6>
 			<input type="text" class="form-control w-100" id="Shipping" />
-			<h5 class="text-center p-0 pt-1 m-0">Tax</h5>
+			<h6 class="text-center p-0 pt-1 m-0">Tax</h6>
 			<input type="text" class="form-control w-100" id="Tax" />
-			<h5 class="text-center p-0 pt-1 m-0 mb-1">Subtotal<button class="btn btn-secondary btn-sm p-0 m-0 mx-1" data-toggle="tooltip" data-html="true" title="<em>Item total not including shipping or tax</em>">&#10068</button></h5>
+			<h6 class="text-center p-0 pt-1 m-0 mb-1">Subtotal<strong class="bg-dark m-0 mx-1" data-toggle="tooltip" data-html="true" title="Item total not including shipping or tax">&#10068</strong></h6>
 			<input type="text" class="form-control w-100" id="Subtotal" />
 			<hr class="py-1 mt-2 mb-0">
-			<h5 class="text-center p-0 pt-1 m-0">Items Purchased</h5>
+			<h6 class="text-center p-0 pt-1 m-0">Items Purchased</h6>
 			<table class="table">
 				<thead>
-					<tr>
+					<tr class="text-center">
 						<th>Description</th>
-						<th>Price (Total)</th>
+						<th>Total</th>
 						<th>QTY</th>
 						<th>SKU</th>
 						<th></th>
@@ -69,7 +80,7 @@ <h5 class="text-center p-0 pt-1 m-0">Items Purchased</h5>
 			<hr class="py-1 mt-2 mb-0">
 			<div class="row">
 				<div class="col px-3 text-center">
-					<button class="btn btn-sm btn-secondary" id="options-btn">PrinterPi Settings</button>
+					<button class="btn btn-sm btn-link w-100 py-0 mt-2" id="options-btn">PrinterPi Settings</button>
 				</div>
 			</div>
 			<hr class="py-1 mt-2 mb-0">

PrinterPiExtension/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "PrinterPi",
-  "version": "7.1.1",
+  "version": "7.2.0",
   "description": "Parse eBay Print Shipping Label or PayPal Activity pages and send the data to an application that controls a receipt printer",
 
   "options_page": "options.html",

PrinterPiExtension/options.html

@@ -83,7 +83,7 @@ <h5 class="text-center p-0 pt-3 m-0">Automatic Page Parsing</h5>
 				</div>
 			</div>
 			<small class="form-text text-muted mt-0 pb-0">
-				Automatically parse page if the data on it is valid. If not, the stored data will be displayed.
+				Automatically parse page if the data on it is valid. If not, the stored data will be displayed and you'll have to manually parse data with "Parse Page".
 			</small>
 			<hr class="py-1 mt-2 mb-0">
 			<div class="px-3 py-1 row">