# 4th July Report

## Progress

**09:10** Entering the lab, just opened by Leo

---

### Implement local storage to project

- Local storage with two method
#### 1. Store = this method is for store the value under the key.
**Parameter**:
- key = Key preferences for saving the value
- value = Value wants to be stored

  store(key, value)

**Return**: Promise (any) = usually return the value being stored

---

**How to get return value?**
Precondition:
- Must have import the library into *app.module.ts* and inside the back end code
- Must have declare into constructor under variable name = `storage` (this can be changed by anything but change `this.storage` into the name you chose).
<br>

     let returnValue;
     this.storage.store(key, value).then((result) => {
         returnValue = result;    
     });

- We can display the value using `console.log(returnValue)`
- Because of typescript ran in synchronous returnValue can be displayed faster than the value being stored, so it must declared inside `async` function with `await` to get Promises.

    async main () {
        let returnValue;
        await this.storage.set(key, value).then((result) => {
          returnValue = result;
        });
        console.log(returnValue);
  }

---

#### 2. Get = to get the value from key preference

**Parameter**:
- key = Key preferences for saving the value

     get(key)

**Return**: Promise (any) = return the value being stored, must using `then`

---

**How to get return value?**
Precondition: Same as above.

    async main () {
        let returnValue;
        await this.storage.get(key).then((result) => {
          returnValue = result;
        });
        console.log(returnValue);
  }

---

- **10:13** Testing on Nearby Machine Page

#### Field variables

    device_id: string = "";
  KEY_DEVICE_ID: string = "device_id";
  isDeviceIdExists: boolean = false;

#### In constructor
In the contructor there is a code to check if there any device ID being passed from previous page. Inside it, change the `isDeviceIdExists` value to `true`. When true `prefDeviceId` function will store the device ID into preferences, and when false it will load from preferences.

    this.route.queryParams.subscribe(params => {
      if (this.router.getCurrentNavigation().extras.state) {
        this.selectedDeviceId = this.router.getCurrentNavigation().extras.state.Device_ID;
        this.isDeviceIdExists = true;
      }
    });

#### Function

    async prefDeviceId () {
    
        // if the device ID is passed
        // set preferences
        if (this.isDeviceIdExists) {
          await this.storage.set(this.KEY_DEVICE_ID, this.device_id).then((success) => {
            console.log("Set device id: " + success + " is success!");
          }).catch((failed) => {
            console.error("Error while storing: " + failed);
          });
        }

        // or if not, when page reloaded without going to previous page
        // get from preferences
        else {
          await this.storage.get(this.KEY_DEVICE_ID).then((result) => {
            this.device_id = result;
            console.log("Load device id: " + result + " is success!");
          });
        }
  }

#### Being called in main function

    async main () {
        
        // called first
        await this.prefDeviceId();
        
        ...
    }

#### Result in page
- Accessing from previous page with passing the device ID
<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/19-01.JPG" style="max-height:300px" />
</center>
<br>

- Reloading the page to get the ID from preference
<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/19-02.JPG" style="max-height:300px" />
</center>
<br>

---

- **13:24** Testing on Maintenance Progress Page

Basically what to do here is the same as the previous one:
- Store the device ID from previous page if passed.
- Load from preference if there is no trigger for storing new value.

#### Result

- Accessing from previous page with passing the device ID
<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/19-03.JPG" style="max-height:300px" />
</center>
<br>

- Reloading the page to get the ID from preference
<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/19-04.JPG" style="max-height:300px" />
</center>
<br>

---

### Discussing with mentor and teams
- Getting changes about the UI design, there will be track system to notify the user, confirmed to Ms. Annie.
- Clearing the idea of using http POST for login user page and dispenser problem report page, tested in Postman and back end code (Typescript).

---

**18:10** Leaving the lab

###### tags: `on-intern`