website-zola/content/posts/basic-javascript.md

+++
title = 'Learning basic JavaScript with Obsidian'
date = "2024-10-08"
updated = 2024-10-08
[taxonomies]
tags = ['programming', 'Obsidian', 'JavaScript']
+++


# Obsidian
For a little while now, I have been using Obsidian for my note taking .✍️. So far, it's been great: I love the Neovim-support, the idea and use of backlinks, the different ways in which you can arrange and use the sidepanes, adding custom states to tasks.

# Tracking hours
As I started using Obsidian more and more, especially for my work as a SOC security analyst, I started wondering if I could 'stay' in Obsidian as much as possible, even including things like hour sheets into my workflow. I was happy to find this offline, fast and intuitive plugin, [ObsidianSimpleTimeTracker](https://github.com/Ellpeck/ObsidianSimpleTimeTracker). Incorporating this into my daily notes with a simple template, I am able to open my Obsidian vault, create a new daily note (which is automatically given the current date as the file name) and start recording my hours per task and project ⏰. Great!

# Overview
There was one thing missing though, something you definitely need when tracking hours: an overview. Of course I could sift through all the daily notes, but maybe I could create a dynamic overview of the hours worked per project per day somehow? The [Github-repo of ObsidianSimpleTimeTracker](https://github.com/Ellpeck/ObsidianSimpleTimeTracker#-tracker-data-in-dataview) has a handy example of how to load time tracker data in your vault and print the duration. I just had to rework this example to fit my needs. How hard could it be?

# JavaScript
First off, I don't know any JavaScript 🙈. It's a gap in my (beginner) programming skill set I hope to fill one day. But for the moment, I had nothing to go off, but to think of how I would solve this problem in a language I am more familiar with, like Python 🐍. After a few days of fiddling around, I got stuck on a for loop issue. I was able to iterate through the entries (duration of tracked work) and entry names (name given to tracked work, like a project) of each tracker in my daily notes. 

# Stuck in a loop
But for some reason, I **wasn't** able to do both after each other ➰. Finally, I found a solution: I had to do both at the same time 🙃 Basically, I found an answer without understanding the answer 💢. But, for the time being, a quick and dirty solution to my very personal problem is good enough. As I start learning JavaScript, I could reinvestigate this script further. For now, here is the code I have, which I still have to edit [per the very nice and helpful comments the creator of the ObsidianSimpleTimeTracker-plugin gave me](https://github.com/Ellpeck/ObsidianSimpleTimeTracker/issues/58).

# Code
The next thing would be to build this out to a neat table, to actually give the overview that I want (this still produces a list that is too long). Perhaps `dv.table` could take an array of data (tracker entry name, tracker entry duration) that I collect beforehand, and display that. There's always room for improvement 👷.

```js
let api = dv.app.plugins.plugins["simple-time-tracker"].api;

for(let page of dv.pages('#tijd-bijhouden').sort(p => p.file.name, 'desc')) {
	// load trackers in the file with the given path
	
	let trackers = await api.loadAllTrackers(page.file.path);
	
	if (trackers.length)
	dv.el("strong", "Trackers in: " + page.file.name);

    for (let {section, tracker} of trackers) {
        let number_of_trackers = trackers.entries.length;
        for (let i = 0; i < alltrackers; i++) {
            if (tracker.entries[i])
                dv.el('p', 'doel: ' + tracker.entries[i]['name'] + '<br>' + 'tijdsduur: ' + api.formatDuration(api.getDuration(tracker.entries[i])))
        }
    }
}
```