components

Pomodoro Timer Web Component Structure

Public Functions should be implemented by using functions in the component.

Custom Events should be implemented by adding a custom event, and dispatching it when the specified item occurs.

Timer

Component Content

• Current Mode
• Time Indicator
• Start/Reset Button

Public Functions

• setTimer(min: number, mode: string)
  • Set the timer length and mode
  • Should have no effect when timer is currently running
• setProgress(progress: number)
  • Set the number of progress dots, between 0 and 4
• setCalm(calm: boolean)
  • Determines if the seconds should be included in the tab
• setDark(dark: boolean)
  • Determines if color scheme should change to dark mode vs light mode
• changeTransform(transformText: string)
  • For transforming the whole object

Custom Events

• timerStart()
  • Dispatched when timer begins
• timerFinish()
  • Dispatched when timer hits 0:00
• timerReset()
  • Dispatched when timer is reset
• timerTick() -> timeRemaining: number
  • Routinely called under setInterval to decrement timer
  • Returns the number of seconds remaining

Settings

Component Content

• Sliding Display
• Input Fields for Various Settings

Public Functions

• enableSettings()
  • Allows all settings to be modified (used when timer is stopped)
• disableSettings()
  • Prevents timer-related settings from being modified (used when timer is running)
• loadSettings(calm: boolean, volume: number, sound: string, dark: boolean, work: number, shortBreak: number, longBreak: number, access: boolean)
  • Set all the current input values to the states loaded by storage
• changeTransform(buttonText, panelText, leftOffset)
  • For transforming the open button, sidebar and give a left offset of the sidebar
• setDark(dark: boolean) - Changes styling to dark or light mode
• setAccessibility(enabled: boolean)
  • Determines whether we can open info, setting, stats

Custom Events

• calmSet() -> calm: boolean
  • Dispatched when calm setting is changed (true/false)
• volumeSet() -> volume: number
  • Dispatched when volume level is changed (0 to 100)
• soundSet() -> sound: string
  • Dispatched when sound selection is changed (sound name)
• darkSet() -> dark: boolean - Dispatched when dark mode is changed (true/false)
• workSet() -> work: number
  • Dispatched when work mode length is changed (1 to 59)
• shortBreakSet() -> shortBreak: number
  • Dispatched when short break mode length is changed (1 to 59)
• longBreakSet() -> longBreak: number
  • Dispatched when long break mode length is changed (1 to 59)
• accessSet() -> accessible: boolean - Dispatched when keyboard shortcut accessibility is changed (true/false)

Info

Component Content

• Informational Display

Public Functions

• enableInfo()
  • Allows info to be opened (used when timer is stopped)
• disableInfo()
  • Prevents info from being opened (used when timer is running)
• setDark(isDark: boolean)
  • Determine the styling depending on the mode is light or dark
• changeTransform(transformText: string)
  • For transforming info button
• setAccessibility(enabled: boolean)
  • Determines whether we can open info, setting, stats

Statistics/Finish

Component Content

• Modal Display
• Statistic History

Public Functions

• showModal(workCount: number: shortBreakCount: number, longBreakCount: number)
  • Display modal with given statistics
• setDark(isDark: boolean)
  • Determine the styling depending on the mode is light or dark
• changeTransform(transformText: string)
  • For transforming the button
• setAccessibility(enabled: boolean)
  • Determines whether we can open info, setting, stats

Custom Events

• modalRequest()
  • Causes a statistic request from the control
    • Should be fired when Statistics button is pressed

Control

Component Content

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

Storage

Component Content

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

Public Functions

• getDayCounts(counts: object)
  • Load the counts for the current day
  • Default to 0 if the no previous count
  • Default to 'interrupts: 0, longBreak: 0, shortBreak: 0, work: 10' if the no previous count
• setDayCounts(counts: object)
  • Store the counts of the current day
    • Takes in objects in the form of (#,#,#,#)
• getCalm(calm: boolean)
  • Get the current value for calm
• setCalm() -> calm: boolean
  • Set the current value for calm
• getVolume(volume: number)
  • Get the current value for volume
• setVolume() -> volume: number
  • Set the current value for volume
• getSound(sound: string)
  • Get the current value for sound
• setSound() -> sound: string
  • Set the current value for sound
• getDark(dark: boolean)
  • Get the current value for dark
• setDark() -> dark: boolean
  • Set the current value for dark
• getWork(work: number)
  • Get the current value for work length
• setWork() -> work: number
  • Set the current value for work length
• getShortBreak(shortBreak: number)
  • Get the current value for short break length
• setShortBreak() -> shortBreak: number
  • Set the current value for short break length
• getLongBreak(longBreak: number)
  • Get the current value for long break length
• setLongBreak() -> longBreak: number
  • Set the current value for long break length
• getAccessibility(accessible: boolean)
  • Get the current value for accessibility
• setAccessibility() -> accessibility: boolean
  • Set the current value for accessibility
• getMode(mode: string)
  • Get the current timer mode
• setMode() -> mode: string
  • Set the current timer mode

Tab

Component Content

• Displays information about the mode and the time remaining

Public Functions

• setCalm(calm: boolean)
  • Determines if the seconds should be included in the tab
• setTab(sec: number, mode: string)
  • Sets the tab display using the time remaining and current mode
• defaultTab()
  • Resets browser tab title to the default "Pomodoro Timer"

Sound/Audio

Component Content

• Plays sounds when a time session is complete
• Has adjustable volume and source controls

Public Functions

• enableSound()
  • Allows the sound to be played (not currently used)
• disableSound()
  • Prevents the sound from being played (not currently used)
• playSound()
  • Play the current sound at the current volume
• setVolume(volume: number)
  • Set the volume of the audio component
• setSound(sound: string)
  • Set the location of the sound to be played

Resize

Component Content

• Resize the components according to window resize and tone for mobile user

Public function

• resizeElements ()
  • Resize every elements according to the window width and height, called when 'resize' or 'load' event is called

Toggle

Component Content

• Toggle slider that controls modes

Public Functions

• setDark(dark: boolean)
  • Toggles light/dark color scheme for toggle switch

Custom Events

• toggleSwitch()
  • Dispatched when toggle is switched