use Angular to rewrite the wishlist page

Describe the bug
No popup appears on the stats page map when a marker is clicked. (mobile only)

To Reproduce
Go to liquid-stats.herrokuapp.com/stats and click on a marker on the map

Expected behavior
When the marker is clicked the popup would appear

Screenshots
N/A

Desktop (please complete the following information):
Mobile only issue

Smartphone (please complete the following information):

• Device: Galaxy S5
• OS: Android 6.0.1
• Browser [e.g. stock browser, safari]
• Version N/A Heroku app

Rewrite the checkins page to use angular.

Setup Scaffolding for angular Rewrite. Generate framework scaffolding and add all components for each page

Update the stats page tale to take advantage of pagination

use this as an example: https://github.com/dc-js/dc.js/blob/develop/web-src/examples/table-pagination.html

Rewrite the about page to use Angular

Find a way to filter the data on the stats page by brewery, whether it be a new chart of by clicking the map marker.

Problem

• The JSON must be manually updated and pushed to GitHub and Heroku. Find a solution to allow the JSON to updated on a schedule (AWS or other option). This should solution should be set to update the JSON once a week and push to Heroku.

Solution

1. if AWS is used the python can be updated to be used with Lambdaon a schedule and put the generated code in S3. The HTML code can then be updated to read the file from S3.

example:

import json
import boto3    
s3 = boto3.resource('s3')
s3object = s3.Object('your-bucket-name', 'your_file.json')

s3object.put(
    Body=(bytes(json.dumps(json_data).encode('UTF-8')))
)

2. The app is deployed on Heroku, which has a built in scheduler
   https://devcenter.heroku.com/articles/scheduler

rewrite the stats page using Angular

the GitHub actions workflow set up for node.js uses the npm ci command. This command requires that the package-lock.json be present in the repository.

Implement a new rating starts that go in .25 increments instead of .5

• Rewrite the top beers page in Angular

Some package versions being used contain known vulnerabilities found by the security scanner. Update them to remove these vulnerabilities.
Try: npm update package-lock.json
Alternative: delete pacakge-lock.json and run npm install to reinstall pacakges

• make the top beers page only show the top x number of beers based on rating, not everything
• Sort oldest to newest

increase the size of the pie charts so they are easier to read. This will especially make the styles pie chart much easier to read/interpret

Change the about page to be a dialog that is triggered by an button in the menu.
Use the following icon: https://material.io/resources/icons/?search=info&icon=info&style=baseline
Example: https://stackblitz.com/edit/ng-template-mat-dialog

Find a way to have badge name and image as part of the recent checkins page

README is out of date and needs to be updated for Angular

Breweries on the same street appear to be using the same coordinates. Find a way to make both markers appear on the map.

Find and implement a solution to prevent the select menu from going off the screen on mobile