Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Filter PMP by stage. #94 #95

Merged
merged 3 commits into from
Dec 4, 2024
Merged

Filter PMP by stage. #94 #95

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cc32923
Filter PMP by stage. #94
dabreegster Nov 28, 2024
c11a523
Change the filters -- filter out resolved problems
dabreegster Dec 2, 2024
ee2b9f8
Ensure design stage problems are unresolved
dabreegster Dec 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 56 additions & 30 deletions src/routes/route_check/problems_map/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
WarningButton,
CollapsibleCard,
Checkbox,
CheckboxGroup,
IconButton,
} from "govuk-svelte";
import { tick } from "svelte";
Expand Down Expand Up @@ -66,6 +67,8 @@
let hoveringSidebar: ID | null = null;
let streetviewOn = false;
let showRoute = true;
let showExisting = true;
let showDesign = true;

$: if (map) {
map.getCanvas().style.cursor =
Expand Down Expand Up @@ -291,6 +294,20 @@
}
}
}

function show(
showExisting: boolean,
showDesign: boolean,
stage: "Existing" | "Design" | "",
) {
if (!showExisting && stage == "Existing") {
return false;
}
if (!showDesign && stage == "Design") {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we also need a check if it is existing and ! resolved by design
(!showDesign && (stage == "Design" || (stage == "Existing" && !resolvedByDesign))

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we want a third checkbox for "Show resolved issues", or is this implied somehow? I understood the issue as just wanting to filter by stage.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure but my thinking is: filtering by stage it exists at.
If something exists already, and is not resolved by design then it exists in both design stage and existing stage, no?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, I see. I guess it depends what people expect the filters to mean -- "show me data I've marked as stage=design or stage=existing" vs "show me unresolved issues at this stage". Could we get clarity from whoever originally asked for this? Or we could re-word these checkboxes.

return false;
}
return true;
}
</script>

<svelte:window on:keydown={onKeyDown} />
Expand All @@ -311,6 +328,11 @@
<Checkbox bind:checked={showRoute}>Show route</Checkbox>
</CollapsibleCard>

<CheckboxGroup small>
<Checkbox bind:checked={showExisting}>Show existing problems</Checkbox>
<Checkbox bind:checked={showDesign}>Show design problems</Checkbox>
</CheckboxGroup>

<div style="background-color: grey; padding: 4px">
<h3>Critical Issue Log</h3>
{#each $state.criticalIssues as critical, idx}
Expand Down Expand Up @@ -425,39 +447,43 @@
{/if}

{#each $state.criticalIssues as critical, idx}
<Marker
draggable
bind:lngLat={critical.point}
on:click={() => select({ kind: "critical", idx })}
on:dragend={() => select({ kind: "critical", idx })}
>
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
<rect width="40" height="40" fill={colors.critical.background} />
<text
x="50%"
y="50%"
style:fill="white"
style:font="bold 15px sans-serif"
dominant-baseline="middle"
text-anchor="middle"
>
{critical.criticalIssue}
</text>
</svg>
</Marker>
{#if show(showExisting, showDesign, critical.stage)}
<Marker
draggable
bind:lngLat={critical.point}
on:click={() => select({ kind: "critical", idx })}
on:dragend={() => select({ kind: "critical", idx })}
>
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
<rect width="40" height="40" fill={colors.critical.background} />
<text
x="50%"
y="50%"
style:fill="white"
style:font="bold 15px sans-serif"
dominant-baseline="middle"
text-anchor="middle"
>
{critical.criticalIssue}
</text>
</svg>
</Marker>
{/if}
{/each}

{#each $state.policyConflictLog as conflict, idx}
<Marker
draggable
bind:lngLat={conflict.point}
on:click={() => select({ kind: "conflict", idx })}
on:dragend={() => select({ kind: "conflict", idx })}
>
<span class="dot" style:background={policyConflictColor}>
{conflict.conflict}
</span>
</Marker>
{#if show(showExisting, showDesign, conflict.stage)}
<Marker
draggable
bind:lngLat={conflict.point}
on:click={() => select({ kind: "conflict", idx })}
on:dragend={() => select({ kind: "conflict", idx })}
>
<span class="dot" style:background={policyConflictColor}>
{conflict.conflict}
</span>
</Marker>
{/if}
{/each}

<GeoJSON data={hoverGj}>
Expand Down