ntrappe / cse112-s22-group2 Goto Github PK

Goal: Bring over relevant code/docs from Eucalyptus (past 110 project)

• bring over docs
• bring over source files
• clean source files
• make sure all same standard (style)
• check that linter can access files
• check that testing workflow can access and run tests
• make sure that workflow produces JS Docs from source files
• have JS Docs be published
• document what we change (or why we're doing this vs forking)

Daily Log Custom Components

(Custom component in JS)

Daily Log Preview Component

Expectations:
Focus is entirely on the content of the daily log preview not functionality. You do not care what happens when a user clicks it, just what is seen.

Features:

• title should be "Daily Log "
• if text exists from the notes or journal sections, use that in the preview
• if no text exists just say "No preview text available."
• the right side should have 3 icons for tracker, notes, and journal

Daily Log Full Component

Expectations:
Focus is on the different sections and each section has its functionality. Specifically, notes and journal should allow the user to type text and display it.

Features:

• title should be either "New Daily Log" if new or "Daily Log" if fetched
• date should default to today
• if possible, let user choose a different day by tapping date
• <section> for tracker with heading "Trackers"
• <section> for bullet points with heading "Notes"
  • maybe use <ul> and <li> inside
• <section> for long text with heading "Journal"
  • recommend using input for journal text
• lines dividing each section
• button for cancel
• button for save

Update: 05-16-22

• add custom event for 'save' for control to listen to
• add custom event for 'cancel' for control to listen to

This page will hold each tracker component (similar to inbox). It will deal with the functionality of when the user moves through the trackers (and if possible, hosts settings to select which trackers they would like).

Daily Log Inbox

(HTML Page + JS)

daily-log-inbox.html

Expectations:
Daily log inbox displays the daily log previews (if available) + offers CRUD interactions. The CRUD interactions do not have to tie into back-end right now but some should trigger warnings/messages.

Features:

• in header, title of page should be "Daily Logs"
• right side of header has Editbutton
• when Edit button pressed, user should be able to select logs or at least have the select icon visible (see below)
• when Edit button pressed, toggles to Cancel and if pressed, returns to normal state (and normal toolbar)
• toolbar at bottom should have 2 modes: normal OR edit
  • normal: says the number of logs "9 Logs" + have a new button/icon
  • edit: has 2 buttons: delete all AND delete
• if user clicks Delete All then pop up message to confirm
• if user selects some logs + Delete then pop up message to confirm
• if user doesn't select + Delete then nothing? or message

When Edit clicked:

Error message example:

Backend

Updated on 05-20-22 to reflect <daily-log>

Decisions:

Using local storage.

Expectations:

Given a custom component, save, change, and delete it.

Features:

• save a custom component in storage
• delete custom component in storage
• update/edit custom component in storage
• make sure you can id each component / log
• return success / error message

Stored Object:

Store each daily log as a JS object with the following fields:

• date: string
• notes: list of strings
• journal: string

Functions:

To be called by control

Function 1: addLog(date, notes, journal)

Description: Creates a JS object (given above) and stores it in local storage

Inputs:

• date: string in the format of "{day of week}, {month} {date}, {year}" like Friday, May 20, 2022
• notes: list of strings like [ "hi", "bye", "cry" ]
• journal: string like "it was a dark and stormy night"

Return:

• EXIT_SUCCESS if successfully added to local storage
• EXIT_FAILURE if either failed to add or invalid input param

Notes: you could just use the date as the key if that format is fine

Function 2: updateLog(date)

Description: "Updates" aka overwrites value stored at this key

Inputs:

• date: string in the format of "{day of week}, {month} {date}, {year}"

Return:

• EXIT_SUCCESS if successfully added to local storage
• EXIT_FAILURE if either failed to add or invalid input param

Function 3: fetchLog(date)

Description: Returns data of log at key

Inputs:

• date: string in the format of "{day of week}, {month} {date}, {year}"

Return: up to you

Function 4: fetchAll()

Description: Returns data of log at key

Inputs: none

Return: up to you

Function 5: deleteAll()

Description: Removes all daily log data

Inputs: none

Return:

• EXIT_SUCCESS if successfully added to local storage
• EXIT_FAILURE if either failed to add or invalid input param

Internal Function: search()

To make the style a bit more fun + customizable for high school students, we'll introduce the following changes:

• gradient backgrounds
• colored text
• icons with have a square vs circle around them (Powell said it seemed too much like a radio button before)
• icons will also have text next to it to make it more clear
• only icons will appear if that section was done (vs before we had all but highlighted those done, now those not done won't even be present)
• 4 color palettes to choose from (pass colorblindness tests)
• Cartograph font (more modern)

Here are the mock-ups for just the component. You can also check out the designs on Figma.

Current work is being done off of the versed branch and is just focused on the blue color palette for now. Designs have yet to be finalized.

We want to add haptics so a user can detect that they've successfully pressed a button, held down a line long enough (to open a modal), etc.

• we can use this for most browsers: https://developer.mozilla.org/en-US/docs/Web/API/Vibration_API
• for Safari on iOS, we'll need to use one of Apple's APIs

Add explanations for the different files + what the modifications mean:
https://github.com/ntrappe/cse112-s22-group2/wiki/Workflow-Guides

First round of ADRs for the design:

• why we're focused on mobile
• navigation of homescreen on main screen + doesn't use a hamburger icon for accessibility for screenreaders
• organizing daily log from fastest to longest actions
• preview icons
• preview text (shows a snippet of the text)
• date button (why we like this design, affords user interaction)
• buttons in red for dangerous action and grey for safe
• error messages/confirmation popups
• no account login
• etc

Control

• direct from home page to daily log inbox and vice-versa
• take outputs of components/backend
• send inputs/call functions of components/backend

Hi-Fi Prototype Demo: https://www.figma.com/proto/J87cj9HiQVI8xtOvtBREtT/CSE-112-Prototypes?node-id=0%3A1

Home Screen

Daily Logs (Inbox)

Single Daily Log

Custom Component:

This component should have:

• heading that contains the question we are tracking
• some centered holder that will contain the response
• some number/emoji inside the holder
• some instruction of how to interact below the holder
• buttons on the left/right bottom half to continue to next or go to previous
• if user taps on number/emoji in holder, they should be able to type in something new
• parse the input to make sure it's allowed (i.e. if we want hours of sleep, must be a number between 0 and 24; if we want an emoji, check that range, etc.)
• each tracker will be appended + displayed on trackers.html

Overall structure:

Styling Examples:
(You can look at the Figma for more)

Custom Component: (or whatever name you want)
(very similar to the error/delete modals for inbox.html)

This modal should:

• take up the full screen + darken whatever is behind it
• have a line of text like <li> that represents a selected bullet point
• have a button holder that shows all the options for changing the bullet point
• have individual buttons in the holder for each option
• each button should have text describing it and the bullet depicted (e.g. 'Important Bullet' '!')
• the button representing the current bullet should be highlighted in some way (in the image it's blue)
• if a user clicks on a different bullet button, change the bullet style of the line of text (can be done with just <li>:before)
• event should fire to tell control to now close the modal (bc button pressed) or modal can close itself but should still tell control what the selected bullet style is

Example of simplified modal:

Example of styling:
(You can look at the Figma for more)