Use govuk table styles, at least partly. #24

acteng · May 9, 2024 · aeaad59 · aeaad59
1 parent f5d3b45
commit aeaad59
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 95 deletions.
diff --git a/src/lib/import.ts b/src/lib/import.ts
@@ -1,5 +1,10 @@
 import ExcelJS, { type CellValue } from "exceljs";
-import { emptyState, type State, type Score, type Position } from "../routes/route_check/data";
+import {
+  emptyState,
+  type State,
+  type Score,
+  type Position,
+} from "../routes/route_check/data";
 
 export function importDalog(workbook: ExcelJS.Workbook): State {
   return dalogToState(getDalog(workbook));
@@ -142,48 +147,48 @@ function dalogToState(dalog: {
   }
 
   for (let i = 0; i < 35; i++) {
-          let prefix = `${num(i)}PC`;
-          if (dalog[`${prefix}Ref`] == null) {
-                  break;
-          }
-          state.policyConflictLog.push({
-                  conflict: normalString(`${prefix}Typ`).substr(0, 1),
-                  stage: normalString(`${prefix}Sta`),
-                  point: point(`${prefix}LaL`),
-                  locationName: normalString(`${prefix}Loc`),
-                  resolved: yesNoBlank(`${prefix}Res`),
-                  notes: normalString(`${prefix}Com`),
-          });
+    let prefix = `${num(i)}PC`;
+    if (dalog[`${prefix}Ref`] == null) {
+      break;
+    }
+    state.policyConflictLog.push({
+      conflict: normalString(`${prefix}Typ`).substr(0, 1),
+      stage: normalString(`${prefix}Sta`),
+      point: point(`${prefix}LaL`),
+      locationName: normalString(`${prefix}Loc`),
+      resolved: yesNoBlank(`${prefix}Res`),
+      notes: normalString(`${prefix}Com`),
+    });
   }
 
   for (let i = 0; i < 35; i++) {
-          let prefix = `${num(i)}PC`;
-          if (dalog[`${prefix}Ref`] == null) {
-                  break;
-          }
-          state.policyConflictLog.push({
-                  conflict: normalString(`${prefix}Typ`).substr(0, 1),
-                  stage: normalString(`${prefix}Sta`),
-                  point: point(`${prefix}LaL`),
-                  locationName: normalString(`${prefix}Loc`),
-                  resolved: yesNoBlank(`${prefix}Res`),
-                  notes: normalString(`${prefix}Com`),
-          });
+    let prefix = `${num(i)}PC`;
+    if (dalog[`${prefix}Ref`] == null) {
+      break;
+    }
+    state.policyConflictLog.push({
+      conflict: normalString(`${prefix}Typ`).substr(0, 1),
+      stage: normalString(`${prefix}Sta`),
+      point: point(`${prefix}LaL`),
+      locationName: normalString(`${prefix}Loc`),
+      resolved: yesNoBlank(`${prefix}Res`),
+      notes: normalString(`${prefix}Com`),
+    });
   }
   // TODO Pretty much the same
   for (let i = 0; i < 35; i++) {
-          let prefix = `${num(i)}SA`;
-          if (dalog[`${prefix}Ref`] == null) {
-                  break;
-          }
-          state.criticalIssues.push({
-                  criticalIssue: normalString(`${prefix}Typ`).substr(0, 1),
-                  stage: normalString(`${prefix}Sta`),
-                  point: point(`${prefix}LaL`),
-                  locationName: normalString(`${prefix}Loc`),
-                  resolved: yesNoBlank(`${prefix}Res`),
-                  notes: normalString(`${prefix}Com`),
-          });
+    let prefix = `${num(i)}SA`;
+    if (dalog[`${prefix}Ref`] == null) {
+      break;
+    }
+    state.criticalIssues.push({
+      criticalIssue: normalString(`${prefix}Typ`).substr(0, 1),
+      stage: normalString(`${prefix}Sta`),
+      point: point(`${prefix}LaL`),
+      locationName: normalString(`${prefix}Loc`),
+      resolved: yesNoBlank(`${prefix}Res`),
+      notes: normalString(`${prefix}Com`),
+    });
   }
 
   // TODO JAT

diff --git a/src/routes/route_check/results_analysis/+page.svelte b/src/routes/route_check/results_analysis/+page.svelte
@@ -19,8 +19,10 @@
   };
 </script>
 
-<h2>1. Summary of Scheme</h2>
 <table>
+  <caption class="govuk-table__caption govuk-table__caption--m">
+    1. Summary of Scheme
+  </caption>
   <tr>
     <th>Scheme Name</th>
     <td>{$state.summary.schemeName}</td>
@@ -43,8 +45,10 @@
   </tr>
 </table>
 
-<h2>2. Policy Check Results</h2>
 <table>
+  <caption class="govuk-table__caption govuk-table__caption--m">
+    2. Policy Check Results
+  </caption>
   <tr>
     <th rowspan="2">Potential Policy Conflicts</th>
     <th>Existing Route</th>
@@ -66,8 +70,10 @@
   </tr>
 </table>
 
-<h2>3. Safety Check Results (Critical Issues only)</h2>
 <table>
+  <caption class="govuk-table__caption govuk-table__caption--m">
+    3. Safety Check Results (Critical Issues only)
+  </caption>
   <tr>
     <th rowspan="2">Critical Issues</th>
     <th>Existing Route</th>
@@ -91,22 +97,22 @@
 
 <h2>4. Street Check Results</h2>
 {#if $state.summary.checkType == "street"}
-  <h3>Street Level of Service</h3>
   <LevelOfServiceTable
+    caption="Street Level of Service"
     categories={results.levelOfService}
     overall={results.overall}
     overallLabel="Overall Street Level of Service"
   />
 
-  <h3>Street Level of Service by Transport Mode</h3>
   <LevelOfServiceTable
+    caption="Street Level of Service by Transport Mode"
     categories={results.byMode}
     overall={results.overall}
     overallLabel="Overall Street Level of Service"
   />
 
-  <h3>Street Placemaking</h3>
   <LevelOfServiceTable
+    caption="Street Placemaking"
     categories={results.placemakingCategories}
     overall={results.placemakingOverall}
     overallLabel="Overall Street Placemaking Score"
@@ -117,22 +123,22 @@
 
 <h2>5. Path Check Results</h2>
 {#if $state.summary.checkType == "path"}
-  <h3>Path Level of Service</h3>
   <LevelOfServiceTable
+    caption="Path Level of Service"
     categories={results.levelOfService}
     overall={results.overall}
     overallLabel="Overall Path Level of Service"
   />
 
-  <h3>Path Level of Service by Transport Mode</h3>
   <LevelOfServiceTable
+    caption="Path Level of Service by Transport Mode"
     categories={results.byMode}
     overall={results.overall}
     overallLabel="Overall Path Level of Service"
   />
 
-  <h3>Path Placemaking</h3>
   <LevelOfServiceTable
+    caption="Path Placemaking"
     categories={results.placemakingCategories}
     overall={results.placemakingOverall}
     overallLabel="Overall Path Placemaking Score"
@@ -141,9 +147,10 @@
   <p>This isn't a Path Check</p>
 {/if}
 
-<h2>6. Junction Assessment Tool Check</h2>
-
 <table>
+  <caption class="govuk-table__caption govuk-table__caption--m">
+    6. Junction Assessment Tool Check
+  </caption>
   <tr>
     <th>Junction Name</th>
     <th>Modes</th>
@@ -176,15 +183,3 @@
 </table>
 
 TODO: overall JAT
-
-<style>
-  td {
-    border: 1px solid black;
-    padding: 4px;
-  }
-
-  th {
-    background: #006853;
-    color: white;
-  }
-</style>
diff --git a/src/routes/route_check/results_summary/+page.svelte b/src/routes/route_check/results_summary/+page.svelte
@@ -32,9 +32,10 @@
   }
 </script>
 
-<h2>Overview</h2>
-
 <table>
+  <caption class="govuk-table__caption govuk-table__caption--m">
+    Overview
+  </caption>
   <tr>
     <th></th>
     <th>Complete</th>
@@ -163,30 +164,22 @@
 </table>
 
 {#if $state.summary.checkType == "street"}
-  <h2>Street Check Level of Service</h2>
+  <LevelOfServiceTable
+    caption="Street Check Level of Service"
+    categories={results.levelOfService}
+    overall={results.overall}
+    overallLabel="Overall ATE Score"
+  />
 {:else if $state.summary.checkType == "path"}
-  <h2>Path Check Level of Service</h2>
+  <LevelOfServiceTable
+    caption="Path Check Level of Service"
+    categories={results.levelOfService}
+    overall={results.overall}
+    overallLabel="Overall ATE Score"
+  />
 {:else}
-  <h2>Select Street Check or Path Check to calculate the table below</h2>
+  <h2>Select Street Check or Path Check for further results</h2>
 {/if}
 
-<LevelOfServiceTable
-  categories={results.levelOfService}
-  overall={results.overall}
-  overallLabel="Overall ATE Score"
-/>
-
 <!-- TODO Hint: "Use the space to provide overall feedback for the proposed scheme" -->
 <TextArea label="Review statement" bind:value={$state.resultsReviewStatement} />
-
-<style>
-  td {
-    border: 1px solid black;
-    padding: 4px;
-  }
-
-  th {
-    background: #006853;
-    color: white;
-  }
-</style>
diff --git a/src/routes/route_check/results_summary/LevelOfServiceTable.svelte b/src/routes/route_check/results_summary/LevelOfServiceTable.svelte
@@ -1,12 +1,16 @@
 <script lang="ts">
   import { netDifference, type ResultCategory } from "../results";
 
+  export let caption: string;
   export let categories: ResultCategory[];
   export let overall: ResultCategory;
   export let overallLabel: string;
 </script>
 
 <table>
+  <caption class="govuk-table__caption govuk-table__caption--m">
+    {caption}
+  </caption>
   <tr>
     <th>Categories</th>
     <th>Existing Layout</th>
@@ -37,15 +41,3 @@
     <td>{netDifference(overall)}</td>
   </tr>
 </table>
-
-<style>
-  td {
-    border: 1px solid black;
-    padding: 4px;
-  }
-
-  th {
-    background: #006853;
-    color: white;
-  }
-</style>
diff --git a/src/style/main.sass b/src/style/main.sass
@@ -20,3 +20,13 @@
     @extend .govuk-list--bullet
   ol
     @extend .govuk-list--number
+
+  table
+    @extend .govuk-table
+  th
+    @extend .govuk-table__header
+    background: #006853
+    color: white
+  td
+    @extend .govuk-table__cell
+  // TODO .govuk-table__row for tr isn't found