Git Product home page Git Product logo

compscilauren / web-clock-time-tracker Goto Github PK

View Code? Open in Web Editor NEW
4.0 2.0 4.0 342 KB

A webapp that makes time tracking simple for associates. Find out precisely what time to clock out at the end of each day to get the hours you need. Easily track time spent on any time codes, and view the weekly summary to easily see what information you need to submit at the end of the week.

Home Page: https://web-clock-time-tracker.compscilauren.com

License: GNU General Public License v3.0

HTML 4.02% CSS 5.01% JavaScript 90.97%
web clock time in out hourly tracker

web-clock-time-tracker's Introduction

Web Clock Time Tracker

A webapp that makes time tracking simple for associates.

Find out precisely what time to clock out at the end of each day to get the hours you need. Easily track time spent on any time codes, and view the weekly summary to easily see what information you need to submit at the end of the week.

This project was bootstrapped with Create React App.

This project uses https://github.com/CompSciLauren/web-clock-time-tracker-backend for saving data.

Contributing

Contributions are always welcome! Please see our Contribution Guidelines.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

npm run build fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

web-clock-time-tracker's People

Contributors

compscilauren avatar dv297 avatar ericm96 avatar kaosiude avatar zddautenhahn0214 avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar  avatar

web-clock-time-tracker's Issues

Add a weekly view to Clock page

Is your feature request related to a problem? Please describe.
On the Clock page, there is currently only a view option for the current day. It might be nice if the user could choose to see the weekly view, where it would show Sunday through Saturday and how much time they’ve logged for each day.

Describe the solution you'd like
Add a weekly view where the user can see their time for the week so far, including their current actual time logged vs. their goal for each day. Also show a summary of how many hours left before they go into overtime.

Add a login screen

Is your feature request related to a problem? Please describe.
There is no login page for users yet.

Describe the solution you'd like
Add a login screen. This would be a new page that can be accessed in the nabber. It will say “Login” in the navbar. It should go in between the Statistics page and Log an Issue page in the navbar.

It should use a Terra card to contain the login features. And inside the card it should have a place for the user to enter their email address and password. There should also be a login button.

There should be a separate button to sign up for an account. When clicked, the login Terra card should be replaced with a signup Terra card. The signup card should have a place to enter an email address, enter a password, confirm the password, and submit.

Additional context
This GitHub Issue is for designing the page itself as well as creating the layout based on whether a user is logged in or not. User authentication on the backend has not been connected to the frontend yet, that will happen as part of #30.

Add user preferences on Profile page

Is your feature request related to a problem? Please describe.
Some of the information that needs to be added each day could be saved as user preferences, to reduce how much information has to be entered each day by the user.

Describe the solution you'd like
On the Profile page, add a new section for user preferences.

Have an option to set the “hours to work for each day of the week”. For example:
Sunday: 0 hours
Monday: 8.5 hours
Tuesday: 8.5 hours
Wednesday: 8.5 hours
Thursday: 8.5 hours
Friday: 6 hours
Saturday: 0 hours

Add user authentication

Is your feature request related to a problem? Please describe.
The login functionality works on frontend, and there is user authentication on the backend. They are not connected yet, though. They need to be connected so that users can actually create accounts.

Describe the solution you'd like
Connect user authentication on backend with login functionality on frontend.

Set a reminder does not work on desktop

Describe the bug
The "Set a Reminder" feature only works on mobile devices. It does not work on desktop.

It also does not work if you leave the Clock page to go to a different part of the website. Otherwise it works as long as you don't close the page or browser completely.

To Reproduce
Steps to reproduce the behavior:

  1. Go to Clock page
  2. Fill out time and click "Remind Me" button
  3. Once that time occurs, notice that no reminder pop-up occurs

Expected behavior
There should be some sort of pop-up reminder to let the user know that it is time to clock out.

Additional context
In the meantime, this feature has a notification banner directly above it that warns the user of this issue.

We will want to test to make sure it works:

  • When viewing the Clock page
  • When viewing a different page of the website
  • When in the browser viewing a different website, with the web clock site still open in a tab
  • When not currently looking at the browser at all, with the web clock site still open in a tab

Move Nav-Bar to its Own Component

Is your feature request related to a problem? Please describe.
I went in to see about working on a Dark Theme, the first step is adding a button to switch between themes and I noticed that there was no navbar component. I believe that it is separate enough, and contains enough to warrant its own component.

Describe the solution you'd like
Create a new component, NavBarComponent, that will contain all the pieces of the current nav-bar so that it will be easier to add pieces to it in the future. Creating this component would make the code more readable, easier to modify, and also make sense to separate in a design sense.

Describe alternatives you've considered
Keeping it as it currently is could be ok since there will likely not be much more added to the nav bar.

Additional context
I am partially making this an issue just to follow the process of creating an issue

Add Notifications API to send user an alert outside the page when alarm goes off

Is your feature request related to a problem? Please describe.
If the user is not currently on the web clock time tracker website, they will miss the alert. The alert should pop up even if the user is not currently viewing the website.

Describe the solution you'd like
Using the Notifications API, set the alarm so that it will send an alert to the user that can be seen even if the user is not currently viewing the website.

Additional context
Will want to test to make sure it works:

  • When viewing the Clock page
  • When viewing a different page of the website
  • When in the browser viewing a different website, with the web clock site still open in a tab
  • When not currently looking at the browser at all, with the web clock site still open in a tab

Add Twilio SMS reminders

Is your feature request related to a problem? Please describe.
The web app doesn’t have a built in way to handle alerts in cases where the user has closed out the website in their browser. It would be good to have a way to send a reminder to the user without needing to have the website running in the background. Most users are likely to have their phones near them, and a text reminder might be better for some users than having an alert in the browser.

Describe the solution you'd like
Add an option for users to set a reminder via text. It would be a one-time text reminder that they could set again the next day.

Additional context
We will want to eventually have the login authentication working and have this be something only signed in users can access, and with a limit on how many times it can be done per day. The limit can be something generous and high enough that no one should need it that many times in a single day, in order to prevent malicious attacks from costing too much from our resources.

Add another chart to display time code statistics

Is your feature request related to a problem? Please describe.
It might be interesting to the user if they could have a nice visual of how much time they spent on various time codes throughout the week. There is already a weekly summary showing the time code data, but having a visual graph or chart to show similar information would be a nice-to-have.

Describe the solution you'd like
Add some kind of bar chart or graph of some sort that shows users how much time they spent on each time code for the week. It would go below the weekly summary on the statistics page.

Add dark mode

Is your feature request related to a problem? Please describe.
There is only one theme available for the website currently and it is a light mode theme. It would be nice to have a dark mode option for users who prefer to use dark mode or happen to be looking at the website in some setting that would be better with dark mode.

Describe the solution you'd like
Add a dark mode option that would apply to every page on the website.

Additional context
It will be important to consider how to actually implement dark mode in a way that remains accessible and appealing to users. We will want to refer to best practices for this rather than trying to come up with the exact colors and shading on our own.

Good article on dark mode: https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/
Terra themes: https://terra-dev-si-collapsing-bn3drj.herokuapp.com/secondary-nav-test/terra-dev-site/themed

Add documentation for users

Is your feature request related to a problem? Please describe.
There is currently no documentation for users to refer to if they have a question. There should at least be a basic guide explaining the purpose of each section of every page.

Describe the solution you'd like
Create a new file, "USER-GUIDE.md". Include a table of contents at the top of the file. Have a main section for each page on the website. For each page, include a sub-section for every section of that page.

Describe alternatives you've considered
We could potentially use the GitHub Wiki associated with this repository, instead of having a markdown file.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.