So, recently I was looking for some sort of TiddlyWiki thingy that would let me track my working time on various projects. I have to fill out forms at the end of each month. With such tracking data in TW I could easily calculate the weekly sums and such, so that the process would be a much smaller PITA.
Since I used a calender application until now for time tracking, I started looking at hourly calenders in TW. The only useful one I found was the one by @linonetwo, which worked much like e.g. Outlook basic functionality, but comes in at a whopping ā 1.5 MB. Then I started playing around with some building blocks in TW and gradually improved on the functionality, until I arrived at a place where this does just what I need: time tracking.
Right now, the code takes about 10 KB including CSS, but not counting the date picker which I adapted from Kixamās Pickaday implementation (to get rid of the moment.js requirement). I donāt really need the date picker since Iāll be usually entering data for the current or previous day, but I have this date picker in my wikis anyway. So, why not use it?
Itās not a big step to make this into some sort of real TW calendar (basically displaying multiple days side-by-side), but Iāll stop here for now, because I donāt need another calendar.
Maybe there is some way to be able to use the mouse and $eventcatcher to drag-select multiple adjacent time slots instead of clicking each one, but I havenāt found it yet. Bonus points if you know one. That would be nice to have.
It allows you to create cumulative task timers for multiple separate projects. When you begin working on a task, you press the stopwatch āstart sessionā button, which records the start time for the task. When you stop working on a task, you press the stopwatch āstop sessionā button. This records the ending time for the task, as well as computing the elapsed time for that task and the total accumulated time for that project. You can also press the āadd/edit comment buttonā to enter a brief comment/description for that task.
While I love the idea, itās not working for me, or Iām somehow misreading the instructions. When I click on a block, nothing happens. The same thing happened when I imported everything into tiddlywiki.com, saved and reloaded.
Itās a shame, because as a start a new project at work, this might come in handy.
This worked for me once I dragged all 7 tiddlers over and reloaded. This looks really nice and would be a great addition to a lot of time tracking projects.
I am using Kixamās pikaday $edit-date widget in other projects and see that your version suffers the same visual quirk:
When you pick a date and then drop down the calendar again, the visually selected date (blue box) is one day earlier even though the right date gets selected and recorded. A purely aesthetic thing but confusing to some. I have vague recollections of a bare understanding that it was due to timezone mismatches and needed some hh:mm time at the tail of some date field set to noon/1200 rather than 0000. But I canāt find the thread again and didnāt know how to implement the fix in js at the time.
Hi @Scott_Sauyet and @Mohammad, I can confirm that it doesnāt work in Edge (and thus probably also not in Chrome). I will take a look at what the problem is ASAP and post an update.
Hi @EricShulman, I am familiar with your great time tracker, but that one is actually too much for my needs. I donāt need to track my hours very accurately, but at the end of the month I must estimate what projects I spent how much time on. What I usually do is to fill the hourly slots of a calendar about twice a day with the projects I remember working onā¦ My tool is mostly designed to relieve me of the tedious task to manually add up the hours at monthās end.
Hi @mwiktowy, what timezone are you in? Iām pretty close to UTC, so I would probably only notice irregularities during the wee hours. I did mangle Kixamās code quite a bit to handle different date formats, so I might take a look at it again. The plugin is passing the date / time to the Pickaday date picker, so it might just be a matter of correcting for time zone offsetā¦
Iām in ET ā¦ so UTC-4 or 5 depending on Standard or Daylight Savings time of year. I just checked this morning at 11am and it is showing the same glitch.
Hi @Mohammad and @Scott_Sauyet: Turns out that it was a CSS problem. Since the clickable buttons are empty, Chromium didnāt want to honor the ā100%ā height directive. Iāve hardcoded the height relative to the table row height now, and it should work. Iāll maybe make another setting for row height and font-sizeā¦
I do not see the glitch on first click on the < date > label ā¦ only after clicking on a date in the popup calendar and then clicking the < date > again and subsequent clicks. Happens in both Firefox and Chrome. Odd : [
Upon first load of the wiki, on first click of the < date > or any subsequent click if I donāt choose a date in the pop up, it looks (properly) like this:
If I select a date in the popup ā¦ even if it is the same date that is set (April 10 in this case), it looks (glitchy) like this when I pop the calendar open again:
Like I said, it always properly chooses the correct date to put in the field. This seems to be just a visual issue with the highlight showing the date before the current selection.
Hi @mwiktowy, I added a shift to the local timezone to $:/plugins/yaisog/widgets/datepicker.js, which might correct the issue for you (and everyone with āUTC-minusā timezones).
When only a date is given, this date is interpreted with a time portion of midnight UTC. So, in your time zone this would be 7 or 8 pm the day before. Pikaday likely then uses that (local) date and highlights the wrong day, but upon picking a date sets the tiddler field in UTC, so that the saved date is correct.
These timezone shenanigans are always a brain-twister. Let me know if I got it right or if I made it worse.
Hi @Scott_Sauyet, great to hear. I guess itās hard to click a button that has 0 px height. Not sure why Firefox does things different here. I was under the impression that CSS is pretty airtight these days, with little room for vendors to get creative with the specsā¦
Well ā¦ the version on your site now has a typo with āmwiā instead of āplugins/yaisogā in an initial āvar pikadayā line. So I got a red screen error of:
āError executing boot module $:/plugins/yaisog/widgets/datepicker.js: āCannot find module named ā$:/mwi/modules/libraries/pikaday.jsā required by module ā$:/plugins/yaisog/widgets/datepicker.jsā, resolved to $:/mwi/modules/libraries/pikaday.jsā
undefinedā
But once I changed that back it works perfectly! Glitch gone!
Thank you for chasing this down ā¦ it was an aesthetic pet peeve for quite some time now.
Apologies for that. I am juggling two slightly different copies of the code, where one is for the TiddlyHost site and the other one for my personal wiki. For entirely stupid reasons, both use different namespaces. Simply copy-pasting between the two without thinking can break the whole thing.
I am glad you were able to correct the error yourself. I have also corrected the copy on TiddlyHost.
My tool is mostly designed to relieve me of the tedious task to manually add up the hours at monthās end.
