24th July Report

# 24th July Report ## Progress Time: **09:00** Event: Entering the lab --- ### Final with Dashboard page Time: **16:00** - Fixing some back end codes and adding many parts of Dashboard Page in order to integrated with the other pages. - Some parts that are added: - Loading screen using **LoadingController** when accessing the dashboard page, this will notify the user that Dashboard page need to load picture for background, check the dispenser ID, and session login. - Alert using **AlertController** that tells the user should do login first, it divided into two: user hasn't login, or user session login has timed out. - Notification using **AlertController** on the page when user click the "star" button, or the track dispenser function, which notify that track/not track is success or not. - Notification using **AlertController** on the page to notify if the dispenser ID is loaded successfully or not, if not then get the ID from memory, or preference which stored the last `device_id`. - Update UI when user after login or session ID is present, this is for check if the user: - has tracked the dispenser (by full filled star), and - ever submitted a report and still on going (by there is "View maintenance report"). - Re-ordering function calls in main function (`ngOnInit` and `ionViewDidEnter`) so that some function should be called first because the other has depedency to the first one being called. - **ngOnInit** is an Ionic function that being called first time when user access the page before the components loaded. - **ionViewDidEnter** is an Ionic function that being called after page is loaded and can be called multiple whenever user access the page (forward or going back). - Results in screenshot: - When access to the PWA without passing the `device_id`, for example `https://domain.com/dashboard/MA_03_01` but last ID has been saved before, it will load the data from previous `device_id` <center> <img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/32-01.JPG" style="max-height: 400px" /> </center> - Access PWA without passing `device_id` and also doesn't has previous `device_id`, this case like user after clean browser data or just access the PWA for the first time <center> <img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/32-02.JPG" style="max-height: 400px" /> </center> - The first time access PWA and perform to track dispenser or make report a problem of dispenser <center> <img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/32-03.JPG" style="max-height: 400px" /> </center> - Successfully add the dispenser into tracked dispenser <center> <img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/32-04.JPG" style="max-height: 400px" /> </center> - Successfully remove the dispenser from tracked dispenser <center> <img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/32-05.JPG" style="max-height: 400px" /> </center> - Try to add/remove dispenser of tracked dispenser but session login has timed out <center> <img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/32-06.JPG" style="max-height: 400px" /> </center> --- ### Finalization with the other pages Time: **17:02** - For final build of User App, I take care the last part of code to clean up and add some missing feature, while Thariq and Ian continue in developt the Repairman App. - Dashboard Page - Add bubble text in the middle to tells which dispenser is the user use by tells its location, thanks to Thariq who help with these section. - To prevent that **ionViewDidEnter()** being called before **ngOnInit()**, add boolean identification named `ngOnInitDone` that ngOnInit function must be done first then any action in ionViewDidEnter function can be run. This identification will always true after ngOnInit once done. - Add **updateCurrentSession()** to update session time in preference for every action do by the user, this function being called by events in HTML (events are Ionic build in listener for any perform change in HTML code by their own function) and also whenever click button is occured. - Detail Information Page - Add loading screen, celcius to farhenheit converter using toggle, and also handling with no data value by displaying "..." instead of error or 0 value. This section big thanks to Ian who did this part. - Same as above, add **updateCurrentSession()** to update session time in preference for every action do by the user. - Maintenance Record Page - Same as above, add **updateCurrentSession()** to update session time in preference for every action do by the user. - Maintenance Progress Page - Data from API now filtered by status and its Complete Time. Seeing by its function, maintenance progress only display data from report that hasn't done or done but under 48 hours after it being done. - Add estimate time feature that display how many hours left for 3 days later after the report is submitted. - Handling when the user access this page with session login has timed out, it will direct the user to re login first. - Same as above, add **updateCurrentSession()** to update session time in preference for every action do by the user. - Nearby Dispenser Page - Same as above, add **updateCurrentSession()** to update session time in preference for every action do by the user. - Report Problem - Same as above, add **updateCurrentSession()** to update session time in preference for every action do by the user. - Fixing some component layout in SCSS. - Handling when the user access this page with session login has timed out, it will direct the user to re login first. - Get data from **checkTrackStatus** to auto check the "Tell me when repair is done..", or feature to track the dispenser if the user has already add the dispenser into tracked dispenser. - DispenserAPI service - Change initial return value of **getDispenserRawData()** for water temperature from -1 to null. - Change initial return value of **checkTrackStatus()** for user status from false to null, this handling when error Promise will not return false value when can change user's real status from true. --- ### Documentation and Further Improvement Time: **17:56** - Documentation of code using comment can be seen in Github [here](https://github.com/ianjoseph2204/NTUST_SmartDispenser). - Some parts that can be improve to handling some cases/issues: - Overtime estimate time when after 3 days, what it will be displayed. - Lazy loading for every images so it can display low quality pixel of real picture before load the picture fully. - Testing for every parts of code in order to find bugs/issues, this can be implemented by creating "Give Feedback" section/page to see what user's think about this project. - Add "Reset Password" page to reset the user's password in case if forgot. - Add login button on the Dashboard Page in order the user wants to login only other than perform any action. --- ## Conclusion - Dashboard page finalization with add integration to another page, device_id error handling, after login also session login handling. - Finalization the other page. - Add updateCurrentSession function to all page to update the session time for every action that user's perform. - Fix some codes in project and commit to Github. --- Time: **18:00** Event: Leaving the lab ###### tags: `on-intern`