Software Project Plan

? System ManualVersion 1.7Team BrowserTamara JenningsAlexander PosipankoJordy ThenDavid VeraPhillip YoderCSC 355 Dr. TanTable of Contents TOC \o "1-3" \h \z \u Table of Contents PAGEREF _Toc5353425 \h iREVISION HISTORY PAGEREF _Toc5353426 \h iv1.0 INTRODUCTION PAGEREF _Toc5353427 \h 21.1 High Level Product Overview PAGEREF _Toc5353428 \h 21.2 Purpose of Document PAGEREF _Toc5353429 \h 21.3 Explanatory Material: Acronyms & References PAGEREF _Toc5353430 \h 22.0 ALL USERS: GETTING STARTED PAGEREF _Toc5353431 \h 32.1 Login PAGEREF _Toc5353432 \h 32.2 Password Recovery PAGEREF _Toc5353433 \h 32.3 Chinese PAGEREF _Toc5353434 \h 32.4 Logout PAGEREF _Toc5353435 \h 33.0 USER: IT ADMIN PAGEREF _Toc5353436 \h 43.1 Contact Us PAGEREF _Toc5353437 \h 43.2 Feedback PAGEREF _Toc5353438 \h 43.3 User Management PAGEREF _Toc5353439 \h 43.3.1 Create User PAGEREF _Toc5353440 \h 43.3.2 Edit User PAGEREF _Toc5353441 \h 43.3.3 Delete User PAGEREF _Toc5353442 \h 44.0 USERS: DIRECTOR & CNO PAGEREF _Toc5353443 \h 54.1 About Us PAGEREF _Toc5353444 \h 54.1.1 Introduction PAGEREF _Toc5353445 \h 54.1.2 Center Info PAGEREF _Toc5353446 \h 54.2 Schedule PAGEREF _Toc5353447 \h 54.2.1 Announcement PAGEREF _Toc5353448 \h 54.2.2 Center Schedule PAGEREF _Toc5353449 \h 54.3 Memo PAGEREF _Toc5353450 \h 54.4 Status Record PAGEREF _Toc5353451 \h 64.5 E-Portfolio PAGEREF _Toc5353452 \h 64.5.1 Create New CNA User PAGEREF _Toc5353453 \h 64.5.2 Create New Patient User PAGEREF _Toc5353454 \h 64.5.3 View User PAGEREF _Toc5353455 \h 74.5.4 Edit User PAGEREF _Toc5353456 \h 74.5.4 Delete User PAGEREF _Toc5353457 \h 74.5.6 Filter User Table PAGEREF _Toc5353458 \h 74.6 Help and Support PAGEREF _Toc5353459 \h 74.6.2 Staff Feedback PAGEREF _Toc5353460 \h 74.6.3 Patient Feedback PAGEREF _Toc5353461 \h 75.0 TASK MANAGEMENT PAGEREF _Toc5353462 \h 95.1 Tasks PAGEREF _Toc5353463 \h 95.2 Task Library PAGEREF _Toc5353464 \h 95.2.1 Filter Tasks PAGEREF _Toc5353465 \h 95.2.2 View Task Details PAGEREF _Toc5353466 \h 105.2.3 Request Copy of Task PAGEREF _Toc5353467 \h 105.3 My Task PAGEREF _Toc5353468 \h 105.3.1 Search for Tasks PAGEREF _Toc5353469 \h 105.3.2 Create New Task PAGEREF _Toc5353470 \h 115.3.3 View Task Details PAGEREF _Toc5353471 \h 115.3.3 Edit a Task PAGEREF _Toc5353472 \h 115.3.4 Remove a Task PAGEREF _Toc5353473 \h 115.3.5 Assign a Task PAGEREF _Toc5353474 \h 115.4 Task Editor PAGEREF _Toc5353475 \h 125.4.1 Editing Task Properties PAGEREF _Toc5353476 \h 125.4.2 Editing Task Steps PAGEREF _Toc5353477 \h 126.0 PROJECT DEVELOPMENT PAGEREF _Toc5353478 \h 146.1 Integrated Development Environment PAGEREF _Toc5353479 \h 146.1.1 Node.js PAGEREF _Toc5353480 \h 146.1.2 Firebase PAGEREF _Toc5353481 \h 146.1.3 Text Editor – Visual Studio Code PAGEREF _Toc5353482 \h 146.2 Task Library for Developers PAGEREF _Toc5353483 \h 146.2.1 Structure PAGEREF _Toc5353484 \h 146.2.2 Loading Tasks PAGEREF _Toc5353485 \h 146.2.3 View Task Details PAGEREF _Toc5353486 \h 156.2.4 Copying Tasks PAGEREF _Toc5353487 \h 156.3 My Task for Developers PAGEREF _Toc5353488 \h 156.3.1 Structure PAGEREF _Toc5353489 \h 156.3.2 Loading Tasks PAGEREF _Toc5353490 \h 156.3.3 Creating New Tasks PAGEREF _Toc5353491 \h 156.3.4 View Task Details PAGEREF _Toc5353492 \h 166.3.5 Editing Tasks PAGEREF _Toc5353493 \h 166.3.6 Removing Tasks PAGEREF _Toc5353494 \h 166.3.7 Assigning Tasks PAGEREF _Toc5353495 \h 166.4 Task Editor for Developers PAGEREF _Toc5353496 \h 166.4.1 Structure PAGEREF _Toc5353497 \h 166.4.2 Loading Tasks PAGEREF _Toc5353498 \h 166.4.3 Saving Tasks PAGEREF _Toc5353499 \h 16REVISION HISTORYBelow is the up to date revision history chart. As changes to this document are made, the chart will be edited to include it.VersionDateDescriptionEditor1.003/27/2019First draft for submission Jordy Then1.103/29/2019Wrote 1.0 Introduction: 1.1Jordy Then1.203/31/2019Edited 1.3 Explanatory Material: Acronyms & ReferencesWrote 2.1 LoginWrote 2.2 Password RecoveryWrote 4.1 About UsWrote 5.0 Task ManagementWrote 5.2 Task LibraryAlexander PosipankoWrote 4.2 ScheduleJordy Then1.304/01/2019Wrote 5.4 Task EditorAlexander Posipanko1.404/02/2019Wrote 6.1 Integrated Development EnvironmentAlexander PosipankoWrote 4.3 Writing Daily MemoWrote 5.2.2 View Task DetailsJordy ThenWrote 6.2 Library Task for DevelopersDavid Vera1.504/03/2019Reordered section numbersAdded 2.3 ChineseAdded 2.4 LogoutAdded 3.0 User: IT AdminEdited 4.1 About UsAdded 4.5 E-PortfolioEdited 5.3 My Task ListTamara JenningsEdited 1.3 Explanatory Material & AcronymsWrote 6.4 Task Editor for DevelopersAlexander PosipankoWrote 3.0Wrote 3.1 Contact UsWrote 3.2 FeedbackWrote 3.3 User ManagementWrote 3.3.1 Create UserWrote 3.3.2 Edit UserWrote 3.3.2 Delete UserPhillip Yoder1.604/04/2019Edited 6.2 Library Task for DevelopersWrote 5.2.3 Request Copy of Task5.1.1 Task InformationDavid VeraWrote 4.2.2 Center ScheduleWrote 4.4 Status RecordWrote 4.5 E-PortfolioWrote 4.5.1 Create New CNA UserWrote 4.5.2 Create New Patient UserWrote 4.5.3 View UserWrote 4.5.4 Edit UserWrote 4.5.5 Delete UserWrote 4.5.6 Filter User TableWrote 4.6 Help and SupportWrote 4.6.2 Staff FeedbackWrote 4.6.3 Patient FeedbackPhillip YoderEdited 6.4 Task Editor for DevelopersEdited 6.1.2 FirebaseAlexander PosipankoEdited 6.3 My Task for DevelopersTamara Jennings1.704/05/2019Edited 4.4 Status RecordEdited 6.3 My Task for DevelopersTamara JenningsTable 1: Revision History1.0 INTRODUCTION1.1 High Level Product OverviewLTC-TMS, or Long-Term Care Task Management System, is a health management system used to keep track of the well-being of patients. The purpose of this project is to create a functional long-term care management system that incorporates information from external sensors to measure relevant information, such as step count, heart rate, and room temperature. The LTC-TMS will be available to patients and their families on mobile applications to view patients’ information as well as tasks. It will be available to CNAs, allowing them to add and make changes to a patient’s record. The system will also be used by the management personnel of the facility to keep track of staff information and facility schedules. Additionally, hardware will be installed in rooms as well as worn by patients to collect sensory information. This information will be transmitted wirelessly to a database so that facility staff can view them in the task management system on both a desktop browser and a mobile application.1.2 Purpose of DocumentPurpose of this document is to supply information to the users about how to use the browser version of the system. It will provide a basic walkthrough of the various screens and available functions provided. LTC-TMS Browser version has two audiences which are IT admin user who oversee account management, and directors/CNOs who administer the application. This document is divided into sections for each audience and describe some how-to information about using the browser. Also, it will provide explanatory guide to setting up the project with firebase for future developers of this rmation provided in this document will include detailed description of functionality of each webpages and screenshots of the different pages of the browser. By the end of this document, users should know how to:Write patient’s daily memo.View and update vital status record.Search and copy tasks from the task library.View, edit and assign task to patients.Manage patient’s portfolio.Read feedback from staff and family.Create and edit director/CNO accounts.1.3 Explanatory Material: Acronyms & ReferencesThe following references will be used throughout this document. AcronymMeaningCNOCertified Nursing OfficerLTC-TMSLong-term Care Task Management SystemSRS Software Requirement SpecificationsDOMDocument Object ModelTable 2: Acronyms and References2.0 ALL USERS: GETTING STARTEDThis section will detail general use and features of the browser version of LTC-TMS from the IT Admin perspective.2.1 LoginTo use any feature of the system, the user must login. There are three account types that are usable in the browser version of LTC-TMS:Certified Nursing Officer (CNO)DirectorIT Administrator2.2 Password RecoveryTo initiate the password resetting process, click the “Forgot Password?” link on the login page.To successfully reset a password, a user must enter their e-mail address used when registering their account, their role, and their system ID number. If the system ID number is not known, consult the IT Admin, who can access this information. Upon entering all the required information, and e-mail will be sent with a link to reset the password.2.3 ChineseTo change the language of the system, users must hover over the cogwheel icon in the upper right corner of the page. A drop down with languages appears. Clicking “English” returns the English version and clicking on “Chinese” returns the Chinese version. Currently, the Chinese version contains English text because the KU development team does not know Chinese. It is up to the MCU teams to perform the translations on the Chinese version. 2.4 LogoutUsers who wish to logout of the system must hover over the cogwheel icon in the upper right corner of the page and click “Logout.” Doing this logs the user out of the system and returns them to the login page.3.0 USER: IT ADMINThis section will detail general use and features of the browser version of LTC-TMS from the IT Admin perspective.3.1 Contact UsThe Contact Us page is for the IT Admin’s eyes only. The information displayed here is multiple ways for them to contact the Kutztown University side of the development team. It has their name, email, contact number, and an address for where most of the development happens.3.2 FeedbackThe Feedback page is for the IT Admin Staff and Family/Patient feedback about the app side of the system. Depending on the problem, they can help the user through their troubles by way of replies or report any major problems that users come across back to the development team for them to fix. Say a staff member, specifically a Director or CNO, is having trouble with remembering their password. This page doesn’t work correctly so far and is filled with a temporary example page. If they can log in, they can request the IT Admin to change it for them in the User Management page. Currently, feedback functionality is not implemented for the IT admin and the Feedback page has a place holder. 3.3 User ManagementThe User Management page is for the IT Admin to do some general administrative activates. Such as creating, editing or deleting user accounts. Those will be talked about in the coming subsections.3.3.1 Create UserThe Create User function does its namesake. Here the IT Admin can create a Director or CNO account. They can input the name, email, and password for the account. The password must be six, plus, characters and contain a number. The email must be in the “...@<email client>.com” format. It also auto assigns an ID to the account depending on the position selected. For CNOs they are in the 22xxxx range and the Directors are in the 11xxxx range.3.3.2 Edit UserThe Edit User function does very similar things as the Create User account. Only the name, email, and Password can be changed here. The same restrictions apply to the email and password here as it did in the Create User functionality. The password must be six, plus, characters and contain a number. The email must be in the “...@<email-client>.com” format.3.3.3 Delete UserThe Delete User function does just that, deletes the user selected. It removes it from the database as well as the authentication table. Once it’s deleted, the user cannot log in anymore unless added back in by the IT Admin.4.0 USERS: DIRECTOR & CNOThis section will detail general use and features of the browser version of LTC-TMS from the Director and CNO perspectives. This section does not include information about task management. This includes the Library, My Task, and Task Editor pages. Task management will be covered later in this document in 5.0 TASK MANAGEMENT.4.1 About UsThe About Us page contains information about the Center itself. This includes an introduction and contact information. Introduction content is able to be viewed and edited in the Introduction tab. Contact information is able to be viewed and edited in the Center Info tab. 4.1.1 IntroductionThe Introduction tab contains an “About Us” field that contains a brief description of the center. The “About Us” field can be edited by pressing the “Edit” button. The information entered will be used globally, wherever appropriate on the system.4.1.2 Center InfoThe Center Info tab contains contact information and the center address. These fields can be edited by pressing the edit button. The information entered will be used globally, wherever appropriate on the system.4.2 ScheduleBrowser version of LTC-TMS can function as schedule board for staff users. In the schedule page, Director and CNO can set up future announcements and alerts for another staff. Through the schedule page, staff can learn about upcoming events and news that will be associated with the facility and staff members. Among the schedule page, there are various tabs with different purposes. The tabs are as follows:4.2.1 AnnouncementThe Announcement tab displays upcoming announcements and reports. It contains a list of agenda that includes the announcement title and its detail. Announcement title is a brief label that summaries the report. By hitting the “detail” button next to the title, users can read in-depth information about the announcement. CNO/Director can add new announcement by hitting the plus button on the top right of the table and enter in related information. Users can also edit the announcement title and/or detail and remove irrelevant/past announcements.4.2.2 Center ScheduleThe Center Schedule tab will display the weekly hours of the facility. Each week will start on Sunday and go from there. It will be used to display any sort of hour shifts that happen due to a special or holiday type event.4.3 MemoThe Memo page is where Directors and CNO can write progress reports about their day. As a management system tending to patients in healthcare facilities, it is very important for staff to update the public about the management of their patients. The purpose of the memo page is to present daily progress reports and updates about the patients and/or facilities. Users adding a new memo should have the current date associated to the memo, along with the represented patient and signer. It would be ideal for the memo page to be presented in a form of a calendar, so that future users can refer to each memo in a logical convenient way. The memo page is not yet implemented and currently has a placeholder. This will be a helpful upcoming functionality that LTC-TMS has to offer. Future developers can check out the SRS for requirements and functionalities regarding to the implementation of the memo page. 4.4 Status RecordOn this page there are a few tabs. They are daily status, vital status, AI status, and special care. This will allow for the user to view information about specific patients based on what tab they are in. Daily status contains information about tasks a patient completed (i.e. eat, shower, etc.). A.I. status data is collected by the MCKU-Life hardware and includes heart rate, step count, fall detection. Vital status data recorded by CNAs and includes blood pressure and temperature. Special care contains information about specific care/treatment considerations for a patient. Note that this page is not fully implemented and is currently showing a place holder. 4.5 E-PortfolioThe E-Portfolio page is for a CNO or Director to create, view or edit the information of CNA or a Patient/Family account. They can add new information by clicking the green plus in the white box that’s in the corner of the table. To view the CNA or Patient/Family information, the user needs to click on the “view” button all the way on the right of the table under the button where you add new information. After clicking view there will be an option to pick either CNA or Patient. After that you will be asked to fill out some information. The information needed to be entered will change depending on what was picked. Same for if you view the information. You can also filter information in the table. That will be discussed in the following sections.4.5.1 Create New CNA UserIf the user picks CNA, the information is slightly different than what would be put in the Patient version of this section. A CNA ID is automatically assigned to the CNA. After selecting the position, the only position, of CNA a field for password appears. The fields that need to be filled are name, date of birth, initial date, national ID, nationality, email address, gender, contact number, emergency contact number, emergency contact name, emergency contact relationship, address, and a brief description. Along with a photo of the CNA, their CV, and license, everything must be filled out by the CNO or Director to fully submit the CNA as an employee with the “submit” button. To cancel out of it you hit the “cancel” button.4.5.2 Create New Patient UserIf the user picks Patient, the information is slightly different than what would be put in the CNA version of this section. A Patient ID is automatically assigned to the new Patient/Family member. As opposed to the CNA version, there is no need to pick a position, so the password field is already up. The fields that need to be filled are name, room number, national ID, nationality, date of birth, gender, admission date, email address, contact number, emergency contact number, emergency contact name, emergency contact relationship, address, admission reason, appointment record, medical record, and a brief description. Along with a photo of the patient everything must be filled out by the CNO or Director to fully submit the Patient into the facility with the “submit” button. To cancel out of it you hit the “cancel” button.4.5.3 View UserWhen the user clicks the “view” button, all the information that was entered in the Create New CNA User and Create New Patient User sections, except for the passwords. Here they can edit by clicking the “edit” button or delete by clicking the “delete” button. They can also leave this page by hitting the “back” button. Edit and delete are talked about below.4.5.4 Edit UserTo edit a user’s information, the user would have needed to click the “view” button on the table and then clicking the “edit” button in the top left of the portfolio. After clicking edit, a similar page is brought up that lets you change it. Again, everything needs to be filled out. To submit the changes, they will have to hit the “submit” button on the bottom. If they don’t want to save the changes, you will have to hit the “cancel” button on the bottom.4.5.4 Delete UserTo delete a user’s information from the database completely, you would have needed to click the “view” button on the table then click the “delete” button in the top left next to the “edit” button. Once you click “delete” it will prompt you with a “are you sure” type of message where you can accept or cancel it by hitting “accept” or “cancel”. That’s all it will do.4.5.6 Filter User TableTo filter the information the user must be at the base table. On the left of the table will be something that says “Filter” in descending order. At the very top they can type what they want to find in the “Search” box. It searches through name, national ID, nationality, contact number, email or role. Not the gender field, however. If they want everyone in a certain position only, they can pick CNA or Patient in the “Position” drop down. Same goes for nationality and gender in the “Nationality” and “Gender” drop downs. The drop downs increase when different information is added.4.6 Help and SupportOn this page the Director or CNO can view CNA and Family feedback, help the out by replying or just reporting the problem back to the development team with the contact information that’s at the bottom of the page. The development information currently has the Kutztown side of the development team in right now. That has the name and address of where most of the development happens. A contact number and email address.4.6.2 Staff FeedbackThe feedback that is shown here is from the CNAs that are using the app and have run into any sort of problem or mishap that they’ve come across. From here the user should be able to help the CNA through their problems through the replies by hitting the “reply” button under a specific feedback. If it’s something that can’t be handled through comments, then they can report it back to the development team. This portion of the page is not working correctly right now.4.6.3 Patient FeedbackThe feedback that is shown here is from the family members that are using the app and have run into any sort of problem or mishap that they’ve come across. From here the user should be able to help the family member through their problems through the replies by hitting the “reply” button under a specific feedback. If it’s something that can’t be handled through comments, then they can report it back to the development team. This portion of the page is not working correctly right now.5.0 TASK MANAGEMENTThis section describes task management, including the Library, My Task, and Task Editor pages. These pages are used by Director and CNO users. 5.1 TasksTasks are created, edited, and assigned to patients and patient groups through the browser version of LTC-TMS. Both CNO and Directors can create, edit, and assign tasks.Tasks are processes that are detailed and assigned to individual users or groups, about protocol for an institution’s procedures or tasks that patients should carry out. This reminder allows for more patient autonomy, as well as serving as guidelines for an institution’s staff. Tasks contain two primary fields of information, the task information and the task steps, described in Table 3 and Table 4, respectivelyData FieldDescriptionNameName of the task to be displayed to the user and in the library.CategoryThe classification of tasks that groups them by categoriesOutlineA general overview of the task or an elaboration of what the task is to accomplish.StatusUser can choose to have the task published to the library or saved as a draft until completedVisibilityUser can choose to have the task invisible to other users or visible to allVideo URLURL link for a video that shows how the task is performedStepsA task can have an arbitrary number of steps. Detailed steps are not required.Table 3: Task InformationData FieldDescriptionNameName of the task to be displayed to the user and in the library.OutlineA general overview of the task or an elaboration of what the task is to accomplish.ImageImage to be displayed with the task step. If a step has no image, it will not be displayed to the user to whom the task is assigned.Detailed StepsA task can have an arbitrary number of detailed steps. Detailed steps are not required.Table 4: Step Information5.2 Task LibraryThe task library contains a listing of the tasks on the system, including those created by other users. Only tasks that are set to visible and published are shown on this page. Tasks are listed by name and category. The task library has many are describe in the following subsections. 5.2.1 Filter TasksUsers can filter tasks by category or search for text contained within them.5.2.2 View Task DetailsUsers can view more information about a task by clicking the “Detail” button next to the task in the task table. A pop-up screen will appear with a summary of the task that includes the task name, task category, related video URL, and brief task outline. Within the pop-up screen, there is another button called “HERE” that displays the task steps. Figure 2 below shows an example of task steps that were shown after clicking the “Here” button.Figure 1: Task Details5.2.3 Request Copy of TaskUsers can request a copy of a task that is displayed in the library. By checking which task, the user wants to add to the user’s task list, they can request to copy that task and get it send the user’s task list.Figure 2: Task Selection5.3 My TaskThe My Task page shows a list of tasks saved by the currently logged in user. The tasks were either created by the user or copied from the Library. The category, name, publication status and visibility of each task is shown in addition to a “Details” button that shows more specific task information. Task management is also included in the My Task page. Tasks can be selected for editing, removal, and assignments. These functions are explained in greater detail in the following sections. 5.3.1 Search for TasksA search bar above the task list allows users to search for tasks by category and name. When a search is being conducted, only tasks that match the string are displayed. Figure 4 shows the result of searching My Task by category. Figure 5 shows the result of searching My Task by name. Figure 3: My Task - Search by CategoryFigure 4: My Task - Search by Task Name5.3.2 Create New TaskClicking the “Create New Task” button above the task list directs the user to the task editor to create their task. Once the task is created, it will be shown in the list on the My Task page.5.3.3 View Task DetailsViewing task details in My Task works the same way as viewing task details in the Library. Simply click the “Details” button next to a task to view a pop-up window with a summary of the task. Click the “Here” button in the pop-up window to display the task steps. See section 5.1.2 View Task Details for more information.5.3.3 Edit a TaskTo edit a task, users must click on the “Edit” button in the same row as the task they wish to edit. Clicking this button directs the user to the task editor, where the current task information is loaded and can be modified. Once the changes are saved, the updated task can be viewed in My Task with the new modifications.5.3.4 Remove a TaskTo remove a task, users must click on the “Remove” button in the same row as the task they wish to remove. Removing a task only removes the task from the user’s list of saved tasks. Clicking the “Remove” button does not remove the task from the library.5.3.5 Assign a TaskTasks are created so that they can ultimately be performed by patients. To get a task from My Task to a patient, it must be assigned to a CNA to give to a patient or it must be assigned to the patient directly. Only published and visible tasks can be assigned. To assign a task, users must click its check box and then click the assign button. A pop-up that lists CNAs and patients will appear. In this pop-up users can select which CNAs and/or patients they wish to assign a task.5.4 Task EditorWhen a user chooses to create or edit a task, they are redirected to the task editor page. The task editor page allows users to edit virtually every piece of task information. No changes to the task are saved until the save button is clicked.5.4.1 Editing Task PropertiesThe Task name, Video URL, and outline can be edited within the text boxes at the top of the editor.The task’s category can be selected from a list of options, parsed from the database instance deployed for the institution.Task Visibility and publication status can be set using radio buttons.Figure 5: Editing Task Properties5.4.2 Editing Task StepsEditing Properties The step’s name and description can be edited by clicking in the appropriate text field and typing.Adding StepsTo add a step to a task, press the “Add Step” button. This will add a new step, which will be the last listed.Reordering StepsTo reorder a step, click and drag the green portion (body) of the step preview, and drag it above or below other steps.Deleting StepsTo delete a step, press the “[X]” button at the top right of the step preview. Note: deletion of a task step cannot be undone. Deleting a task step will delete all detailed steps contained within it.Adding detailed stepsDetailed steps can be added by pressing the lighter green “Add Detailed Step” button. Any number of detailed steps can be added.Reordering Detailed StepsTo reorder detailed steps, press the up and down buttons found to the left of the detailed step’s description.Deleting Detailed StepsDetailed steps can be deleted by pressing the [x] button on the right side of them. A step does not require any detailed steps.Uploading ImagesTo upload an image to be associated with the step, press the choose file button. A preview of the image will display in the task editor when an image is selected. The image is not uploaded to the database until the “save” button is clicked.Figure 6 shows the edit and preview pane for a task step.Figure 6: Task Editor, Task Step GUI6.0 PROJECT DEVELOPMENT6.1 Integrated Development EnvironmentThe following tools are used to create the browser version of the LTC-TMS. 6.1.1 Node.jsBefore installing firebase, Node.js must be installed on the computer used for development, as Firebase is built on Node. Download Node.js here: and install it through the executable.6.1.2 FirebaseOnce node is installed, open the development computer’s terminal and run the following command:install?-g?firebase-toolsAfter installing firebase, navigate to project folder in the terminal and run the following command:firebase init?This will install all the local firebase files required to run in a local environment.Find the json file for your firebase project instance on its website and copy the code to your team’s local config file. This sets up the paths to the firebase instance. Once firebase is initialized for the project, navigate to its public folder and run the following command:firebase serve?Now go to a web browser and navigate to localhost:5000, or if that port is in use, it will use another one, which will be displayed in the terminal window.6.1.3 Text Editor – Visual Studio CodeThe recommended text editor for working on LTC-TMS is Microsoft Visual Studio Code, which is a free text editor with great language support. The primary reasons we use this is for consistency (the default settings are what are used for the existing code), the built-in file explorer, and the built-in terminal window.6.2 Task Library for Developers6.2.1 StructureThe task library is structured so that it loops through the “Task Instructions” node in firebase and pulls the task from the library and outputs in onto a table. Each task will occupy a row as described in the Library.js file.6.2.2 Loading TasksThe task library calls a reference to the database using firebase.database().ref(). This alerts the library to know which node from firebase that the library will be pulling its data from. Then it grabs the tasks in the categories via taskPath. It loops through the categories and captures a data snapshot of each task. The data is passed to the callbacks using once() of the method and generates a copy of the data location and outputs the data snapshot into the library table.6.2.3 View Task DetailsTask details from firebase are stored in an array to which puts the information in a taskDetails object. The taskPath of the object is called in injectToDom() which injects html elements into a live page. This is what creates the extra details page with the information that was populated in the array from the taskPath.6.2.4 Copying TasksTasks are copied via a request. In the function copyTask(), a checked task that is requested to copy will send a duplicate of the exact task using snapshot.val() to the database. This task duplicate is sent to a specific location in the firebase that is associated to the account that made the request. This specific location is in “uAccount.” fbGet.once() loads the snapshot information once, then using an if statement asks if there is a “MyTaskList” mode in each “uAccount” and if there is not that node then it creates the MyTaskList in which the copied tasks are stored in. 6.3 My Task for Developers6.3.1 StructureThe My Task page has two different ways of displaying data collected from the database. Rows are added to the task table in the front end during the queries. This is not recommended because it does not separate the data from the display, so changes to the database could affect the way a page is viewed. The task details are structured in a way that separates the state of information from the information contained in the DOM. The task details are obtained from the database, stored in objects6.3.2 Loading TasksSince only tasks in a user’s list are shown, Mytask.js queries the database for tasks saved under MyTaskList for the current user. If a user has no saved tasks, the table is shown as empty. If a user does have tasks saved, another query is performed to get specific task information including category, task name, publication status, visibility, and task ID. With each loop through the tasks, a row is added to the task table with the noted information and the following buttons: Details, Edit, Remove. Task IDs are stored as a hidden cell in the table so that the it can be referenced when performing actions for a selected task like view details, edit, and remove.6.3.3 Creating New TasksThere is a “Create New Task” button above the task table in the My Task page. Clicking this button redirects the user to the Task Editor page. When the user clicks “Save Task” in the task editor, it is added to the TaskInstruction/ section of the database. After this, the task is added to uAccount/[USER ID]/MyTaskList/, where [USER ID] is the staff ID of the current user. The task is saved as a key: value pair in the following format- MyListTID[n]: [TASK ID], where n is comes from uAccount/[USER ID]/MyTaskIndex and TASK ID is the ID of the task in TaskInstruction/. MyTaskIndex is a number that is used to keep track of how many tasks have been added to a user’s list so that tasks do not have duplicate keys. It is incremented by 1 each time a task is added. If MyTaskList does not exist under in uAccount/[USER ID]/, it is created and then the task is added to it. Additionally, MyTaskIndex is created at this time and set to 1 by default.6.3.4 View Task DetailsClicking on the “Details” button displays a pop-up window with task name, category, video URL, outline, visibility, publication status, and a button to view the task steps. The task data to be viewed in the pop-up window is obtained from the database and stored in arrays using the populateArray() function. Then the data is displayed using the injectToDOM() function. 6.3.5 Editing TasksClicking on the “Edit” button for a task redirects the user to the Task Editor. The task editor will load the task data using the task ID that was obtained from the hidden cell in the task table.6.3.6 Removing TasksClicking on the “Remove” button deletes the task from the user’s saved task list, but not from the library. This allows other users to make copies of the task, even though the user removed it from their own list. Removing a task uses the taskID in the hidden cell in the task table to delete the entry in uAccount/[USER ID]/MyTaskList/ where USER ID is the ID of the current user.6.3.7 Assigning TasksClicking on the “Assign” button displays a pop-up window with a list of patients to whom the task can be assigned. When a patient is selected, it will be added to their list of tasks in the database.6.4 Task Editor for Developers6.4.1 StructureThe task editor is structured so that the state of information (the task) is separate from the information contained in the DOM. This makes manipulating the information much easier.Upon loading a task, the injectToDOM() function is called. This is the function responsible for drawing creating a graphical display of the task’s state to the DOM. The injectToDOM() function calls a function to install all the event handlers for the items it adds to the DOM.Each of the event handlers updates the state of the task given a certain event, and upon update they call injectToDOM() again to render the new state.6.4.2 Loading TasksTasks are currently loaded in by a path in a local storage variable. If the path is set to “newTask” the task editor will create a new task rather than loading one from the database.Upon successfully loading a snapshot of the task, populateArray() is called, which puts the information of the task into two objects, taskDetails and steps. This is done so that only the populate array and save functions need to be changed to maintain compatibility with database changes, while the more complex operations (event handlers and drawing to the DOM) will not be impacted.6.4.3 Saving TasksThe task information is copied from the object containing state to an object whose structure mirrors that of the database for upload.Important to note is that task images are iterated through recursively for uploading to Firestore, with the callback function being the recursive call. This ensures known state. ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download