Goal Setting Feature

[uoa-lchu090]

Description

This feature allows for a user to configure a goal as to how many people they have encountered each allotted time. User can configure the feature to be every day, every week, or every month, can set the number they want their goal to be, and can toggle whether or not it is recurring. A pop-up is displayed at the end of the allotted time to inform if the goal was met or not, and how many people they have encountered during the time frame.

Acceptance Criteria

• create a goal counter component to be used in the homepage
• create a pop-up component that will show if the goal was met at the end of the time
• add component to homepage
• modify settings page to allow for configuration of the goal setting
• add backend logic to allow for counting the people met, as well as for configuring the feature

Implementation details

potential new endpoints depending on how pop-up is implemented, home page needs to be modified,new API calls need to be written for the new feature.

Testing notes

New tests needed for the feature.

[nzbasic]

Design Proposal

Goal Data Model

• Date started: Date
• Date ending: Date
• Duration: string
• Recurring: boolean

Frontend Requirements

• Goal added to home page
  • Make a new GoalSummary component
  • Shows a circular progress meter for the current goal progress
  • If the goal is not done, it should say for example: "2 to go!"
  • If the goal is done, there should be text saying Goal Complete!
  • Shows the remaining time in human-readable form e.g. 1 hour or 3 days, etc
  • If there is no goal set, show some text telling them to add a goal
  • If there is a goal, there should be a button for goal settings
  • Hovering over the goal should show the goal settings
• Goal add/settings modal
  • Will use same modal for adding and changing settings
  • Has 3 input fields:
    • Number of encounters needed: number input
    • Duration: dropdown with options: 1 day, 1 week, 1 month
    • Recurring: checkbox
  • If the modal is used for adding, the title should be "Add a new goal"
  • If the modal is used for editing, the title should be "Goal settings" and there should be an extra button to remove the goal

Backend Requirements

• Add the new goal data model
• Add goal to the person schema
• Route GET /goal
  • If there is a goal, return the goal object and the progress
  • If there is no goal, return no content
  • Before it sends a goal, it should check if the end date has surpassed
    • If the date is surpassed and it is a recurring goal, update the current start/end dates accordingly
    • If the date is surpassed and it isn't a recurring goal, remove the goal and return no content
• Route POST /goal
  • Creates a new goal
  • The body will contain: { encounters: number, duration: string, recurring: boolean }
  • Should use the duration string and the current date to compute the start/end date of the goal
• Route PUT /goal
  • Updates the current goal
  • Same body contents as POST /goal
• Route DELETE /goal
  • Deletes the current goal

UI
Goals added to front page

Goal in progress

Goal completed

Adding goal modal

Editing goal modal