Merge pull request #19 from geoblocks/add-cancel-print

Add cancel print
geoblocks · Feb 27, 2024 · e32d380 · e32d380
2 parents 027f8e2 + 5cafaeb
commit e32d380
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 26 deletions.
diff --git a/demo/demo.html b/demo/demo.html
@@ -1,10 +1,10 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <title>Mapfishprint geoblocks demo</title>
-    <link rel="stylesheet" type="text/css" href="./ol/ol.css" crossorigin="anonymous">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" type="text/css" href="./ol/ol.css" crossorigin="anonymous" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <script type="importmap">
       {
         "imports": {
@@ -20,13 +20,13 @@
       }
     </script>
     <h1>Print OL map as pdf with Mapfish Print</h1>
-    <div id="map" style="height: 400px; width: 100%;"></div>
+    <div id="map" style="height: 400px; width: 100%"></div>
     <button id="print">Print!</button>
-    <textarea id="spec" style="height:200px; width: 100%; background-color: lightgray;"></textarea>
-    <textarea id="report" style="height:100px; width: 100%; background-color: lightgray;"></textarea>
-    <textarea id="result" style="height:50; width: 100%; background-color: lightgray;"></textarea>
+    <button id="cancel">Cancel Print!</button>
+    <textarea id="spec" style="height: 200px; width: 100%; background-color: lightgray"></textarea>
+    <textarea id="report" style="height: 100px; width: 100%; background-color: lightgray"></textarea>
+    <textarea id="result" style="height: 50; width: 100%; background-color: lightgray"></textarea>
     <script type="module" src="./demo.js"></script>
   </head>
-  <body>
-  </body>
+  <body></body>
 </html>
diff --git a/demo/demo.js b/demo/demo.js
@@ -1,6 +1,12 @@
 import {Map, View} from 'ol';
 
-import {MFPEncoder, BaseCustomizer, requestReport, getDownloadUrl} from '@geoblocks/mapfishprint';
+import {
+  MFPEncoder,
+  BaseCustomizer,
+  requestReport,
+  getDownloadUrl,
+  cancelPrint,
+} from '@geoblocks/mapfishprint';
 import TileLayer from 'ol/layer/Tile.js';
 import OSM from 'ol/source/OSM.js';
 import {fromLonLat} from 'ol/proj.js';
@@ -20,6 +26,22 @@ const map = new Map({
   }),
 });
 
+let report = null;
+
+document.querySelector('#cancel').addEventListener('click', async () => {
+  const resultEl = document.querySelector('#result');
+  if (report) {
+    const cancelResult = await cancelPrint(MFP_URL, report.ref);
+    if (cancelResult.status === 200) {
+      resultEl.innerHTML = 'Print is canceled';
+    } else {
+      resultEl.innerHTML = 'Failed to cancel print';
+    }
+  } else {
+    resultEl.innerHTML = 'No print in progress';
+  }
+});
+
 document.querySelector('#print').addEventListener('click', async () => {
   const specEl = document.querySelector('#spec');
   const reportEl = document.querySelector('#report');
@@ -56,20 +78,24 @@ document.querySelector('#print').addEventListener('click', async () => {
   console.log('spec', spec);
   specEl.innerHTML = JSON.stringify(spec, null, '  ');
 
-  const report = await requestReport(MFP_URL, spec);
+  report = await requestReport(MFP_URL, spec);
   console.log('report', report);
   reportEl.innerHTML = JSON.stringify(report, null, '  ');
 
-  await getDownloadUrl(MFP_URL, report, 1000).then(
-    (url) => {
-      resultEl.innerHTML = url;
-      document.location = url;
-      return url;
-    },
-    (error) => {
-      console.log('result', 'error', error);
-      resultEl.innerHTML = error;
-      return error;
-    },
-  );
+  await getDownloadUrl(MFP_URL, report, 1000)
+    .then(
+      (url) => {
+        resultEl.innerHTML = url;
+        document.location = url;
+        return url;
+      },
+      (error) => {
+        console.log('result', 'error', error);
+        resultEl.innerHTML = error;
+        return error;
+      },
+    )
+    .finally(() => {
+      report = null;
+    });
 });
diff --git a/src/types.ts b/src/types.ts
@@ -168,3 +168,7 @@ export interface MFPStatusResponse {
   status: string;
   waitingTime: number;
 }
+
+export interface MFPCancelResponse {
+  status: number;
+}
diff --git a/src/utils.ts b/src/utils.ts
@@ -1,6 +1,6 @@
 import WMTSTileGrid from 'ol/tilegrid/WMTS.js';
 import {toSize} from 'ol/size.js';
-import type {MFPReportResponse, MFPSpec, MFPStatusResponse, MFPWmtsMatrix} from './types';
+import type {MFPCancelResponse, MFPReportResponse, MFPSpec, MFPStatusResponse, MFPWmtsMatrix} from './types';
 import type {WMTS} from 'ol/source.js';
 import type {Extent} from 'ol/extent';
 import {Constants, CalculatedConstants} from './constants';
@@ -104,7 +104,13 @@ export function getWmtsUrl(source: WMTS): string {
 }
 
 export async function getStatus(mfpBaseUrl: string, ref: string): Promise<MFPStatusResponse> {
-  return await (await fetch(`${mfpBaseUrl}/status/${ref}.json`)).json();
+  const response = await fetch(`${mfpBaseUrl}/status/${ref}.json`);
+  return await response.json();
+}
+
+export async function cancelPrint(mfpBaseUrl: string, ref: string): Promise<MFPCancelResponse> {
+  const response = await fetch(`${mfpBaseUrl}/cancel/${ref}`, {method: 'DELETE'});
+  return {status: response.status};
 }
 
 export async function requestReport(mfpBaseUrl: string, spec: MFPSpec): Promise<MFPReportResponse> {