Add support for editing the position of an existing location

[wbazant]

WIP but I got the map to center on the edited location after clicking edit, and display old/new pin on top of one another, which was sort of accidental but I like that it logically follows from the existing UI choices

[ezwelty]

@wbazant I'm not sure if it will be immediately obvious to users. But I do like marking both the original and the new location. The current website uses a popup to draw users' attention. Maybe something similar could be done here, with either a notice at the top of the form or a popup on the new-location (blue) marker.

https://fallingfruit.org/locations/3383/edit

Move to the position of the source. Check the satellite view - the source may be visible from space!

I would suggest that adding a new location and editing the position of an existing location behave as similarly as possible, since the latter can be seen as a version of the former. So the map should show existing locations and labels, per #393 .

[wbazant]

I thought the location form should make it clear that choosing coordinates is part of it, like on the live site.

It took me ages to style it but eventually I realised I can reuse a UI element from Entry Overview, I think this looks okay:

There'll be a link on mobile to "edit position" below this part of the form, not sure how, and a tooltip over the marker on desktop (#397). Also I need to make sure the lat/lng get POSTed to the API.

[ezwelty]

There'll be a link on mobile to "edit position" below this part of the form, not sure how

I like this. Should position be at the top of the form, since in add-new-location it comes first, or should it be below Types, since Types better helps to identify the location to a user? In any case, I would mark it as required, and make the whole thing clickable. If that isn't clear enough, instead of "edit position", would it be clearer if the placemark icon were circled to look more like a button, as it is on the location-from-list view to link back to the map?

[wbazant]

Would you take this version for a spin @ezwelty ? Might need more work but might be good as is.

I've made editing the location a two-step process on mobile, with verbiage of "Adjust location for the edited entry." that mimics "Choose a location for your new entry." we have already.

I didn't mark the position as required - there's no way to not provide the position, or do anything with it in the second part of the form or mobile, and there's a nice back button to the previous step.

Closes #306

[ezwelty]

@wbazant Took it for a spin and asked some housemates. Here is my detailed feedback. I think it is close, but suggest some tweaks.

Mobile navigation

I still feel that clicking edit should bring up the form, especially since the edit button is accessed from a view without a map. Clicking on the "Position" section of the form (perhaps enhanced with a map icon and/or edit icon to clarify usage) would show the edit-location map. Clicking x would cancel the change of position, clicking the check would accept the change, and in both cases would return to the form.

The edit-location form could be titled:

Edit location

And the edit-location-position map titled:

Edit location position

p.s. Not sure if this is possible currently (separate issue?), but ideally cancelling edit-location should return to the fully-open location drawer (since that is where the edit button is visible) rather than the half-open drawer. One could also argue that editing a location should be possible directly from the half-open drawer, but maybe that's for later. A more noticeable related issue is that cancelling edit-location from the list returns not to the location (ideal), nor to the list (less ideal), but to the map (without even the location selected).

Mobile & desktop marker styling

Housemates felt that, on desktop, moving the location marker (rather than the map underneath) would be more intuitive. That said, for our sake, I prefer finding a solution that works for both mobile and desktop. Mainly people expected the orange marker, which represents the location, to move. So I suggest the following:

• Replace the large blue marker with the same orange marker used to select a location. Fix this marker to the center of the map.
• At the original location position, place a greyish semi-transparent marker of the exact same size and shape as the orange marker. It should not be visible when the two markers are at the same position, but be revealed (as a sort of shadow) when the orange marker moves. Clicking on this grey marker should recenter the orange marker at the same location, effectively canceling the position change.

Naming conventions

Please use "location" instead of "entry". Entry was a term introduced by the UIUC team that should be phased out to stay consistent with the existing codebases and interfaces. To avoid confusion, use "position" when referring to the spatial position of a "location".

[wbazant]

Still WIP but visually, it might be clear enough to just make the coordinates element into a link:

The earlier idea was a button: but it looks a bit too loud and needlessly like the "cancel" button.

[wbazant]

I've realised it's a bigger change than I thought to implement the "come back to the form" part, because it involves handling the form being partially filled out.

If the user edits the description, then opens the position tab, and comes back, their edit shouldn't be lost like I'm losing it now. A strictly two-step process avoids the bug, since the position of the marker is decided for the second step so there is never any intermediate state that needs restoring.

I might leave the bug in and address the marker first, then see if I have ideas!

[wbazant]

We have a color backgroundOrange so I used that with no shadow for the past location of a moved pin:

[wbazant]

I'm going to supersede this PR with #404, and put the back-and-forth between location and form in its own issue, #405 . Also, #359 could be fixed too!

There are a few choices made in the code:

• partial edits to the form are kept in a React component
• location choice is kept in the URL (plus in location info of the original entry)
• we want the form and map to be parallel on desktop
• the map is always present as a separate component, so "adjust location" just needs to show a ribbon on top of it that make it hard - it's for sure possible, maybe if we keep the state of the partially filled out form in Redux, or make a React component that has both edit location and map - but not having a very clear vision forward right now.