Refactor codebase

[j1sun]

With the minimum viable product complete, we need to refactor and document the codebase to ensure it's clean.

Plan: Begin separating each class in main.js into its own components file, and update index.html accordingly with the new component. The goal is to make sure each component is individually controlled. Note that an underscore before a method indicates that the method is private. Below are the specifications for each component:

TimerApp

Do this last and keep in main.js, as it is not a web component. The primary controller. Handles big events in timer by calling on its child components at the right times.

• constructor(): creates a reference to all other components, initialize settings, create event listeners as needed
• handleStart(): handle start of timer
• handleEnd(early): handle end of timer depending on if it was ended early. Sets page title back to Pomodoro.
• handlePause(): handle pause of timer
• handleContinue(): handle continuation of timer
• cyclePhase(): cycle to next phase and return next phase
• resetPomodoros(): reset number of pomodoros completed
• playSound(): play sound for buttons
• playComplete(): play sound for completing a pomodoro or break
• confirmEnd(): create confirmation dialog for ending a pomodoro before timer expires
• confirmReset(): create confirmation dialog for resetting all pomodoros

TimerText

The timer text that counts down from 25:00. This timer inherently doesn't automatically start or stop itself. Like a countdown timer that ticks forever (almost like a pomodoro timer), this timer can be started, stopped, and set to a particular time.

• constructor(): creates timer-text with initial time of 25:00 (or testing time).
• start(): start timer and begin updating text and page title
• stop(): stop timer
• _update(): update timer status, text, and page title.
• setTime(time): set the pomodoro time to passed in time (seconds). Timer must be stopped to set time.
• get timeString(): Get the current time as a string (eg. 25:00, 10:06, 05:04, etc)

TimerButton

The timer button that runs the app. Already a component.

• constructor(): creates timer-button with START as initial text.
• set buttonText(text): sets the button's text.
• set buttonAction(action): sets function to call when button is pressed. Note: testing is needed to see if this works. If it does properly call functions, we can do the same for other components such as ConfirmDialog.

TimerInfo

Deprecated. Rather than holding TimerInfoSessions and TimerInfoProgress, just remove it in favor of the two components below.

TimerSessions

The indicator for the number of timer sessions. Currently pending on whether it should hold the current number of sessions.

• constructor(): Initializes timer-sessions
• set sessionsText(sessions): Sets the number of sessions.

TimerProgress

The progress bar for the timer and already a component. Similar to TimerText in functionality: it can start, stop, update, be set, etc.

• constructor(): creates timer-progress and sets properties
• start(phase): starts progress bar based on the given phase. Only one bar can run at a given time.
• _update(): updates running progress bar.
• stop(): stops running progress bar.
• set pomodoroTime(time): set the pomodoro time passed on (seconds). Timer must be stopped to set time.
• set breakTime(time): set the break time passed on (seconds). Timer must be stopped to set time.
• set breakText(text): set the break text passed in.
• clearPomodoroProgress(): clears pomodoro progress bar.
• clearBreakProgress(): clears break progress bar. Note: may be able to be merged with above method to create general clear() function if both are always used together.
• set pomodoroDot(complete): sets completion status of pomodoro (first) dot.
• set breakDot(complete): sets completion status of break (second) dot.
• set doneDot(complete): sets completion status of done (third) dot.

TimerSettings

Handles the settings page and dispatches events indicating updates and resets.

• constructor(): creates timer-settings and adds event listeners.
• syncSetting(updated, toUpdate): Updates corresponding number/slider when slider/number is updated.
• openSettings(): Open settings dialog.
• closeSettings(): Close settings dialog.
• updateSettings(): Dispatch settingsChanged event with new settings to TimerApp.

TimerSplash

The initial splash screen.

• constructor(): creates timer-splash screen.
• close(): close and remove splash screen (make sure to account for event listeners before calling Node.remove())

ConfirmDialog

A generic confirmation dialog. -constructor(): Initializes the confirmation dialog based on the existing template.

TaskList

TODO

Document code:

• Start after refactoring
• JSDoc for all classes, properties, and functions
• Comments in large, hard-to-understand code blocks

Checklist:

• [ ] Refactor main.js
• [ ] Document code

[j1sun]

Began refactoring by making TimerButton a web component that uses an attribute 'data-text' to update its text. No impact except for styling (which is now isolated in the web component). Currently waiting on pipeline fixes before pull requesting to master.

[j1sun]

Plan: Begin separating each class in main.js into its own components file, and update index.html accordingly with the new component. The goal is to make sure each component is individually controlled. Note that an underscore before a method indicates that the method is private. Below are the specifications for each component:

TimerApp

Do this last and keep in main.js, as it is not a web component. The primary controller. Handles big events in timer by calling on its child components at the right times.

• constructor(): creates a reference to all other components, initialize settings, create event listeners as needed
• handleStart(): handle start of timer
• handleEnd(early): handle end of timer depending on if it was ended early. Sets page title back to Pomodoro.
• handlePause(): handle pause of timer
• handleContinue(): handle continuation of timer
• cyclePhase(): cycle to next phase and return next phase
• resetPomodoros(): reset number of pomodoros completed
• playSound(): play sound for buttons
• playComplete(): play sound for completing a pomodoro or break
• confirmEnd(): create confirmation dialog for ending a pomodoro before timer expires
• confirmReset(): create confirmation dialog for resetting all pomodoros

TimerText

The timer text that counts down from 25:00. This timer inherently doesn't automatically start or stop itself. Like a countdown timer that ticks forever (almost like a pomodoro timer), this timer can be started, stopped, and set to a particular time.

• constructor(): creates timer-text with initial time of 25:00 (or testing time).
• start(): start timer and begin updating text and page title
• stop(): stop timer
• _update(): update timer status, text, and page title.
• setTime(time): set the pomodoro time to passed in time (seconds). Timer must be stopped to set time.
• get timeString(): Get the current time as a string (eg. 25:00, 10:06, 05:04, etc)

TimerButton

The timer button that runs the app. Already a component.

• constructor(): creates timer-button with START as initial text.
• set buttonText(text): sets the button's text.
• set buttonAction(action): sets function to call when button is pressed. Note: testing is needed to see if this works. If it does properly call functions, we can do the same for other components such as ConfirmDialog.

TimerInfo

Deprecated. Rather than holding TimerInfoSessions and TimerInfoProgress, just remove it in favor of the two components below.

TimerSessions

The indicator for the number of timer sessions. Currently pending on whether it should hold the current number of sessions.

• constructor(): Initializes timer-sessions
• set sessionsText(sessions): Sets the number of sessions.

TimerProgress

The progress bar for the timer and already a component. Similar to TimerText in functionality: it can start, stop, update, be set, etc.

• constructor(): creates timer-progress and sets properties
• start(phase): starts progress bar based on the given phase. Only one bar can run at a given time.
• _update(): updates running progress bar.
• stop(): stops running progress bar.
• set pomodoroTime(time): set the pomodoro time passed on (seconds). Timer must be stopped to set time.
• set breakTime(time): set the break time passed on (seconds). Timer must be stopped to set time.
• set breakText(text): set the break text passed in.
• clearPomodoroProgress(): clears pomodoro progress bar.
• clearBreakProgress(): clears break progress bar. Note: may be able to be merged with above method to create general clear() function if both are always used together.
• set pomodoroDot(complete): sets completion status of pomodoro (first) dot.
• set breakDot(complete): sets completion status of break (second) dot.
• set doneDot(complete): sets completion status of done (third) dot.

TimerSettings

Handles the settings page and dispatches events indicating updates and resets.

• constructor(): creates timer-settings and adds event listeners.
• syncSetting(updated, toUpdate): Updates corresponding number/slider when slider/number is updated.
• openSettings(): Open settings dialog.
• closeSettings(): Close settings dialog.
• updateSettings(): Dispatch settingsChanged event with new settings to TimerApp.

TimerSplash

The initial splash screen.

• constructor(): creates timer-splash screen.
• close(): close and remove splash screen (make sure to account for event listeners before calling Node.remove())

ConfirmDialog

A generic confirmation dialog. -constructor(): Initializes the confirmation dialog based on the existing template.

TaskList

TODO