Add option to parse data from a file

PrinterPiExtension/js/main.js

@@ -90,8 +90,13 @@ let readStorageData = (onFinish) => {
     if (res.data) {
       setData(res.data);
       document.getElementById("more-info").innerHTML = "Data read from storage";
-      onFinish();
+    } else {
+      document.getElementById("more-info").innerHTML = "No data in storage";
+      document.getElementById('print-button').disabled = true;
+      document.getElementById('envelope-button').disabled = true;
+      document.getElementById('save-button').disabled = true;
     }
+    onFinish();
   });
 }
 
@@ -522,6 +527,30 @@ let showOptions = () => {
 let parsePage = () => {
   chrome.extension.getBackgroundPage().chrome.tabs.executeScript(null, { file: './js/background.js' }); //Try to run the background script
 }
+/**
+ * Parse the file with receipt data - event listener for file change event
+ * 
+ * @function parseFile
+ * @param {Object} ev Event
+ */
+let parseFile = (ev) => {
+  const files = ev.target.files;
+  if (files && files[0]) { //User selected a file
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      const data = JSON.parse(event.target.result);
+      setData({ //Set the data packet
+        to: data.to,
+        shipping: data.shipping,
+        subtotal: data.subtotal,
+        items: data.items,
+      });
+      validateInputs();
+      document.getElementById("more-info").innerHTML = "Data loaded from file"; //Show the error message
+    }
+    reader.readAsText(files[0]);
+  }
+}
 
 
 
@@ -542,13 +571,15 @@ window.onload = () => { //Add event listeners, etc.
       readStorageData(); //Read the current data and display it
     }
   }).catch((err) => {
-    console.log("Error while getting settings: " + err);
+    console.error("Error while getting settings: " + err);
     let done_msg = document.getElementById("done-msg");
     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('save-button').addEventListener('click', setStorageData);
-  document.getElementById('parse-button').addEventListener('click', () => parsePage); //Execute the background parsing script
+  document.getElementById('parse-button').addEventListener('click', parsePage); //Execute the background parsing script
+  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);
   document.getElementById("options-btn").addEventListener("click", showOptions);
 	document.getElementById('Shipping').addEventListener("change", validateInputs);
@@ -562,6 +593,7 @@ chrome.runtime.onMessage.addListener((msg) => { //Listen for messages and set th
     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 {
     setData({ //Set the data packet
       to: msg.to,

PrinterPiExtension/main.html

@@ -22,10 +22,14 @@ <h6 class="text-info text-center" id="more-info"></h6>
 			<div class="px-5 py-1 row">
 				<button class="btn btn-sm btn-primary col mx-4" id='envelope-button'>Print Envelope</button>
 			</div>
-			<div class="px-3 py-2 row">
-				<button class="btn btn-sm btn-warning col mx-2" id='parse-button'>Parse Data</button>
-				<button class="btn btn-sm btn-success col mx-2" id='save-button'>Save Data</button>
+			<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>
 			</div>
+			<div class="px-3 py-1 row">
+				<button class="btn btn-sm btn-success col mx-2" id='save-button'>Store Data</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">Address</h5>

PrinterPiExtension/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "PrinterPi",
-  "version": "5.2.1",
+  "version": "5.3",
   "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",