mapfish-print-component

src/App.js

@@ -9,6 +9,7 @@ ReactGA.initialize("UA-3104541-53");
 ReactGA.pageview(window.location.pathname + window.location.search);
 
 class App extends Component {
+
   render() {
     return (
       <div>

src/map/BasemapSwitcher.jsx

@@ -387,4 +387,4 @@ function importAllImages(r) {
   let images = {};
   r.keys().map((item, index) => (images[item.replace("./", "")] = r(item)));
   return images;
-}
+}

src/sidebar/components/tools/print/Print.jsx

@@ -3,6 +3,7 @@ import Select from "react-select";
 import Collapsible from 'react-collapsible';
 import PanelComponent from "../../../PanelComponent";
 import * as helpers from "../../../../helpers/helpers";
+import * as printRequest from "./printRequest/printRequest";
 import "./Print.css";
 
 const termsOfUse = "This map, either in whole or in part, may not be reproduced without the written authority from" + 
@@ -116,22 +117,72 @@ class Print extends Component {
     this.props.onClose();
   }
 
-  onDownloadButtonClick = evt => {
-    this.setState({isPrinting: true});
-    const { printSelectedOption} = this.state;
+  onDownloadButtonClick = async evt => {
+    //this.setState({isPrinting: true});
+    const {printSelectedOption} = this.state;
+    //console.log(this.state);  
 
-    helpers.showMessage("Print", "Coming soon!");
+   // helpers.showMessage("Print", "Coming soon!");
 
     // GET VISIBLE LAYERS
     const printLayers = this.getPrintLayers();
 
     // =======================
     // SEND PRINT SERVER REQUEST HERE
     // =======================
-
-    // ONCE PRINT IS COMPLETE (RETURNED FROM SERVER)
-    //helpers.showMessage("Print", "Your print has been downloaded");
-    //this.setState({isPrinting: false}); // THIS WILL RE-ENABLE BUTTON AND HIDE LOADING MSG
+    const printData = await printRequest.printRequest(printLayers, termsOfUse,  this.state);
+    const printAppId = printData.layout.replace(/ /g,"_");
+    const outputFormat = printData.outputFormat;
+    // console.log(JSON.stringify(printData)); 
+    let interval = 5000;
+    let origin = "https://opengis.simcoe.ca";
+    let testOrigin = 'http://localhost:8080'
+    let encodedPrintRequest = encodeURIComponent(JSON.stringify(printData))
+    let url = `${origin}/print/print/${printAppId}/report.${outputFormat}`;
+
+    //check print Status and retreive print
+    let checkStatus = (response) => {
+
+        fetch(`${origin}${response.statusURL}`)
+            .then(data => data.json())
+            .then((data) => {
+                //console.log(data);
+                if ((data.done === true) && (data.status === "finished")) {
+                    interval = 0
+                    helpers.showMessage("Print", "Your print has been downloaded", "green", 10000);
+                    window.open(`${origin}${data.downloadURL}`);
+                    this.setState({isPrinting: false}); // THIS WILL RE-ENABLE BUTTON AND HIDE LOADING MSG
+                } else if ((data.done === false) && (data.status === "running")) {
+                    setTimeout(() => {
+                        if (interval < 30000) {
+                            interval += 2500
+                            checkStatus(response)
+                        } else {
+                            interval = 5000
+                            checkStatus(response)
+                        }
+                    }, interval);
+                } else if ((data.done === true) && (data.status === "error")) {
+                    helpers.showMessage("Print Failed", "please report issue to site admin", "red", 15000);
+                    this.setState({isPrinting: false});
+                }
+            })
+    }
+    //post request to server and check status
+    fetch(url, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: encodedPrintRequest
+        })
+        .then(response => response.json())
+        .then((response) => {
+          this.setState({isPrinting: true});
+          checkStatus(response); 
+        })
+        .catch(error => helpers.showMessage("Print Failed",`There has been a problem with your fetch operation: ${error.message}`, "red", 15000))
+
   };
 
   getPrintLayers = () => {

src/sidebar/components/tools/print/printRequest/__tests__/testXML.xml

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" ?><note><to>Tove</to><from>Jani</from><heading>Reminder</heading><body>Don't forget me this weekend!</body></note>

src/sidebar/components/tools/print/printRequest/__tests__/utilTest.test.js

@@ -0,0 +1,47 @@
+import utils from "../utils";
+import fs  from "fs";
+
+let xml_string = fs.readFileSync(__dirname +"/testXML.xml", "utf8");
+let parser = new DOMParser();
+let xml = parser.parseFromString(xml_string, "text/xml");
+
+test('converts rgb', () => {
+    expect(utils.rgbToHex(91, 91, 91, 1)).toBe("#5b5b5b");
+});
+
+test('converts string to hash color', () => {
+    expect(utils.stringToColour("greenish")).toBe("#9bc63b");
+});
+
+test('converts xml to json data', () => {
+    expect(utils.xmlToJson(xml)).toEqual({
+        "note": {
+            "body": {
+                "#text": "Don't forget me this weekend!"
+            },
+            "from": {
+                "#text": "Jani"
+            },
+            "heading": {
+                "#text": "Reminder"
+            },
+            "to": {
+                "#text": "Tove"
+            }
+        }
+    });
+});
+
+test('remove null and undefined values from object', () => {
+    expect(utils.removeNull({
+        a: null,
+        b: 1,
+        c: undefined
+    })).toEqual({
+        b: 1
+    });
+});
+
+test('Extracts Service name from url', () => {
+    expect(utils.extractServiceName("https://ws.giscache.lrc.gov.on.ca/arcgis/rest/services/LIO_Cartographic/LIO_Topographic/MapServer")).toBe("LIO_Cartographic_LIO_Topographic");
+});