# 2nd August Report

## Progress

Time: **09:00**
Event: Entering the lab

---

### Weekly meeting with Prof. Ray

This is link to my HackMd about my weekly report:

<center><h3><a href="https://hackmd.io/@muhamadaldy/BJ7IDLWXB">Here</a></h3></center>

---

### Convert JSON object data from API to needed format

Time: **14:29**

- From last report, [here](https://hackmd.io/@muhamadaldy/H1X2iskXr), the design already can integrate with back end code, means that data which displayed were from back end code.
- Last report using dummy data which in JSON object using own format.
- From API, it has different format with the one that need to display the data into the front page.
- Still using dummy data to test but now using the API format.
- These are three data for each mission fragment which is get from the same API but has been filtered through service.
- Done mission
https://pastebin.com/YDSXZAJp

- Today mission
https://pastebin.com/QBKD1i45

- Future mission
https://pastebin.com/Wh3DTH4n

---

- Data on Done and Future mission are grouped by date so there is a function that grouping them before go to next proccess.

    groupByDate (dataArray: any) {

      // initial date, month, year based on first data
      let lastDate = dataArray[0]['dateDetails']['Day'];
      let lastMonth = dataArray[0]['dateDetails']['Month'];
      let lastYear = dataArray[0]['dateDetails']['Year'];

      // initialize data array
      let arrayData = [];
      let arrayPerDate = [];

      for (let i = 0 ; i < dataArray.length ; i++) {

        let currentData = dataArray[i];

        let currentDate = currentData['dateDetails']['Day'];
        let currentMonth = currentData['dateDetails']['Month'];
        let currentYear = currentData['dateDetails']['Year'];

        if (
          currentDate === lastDate &&
          currentMonth === lastMonth &&
          currentYear === lastYear
        ) {
          arrayPerDate.push({
            "Data": currentData['Data'],
            "machineDetails": currentData['machineDetails']
          });
        } else {

          let dateDetails = dataArray[i-1]['dateDetails'];

          arrayData.push({
            "Data": arrayPerDate,
            dateDetails
          });

          arrayPerDate = [];
          arrayPerDate.push({
            "Data": currentData['Data'],
            "machineDetails": currentData['machineDetails']
          });

          lastDate = dataArray[i]['dateDetails']['Day'];
          lastMonth = dataArray[i]['dateDetails']['Month'];
          lastYear = dataArray[i]['dateDetails']['Year'];
        }
      }

      // after loop when last data still not included
      let dateDetails = dataArray[dataArray.length - 1]['dateDetails'];

      arrayData.push({
        "Data": arrayPerDate,
        dateDetails
      });

      return arrayData;
    }

- There is function to get details of date string from API, we need this so data for Done and Future mission can be grouped.

    getDateDetail (dateString: string) {

      let splitDate = dateString.split(" ");
      let getDate = splitDate[0];

      let splitDateDetails = getDate.split("-");
      let result = {
        'Year': splitDateDetails[0],
        'Month': splitDateDetails[1],
        'Day': splitDateDetails[2]
      }

      return result;
    }

- A function to convert API time in string format to only get the hour and minute only and return as string, this value is use on each item that shows the time of deadline/done mission.

    getHourMinuteFromDateString (dateString: string) {
      let dateStringSplit = dateString.split(" ");
      let getHour = dateStringSplit[1];

      let hourSplit = getHour.split(":");
      let hourMinute = hourSplit[0] + ":" + hourSplit[1];

      return hourMinute;
    }

- Also using the function that has been created on User/Student App which convert the time from API in string format into Date class format.

    convertApiTimeToDate (time: any) {
      // time passed is String, construct into Date format
      // time example from json: "2019-03-08 16:32:00"
      // format: YEAR-MONTH-DATEOFMONTH HOUR:MINUTE:SECOND

      // split into DATE form and HOUR form
      let splitTime = time.split(" ");

        ////////////////////////////////////////////
       //  DATE PART                             //
      ////////////////////////////////////////////

      // resultDate = YEAR-MONTH-DATEOFMONTH
      let resultDate = splitTime[0];

      // split DATE into YEAR, MONTH, and DATEOFMONTH
      let splitDate = resultDate.split("-");

      let resultYear = splitDate[0];
      let resultMonth = splitDate[1] - 1;
      let resultDateOfMonth = splitDate[2];

        ////////////////////////////////////////////
       //  HOUR PART                             //
      ////////////////////////////////////////////

      // resultHour = HOUR:MINUTE:SECOND
      let resultHour = splitTime[1];

      // split HOUR into HOUR, MINUTE, and SECOND
      let splitHour = resultHour.split(":");

      let resultHourC = splitHour[0];
      let resultMinute = splitHour[1];
      let resultSecond = splitHour[2];

        ////////////////////////////////////////////
       //  CONSTRUCT DATE PART                   //
      ////////////////////////////////////////////

      // now we get every component to construct date from String
      let newDate = new Date(
        resultYear,
        resultMonth,
        resultDateOfMonth,
        resultHourC,
        resultMinute,
        resultSecond,
        0
      );

      return newDate;
    }

---

- After we have all above functions now we can construct or process the data where each fragments has their own format of JSON object.
- Done mission

    async processDataDoneMission (dataJson: any) {

      // add time stamp and machine details into json
      let dataAddOn = [];
      for (let i = 0 ; i < dataJson.length ; i++) {
        let Data = dataJson[i];
        let dateDetails = this.getDateDetail(Data['RepairDoneTime']);
        let machineDetails = await this.api.getDispenserDetail(Data['Device_ID']);

        let newJson = {
          dateDetails,
          Data,
          machineDetails
        };

        dataAddOn.push(newJson);
      }

      // grouping by date
      let dataGroupingDate = this.groupByDate(dataAddOn);

      // processing data into new json form
      let resultArray = [];
      for (let i = 0 ; i < dataGroupingDate.length ; i++) {
        let getObject = dataGroupingDate[i];
        let Data = [];

        for (let j = 0 ; j < getObject['Data'].length ; j++) {        
          let getData = getObject['Data'][j]['Data'];
          let ReportImages = [];

          if (getData['Complete_Index'] === 3) {
            ReportImages.push({"ReportImage": this.convertBase64ToImage(getData['Complete_Source'])});
            ReportImages.push({"ReportImage": this.convertBase64ToImage(getData['Complete_Source2'])});
            ReportImages.push({"ReportImage": this.convertBase64ToImage(getData['Complete_Source3'])});
          } else if (getData['Complete_Index'] === 2) {
            ReportImages.push({"ReportImage": this.convertBase64ToImage(getData['Complete_Source'])});
            ReportImages.push({"ReportImage": this.convertBase64ToImage(getData['Complete_Source2'])});
          } else if (getData['Complete_Index'] === 1) {
            ReportImages.push({"ReportImage": this.convertBase64ToImage(getData['Complete_Source'])});
          }

          let MissionTimeOnlyHour = this.getHourMinuteFromDateString(getData['RepairDoneTime']);
          let newData = {
            "ClientName": "..." ,
            "ClientAddress": "..." ,
            "MissionTime": getData['RepairDoneTime'] ,
            "MissionTimeOnlyHour": MissionTimeOnlyHour ,
            "ClientPhone": "..." ,
            "ClientContactPerson": "..." ,
            "MachineType": getObject['Data'][j]['machineDetails']['Type'] ,
            "MachineNumber": "..." ,
            "ErrorCode": getData['ErrorType'] ,
            "ProblemOccured": getData['Description'] ,
            "NotificationTime": getData['NotifyTime'] ,
            "Repairman": getData['Maintainer'] ,
            "ClientNumber": "..." ,
            "MissionNumber": getData['MissionNumber'] ,
            "ReportIndex": getData['Complete_Index'] ,
            "ReportImages": ReportImages
          }

          Data.push(newData);
        }

        let newDate = this.convertApiTimeToDate(Data[0]['MissionTime']);
        let newDayString = this.dayNameArray[newDate.getDay()];
        let newMonthString = this.monthNameArray[newDate.getMonth()];
        let DateString = newMonthString + " " + newDate.getDate();

        let newData = {
          "DateString": DateString ,
          "DayString": newDayString ,
          "Date": newDate ,
          "Data": Data
        };

        resultArray.push(newData);
      }

      return resultArray;
    }

- Today mission

    async processDataTodayMission (dataJson: any) {

      // add time stamp and machine details into json
      let dataAddOn = [];
      for (let i = 0 ; i < dataJson.length ; i++) {
        let Data = dataJson[i];
        let dateDetails = this.getDateDetail(Data['RepairDoneTime']);
        let machineDetails = await this.api.getDispenserDetail(Data['Device_ID']);

        let newJson = {
          dateDetails,
          Data,
          machineDetails
        };

        dataAddOn.push(newJson);
      }

      // processing data into new json form
      let resultArray = [];
      for (let i = 0 ; i < dataAddOn.length ; i++) {
        let getObject = dataAddOn[i];

        let MissionTimeOnlyHour = this.getHourMinuteFromDateString(getObject['Data']['RepairDoneTime']);
        let newData = {
          "ClientName": "..." ,
          "ClientAddress": "..." ,
          "MissionTime": getObject['Data']['RepairDoneTime'] ,
          "MissionTimeOnlyHour": MissionTimeOnlyHour ,
          "ClientPhone": "..." ,
          "ClientContactPerson": "..." ,
          "MachineType": getObject['machineDetails']['Type'] ,
          "MachineNumber": "..." ,
          "ErrorCode": getObject['Data']['ErrorType'] ,
          "ProblemOccured": getObject['Data']['Description'] ,
          "NotificationTime": getObject['Data']['NotifyTime'] ,
          "Repairman": getObject['Data']['Maintainer'] ,
          "ClientNumber": "..." ,
          "MissionNumber": getObject['Data']['MissionNumber'] ,
        }

        resultArray.push(newData);
      }

      let newDate = this.monthNameArray[dataAddOn[0]['dateDetails']['Month'] - 1] + " " + dataAddOn[0]['dateDetails']['Day'];
      let resultObject = {
        "Date": newDate,
        "Data": resultArray
      }

      return resultObject;
    }

- Future mission

    async processDataFutureMission(dataJson: any) {
      
      // add time stamp and machine details into json
      let dataAddOn = [];
      for (let i = 0 ; i < dataJson.length ; i++) {
        let Data = dataJson[i];
        let dateDetails = this.getDateDetail(Data['RepairDoneTime']);
        let machineDetails = await this.api.getDispenserDetail(Data['Device_ID']);

        let newJson = {
          dateDetails,
          Data,
          machineDetails
        };

        dataAddOn.push(newJson);
      }

      // grouping by date
      let dataGroupingDate = this.groupByDate(dataAddOn);

      // processing data into new json form
      let resultArray = [];
      for (let i = 0 ; i < dataGroupingDate.length ; i++) {
        let getObject = dataGroupingDate[i];
        let Data = [];

        for (let j = 0 ; j < getObject['Data'].length ; j++) {        
          let getData = getObject['Data'][j]['Data'];

          let MissionTimeOnlyHour = this.getHourMinuteFromDateString(getData['RepairDoneTime']);
          let newData = {
            "ClientName": "..." ,
            "ClientAddress": "..." ,
            "MissionTime": getData['RepairDoneTime'] ,
            "MissionTimeOnlyHour": MissionTimeOnlyHour ,
            "ClientPhone": "..." ,
            "ClientContactPerson": "..." ,
            "MachineType": getObject['Data'][j]['machineDetails']['Type'] ,
            "MachineNumber": "..." ,
            "ErrorCode": getData['ErrorType'] ,
            "ProblemOccured": getData['Description'] ,
            "NotificationTime": getData['NotifyTime'] ,
            "Repairman": getData['Maintainer'] ,
            "ClientNumber": "..." ,
            "MissionNumber": getData['MissionNumber'] ,
          }

          Data.push(newData);
        }

        let newDate = this.convertApiTimeToDate(Data[0]['MissionTime']);
        let newDayString = this.dayNameArray[newDate.getDay()];
        let newMonthString = this.monthNameArray[newDate.getMonth()];
        let DateString = newMonthString + " " + newDate.getDate();

        let newData = {
          "DateString": DateString ,
          "DayString": newDayString ,
          "Date": newDate ,
          "Data": Data
        };

        resultArray.push(newData);
      }

      return resultArray;
    }

- Result in display:
- Done mission

<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/38-02.JPG" style="max-width: 250px" />
</center>
<br>

- Today mission

<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/38-01.JPG" style="max-width: 250px" />
</center>
<br>

- Future mission

<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/38-03.JPG" style="max-width: 250px" />
</center>
<br>

:::info
***Note***:
- There are still missing data which must be discussed with teams.
- For every data missing, it will still replaced by "..." and when available will be imported into each data.
- Even there are still missing data they are not affecting the system and can run properly.
- If any update for missing data, it might also include changing the attributes of database and create/update the API.
:::

---

### Meeting with PWA Team

Start time: **16:05**
End time: **17:50**

1. API for Repairman App
- What already done:
- Get dispenser repair condition.
- Get dispenser details.
- What are still in progress:
- Authentication for repairman, include reset password.
- Repairman report when the repairment has done, like report problem with add pictures
- Repairman has arrived
- Repairman undone the mission with reasons in string
- Mr. Johnny will check this soon and inform to teams group chat when he's done.

---

2. Changes of the UI in Repairman App
- There will be changes of UI design where after repairman has decided to pick the mission (by clicking the "Arrived" button), it will has two option:
- Before: Apply for component, Done
- After: Undone, Done
- When repairman choose "Undone", it will prompt a text box to type his reasons and a text box/time chooser to tell when he can finished it.
- This feature aims so when repairman really wants to finish the mission but he can finish in time so notify the company that they can assign the mission again to him instead giving it to another repairman.
- This changes also must be announced to group chat so Ms. Annie can know and giving her opinion.

---

3. One mission at the time
- Related to number 2 discussion, when the repairman has decided to click "Arrived" button on one of the mission, he can't choose or click the same button in another mission.
- He should **Done** or **Undone** it before he can choose another mission.
- There still must be discussed with team:
- When the repairman abandon the mission (by clicking the "Undone" button), is the mission will be disappeared or not.
- How to handle if the repairman wants to finish the first job later after the second job, which means he should abandon the first one.

---

4. Repairman App divisions of tasks
- Mr. Johnny will responsible in supervising the PWA team and giving the API needed.
- Aldy will work on Home page.
- Ian will work on Report page.

---

## Conclusion

- Build the system to convert the data from API into three different JSON object format for each fragments in home page.
- Tested using dummy data but has the same JSON format as when get from the API.
- Data can be displayed successfully with still missing data because undefined either from the API or no information for this yet.
- Discuss with Ian and Johnny about repairman app system about how repairman should finish or can't finish the mission, repairman app API needed, and other (can be seen in HackMD report).

---

Time: **18:00**
Event: Leaving the lab

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