Web browser time capture & store to file

There seem to be a lot of time sheet apps on the web. A lot of them have a free service and also a paid service. So you have to log in to access them and also to store your data.

There is this simple timer that just ticks along but you can’t store the information anywhere, it just has the stop watch. Not really a lot of use if you are trying to assign work time to a project.

Project requirements

So I started to look around and items that I thought would be a useful browser tool would be:

1. Works online and offline- Most people use their browser all the time, so having a tab with timer would be useful
2. It would allow it to be accessed from a mobile
3. It could store to local storage (ie Storage in browser)
4. It would need to read & write to a physical file on device (PC or mobile) where the user can choose that file (and maybe type) so that they can store information locally .
5. Item above is not as simple as it seems as it wants to store to local storage so you then have to write it from local storage to a file
6. You would need to somehow assign projects, maybe through a project list with radio buttons or a pull down list
7. Nice to add a note on what you were doing on the project.
8. Simple vanilla JS , so no Node.js or JS Query so anyone can download and use. Also if libraries are to be called they will be part of a download. I want simple code that can work on most browsers without anyone having to load too much into the page to make it work.

In fact, all the items that I went through in the exercise for Time Capture exe file that I went through. See AHK Time Capture App development article.

Information to start with

There are a few Stop Watch timers and YouTube Videos on the topic. eg , so getting the code for that is not a problem. I actually used the code from (https://code-boxx.com/simple-javascript-stopwatch/) to put in the html, I didn’t use the CSS part, just the buttons & js.

There are even some videos on getting files from local drive and saving them, via a download link , the article How can we read and write a file using JavaScript has the code to run.

This got me so far, as the code is written to Local Storage and it gives you a link, so it is only part way there, the following video takes the local storage file and makes it an actual file on your hard drive.

Another method is to use the filesaver.js library. This may be a better way to go

This one has a simple example of fileSaver.js

After getting into this project I found the issue was saving files to PC from browser. Also, if you do it on a mobile it’ll save a file to the mobile, not the PC you are doing work on.

I’d been able to save an individual duration, for a specific project, to a file, but then I ended up with multiple files that I needed to combine at some later time, or look at an automated process that would combine them into a single file and delete the original files that it combined.

The alternative was a database.

That is when I decided that the process was too sophisticated. If I was to create a free tool then it needed to be easy to setup by others and either you design the install to do a creation of a database (so you are managing the process for others) or you are at risk of others with minimal knowledge having issues setting things up.

This is when I stepped back from the project, it was becoming too complex and similar to other paid solutions.

End comment

I thought it would be a bit complex but the file storing on PC was a real issue.

Overall the build would have been too complex, but it was a good exercise to go through to get an understanding of the process. In the ends I think you needed a remote server so that you could access and store data in a database that is accessible from anywhere, which is a standard commercial process but a bit more sophisticated than I wanted.

You could use Google Sheets as an Endpoint, but that is basically a GlideApp or adding a bit of GAS coding to a Google sheet. I’d already been down that path and was not interested in pursuing that for what my main objectives.

So a PWA app was what it was ending up being and I didn’t pursue it further. An explore and failure I suppose. Just somewhere I didn’t want to spend my time and resources.