ntrappe / cse110-w21-group33 Goto Github PK

May need to change count down function because setInterval has issues.

• counts down without interruption
• resets after 0:00, or if 'reset' hit
• starts 'ticking' when hit 'start'
• set max/min min allowed per Pomo/breaks
• integrate with calm mode
• integrate with central control for modes (control should set minutes based on mode)

Implement About page

Needs an icon in the corner that brings up a page that hovers over main page, detailing what the pomodoro technique is, reasons for using it, and specific features of our app. Icon is not yet decided, use a placeholder until decision is made.

Similar to settings(See issue for 'sidebar for settings'), will probably eventually have embedded settings for users to try out directly on the about page. They can optionally be implemented as UI elements without functionality, waiting for settings to be fully implemented in later sprints.

Was thinking of having a toggle switch for certain settings like audio notifications and calm mode. Found a few resources with code for them.
GeeksForGeeks
w3schools
I didn't add it in yet because I don't fully understand all the code and was hesitant to just straight up copy code. So I will continue looking at it and anyone else can if they want.

Should decide on what we want our "brand icon" to look like.

Previously just had a green tomato:

Implement CI/CD pipeline through GitHub Actions with the following requirements:

• linting and code style enforcement (may happen in pipeline and/or in editor)
• code quality via tool (ex. Codeclimate, Codacy, etc.)
• code quality via human review (ex. Pull Requests)
• unit tests via automation (ex. Jest, Tape, Ava, Cypress, Mocha/Chai, etc.)*
• documentation generation via automation (ex. JSDocs)

Component Content

• Sliding Display
• Input Fields for Various Settings

Public Functions

• enableSettings()
• disableSettings()
• loadSettings(calm: boolean, volume: number, sound: string, dark: boolean, work: number, shortBreak: number, longBreak: number)

Custom Events

• calmSet() -> calm: boolean
• volumeSet() -> volume: number
• soundSet() -> sound: string
• darkSet() -> dark: boolean
• workSet() -> work: number
• shortBreakSet() -> shortBreak: number
• longBreakSet() -> longBreak: number

Testing

• Jest Unit Tests
• Cypress UI Tests
• Manual Tests

Documentation

• JSDocs (function headers)
• Code Style (camelCase, comments, etc.)

Inputs

• make sure no inputs required
• make sure inputs have text defaults (as an example/placeholder)

The functionality should be the look and feel of the sidebar.

• icon for sidebar (e.g. hamburger vs gears)
• feedback for clicking/hovering over icon (e.g. lightens, darkens so you know it's clickable)
• animation for how sidebar pulls out or contracts
• user can close out of sidebar by clicking the 'X' or anywhere else on the page (not sidebar)
• elements aligned vertically in sidebar

This should include all the customization the user has control over + the types of inputs.
Note: the toggle style of button will be its own custom component + issue.

To-Do:

• handle custom work/break session lengths
• handle volume change
• handle audio choice change
• handle calm mode toggle (handled by issue #22)
• handle background color switch (handled by issue #40)
• disable when timer running

Implement label for modes within the current Pomodoro (Pomodoro, Short Break, Long Break).

Should change upon receiving a signal to change from elsewhere as seen in models in /spec directory.

TODO

• Changing Label (Pomodoro, Short Break, Long Break)
• Keeping track of Pomodoro finished
• Being able to switch to Short & Long break correctly
• Switching back to Pomodoro after breaks
• Correct Time for each mode

Make sure we have these stats up and running:
Also make sure that we have these tested! Then check if it's been PR'd into main.

• number of pomos
• number of short breaks
• number of long breaks
• number of interruptions (pomo)
• OPTIONAL: total minutes spent working (pomo) => requires a change to local storage

Start mocking up designs
Take into account how much textual vs visual info you want. For example: should the # of pomos be the green squares we had on screen or should it be text like # work sessions: 5.

• display for number of pomos => maybe use green squares like normal display
• display for number of short breaks
• display for number of long breaks
• display for number of interruptions (pomo) => potential idea is like the green squares but with red x's or something all visual (no text)

Go through each of the following items and ensure that they do the following according to our coding standards. Use the files from the main branch.

pomo-finish.js

• variable declarations use const or let only (no var)
• global vars should always be const and in all caps (e.g. const SEC_IN_MIN = 60)
• variable names use camel case NOT underscores (e.g. let helloWorld NOT let hello_world)
• variable IDs should use hyphens (e.g. work-settings NOT workSettings)
• function names use camel case
• when possible, functions with 1-2 lines are lamda; function with 3+ lines declared with function
• this. is only used for vars that must be accessed by the control/externally
• function headers include:
  • a description of the method
  • input/output types, names, and purpose
• blocks of code have comments
• the code is easy to read/has a good flow

pomo-info.js

• variable declarations use const or let only (no var)
• global vars should always be const and in all caps (e.g. const SEC_IN_MIN = 60)
• variable names use camel case NOT underscores (e.g. let helloWorld NOT let hello_world)
• variable IDs should use hyphens (e.g. work-settings NOT workSettings)
• function names use camel case
• when possible, functions with 1-2 lines are lamda; function with 3+ lines declared with function
• this. is only used for vars that must be accessed by the control/externally
• function headers include:
  • a description of the method
  • input/output types, names, and purpose
• blocks of code have comments
• the code is easy to read/has a good flow

pomo-settings.js

• variable declarations use const or let only (no var)
• global vars should always be const and in all caps (e.g. const SEC_IN_MIN = 60)
• variable names use camel case NOT underscores (e.g. let helloWorld NOT let hello_world)
• variable IDs should use hyphens (e.g. work-settings NOT workSettings)
• function names use camel case
• when possible, functions with 1-2 lines are lamda; function with 3+ lines declared with function
• this. is only used for vars that must be accessed by the control/externally
• function headers include:
  • a description of the method
  • input/output types, names, and purpose
• blocks of code have comments
• the code is easy to read/has a good flow

pomo-tab.js

• variable declarations use const or let only (no var)
• global vars should always be const and in all caps (e.g. const SEC_IN_MIN = 60)
• variable names use camel case NOT underscores (e.g. let helloWorld NOT let hello_world)
• variable IDs should use hyphens (e.g. work-settings NOT workSettings)
• function names use camel case
• when possible, functions with 1-2 lines are lamda; function with 3+ lines declared with function
• this. is only used for vars that must be accessed by the control/externally
• function headers include:
  • a description of the method
  • input/output types, names, and purpose
• blocks of code have comments
• the code is easy to read/has a good flow

pomo-timer.js

• variable declarations use const or let only (no var)
• global vars should always be const and in all caps (e.g. const SEC_IN_MIN = 60)
• variable names use camel case NOT underscores (e.g. let helloWorld NOT let hello_world)
• variable IDs should use hyphens (e.g. work-settings NOT workSettings)
• function names use camel case
• when possible, functions with 1-2 lines are lamda; function with 3+ lines declared with function
• this. is only used for vars that must be accessed by the control/externally
• function headers include:
  • a description of the method
  • input/output types, names, and purpose
• blocks of code have comments
• the code is easy to read/has a good flow

pomo-timer-helpers.js

• variable declarations use const or let only (no var)
• global vars should always be const and in all caps (e.g. const SEC_IN_MIN = 60)
• variable names use camel case NOT underscores (e.g. let helloWorld NOT let hello_world)
• variable IDs should use hyphens (e.g. work-settings NOT workSettings)
• function names use camel case
• when possible, functions with 1-2 lines are lamda; function with 3+ lines declared with function
• this. is only used for vars that must be accessed by the control/externally
• function headers include:
  • a description of the method
  • input/output types, names, and purpose
• blocks of code have comments
• the code is easy to read/has a good flow

control.js

• variable declarations use const or let only (no var)
• global vars should always be const and in all caps (e.g. const SEC_IN_MIN = 60)
• variable names use camel case NOT underscores (e.g. let helloWorld NOT let hello_world)
• variable IDs should use hyphens (e.g. work-settings NOT workSettings)
• function names use camel case
• when possible, functions with 1-2 lines are lamda; function with 3+ lines declared with function
• this. is only used for vars that must be accessed by the control/externally
• function headers include:
  • a description of the method
  • input/output types, names, and purpose
• blocks of code have comments
• the code is easy to read/has a good flow

storage.js

• variable declarations use const or let only (no var)
• global vars should always be const and in all caps (e.g. const SEC_IN_MIN = 60)
• variable names use camel case NOT underscores (e.g. let helloWorld NOT let hello_world)
• variable IDs should use hyphens (e.g. work-settings NOT workSettings)
• function names use camel case
• when possible, functions with 1-2 lines are lamda; function with 3+ lines declared with function
• this. is only used for vars that must be accessed by the control/externally
• function headers include:
  • a description of the method
  • input/output types, names, and purpose
• blocks of code have comments
• the code is easy to read/has a good flow

pomo-dark.css

• blocks of code have comments if clarification needed
• the code is easy to read/has a good flow

pomo-light.css

• blocks of code have comments if clarification needed
• the code is easy to read/has a good flow

JS Docs

• pomo-timer.js

Getting initial packages and starter files up: Jest & Cypress.

In settings, button toggle for normal vs calm. In calm mode just minutes displayed.

We have to make an onboarding doc that explains how to work on this repo, how to see our app, and all the necessary info. It should make onboarding as clear and easy to follow as possible. This is EXTREMELY IMPORTANT to our grade.

• Architecture of the github
• explain pipeline to user
  • how do you "run" the pipeline (on push)
  • what is the linter & how do you read results
  • what is the test code base & how do you read results
  • how do you "run" the pipeline (locally)
• how are we testing
  • how do we write tests (link to doc)
  • what is Jest
    • when to use it
    • general examples
    • how to run it
  • what is Cypress
    • when to use it
    • general examples
    • how to run it
• how to add code
  • making a person branch (why you shouldn't touch main)
  • how to do a PR
• helpful git commands
• how to use/see the app

Component Content

• Current Mode
• Time Indicator
• Start/Reset Button

Public Functions

• setTimer(min: number, mode: string)
• setProgress(progress: number)
• setDark(dark: boolean)
• setCalm(calm: boolean)

Custom Events

• timerStart()
• timerFinish()
• timerReset()
• tick() -> timeRemaining: number

Testing

• Jest Unit Tests => NOT POSSIBLE W SHADOW DOM
• Cypress UI Tests
• Manual Tests

Documentation

• JSDocs (function headers)
• Code Style (camelCase, comments, etc.)

Tried to figure out how to call a function that lives in one of the component file (i.e. under source/) in a Jest file. Doesn't work. We seem to either need to check Promises or use mock but neither worked for me.

I was able to get it working in Cypress by adding export to functions in the components and then using import to pull in those functions and cy.wrap and cy.invoke to call and check them. All of those examples are in the storage-jest branch & updated on the Wiki.

Component Content

• Counters for pomos completed for long break, pomos completed in total
• Loads settings from storage and updates settings component accordingly

Public Functions

• onLoad() // Whatever method is called when page loads
• Timer.addEventListener("timerStart")
• Timer.addEventListener("timerFinish")
• Timer.addEventListener("timerReset")
• Modal.addEventListener("modalRequest")

Testing

• Jest Unit Tests
• Cypress UI Tests
• Manual Tests

Documentation

• JSDocs (function headers)
• Code Style (camelCase, comments, etc.)

Component Content

• Informational Display

Public Functions

• enableInfo()
• disableInfo()

Testing

• Jest Unit Tests
• Cypress UI Tests
• Manual Tests

Documentation

• JSDocs (function headers)
• Code Style (camelCase, comments, etc.)

Disable customization during work sessions.

• Disables buttons/input fields (not clickable)
• CSS/styling for visible disabling
  • CSS for disable & dark for pomo-info.js
  • CSS for disable & light for pomo-info.js
  • CSS for disable & dark for pomo-finish.js
  • CSS for disable & light for pomo-finish.js
  • CSS for disable & dark for input fields in pomo-settings.js
  • CSS for disable & dark for text labels??? (maybe not needed)
  • CSS for disable & dark for dropdown (sound one)
  • CSS for disable & dark for volume slider
  • CSS for disable & light for input fields
  • CSS for disable & light for text labels??? (maybe not needed)
  • CSS for disable & light for dropdown (sound one)
  • CSS for disable & light for volume slider
  • cursor changes for all on disable

Components to Disable

• set Calm Mode
• set Dark Mode
• set Sound
• set Work Session (time)
• set Short Break (time)
• set Long Break (time)

Components that will NEVER be Disabled

• set Volume

Testing

• Jest Unit Tests
• Cypress UI Tests
• Manual Tests

Documentation

• JSDocs (function headers)
• Code Style (camelCase, comments, etc.)

Dark mode can be turned on or off and it will make all the styling with darker colors. Version A is based off of Github's dark mode.

ADR: Important to add Dark Mode as many of our users may be working on assignments late at night and this is easier on their eyes. It provides less contrast so it's less stressful on the retina and less distracting. They are likely also CS students or familiar with tech and most devices/apps offer this mode so they're accustomed and expecting it.

Component Content

• Acts as interface for localStorage
• Saves/loads user settings
• Saves/loads statistics for the day

Public Functions

• getDayCount(count: number)
• setDayCount(count: number)
• getCalm(calm: boolean)
• setCalm() -> calm: boolean
• getVolume(volume: number)
• setVolume() -> volume: number
• getSound(sound: string)
• setSound() -> sound: string
• getDark(dark: boolean)
• setDark() -> dark: boolean
• getWork(work: number)
• setWork() -> work: number
• getShortBreak(shortBreak: number)
• setShortBreak() -> shortBreak: number
• getLongBreak(longBreak: number)
• setLongBreak() -> longBreak: number

Testing

• Jest Unit Tests
• Manual Tests

Documentation

• JSDocs (function headers)
• Code Style (camelCase, comments, etc.)

Have settings, stats & info all have the same button style as timer's 'start'/'reset' but with text & an icon. I'm having issues just getting a button to have text & an icon (like from https://fontawesome.com/icons/html5). I've tried importing the font awesome link in css, appending it as a link to the custom component, etc. I've tried creating a button in JS then using button.innerHTML = '<i class="fab fa-html5"></i> TEXT' but nothing is working. Try to create a button that uses an icon & text like the image below. I was initially trying to add this bar char to a 'Stats' button. Here's a post I used https://stackoverflow.com/questions/56202658/how-to-put-button-label-on-left-and-an-icon-on-the-right/56202701:

• button has text & icon
• make the button for settings: gear icon + 'Settings'
• make the button for stats: bar char icon + 'Stats'
• make the button for info: idk + 'Info`
• DO THE ADR FOR THIS (and why the timer toggle button won't have it)

• weird Window resizing (timer is visible, sidebar not hidden)
• User hits back button
• User refreshes the page
• Invalid inputs to volume/work time/break times
• Error messages to notify user they cannot do this/invalid/why
• *whatever Powell does to break PomoFocus

• Update code styling wiki
  • (1) Split wiki into sections for JS, testing, and CSS syntax
  • (2) address the new linter standards
• A few examples:
  • e.g. template vs string concatenation
  • comments have one space before
  • no trailing space, commas
  • long lines like imports should have a newline after each comma
  • no hard coded
  • all const except when variable will be reassigned (like in a loop or countdown)
• If necessary, update Testing wiki if new Jest/Cypress tests were added
  • add a note on how to choose which test to do

• keystroke for button clicks
  • hit s to start the timer
  • hit r to reset the timer
  • hit q to open sidebar
  • hit i to open info
  • hit f to open stats

ADR #1: when the user enters invalid input for any of the settings, that input should have its border color changed to red temporarily for like 1s to notify them that it wasn't allowed (input should also be set to default)

• done?

ADR #2: when a user resizes a window, how should we determine the minx/max size

• ex: should the raw width of the timer be the min (so timer and other components show up)
• ex. should we also decrease text size to make everything shrink even more
• done?

ADR #3: when user gives an invalid input, explain why we're using min/max defaults vs a mid-default

• ex: if input -1 => vol reset to 0 (the default min)
• ex. if input 10000 => vol reset to 100 (the default max)
• ex. if input 10000 or 01 => vol reset to 50 (the mid-default)
• done?

ADR #4: [this is actually a modification to a prior ADR] resetting local storage now at 12am (midnight) vs 4am because .... (@richard if you don't know why)

• done?

ADR #5: which keystrokes to use for accessibility

• space bar for toggling start/reset too easy to accidentally press so use 's' and 'r' instead
• done?

ADR #6: Update Feature Disabling

• add which features in settings we are disabling
• explain why we let sidebar open/close vs how it was before
• explain why 1 option is enabled
• done?

Each of the components, pomo-info, pomo-finish, pomo-settings, & pomo-timer should have a function setDark(dark: boolean) that determines whether or not to use a dark vs light mode. Each of the elements of the page should be given an attribute, data-mode that will be set either to dark-mode if setDark(true) or set to light-mode if setDark(false). (Powell suggested we use data attribute for this vs class). I will handle the CSS side of this but you should add this attribute to all your elements.

======================[REDACTED]======================
Example :
pomo-timer has 4 main objects that should change color: a timer text, mode label, progress squares, and button. Here's an ex of setting 1 of those objects.

  this.setDark = (dark) => {
    if (dark)
      // set dark mode
      timerText.setAttribute('data-mode', 'dark-mode');
    else {
      // set light mode
      timerText.setAttribute('data-mode', 'light-mode');
    }
  }

======================[REDACTED]======================

pomo-info.js

• has a setDark function for control to call
• changes link src to light vs dark css sheet
• has tests for togging setDark/not
• has css for dark-mode
• has css for light-mode

pomo-finish.js

• has a setDark function for control to call
• changes link src to light vs dark css sheet
• has tests for togging setDark/not
• has css for dark-mode
• has css for light-mode

pomo-settings.js

• has a setDark function for control to call
• changes link src to light vs dark css sheet
• has tests for togging setDark/not
• has css for dark-mode
• has css for light-mode

pomo-timer.js

• has a setDark function for control to call
• changes link src to light vs dark css sheet
• has tests for togging setDark/not
• has css for dark-mode
• has css for light-mode

control.js

• will change index.css somehow
• has tests
• has css for dark-mode
• has css for light-mode

Implement colors for each mode.

Pomodoro, short break, and long break should all have unique colors that clearly indicate they are different modes. Colors have not been finalized, but using placeholder colors (preferably warmer, less striking colors) will do until they are finalized, as changing over to the final colors should be simple

The tab of the browser should display both an icon and text.

• tab matches timer text (e.g. 02:13)
• tab countdowns with timer
• if in calm mode, just displays minutes (e.g. 2m)

Implement finish button to end session.

Finish button should stop the timer if its running and bring up a page of statistics containing info such as completed pomodoros. For the time being, displaying an empty page or simple page with number of pomos completed and then allowing the user to return can be enough, as statistics page isn't fully defined yet

Create a file to act as an interface for updating the text of the page tab.

To be prepared for the meeting this Thursday and the brainstorm activity, fill out Exercise 1. It goes through the Pomodoro Technique and asks that you add your thoughts on existing apps/our app.

Implement sidebar containing settings

Mainly implement smooth slide-out transition from the left side of the site. Decision to use hamburger or gear icon still pending.

Settings to fully implement TBD, but sound notifications, switching to calm mode, and choosing sounds are good choices to optionally be added in as only UI elements without true functionality, as full functionality will be most likely be implemented in later sprints.

Part of refinement stage:
(1 Story Point)

• visual/audio/tactile change with mouse hover
• visual/audio/tactile change with mouse click
• visual/audio/tactile change with mouse press

Implement timer and start/reset buttons

Timer will be set to 25 minutes initially, then change to appropriate break upon reaching 0. Shows minutes and seconds remaining.

Start button: Starts the timer and switches to a reset button, not reliant on mode.
Reset button: Resets the timer back to the starting time for the current mode, then reverts back to the start button.

• Timer decrements
• Timer resets
• Start and Reset buttons can communicate with Timer
• Start - Reset becomes a toggle button
• Toggle button communicates with Timer
• Unit Test: try weird edge cases with time (e.g. set it to 0:03, 11:59. 0:00)

Need to format the page with a grid/flex box to position timer in relation to other elements. Also have dynamic resizing to a degree.

Sounds will alert the user of if the timer just ended, if they need to take an action, potentially the last 5s on timer tick or make some sound.

The following available on the main-rtest branch:

• Cypress runs locally & via Actions
• test-pomo-timer.js : test to find timer object & elements
• test-pomo-settings.js : test to find settings object & elements
• test-pomo-info.js : test to find info object & elements
• test-pomo-finish.js : test to find finish object & elements
• add more mode, button, timer text elements to timer

• Toggle Switch functionality
• Toggle Switch UI (feedback, colors, hover)
• Circle button functionality
• Circle button UI (feedback, colors, hover)
• Main button functionality (e.g. one used for 'Start'/'Reset'/'Stats')
• Main button UI (feedback, colors, hover)

The info page should include content on the pomodoro technique & how to use our app. Please collaborate on the content/script on this Google doc prior to adding code.

• content added to Google doc
  • has content explaining the pomodoro technique
  • has content explaining how to use the app
  • may contain interactive/picture data vs straight text (e.g. show the volume slider vs describing it)
• content reviewed by group/at least 2 members
• added content to pomo-info & PR'd
• has css/styling for text

Testing

• Cypress UI Tests
• Manual Tests

Documentation

• JSDocs (function headers)
• Code Style (camelCase, comments, etc.)

Component Content

• Displays information about the mode and the time remaining

Public Functions

• setCalm(calm: boolean)
• setTab(sec: number, mode: string)
• defaultTab()

Testing

• Jest Unit Tests
• Cypress UI Tests
• Manual Tests

Documentation

• JSDocs (function headers)
• Code Style (camelCase, comments, etc.)

Part of the Finish button, should pull up stats from that session. This will be about how to save info from that session. (We might also want to save customization settings).

Modes are Pomodoro, short break, long break. Central control should dictate the mode and set the time on the clock. It may also modify the browser tab to match, CSS styling, etc.

• Central control can tell timer which mode to be in
• Timer appropriately sets time per mode
• Central control goes between modes appropriately (and when to do long break)
• Styling differs between modes
• Browser tab updated
• Timer Mode text updated

Powell suggests looking at CSS extra stuff.

• color transition during a Pomo or break

NOTE: renamed from 'Finish'

Component Content

• Modal Display
• Statistic History

Public Functions

• showModal(workCount: number: shortBreakCount: number, longBreakCount: number, interruptedCount: number, totalMinutesWorked: number)

Custom Events

• modalRequest()

Testing

• Jest Unit Tests
• Cypress UI Tests
• Manual Tests

Documentation

• JSDocs (function headers)
• Code Style (camelCase, comments, etc.)

• Lightbox works
• add text content
• check if text + Lightbox work

• set min/max widths/heights so timer text is always visible
  • Note: people in discussion said they didn't need to also see the mode
• check out mobile view
• check out window resizing
• see if we can center the timer text whenever resizing
• make sure sidebar looks good still
• what happens when user zooms in to page
• what happens when user zooms out of page

• have settings, stats, info, and the timer button all have the same button style but add an icon before it (.e.g [ > Start ])
  • https://stackoverflow.com/questions/56202658/how-to-put-button-label-on-left-and-an-icon-on-the-right/56202701
• use data-attribute to indicate light vs dark mode
• handle window resizing
• potentially re-center the timer in the window when re-sizing
• check out mobile view