bikehopper-ui
bikehopper-ui copied to clipboard
bikehopper
WIP: Add support for downloading routes as fit files for use on cycling computers
Currently this is WIP.
I want to add the following.
- Ability to download fit files with turn by turn
- Share bar component meant to hold the download button for our fit file. In the future I will also implement a copy URL or "share" button as well.
Currently the fit file is able to be generated locally, negating the need for our previous coded backend component. We get a map and we do get some rudimentary directional alerts. However, the library that I found currently does not seem to support more detailed information such as
"Turn left on Main street!"
Instead it will just say "LEFT"
Fixes #188
I have also added the ability for our alerts system to have "toasty alerts." which delete themselves, this is good for letting a user know that they just copied a route to their clipboard, without making them do a second click to get rid of that message.
https://user-images.githubusercontent.com/4640602/216876000-d1d3be8f-6c1d-4fdd-b257-5342859c7b68.mp4
Initially I was hoping to just use a simple copy to clipboard mechanism to grab the url for sharing. However, Safari on IOS makes this extremely difficult. So since the long term was to just attempt to use the navigator.share() dialog I will just move forward with that. Heres to hoping that Apple also doesn't make this overly complicated as to drive us towards native apps rather than web apps.
I found a problem during testing. Slight Right actually translates to Slight Left!
Removed the copy route functionality. This will be added in a later pull request to simplify this one.
@graue I was thinking to replace the modal above with one of the flowbite modals (https://flowbite-react.com/modal) that we spoke about using earlier. I agree with you that we should use a component library for this sort of thing when possible. I checked out the library and it looks nice, also seems to use tailwind for styling as well.
Thoughts on using this?
On hold until we come to consensus on what framework we are going to use for UI items such as toasts and modals.
Should we resume this now that we're using Radix for modals, including the date-time picker?
Work has progressed on this. Sorry about the force pushes, I know it's probably not best to do such things. But I got myself into a dilly of a pickle with trying to get my commit history to not look absolutely disgusting after merging the changes in from main after a year of not working on this thing.
Basically what I did was bring the feature up to the standard (I hope, I've been away for some time) of the new bike hopper changes, such as translation stuff and our new modal.
I should probably test this out a bit more, but it does seem to work reasonably well so far.
There are two copies of ShareFit and [BH]CoursePointMessage and I'm not sure which copy I should review
There are two copies of ShareFit and [BH]CoursePointMessage and I'm not sure which copy I should review
Oops, thanks for noticing this. I thought I got rid of those when I created this. Let me take care of it.
There are two copies of ShareFit and [BH]CoursePointMessage and I'm not sure which copy I should review
Removed duped files.
Don't forget to remove the WIP label and WIP text from the PR title if this is ready to merge!
Here is quick video demo on mobile. I blurred out some stuff because there was personal info in some of the screens.
https://github.com/bikehopper/bikehopper-ui/assets/4640602/aa412d29-ef12-4a3e-9217-d003f12d3d49
It would be cool if someone else w/ a computer tried this thing. maybe @arindam1993 ?
Looking good, both code and demo video!
Don't forget to remove the commented-out code and the "WIP" from the pull request title.
Most of my feedback was non-blocking, so feel free to merge when you feel it's ready. If you do want me to re-review lmk!