Implement the double search bar for the starting (from:) and the ending (to:) points

[csbduzi]

Idea for the double search bar:

In order to let the user modify his starting and ending points, a double search bar would have to be implemented.

Steps for the users to reach the double search bar screen

• First path to reach the double search bar screen

1) The user presses on the top search bar (mapview) 2) The user presses on a item from the drop down list from the search bar 3) The users presses on a "get direction" button from the bottom menu 4) The users lands on the double search bar screen

• Second path to reach the double search bar screen 1) The user presses on a building on the map 2) The user presses on the arrow up on the bottom menu to make the info page appear 3) The user lands on the more info page and presses on the "get direction" button 4) The user lands on the double search bar screen

As far as the implementation, the double search bar screen will be another view seating on top of the map view

[mohanadarafe]

Can you start by working on "First path to reach the double search bar screen" since this is a core feature. If you have questions regarding the Bottom menu let me know

[csbduzi]

Yes, the first path is in progress, on one of my branches where we had to fix a bug for selected items in the search bar.

When selecting a item in the search bar, the toggle button gets replaced by the "get direction" button. Ill review the new code in your PR, if any changes were made in bottommenu.js

[csbduzi]

As I move along in the implementation, I will post screenshots here to display the progression of the process

In the part 1 implementation commit, the focus was to set a main layout for the page and to set the delimiters of the containers to adjusts for the constraints and help out for future modifications

[bkenza]

Update:

• We have now set up both paths and linked both the BottomMenu and the MoreDetails page to the PreferenceMenu.
• The back arrow button brings the user back to the MoreDetails page.
• The "To" location is updated automatically using the searchbar in the mapview

What is left to do:

• Set the current location as the "From"
• Make the back arrow work for path 1 as well
• Buttons should change colours when selected

[bkenza]

While working on finalizing the PreferenceMenu, @csbduzi and I realized that since all the buttons are seated under the searchbars (and their dropdowns), they are essentially inaccessible. Since there is no workaround to fix this issue, we have decided to split the PreferenceMenu and the searchbars into two components.

[csbduzi]

Because of such design constraint, as @bkenza explained, we will be forced to have two separate components, one called DoubleSearch and another called PreferenceMenu.

The DoubleSearch will lay out a page after the user has pressed on "get direction" button. The following page, that will act as a confirmation page, will be displaying with two search bars that are equipped of drop down lists. The user will have will the option to view the traced route on a map view for his destination by pressing on the "View Route"

The PreferenceMenu will be a view that can be displayed once on the mapView. On the bottom menu of the mapView, the arrow-up button will be able to launch the view of the PreferenceMenu where the buttons for type of personnas, mobility reduced, and transport methods will be presented. Once, on that page, the user will have an arrow-down, to exit that view and return back to the mapView.

[csbduzi]

BEFORE THE CHANGE

Here's a screenshot of the unified PreferenceMenu