FlightLogging: improve location selection behaviour#219
FlightLogging: improve location selection behaviour#219Claudio-Chies wants to merge 2 commits intodbrgn:mainfrom
Conversation
|
Interesting, TIL about datalist! @coderabbitai please review |
|
@dbrgn I'll review the changes in this PR right away. The datalist approach for improving location selection with search capability and better formatting looks interesting! ✅ Actions performedReview triggered.
|
WalkthroughAdds a new utility to convert two-letter country codes to flag emojis (with tests), refactors the flight form to use text-input autocomplete for locations (displaying flag + name + elevation), and adds a new validation message for no-matching-location in translations. Changes
Sequence DiagramsequenceDiagram
participant User
participant Form as FlightForm
participant Handler as handleLocationInput()
participant Formatter as countryCodeToFlag()
participant Store as locations[]
participant State as launchAt/landingAt
User->>Form: type into location text input
Form->>Handler: onInput(text)
Handler->>Store: fetch all locations
loop for each location
Handler->>Formatter: countryCodeToFlag(location.countryCode)
Formatter-->>Handler: flagEmoji
Handler->>Handler: format string = flagEmoji + " " + name + " (" + elevation + "m)"
Handler->>Handler: compare formatted string to input
end
alt match found
Handler->>State: set matched location (launchAt/landingAt)
State-->>Form: reactive update (text + bound value)
else no match
Handler-->>Form: set field error "error--no-matching-location"
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes 🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
frontend/src/routes/flights/FlightForm.svelte (1)
50-56: Consider extracting the location format string to reduce duplication.The format string for displaying locations (
${countryCodeToFlag(...)} ${name} ${elevation} m) is duplicated in multiple places:
- Line 52, 55: Initialization
- Line 192:
handleLocationInputmatching- Line 316, 325: IGC metadata processing
- Line 544-546, 577-579: Datalist options
This creates a maintenance burden. If the format changes, all instances must be updated consistently.
🔎 Suggested refactor to centralize formatting logic
Add a helper function in this component:
function formatLocationText(location: FlightLocation): string { return `${countryCodeToFlag(location.countryCode)} ${location.name} ${location.elevation} m`; }Then use it throughout:
- let launchAtText: string = launchAt - ? `${countryCodeToFlag(launchAt.countryCode)} ${launchAt.name} ${launchAt.elevation} m` - : ''; + let launchAtText: string = launchAt ? formatLocationText(launchAt) : '';Apply similar changes to all other occurrences.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
frontend/src/lib/formatters.test.tsfrontend/src/lib/formatters.tsfrontend/src/routes/flights/FlightForm.svelte
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Follow TypeScript coding conventions
Files:
frontend/src/lib/formatters.test.tsfrontend/src/lib/formatters.ts
frontend/**/*.{ts,tsx,svelte}
📄 CodeRabbit inference engine (AGENTS.md)
Apply Prettier code style using
npm run formatin the frontend
Files:
frontend/src/lib/formatters.test.tsfrontend/src/lib/formatters.tsfrontend/src/routes/flights/FlightForm.svelte
**/*.{rs,ts,tsx,svelte}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{rs,ts,tsx,svelte}: Avoid deeply nested logic by using early returns for error cases
Write clean, high-quality code with concise comments and clear variable names
Files:
frontend/src/lib/formatters.test.tsfrontend/src/lib/formatters.tsfrontend/src/routes/flights/FlightForm.svelte
🧬 Code graph analysis (1)
frontend/src/lib/formatters.test.ts (1)
frontend/src/lib/formatters.ts (1)
countryCodeToFlag(51-62)
🔇 Additional comments (5)
frontend/src/lib/formatters.test.ts (1)
40-72: LGTM! Comprehensive test coverage.The test suite properly covers both valid country codes (uppercase and lowercase) and various invalid input cases. The test structure follows the existing patterns in the file.
frontend/src/lib/formatters.ts (1)
51-62: LGTM! Clean and correct implementation.The function correctly converts country codes to flag emojis using Unicode regional indicator symbols. The offset calculation (127397) and case-insensitive handling are both correct.
frontend/src/routes/flights/FlightForm.svelte (3)
310-327: LGTM! Correct synchronization of location state.The IGC metadata processing correctly updates both the location objects (
launchAt,landingAt) and their text representations (launchAtText,landingAtText). This ensures the UI stays in sync when locations are auto-populated from IGC data.Note: The format string duplication here is addressed in my earlier comment about extracting a helper function.
530-554: LGTM! Correct datalist implementation for launch site.The transition from dropdown to text input with datalist follows HTML5 patterns correctly. The binding and event handling properly maintain synchronization between text input and location object.
Note: Validation concerns for the location selection are addressed in my earlier comment on the
handleLocationInputfunction.
563-587: LGTM! Consistent implementation for landing site.The landing site input follows the same pattern as the launch site, maintaining consistency. The implementation correctly handles the autocomplete functionality.
Note: Validation concerns apply here as well and are addressed in my earlier comment on the
handleLocationInputfunction.
|
@dbrgn |
2 participants
Issue
The dropdown list for location selection was really long and not really structured, making it cumbersome to select the right entry
Solution
datalistwhich adds searching capability,Example on mobile browser
Example on desktop browser
Tests
Summary by CodeRabbit
Release Notes
New Features
Tests
Translations
✏️ Tip: You can customize this high-level summary in your review settings.