From 4518de323b17e1576e0ef009634cf26ab5cb4873 Mon Sep 17 00:00:00 2001
From: Peter York <peter.york@dft.gov.uk>
Date: Thu, 26 Sep 2024 11:49:47 +0100
Subject: [PATCH] Initial pass at printable report

---
 src/routes/planning/report/+page.svelte       | 10 +++++
 .../planning/report/printable/+page@.svelte   | 38 +++++++++++++++++++
 2 files changed, 48 insertions(+)
 create mode 100644 src/routes/planning/report/printable/+page@.svelte

diff --git a/src/routes/planning/report/+page.svelte b/src/routes/planning/report/+page.svelte
index c0d4c251adc..5ca92962838 100644
--- a/src/routes/planning/report/+page.svelte
+++ b/src/routes/planning/report/+page.svelte
@@ -1,9 +1,19 @@
 <script lang="ts">
   import { state } from "../data";
   import { criteria } from "../lists";
+  import { DefaultButton } from "govuk-svelte";
+  import { base } from "$app/paths";
+
+function openReportInNewTab() {
+  window.open(`${base}/planning/report/printable`, '_blank').focus();
+}
 </script>
 
 <div class="govuk-width-container">
+  <div>
+    <DefaultButton on:click={openReportInNewTab}>Export to PDF</DefaultButton>
+    <p>This button will open a new tab where you should right-click, "print", and print/export to PDF.</p>
+  </div>
   <table>
     <caption class="govuk-table__caption govuk-table__caption--m">
       Application details
diff --git a/src/routes/planning/report/printable/+page@.svelte b/src/routes/planning/report/printable/+page@.svelte
new file mode 100644
index 00000000000..29fe6115da8
--- /dev/null
+++ b/src/routes/planning/report/printable/+page@.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { state } from "../../data";
+  import { criteria } from "../../lists";
+</script>
+
+<div class="govuk-width-container">
+  <table>
+    <caption class="govuk-table__caption govuk-table__caption--m">
+      Application details
+    </caption>
+    {#each [["Site address", $state.summary.siteAddress], ["Local authority reference", $state.summary.localAuthorityReference], ["ATE reference", $state.summary.ateReference], ["Local planning authority", $state.summary.localPlanningAuthority], ["Local highway authority", $state.summary.localHighwayAuthority], ["Completed by", $state.summary.completedBy], ["Date", $state.summary.date], ["Application type", $state.summary.applicationType], ["Summary of proposal", $state.summary.proposalSummary]] as [key, value]}
+      <tr>
+        <th>{key}</th>
+        <td>{value}</td>
+      </tr>
+    {/each}
+  </table>
+
+  <table>
+    <caption class="govuk-table__caption govuk-table__caption--m">
+      Assessment report
+    </caption>
+    <tr>
+      <th>Criterion</th>
+      <th>Rating</th>
+      <th>Appraiser Comments</th>
+      <th>Relevant Policy & Guidance</th>
+    </tr>
+    {#each criteria as criterion, idx}
+      <tr>
+        <td>{idx + 1}. {criterion}</td>
+        <td>{$state.ratings[idx]}</td>
+        <td>{$state.appraiserComments[idx]}</td>
+        <td>{$state.localGuidance[idx]}</td>
+      </tr>
+    {/each}
+  </table>
+</div>