-
Notifications
You must be signed in to change notification settings - Fork 4
Add Atlas field details flow, route, UI cards, and soil/GW/reg data #233
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.
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
Merged
Merged
Changes from all commits
Commits
Show all changes
57 commits
Select commit
Hold shift + click to select a range
f76e542
refactor: Redesign fields at Atlas to show all fields and redirect to…
SvenVw 7132f45
refactor: use centroid of field to get same results back
SvenVw df82c95
feat: collect first set of data for details page
SvenVw 70d4246
Merge remote-tracking branch 'origin/development' into FDM220
SvenVw af9b222
feat: add at Atlas Fields that when a field is clicked, details about…
SvenVw 72c4275
refactor: add suspense for page loading with field details
SvenVw e00c507
feat: when clicking terug button or reloading page use latest viewsta…
SvenVw 6cb6b65
refactor: move the "terug" button in the header of Atlas at details page
SvenVw d74620f
Merge branch 'development' into FDM220
SvenVw 34c5a33
feat: add card with field details
SvenVw 0db0bd4
feat: add note to footer that the areas are for 2025
SvenVw 12dbc4c
feat: Export the function getRegion, isFieldInNVGebied, isFieldInGWGB…
SvenVw ef90a9b
feat: replace mocks with real values for region data
SvenVw be4b779
refactor: improve the page for mobile layout
SvenVw 8cef9df
fix: typo
SvenVw d933985
refactor: move info text to card description from footer
SvenVw 753e2ac
fix: whitespace between the rows
SvenVw c94c59e
feat: add query for area
SvenVw ea8adad
fix: ordering ordering of the cards
SvenVw 34ce6df
feat: add b_lu_rest_oravib and new BRP 2025 crops to BRP cultivation …
SvenVw 714bb03
feat: add `b_lu_rest_oravib` as parameter to cultivationCatalogue.
SvenVw b89d321
Merge remote-tracking branch 'origin/development' into FDM220
SvenVw 59b22b0
feat: add badge to indicate rustgewassen
SvenVw 827f67d
fix: typo's
SvenVw cb2b139
feat: atlas is now also available without selecting a farm first
SvenVw 5c51ccb
feat: Redesign the landing page after signin with cards that show new…
SvenVw b9106ba
feat: add hover panel to show cultivation of field
SvenVw a65c95a
Merge remote-tracking branch 'origin/development' into FDM220
SvenVw 58054c8
refactor: add type for fieldDetails
SvenVw 621cd75
fix: incorrect tailwind class
SvenVw 8f41c21
refactor: move getAvailableFieldsUrl into tryCatch
SvenVw eb9b0dc
refactor: Enhance bbox tolerance and verify actual point containment
SvenVw 55e2925
refactor: prevent memory leak
SvenVw 27fa364
refactor: add error handling for centroid calculation
SvenVw 39e33cb
refactor: improve fallback
SvenVw 3665d4d
fix: duplicate key
SvenVw 1942c31
fix: import path
SvenVw fffd091
refactor: Add validation for centroid coordinate parsing
SvenVw b7c1d50
refactor: improve type loading
SvenVw ddf1907
refactor: simplify async data processing pattern
SvenVw 9048e61
refactor: improve year comparison robustness
SvenVw 60ac4a7
fix: inconsistent naming of groundwater
SvenVw 10076c5
refactor: improve type safety
SvenVw fb79d6d
fix: missing useEffect dependency
SvenVw e92ca18
fix: missing type import
SvenVw 57160f4
fix: add undefined as input type
SvenVw b61ba93
refactor: Avoid array index as key (Biome lint error) in Skeleton list
SvenVw 01ec68b
refactor: move json parse into tryCatch
SvenVw cafc2c2
fix: card layout of skeleton
SvenVw 928edb9
refactor: use more robust method for checking if on field details page
SvenVw a759c03
refactor: use consistent coloring
SvenVw cd15066
fix: links
SvenVw 309eba0
fix: array index
SvenVw ba8cf4a
refactor: update the welcome email with more information about the fu…
SvenVw 0447ae5
fix: typo in email subject
SvenVw 8ce568d
fix: use html component for list in email
SvenVw 5019e38
fix: styling of button and make sure the url of button is correct
SvenVw File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "@svenvw/fdm-app": minor | ||
| --- | ||
|
|
||
| Redesign fields at Atlas to show all fields and redirect to details page when clicked |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "@svenvw/fdm-data": minor | ||
| --- | ||
|
|
||
| Add the new BRP 2025 crops to the brp cultivation dataset |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "@svenvw/fdm-calculator": minor | ||
| --- | ||
|
|
||
| Export the function getRegion, isFieldInNVGebied, isFieldInGWGBGebie and isFieldInNatura2000Gebied |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "@svenvw/fdm-app": minor | ||
| --- | ||
|
|
||
| Add at Atlas Fields that when a field is clicked, details about that field, like cultivation history and soil texture are shown on fields details page |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "@svenvw/fdm-app": minor | ||
| --- | ||
|
|
||
| Atlas is now also available without selecting a farm first |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "@svenvw/fdm-data": minor | ||
| --- | ||
|
|
||
| Add the `b_lu_rest_oravib` property to the BRP cultivation dataset |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "@svenvw/fdm-app": minor | ||
| --- | ||
|
|
||
| Add `b_lu_rest_oravib` as parameter to cultivationCatalogue. This boolean parameter specifies if the cultivation is classified as 'rustgewas'. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "@svenvw/fdm-app": minor | ||
| --- | ||
|
|
||
| Redesign the landing page after signin with cards that show new farm and atlas. When first logged in show 2 detailed cards with the background information about the farm and atlas tool |
116 changes: 116 additions & 0 deletions
116
fdm-app/app/components/blocks/atlas-fields/cultivation-history.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,116 @@ | ||
| import { | ||
| Card, | ||
| CardContent, | ||
| CardDescription, | ||
| CardHeader, | ||
| CardTitle, | ||
| } from "~/components/ui/card" | ||
| import { Skeleton } from "~/components/ui/skeleton" | ||
| import { Badge } from "~/components/ui/badge" | ||
| import { getCultivationColor } from "~/components/custom/cultivation-colors" | ||
|
|
||
| type CultivationHistory = { | ||
| year: number | ||
| b_lu_catalogue: string | ||
| b_lu_name?: string | ||
| b_lu_croprotation?: string | ||
| b_lu_rest_oravib?: boolean | ||
| } | ||
|
|
||
| export function CultivationHistoryCard({ | ||
| cultivationHistory, | ||
| }: { | ||
| cultivationHistory: CultivationHistory[] | ||
| }) { | ||
| return ( | ||
| <Card className="col-span-1 lg:row-span-2"> | ||
| <CardHeader> | ||
| <CardTitle>Gewashistorie</CardTitle> | ||
| <CardDescription> | ||
| De gewassen van de afgelopen jaren op dit perceel volgens | ||
| Basisregistratie Gewaspercelen. | ||
| </CardDescription> | ||
| </CardHeader> | ||
| <CardContent className="pt-6 text-sm"> | ||
| <div className="relative pl-1"> | ||
| {cultivationHistory.map((cultivation, index) => ( | ||
| <div | ||
| key={cultivation.year} | ||
|
SvenVw marked this conversation as resolved.
|
||
| className="flex items-start space-x-4 pb-6" | ||
| > | ||
| <div className="relative flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full"> | ||
| <span | ||
| className="absolute h-full w-full rounded-full" | ||
| style={{ | ||
| backgroundColor: getCultivationColor( | ||
| cultivation.b_lu_croprotation, | ||
| ), | ||
| opacity: 0.2, | ||
| }} | ||
| /> | ||
| <span | ||
| className="relative h-5 w-5 rounded-full" | ||
| style={{ | ||
| backgroundColor: getCultivationColor( | ||
| cultivation.b_lu_croprotation, | ||
| ), | ||
| }} | ||
| /> | ||
| {index !== cultivationHistory.length - 1 && ( | ||
| <div className="absolute left-1/2 top-full h-6 w-0.5 -translate-x-1/2 transform bg-gray-200" /> | ||
| )} | ||
| </div> | ||
| <div className="min-w-0 flex-1"> | ||
| <p className="font-medium text-gray-900"> | ||
| {cultivation.b_lu_name} | ||
| </p> | ||
| <p className="text-sm text-gray-500"> | ||
| {cultivation.year} | ||
| </p> | ||
| </div> | ||
| <div> | ||
| {cultivation.b_lu_rest_oravib === true ? ( | ||
| <Badge variant={"secondary"}> | ||
| Rustgewas | ||
| </Badge> | ||
| ) : null} | ||
| </div> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </CardContent> | ||
| </Card> | ||
| ) | ||
| } | ||
|
|
||
| export function CultivationHistorySkeleton() { | ||
| const SKELETON_KEYS = ["sk-1", "sk-2", "sk-3"] as const | ||
|
|
||
| return ( | ||
| <Card className="col-span-1 lg:row-span-2"> | ||
| <CardHeader> | ||
| <CardTitle>Gewashistorie</CardTitle> | ||
| <CardDescription> | ||
| De gewassen van de afgelopen jaren op dit perceel volgens | ||
| Basisregistratie Gewaspercelen. | ||
| </CardDescription> | ||
| </CardHeader> | ||
| <CardContent className="pt-6 text-sm"> | ||
| <div className="relative pl-1"> | ||
| {SKELETON_KEYS.map((key) => ( | ||
| <div | ||
| key={key} | ||
| className="flex items-start space-x-4 pb-6" | ||
| > | ||
| <Skeleton className="h-10 w-10 rounded-full" /> | ||
| <div className="min-w-0 flex-1 space-y-2"> | ||
| <Skeleton className="h-4 w-3/4" /> | ||
| <Skeleton className="h-3 w-1/2" /> | ||
| </div> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </CardContent> | ||
| </Card> | ||
| ) | ||
| } | ||
192 changes: 192 additions & 0 deletions
192
fdm-app/app/components/blocks/atlas-fields/field-details.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,192 @@ | ||
| import { Info } from "lucide-react" | ||
| import { | ||
| Card, | ||
| CardContent, | ||
| CardDescription, | ||
| CardHeader, | ||
| CardTitle, | ||
| } from "~/components/ui/card" | ||
| import { Skeleton } from "~/components/ui/skeleton" | ||
|
|
||
| export function FieldDetailsCard({ | ||
| fieldDetails, | ||
| }: { | ||
| fieldDetails: { | ||
| b_area: number | ||
| regionTable2?: "klei" | "veen" | "loess" | "zand_nwc" | "zand_zuid" | ||
| isNvGebied?: boolean | ||
| isGWBGGebied?: boolean | ||
| isNatura2000Area?: boolean | ||
| } | ||
| }) { | ||
| return ( | ||
| <Card> | ||
| <CardHeader> | ||
| <CardTitle>Perceeldetails</CardTitle> | ||
| <CardDescription className="flex items-center justify-start space-x-2 text-sm text-muted-foreground"> | ||
| <Info className="h-4" /> | ||
| <p>De gebieden gelden voor 2025</p> | ||
| </CardDescription> | ||
|
SvenVw marked this conversation as resolved.
|
||
| </CardHeader> | ||
| <CardContent className="grid lg:grid-cols-2 gap-4"> | ||
| <div className="grid lg:grid-cols-2 col-span-2 gap-4"> | ||
| <Card> | ||
| <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 space-x-2"> | ||
| <CardTitle className="text-sm font-medium"> | ||
| Oppervlakte | ||
| </CardTitle> | ||
| </CardHeader> | ||
| <CardContent className="space-y-2"> | ||
| <div className="flex items-baseline space-x-2"> | ||
| <div className="text-2xl font-bold"> | ||
| {fieldDetails.b_area} | ||
| </div> | ||
| <div className="text-sm text-muted-foreground"> | ||
| ha | ||
| </div> | ||
| </div> | ||
| </CardContent> | ||
| </Card> | ||
| <Card> | ||
| <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 space-x-2"> | ||
| <CardTitle className="text-sm font-medium"> | ||
| Regio (RVO Tabel 2) | ||
| </CardTitle> | ||
| </CardHeader> | ||
| <CardContent className="space-y-2"> | ||
| <div className="flex items-baseline space-x-2"> | ||
| <div className="text-2xl font-bold"> | ||
| {fieldDetails.regionTable2 === "klei" | ||
| ? "Klei" | ||
| : fieldDetails.regionTable2 === "veen" | ||
| ? "Veen" | ||
| : fieldDetails.regionTable2 === | ||
| "loess" | ||
| ? "Löss" | ||
| : fieldDetails.regionTable2 === | ||
| "zand_nwc" | ||
| ? "Noordelijk, westelijk, en centraal zand" | ||
| : fieldDetails.regionTable2 === | ||
| "zand_zuid" | ||
| ? "Zuidelijk zand" | ||
| : "Onbekend"} | ||
|
SvenVw marked this conversation as resolved.
SvenVw marked this conversation as resolved.
|
||
| </div> | ||
| </div> | ||
| </CardContent> | ||
| </Card> | ||
| </div> | ||
| <div className="grid lg:grid-cols-3 col-span-2 gap-4"> | ||
| <Card> | ||
| <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 space-x-2"> | ||
| <CardTitle className="text-sm font-medium"> | ||
| NV-Gebied | ||
| </CardTitle> | ||
| </CardHeader> | ||
| <CardContent className="space-y-2"> | ||
| <div className="flex items-baseline space-x-2"> | ||
| <div className="text-2xl font-bold"> | ||
| {fieldDetails.isNvGebied ? "Ja" : "Nee"} | ||
| </div> | ||
| </div> | ||
| </CardContent> | ||
| </Card> | ||
| <Card> | ||
| <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 space-x-2"> | ||
| <CardTitle className="text-sm font-medium break-all"> | ||
| Grondwaterbeschermingsgebied | ||
| </CardTitle> | ||
| </CardHeader> | ||
| <CardContent className="space-y-2"> | ||
| <div className="flex items-baseline space-x-2"> | ||
| <div className="text-2xl font-bold"> | ||
| {fieldDetails.isGWBGGebied ? "Ja" : "Nee"} | ||
| </div> | ||
| </div> | ||
| </CardContent> | ||
| </Card> | ||
| <Card> | ||
| <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 space-x-2"> | ||
| <CardTitle className="text-sm font-medium"> | ||
| Natura 2000 | ||
| </CardTitle> | ||
| </CardHeader> | ||
| <CardContent className="space-y-2"> | ||
| <div className="flex items-baseline space-x-2"> | ||
| <div className="text-2xl font-bold"> | ||
| {fieldDetails.isNatura2000Area | ||
| ? "Ja" | ||
| : "Nee"} | ||
| </div> | ||
| </div> | ||
| </CardContent> | ||
| </Card> | ||
| </div> | ||
| </CardContent> | ||
| </Card> | ||
| ) | ||
| } | ||
|
|
||
| export function FieldDetailsSkeleton() { | ||
| return ( | ||
| <Card> | ||
| <CardHeader> | ||
| <CardTitle>Perceeldetails</CardTitle> | ||
| <CardDescription className="flex items-center justify-start space-x-2 text-sm text-muted-foreground"> | ||
| <Info className="h-4" /> | ||
| <p>De gebieden gelden voor 2025</p> | ||
| </CardDescription> | ||
| </CardHeader> | ||
| <CardContent className="grid lg:grid-cols-2 gap-4"> | ||
| <div className="grid lg:grid-cols-2 col-span-2 gap-4"> | ||
| <Card> | ||
| <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 space-x-2"> | ||
| <Skeleton className="h-4 w-1/4" /> | ||
| </CardHeader> | ||
| <CardContent className="space-y-2"> | ||
| <Skeleton className="h-6 w-1/2" /> | ||
| <Skeleton className="h-3 w-1/4" /> | ||
| </CardContent> | ||
| </Card> | ||
| <Card> | ||
| <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 space-x-2"> | ||
| <Skeleton className="h-4 w-1/4" /> | ||
| </CardHeader> | ||
| <CardContent className="space-y-2"> | ||
| <Skeleton className="h-6 w-1/2" /> | ||
| <Skeleton className="h-3 w-1/4" /> | ||
| </CardContent> | ||
| </Card> | ||
| <div className="grid lg:grid-cols-3 col-span-2 gap-4"> | ||
| <Card> | ||
| <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 space-x-2"> | ||
| <Skeleton className="h-4 w-1/4" /> | ||
| </CardHeader> | ||
| <CardContent className="space-y-2"> | ||
| <Skeleton className="h-6 w-1/2" /> | ||
| <Skeleton className="h-3 w-1/4" /> | ||
| </CardContent> | ||
| </Card> | ||
| <Card> | ||
| <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 space-x-2"> | ||
| <Skeleton className="h-4 w-1/4" /> | ||
| </CardHeader> | ||
| <CardContent className="space-y-2"> | ||
| <Skeleton className="h-6 w-1/2" /> | ||
| <Skeleton className="h-3 w-1/4" /> | ||
| </CardContent> | ||
| </Card> | ||
| <Card> | ||
| <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 space-x-2"> | ||
| <Skeleton className="h-4 w-1/4" /> | ||
| </CardHeader> | ||
| <CardContent className="space-y-2"> | ||
| <Skeleton className="h-6 w-1/2" /> | ||
| <Skeleton className="h-3 w-1/4" /> | ||
| </CardContent> | ||
| </Card> | ||
| </div> | ||
| </div> | ||
| </CardContent> | ||
| </Card> | ||
| ) | ||
| } | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.