# 10th May Report

This is the eleventh study report of NTUST Internship program, before going to Taiwan. My plan this week is to create flowchart of Nearby Dispenser PWA.

## Summary of this week

Work flow:
- create the page
- loading the API for get the data
- for every machine in the response, list and display the machines
- there will be button for filtering (cold, warm, hot)
- if filter is active, display will change based on filter used

## Documentation

### 1. Getting nearby machine flowchart

<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/11-01.jpg" alt="img-01">
</center>
</br>

#### Explanation:

- The first time accessing the page will load the components and the page itself.
- In "FOR" statements, load from the API and get the JSON Object for nearby machine with GET method.
- After receive the response, make a List View (literally a list of objects) for every machine in the response.
- Put the details from the response into Array so it stored locally in the page.
- Display data on the page until the last machine in the response.

#### Notes:

- From the mock up design I got, displaying the machines will like a card per machine.

---

### 2. Filtering the list of machines flowchart

<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/11-02.jpg" alt="img-02">
</center>
</br>

#### Explanation:

- When user click one of the filter (cold, warm, or hot), the page will re-list the display based on the filter.
- It will run responsive which is no need to reload the page.
- Data will displayed after filter is on, or reset to display all data when filter is off.

###### tags: `pre-intern report`