SET17_FET11 Phase 1 Project
GIT link: FurnBirds/MedInfo: Phase 1 Project, simulate med clinic patient information (github.com)
This Project demonstrates a web page that displays patient information from a local JSON server. A quick video demo can be found below.
Appearance and Operation
First a HTML and CSS was created to display the appearance of the page. In consideration to UX, a list gallery was placed on the left to allow users to chose a record and a form is available to the right that demonstrates the information when a record is chosen. When the New Patient Data button is selected, the form on the right empties and allow the user to enter data for a new patient. It is saved to the server and displayed on the list on the left gallery.
Each of the input fields, the table and ID display has appropriate class and id assigned so they can be referred to and manipulated with using DOM.
Java Script
Below is a list of main functions in the java script and what they do.
| constructPtDataRow() | Use DOM .innerHTML to construct rows in the Table. It then adds event listener click to each row that calls rowClick() function. Each row is then appended to the table on the left of the page. |
| populateFields(ptProfileData) | The ptProfileData is a json record of the row clicked on in the table. It is then used to populate the input fields on the right of the page using DOM. |
| newProfile() | Sets the ptProfile variable to null and then calls the emptyFields() function. The newProfileMode variable is set to true. It then uses DOM to set the selected ID to be “(New Patient Profile)” to indicate that they are currently creating a new patient profile. |
| emptyFields() | It collects all input fields on the right side to allValueInputs and allCheckInputs varialbes. Then uses a for loop and DOM to set the .value and .check to “” and false respectively. This effectively empties the values inside the input fields. The DOM is then used to change the currently selected ID display to none. |
| rowClick() | Asynchronous function called by event listener click. It sets the newProfileMode to false. Await calls getSingleProfile and feeds the event listener variable id that is the row clicked on the table. The return of the getSingleProfile is saved into the ptProfile variable. populateFields(ptProfile) is then called. |
| getSingleProfile(id) | Asynchronous function that fetch GET from the JSON server with the id supplied. It returns a single profile that is await parsed JSON record of patient profile corresponding to row clicked on the table. |
| getPtProfiles() | Fetch GET from JSON server the complete list of patient profiles. It await parses it into JSON. For each of the records, it calls constructPtDataRow(ptData) where the ptData is the current record in the foreach. |
| resetPtProfileList() | Simply calls getPtProfiles() |
| resetTable() | Uses for loop to use DOM to remove element of each row in the table. Than it calls resetPtProfileList(). |
| preSaveProfile() | Uses DOM to collect values currently in the input fields and save it into global variable ptProfile |
| patchProfile() | Asynchronous function. It await fetch PATCH the stringfy global variable ptProfile. The record patched in the JSON server is indicated by the global variable workingID. It then await return the patched record after in has been parsed into JSON. |
| saveProfile() | Asynchronous function. It checks whether the global variable newProfileMode is true or false. If newProfileMode is false, it gets the id of the ptProfile variable and saves it into the global variable workID. preSaveProfile() is await called followed by await call patchProfile. The return of patchProfile is saved back into ptProfile. resetTable() is then await called. Similarly, If newProfileMode is true, the current information is gathered by await call preSaveProfile(). Then postProfile() is called to write the new patient information into the JSON server. The return of the postProfile() is saved into the ptProfile global variable. The newProfileMode global variable is set to false as we are no longer entering brand new patient data. The ID display on the right side of the page is adjusted to the newly recorded profile using DOM. resetTable is then called. |