adab1ts / veinapp Goto Github PK

On mobile, when clicking a marker the detail page must appear on screen.

Use husky to define git hooks as npm script tasks.

Implement a general structure using angular material and covalent with responsiveness and applying flexbox containers.

This is a subtaks of #4

To develop:

• geocoding service
• mapzen API geocoding service

Think about the best way of handling and visualize errors. My first idea is todo a Store just for handling them with their corresponding error messages.
Any opinions are welcome @zuzust @sgimeno .

UI info:

• https://material.io/guidelines/patterns/errors.html#errors-incompatible-state-errors
• Teradata/covalent#316

• Complete unit testing for actions, effects and reducers and increment coverage.

Statements | Branches | Functions | Lines

Places names are not afected by capitalizer function.

Issued and opened on Teradata/covalent#412. Teradata bug.

Added to Beta 3 milestone 5 days ago

Hacked fix in #45

Make sure ngrx/store patterns are applied the right way. If not, refactor accordingly.

• Routing for searching (root). Params via query params
  (separated by "?" and "&" => www.web.com?lat=x.xxxxx&lon=y.yyyyy&r=1)
  or matrix sytax
  (separated by ";" => www.web.com;lat=x.xxxxx;lon=y.yyyyy;r=1).

• Child routing for detail (from searching result). If we use query params for main search, make them persistent from root route.
  Detail component and template must be implemented at this point.

• Implement ngrx/router-store (https://github.com/ngrx/router-store)

Angular router explained: https://vsavkin.com/angular-2-router-d9e30599f9ea#.dcijbf9fh

When gelocation occurs, store the coordenates and address given by reverse geocoding to use later in case the user triggers a new search with this data preventing the geocoding as in usual searches and updating later the geocoding search state.

The map has a lateral grey column when selecting the map view on mobile.
If we resize the browser seems to work ok.

After first tap, the clear button needs a second tap to hide. It should hide after first tap. Check if it is a Covalent component bug.

When triggering a new geosearch with a different center address, radius state data is reset to 1km, but the corresponding radius button is not activated. So the resulting places list does not match the intended radius.

At this moment the search is fired again even if the input value has no changes.

• - Branding component align to left
• - Delete layers icon on Leaflet
• - Detail component. Address in two lines when necessary
• - db-populate script. Format names to capitalize before load data to firebase.
• - Mobile view. Footer button of active view with a darker background using $accent palette colors.
• - Loading html code on init similar to covalent index.html examples: veinapp icon svg 200px wide ( @laklau :) ) with text message
• - Radius buttons: interchange colors between active and not active.
• - Radius buttons: margin bottom of 5px on mobile view.
• - Change change input search placeholder to 'Introdueix la teva adreça'.
• - Selected place marker bigger (30px).

<div style="padding: 20%;text-align:center;"> <img src="assets/icons/veinapp.svg" width="200"> <div>Carregant Veinapp...</div> </div>

It seems there is a bug in @covalent/core that prevents building for production.

See Teradata/covalent#319

Covalent beta.2 is out!

Further info: https://github.com/Teradata/covalent/blob/develop/docs/CHANGELOG.md#100-beta2-hotel-california-2017-02-23

Reason about the component direct use of the service layer instead of dispatching geolocating action to the store.

Related: #25

• Header branding component (desktop)
• Header radius buttons component
• Footer branding component (mobile)
• Footer menu component (mobile)

To reproduce the issue, fill in an address, then tap a radius button. When geosearching finishes tap again the same radius button.

• The component should have a list of the places that match the current search by center coordenates and radius distance.

1. Every place item must show name (h3), address and distance from center in kms.
2. The list should be ordered by distance from less to more.
3. The list must be paginated (5 items) or scrolled (?).

About point 2:

1. Every time you create an event listener, we return a
   GeoCallbackRegistration
   https://github.com/firebase/geofire#geocallbackregistration which can
   be used to cancel the listener at any point. You could have a counter which
   increments every time the callback is fired and then turn it off by calling
   registration.cancel() once you've reached n items. This would not
   necessarily give you the five closest locations though, just the first five
   that GeoFire encounters.
   2. You could also just listen for all of the locations and store them in
   a list. You could then sort the list by distance (which is included in
   the event callbacks) and only display the first n items. The bad part
   about this plan is that you are downloading some unneeded data. But that's
   only an issue if you overestimate your query size by a lot and include a
   lot more than n items.
   3. Finally, you could start your query with a very small radius, and
   then gradually increase it's radius until you get n items. When you
   update the query criteria, we will not re-fire the events for items which
   were already in the query. So this is actually a viable option for you.
   However, if you update the query radius in super small increments resulting
   in hundreds of re-queries, perf may start to degrade. But I'm positive that
   you could use a technique like this to make something work with good perf.

We need to choose our tools and integrations to build our development, build and deploy pipelines.

These are my preferences:

• Project management: GitHub Projects
• CI/CD: Travis CI

Feel free to share yours.

Depends: #15

Radius selection shouldn't trigger a search. The only events that can trigger a search are enter key pressed and search button click.

Implement $primary and $accent pallettes
$warm ? if not implemented defaults to red => $warn: mat-palette($mat-red, 600);.

Depends: #10

Update package.json and config files to integrate Covalent UI library. Diffing the app repo and Covalent's quickstart we'll see which changes are needed.

There is something wrong with testing configuration. We must try to fix it as soon as possible. @sgimeno would you please check it out?

changing view from map and list with buttons in mobile footer menu

Depends: #4

Description

Use Firebase DB to obtain place results and render them into the list component

Acceptance criteria

• Render results as list components
• Refine results using radi values

Given a geolocation button, we need to ask user for geoloc permission. If he accepts, we must do inverse geocoding to get the corresponding address and populate the input search with it
while in the background we change the ICurrentSearch Store State

This is still unclear @zuzust
As we talked we can:

• make the current user position as the new ICurrentSearch state and based on it change the list of near places.
• just take the center of the map based on user coords without changing the ICurrentSearch state and wait until the user trigger a new search to change the list of near places.

It seems that there are places from the search results that have no marker on the map.

See the snapshot below:

Sidenav width should be wider to show complete place address.

This is a subtask of #4

• - Create main header component.
• - Create child component for search and geolocation components.
• - Create child component for search component.
• - Inject store when available.
• - Dispatch event on search.

• Try to leverage the consuming resources on demanding geoitems and places data to geofire.

We need the data from places that could appear in the app (name, address, coordenates, etc) in a JSON format in order to create the structure in firebase via a node script.

• Angular service using geofire to send a query to firebase and get results of proximity given coords and radius.
• Unit testing.

When you do a geosearch, the zoom level should be adjusted to show all results.

Node script to insert places into firebase with geofire structure from a JSON data file.

• On select a place in list items (change state for search.currentPlace), the marker in map is updated adding a new marker over the normal one if possible or changing the marker with a new one (that can emulate two icons in one).

• On select a marker on map repeats the behavior adding a new marker, and changes state for search.selectedPlace and triggers the routing to the correspondent detail view.

• The selectedPlace should re-center the map position to it.

• add popup (http://leafletjs.com/reference-1.0.3.html#popup) (? @zuzust )

• Update the markers on map both for center and near places. (pending @laklau )

• Add title and alt attrs (http://leafletjs.com/reference-1.0.3.html#marker)

• View names of places near the marker (study)
• Mark clustering (https://github.com/Leaflet/Leaflet.markercluster)

Acceptance criteria

• Markup for header
• Input for address sends a request to MapZen
• Geo coordinates are shown

This is a subtask of #4

Development of the store from geocoding input.

The State: ICurrentSearch { name: string; lat: number; long: number; }