mzrimsek / track-my-playtime

A time tracking app for video games.

TrackMyPlaytime

A time tracker app specific to video games.

Detailed information on the application structure can be found here: https://mzrimsek.github.io/track-my-playtime/

Technologies

• Angular (via angular-cli)
• RxJS
• Redux (via NGRX)
• Firebase (via @angular/fire)
• TravisCI
• FontAwesome (via angular-fontawesome)
• D3 (via ngx-charts)
• CompoDoc

Development

• Start the dev server: ng serve
• Run karma tests: ng test
• Run karma tests in headless mode: npm run test:mocha
• Run karma tests in headless mode the fun way: npm run test:nyan

Contributors

• ssnjrthegr8 - Made the awesome logo

track-my-playtime's Issues

Add Google Analytics

Goal is to gather statistics on how users use the application to assist in future improvements to the overall experience.

• Configure Google Tag Manager for dev environment
• Configure Google Tag Manager for prod environment
• Configure injecting environment specific tracking code into index.html
• Add tags for tracking page views (direct navigation/route changes) in dev
• Add tags for tracking UI interaction (buttons, inputs, links, etc) in dev
• Export tags from dev environment to prod environment
• Update technologies in README

Add a few ads to support hosting

I don't want it to go overboard, but maybe an ad or two, hopefully to cover maintenance.

Upgrade to Angular 6

I will need to make sure all of my dependencies will work with Angular 6...I am holding off on this for a just a tad longer.

Landing Page Needs Information About Website

The landing page needs to explain the site to people so they actually sign up for it and don't just leave the page.

Authenticate with Facebook Account

Users should be able to sign up/login with their Facebook account.

• Configure Firebase provider
• Configure Facebook OAuth for dev environment
• Configure Facebook OAuth for prod environment
• Add Facebook login action, reducer case, and effect
• Add Facebook login button in LoginComponent
• Add Facebook sign up button in RegisterComponent

General mobile friendliness improvements

The mobile experience could use possible improvements: avoiding text overlapping, smaller font sizes, maybe putting the sidebar in a toggle-able menu for more room.

Add Initial Data Visualization Dashboard

This feature is purely for the initial release. Charts will be limited to the last 7 days of data to start.

• Create Dashboard feature module
• Add child route to '/app' in TrackerAppRoutingModule
• Add navigation option in NavComponent
• Install and configure ngx-charts in DashboardModule
• Add total time played vs day chart
• Add total time played vs platform chart
• Add total time played vs game chart
• Update technologies in README
• Make it look nice

Create Logo and Update Favicon

This project needs a logo to give it some more character.

Additionally the favicon is still the default Angular icon and should ideally be updated to whatever the logo is.

• Create logo
• Add logo to HeaderComponent
• Add logo to NavComponent
• Add logo to README
• Update favicon

Better Error Handling in Services

Currently when an error is thrown inside of one of the services, errors are logged to the console. Ideally these errors should be sent to the error state, similar to how errors are currently handled inside of the effects.

Add options to choose different date ranges to view data in graphs

Currently just shows the current week's data.

• Options to view previous week's data
• Options to view current month's data
• Options to view previous month's data
  Option to view custom date range of data

Allow users to add non-tracked games to library

Display "No Data To Show" when graph is empty rather than just having an empty graph

Would be more informative to have some message instead of just blank graphs.

Take timezones into account when saving/displaying entries

Not sure if this is worth the effort as dealing with timezones would significantly increase complexity in general since the entire app is based around time tracking.

The issue stems around the fact that if you track an entry in one timezone, then change timezones and view the data and the times will appear to be off even though they are correct for the current timezone.

I'm not sure if it's worth it to keep entries timezone specific so the data is displayed consistently at all times (because dealing with timezones is a PITA because of how many contingencies there are).

This is untested, but what happens if you start in one timezone and stop in another?

Will likely just enforce that all entries will be made in a user specified timezone, instead of making it a piece of data on a history entry (will just a user setting taken into account when displaying data).

Will likely need to use UTC time if not already. Something to look into.

Custom date range on dashboard

This is a potential feature addition for the dashboard. This will be revisited once the reports feature is added.

Store Active Timer State in Firestore

Currently if a user refreshes the page with an active timer they will lose their timer information.

• Timer state should only be stored when it is active
• Updates to an active timer should also update timer state in Firestore
• Stopping or cancelling an active timer should clear the timer state in Firestore

• Add Firestore security rules for '/timer' collection
• Add TimerService to handle sending data to and from client and Firebase
• Add actions, reducer cases, and effects

Game detail page

When you click on a game in the dashboard (time vs game graph) or library it should take you to a page that gives details for a game with history, total time played (with breakdown by platform), and maybe a small graph that shows activity over the past year.

• Platform vs time pi chart
• Day vs Time line graph for past year
• First played & last played

Add coveralls

I want to be able to see code coverage reported so I know I'm keeping things good in the project

Reports feature for more advanced data comparison

Still in planning stages, but this would be more for comparing time spent playing games this month vs a previous month, or possibly a range of time.

Might also have things like a heatmap of when a user is most often playing games during the week, hopefully utilizing both start time, end time, and day of the week.

Allow users to add ratings to games in library

Should display rating in library and make it a sortable column as well

Show platforms in library table row

It would be cool to see what platforms you have a game for since some are on multiple platforms.

It also might be cool to have a modal that pops up when you click on a row that breaks down playtime and whatnot by platform and then maybe a line graph of activity kinda like how github does with repositories on your profile.

Sort dashboard game vs time graph in descending order

It will make it easier to see what your most played game is at a glance if they are in order from biggest to smallest

Navigation links only activate when text is clicked

As seen in the NavComponent list and the HeaderComponent login button.

These elements have a large "button" area, but the links only activate when the actual text or icons are clicked.

The entire area of the "button" should activate the link.

Figure out an easier way to update platforms in Firebase

Adding or modifying platforms is really tedious and painful right now. Figure out a way to make it not terrible and less error prone.

Likely this means adding an admin panel that only specific users can access based on userId.

Timer Information Should be Able to Autopopulate From Previous Entries

If previously I have been playing Destiny 2 on Battle.net, when I start typing "Destiny 2" in the timer game input, a list of candidate matches should popup that allow you to select and autofill both timer game and timer platform.

Library feature

Feature to list out all games that have entries (organized by platform) with data on total time played, first played on, and last played on

Maybe some other interesting data as well?

Potentially includes an option to rate the game. Given enough ratings it may be possible offer recommendations for games not included in the library?

Completion Details Page

There should be a button that says "more info" or "stats" on completed entry that routes to a page with details.

• Day vs time line graph for days in range of start and end
• Game, platform, start time, end time, total time
• Day of week vs time bar graph

Recording without a title or platform still adds an entry?

Not sure if this is an undesired behavior. Should title and/or platform be required in order to record?

Show a loading screen until all user data is loaded

It would look better if all the data was loaded before showing anything to the user. It would represent probably a second or two of a loading screen, but after that everything would be completely responsive.

Could probably just do something like the loading spinner, and then remove the loading spinner from most (maybe all) of the places it's currently being used.

Only load a portion of tracker data with button to load more

Only the last X amount of entries should be loaded initially. Button at bottom of list should be added to load the next X amount of entries. When all entries are loaded the button should not be displayed.

Logo Proposal

Hi, can I contribute by designing a logo for this project?

Games Completed Feature

This is in planning still...

• Be able to mark when you started a game you are tracking, and then subsequently when you have finished it
• This would allow for creating stats on how long it took to finish, what days, months, etc you played

Timer Pause Button

I'm undecided on whether this is more desirable than just stopping and making another entry, but I'll put an issue here so I think about it some more.

"Go to Tracker" link in home page header when user is logged in

This would be a nice feature in the event that a user navigates back to the home page while logged in.

Dashboard Date Graph should be a line graph

It's sequential data so I think a line graph will make more sense.

Improve Styling

I know parts of the website as it is right now are not styled the best. I believe it is passable for the most part, but likely could better.

I would like to fix up what I have first, potentially with site wide mobile styles, so that future additions will have a reference for how to make more maintainable styles going forward.

• Home/Login styles
• Timer/History styles
• Mobile Friendly ( #49 )

Authenticate with Email and Password

Users should be able to sign up/login with a provided email and password.

• Configure Firebase provider
• Add RegisterComponent
• Add email register actions, reducer cases, and effects
• Add email login actions, reducer cases, and effects
• Add fields for email and password in LoginComponent
• Add change password actions, reducer cases, and effects
• Add forgot password link to LoginComponent
• Proper login/register form validation
• Add user profile component
• Update display name for all users
• Password change/reset email for email users
• Show default data on navbar, unless user has updated their data (can't show display name and picture on bottom of nav if there isn't anything!)
• Make it look pretty
• Add tests

Add e2e testing

Need to add a suite of end to end tests to verify functionality...this may need to wait until after #14 is finished to make it easier to programmatically log into the site.

Title of window should update to elapsed time if timer is active

It would be cool if the elapsed time showed up on the title of the window so users could have different tabs open, but also be able to see the time at a glance.

I believe this would make the most sense to only happen when the the user is on the tracker route.

Add Firestore Data Validation Rules

Having data validation to make sure there's no junk or extra data being sent to the database seems like a good idea.

Use an API to auto-populate game titles

Would be cool if we could get exact and consistent game titles, maybe using an API like IGDB.

Day Detail Page

When you click on a day on the date vs time dashboard graph it should take you to a page that has a history and total time with breakdown of the day by game and platform.

• Game vs time bar graph
• Platform vs time bar graph

History entry timer start shortcut

History entries should have a button that will set start the timer with the game and platform from that history entry.

Add Tests

I have been slacking on writing tests for any of the code in this project...as in there are literally no tests in the project (at the time of writing this issue).

Once existing code is all tested, the goal will be to add tests in tandem with any other new code.

• Components
• Effects
• Reducers/Selectors
• Helpers/Utils
• Actions
• Services
• Guards
• Pipes
• Run tests on Travis

Autopopulate Platform from Previous Entries

Currently can populate the game field, but not the platform one. Basically am currently unsure if I want this functionality, but I think it could be useful in the future.

Add pagination to library feature

Having a huge list of games is cool, but scrolling is tedious.

Optimize Firestore Calls with Queries

There may be instances where I am pulling more data than is necessary. Making an issue for this so I have it to remember it may be something I can do to optimize how much data I'm sending/receiving in the future.

Reference: https://github.com/angular/angularfire2/blob/master/docs/firestore/querying-collections.md

Allow users to add own platform options

Likely this would mean combining a list of user platforms with the existing platforms list.

Users should be able to manage the platforms from their profile page.

Refactor tests

I have a lot of duplicate test setup code that I have copy and pasted many times to different files. I need a centralized test utility file that generates test objects so it's not painful to update things.

Platform detail page

When you click on a platfrom in the dashboard (time vs platform graph) or library it should take you to a page that gives details for a platform with history, total time played (with breakdown by game), and maybe a small graph that shows activity over the past year.

• Game vs time pi chart
• Day vs Time line graph for past year
• First played & last played

Refactor Shared Slices of State

For slices of state that are shared between features, they should be in a place that is...shared. Probably the shared module.

Opening a separate issue because it's a large enough task to warrant it's own branch and I've already done too much restructuring in the branches I'm working on currently.