WIP:Results page

src/lib/colors.ts

@@ -1,4 +1,4 @@
-let backgroundAndFontCombinations = {
+export let backgroundAndFontCombinations = {
   critical: {
     background: "#232323",
     font: "white",

src/routes/route_check/+page.svelte

@@ -68,7 +68,9 @@
 
   <li>JAT Check</li>
 
-  <li>Results Summary</li>
+  <li>
+    <a href="{base}/route_check/results_summary">Results Summary</a>
+  </li>
   <li>Results Further Analysis</li>
   <li>Results Export</li>
 </ol>

src/routes/route_check/data.ts

@@ -52,14 +52,16 @@ export interface State {
   pathCheck: Scorecard;
 
   pathPlacemakingCheck: Scorecard;
+
+  resultsReviewStatement: string;
 }
 
 // Note "C"ritical is only used in some cases
 type Score = "" | "C" | "0" | "1" | "2";
 
 // A collection of metrics. For each one, the user gives a score to describe
 // the existing and proposed state.
-interface Scorecard {
+export interface Scorecard {
   // The values are the stringified scores
   existingScores: Score[];
   proposedScores: Score[];
@@ -157,6 +159,7 @@ function emptyState(): State {
     streetPlacemakingCheck: emptyScorecard(26),
     pathCheck: emptyScorecard(30),
     pathPlacemakingCheck: emptyScorecard(19),
+    resultsReviewStatement: "",
   };
 }
 

src/routes/route_check/results_summary/+page.svelte

@@ -1 +1,166 @@
-TODO
+<script lang="ts">
+  import { TextArea } from "govuk-svelte";
+  import { sum } from "$lib";
+  import { state, type Scorecard } from "../data";
+  import NetDifferenceResults from "./NetDifferenceResults.svelte";
+  import LevelOfServiceResults from "./LevelOfServiceResults.svelte";
+
+  const policyCheckComplete =
+    $state.policyCheck.filter((policyCheckObject) => {
+      return (
+        policyCheckObject.existing === "" || policyCheckObject.proposed === ""
+      );
+    }).length === 0;
+  const policyIssuesForReview = $state.policyConflictLog.length;
+
+  const safetyCheckComplete = isScorecardCompleted($state.safetyCheck);
+  const safetyIssuesForReview = $state.criticalIssues.length;
+
+  const streetCheckComplete = isScorecardCompleted($state.streetCheck);
+
+  const streetPlacemakingCheckComplete = isScorecardCompleted(
+    $state.streetPlacemakingCheck,
+  );
+
+  const pathCheckComplete = isScorecardCompleted($state.pathCheck);
+
+  const pathPlacemakingCheckComplete = isScorecardCompleted(
+    $state.pathPlacemakingCheck,
+  );
+
+  function isScorecardCompleted(scorecard: Scorecard): boolean {
+    return (
+      !scorecard.existingScores.includes("") &&
+      !scorecard.proposedScores.includes("")
+    );
+  }
+
+  function getScorecardDifference(scorecard: Scorecard): number {
+    let existing = sum(scorecard.existingScores.map((x) => parseInt(x || "0")));
+    let proposed = sum(scorecard.proposedScores.map((x) => parseInt(x || "0")));
+    return proposed - existing;
+  }
+</script>
+
+<div class="results-grid">
+  <!-- TODO No rows in the markup? -->
+  <div class="header">Overview</div>
+  <div class="header">Complete</div>
+  <div class="header">Remaining Isuses for Review</div>
+  <div class="header">Next Steps</div>
+
+  <div class="header">Policy Conflicts</div>
+  <div class="grid-box">{policyCheckComplete}</div>
+  <div class="grid-box">{policyIssuesForReview}</div>
+  <div class="grid-box">
+    {policyIssuesForReview > 0 || !policyCheckComplete
+      ? "View Comments in Policy Check and Policy Conflict Log tabs"
+      : "No further Action"}
+  </div>
+
+  <div class="header">Critical Issues</div>
+  <div class="grid-box">{safetyCheckComplete}</div>
+  <div class="grid-box">{safetyIssuesForReview}</div>
+  <div class="grid-box">
+    {safetyIssuesForReview > 0 || !safetyCheckComplete
+      ? "Complete Safety Check and Critical Issues Log"
+      : "No further Action"}
+  </div>
+
+  <div class="header" />
+  <div class="header" style="grid-column: 2/5;">Net Difference</div>
+  <NetDifferenceResults
+    title="Safety Check"
+    isComplete={safetyCheckComplete}
+    netDifference={getScorecardDifference($state.safetyCheck)}
+    summaryNoun="safety"
+  />
+  <NetDifferenceResults
+    title="Street Check"
+    isComplete={streetCheckComplete}
+    netDifference={getScorecardDifference($state.streetCheck)}
+    summaryNoun="the route quality"
+  />
+  <NetDifferenceResults
+    title="Street Placemaking"
+    isComplete={streetPlacemakingCheckComplete}
+    netDifference={getScorecardDifference($state.streetPlacemakingCheck)}
+    summaryNoun="the quality of place"
+  />
+  <NetDifferenceResults
+    title="Path Check"
+    isComplete={pathCheckComplete}
+    netDifference={getScorecardDifference($state.pathCheck)}
+    summaryNoun="the route quality"
+  />
+  <NetDifferenceResults
+    title="Path Placemaking"
+    isComplete={pathPlacemakingCheckComplete}
+    netDifference={getScorecardDifference($state.pathPlacemakingCheck)}
+    summaryNoun="the quality of place"
+  />
+  <NetDifferenceResults
+    title="Junction Assessment Tool"
+    isComplete={false}
+    netDifference={-105}
+    summaryNoun="TODO"
+  />
+</div>
+
+<div class="level-of-service-results">
+  <div class="header" style="grid-column: 1/5; grid-row:1/2">
+    Street Check Level of Service
+  </div>
+  <div class="header" style="grid-column: 1/2; grid-row:2/3">Categories</div>
+  <div class="header" style="grid-column: 2/3; grid-row:2/3">
+    Existing Layout
+  </div>
+  <div class="header" style="grid-column: 3/4; grid-row:2/3">
+    Proposed Layout
+  </div>
+  <div class="header" style="grid-column: 4/5; grid-row:2/3">
+    Net Difference
+  </div>
+
+  <LevelOfServiceResults title="Safety" existing={2} proposed={68} />
+  <LevelOfServiceResults title="Accessibility" existing={2} proposed={68} />
+  <LevelOfServiceResults title="Comfort" existing={2} proposed={68} />
+  <LevelOfServiceResults title="Directness" existing={2} proposed={68} />
+  <LevelOfServiceResults title="Attractiveness" existing={2} proposed={68} />
+  <LevelOfServiceResults title="Cohesion" existing={2} proposed={68} />
+  <div class="header" style="grid-column: 1/5" />
+  <LevelOfServiceResults title="Overall ATE Score" existing={2} proposed={68} />
+</div>
+
+<!-- TODO Hint: "Use the space to provide overall feedback for the proposed scheme" -->
+<TextArea label="Review statement" bind:value={$state.resultsReviewStatement} />
+
+<style>
+  .results-grid {
+    display: grid;
+
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(3, 2fr) 1fr repeat(6, 2fr);
+  }
+  .header {
+    /* TODO Plumb from backgroundAndFontCombinations.green.background */
+    background-color: #006853;
+    /* TODO Plumb from backgroundAndFontCombinations.green.font */
+    color: white;
+    border: 1px solid white;
+    text-align: center;
+  }
+  .grid-box {
+    text-align: center;
+    border: 1px solid black;
+  }
+
+  .level-of-service-results {
+    display: grid;
+    grid-template-columns: 2fr repeat(3, 1fr);
+    grid-template-rows: repeat(2, 2f3) repeat(8, 1fr);
+  }
+  div {
+    display: inline;
+  }
+</style>

src/routes/route_check/results_summary/LevelOfServiceResults.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  export let title: string;
+  export let existing: number;
+  export let proposed: number;
+
+  let netDifference = proposed - existing;
+</script>
+
+<div class="header">
+  {title}
+</div>
+<div class="grid-box">{existing}%</div>
+<div class="grid-box">{proposed}%</div>
+<div class="grid-box">{netDifference}%</div>
+
+<style>
+  .header {
+    background-color: #006853;
+    color: white;
+    border: 1px solid white;
+    text-align: center;
+  }
+  .grid-box {
+    text-align: center;
+    border: 1px solid black;
+  }
+</style>

src/routes/route_check/results_summary/NetDifferenceResults.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  export let title: string;
+  export let isComplete: boolean;
+  export let netDifference: number;
+  export let summaryNoun: string;
+
+  let summary =
+    netDifference > 0
+      ? `The proposed design will likely improve ${summaryNoun}`
+      : `The proposed design will likely reduce ${summaryNoun}`;
+</script>
+
+<div class="header">
+  {title}
+</div>
+<div class="grid-box">{isComplete}</div>
+<div class="grid-box">{netDifference}%</div>
+<div class="grid-box">{summary}</div>
+
+<style>
+  .header {
+    background-color: #006853;
+    color: white;
+    border: 1px solid white;
+    text-align: center;
+  }
+  .grid-box {
+    text-align: center;
+    border: 1px solid black;
+  }
+</style>