thamara / time-to-leave

Log work hours and get notified when it's time to leave the office and start to live.
http://timetoleave.app
GNU General Public License v3.0
463 stars 272 forks source link

Improve preferences interface - hours worked & break time fields #915

Closed jonstod closed 1 year ago

jonstod commented 1 year ago

Related issue

Closes #914

Context / Background

Hello, I am a first time contributor and I would greatly appreciate any feedback - please let me know if you have any suggestions! Thank you.

To improve user experience it is possible to utilize an HTML combo box in the preferences interface, which provides the user with selected options for hours worked and break times, while also preserving their ability to enter custom values or more obscure time durations. Currently, the user has to somewhat infer that they must enter a duration in the format HH:MM specifically, though they are currently notified when their entered values do not meet the required format.

What change is being introduced by this PR?

Originally my intent was to add the capability of the hours worked and break time fields to take custom inputs in formats other than HH:MM, such as a single digit hour amount or a decimal amount (8.5 converting to 08:30). I was unable to trace inputs and their respective validity checks to a specific function in the code, and I assume this is an Electron or JQuery feature which I am unfamiliar with. An easy HTML solution I was able to implement is to use combo boxes in /src/preferences.html, which act as a dropdown while preserving the ability to enter custom values. This involves simply specifying "list" in the relevant HTML input lines and specifying a datalist which contains any template/selectable values. Background on this functionality: https://www.educba.com/combobox-in-html/ . The dropdown, however, overlaps the "Please match the requested format" alert and this could be further improved upon.

How will this be tested?

The Jest test suites show no changes in coverage, rendering, updating of variables, or any other observable field. Manual testing also shows that both when selecting a value from the dropdown field or entering a value into the text box, that value passes validity checks and is saved upon closing the preferences interface.


codecov[bot] commented 1 year ago

Codecov Report

Merging #915 (58c342d) into main (4b171fb) will increase coverage by 1.99%. The diff coverage is n/a.

@@            Coverage Diff             @@
##             main     #915      +/-   ##
==========================================
+ Coverage   71.45%   73.44%   +1.99%     
==========================================
  Files          17       17              
  Lines        1755     1755              
  Branches      278      278              
==========================================
+ Hits         1254     1289      +35     
+ Misses        501      466      -35     
Impacted Files Coverage Δ
js/notification.js 39.02% <0.00%> (-4.88%) :arrow_down:
js/classes/BaseCalendar.js 57.25% <0.00%> (+1.90%) :arrow_up:
js/classes/FlexibleMonthCalendar.js 60.41% <0.00%> (+4.16%) :arrow_up:
js/classes/FlexibleDayCalendar.js 65.01% <0.00%> (+6.36%) :arrow_up:

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

tupaschoal commented 1 year ago

Hi @jonstod, welcome to the project!

Can you elaborate on why the PR is marked as draft?

Thanks!