Add commands to show report, reconnect to Toggl API

[leoccyao]

Adds a new command "Open report view" that opens and focuses the report view leaf.

Following the same structure as https://github.com/liamcain/obsidian-calendar-plugin/pull/275 (thanks for the fix!). Closes #146 Closes #11

[leoccyao]

Adds a new command "Refresh API Connection" to reinitiate the Toggl API connection, and also makes the status bar run a refresh on click. This is useful both for updating the sidebar report when other time entries are edited, or re-establishing a connection after a network outage.

Partially remediates #139, though does not provide a sidebar button (I personally rarely use the sidebar). It's an easy addition from here though!

[leoccyao]

Just wondering if there's any update on when my contribution can be reviewed!

[ShyamGadde]

Hey @leoccyao, thank you for this fix. I just started using this plugin, and this issue was bothering me quite a bit. I'm not sure why this hasn't been merged yet. Anyway, I copied your code into my main.js file, and everything worked as expected.

I would like to suggest a few things, if I may. It would be nice to get the notification when using the command as well, just like when clicking the status bar item. So, I tried the following, and it did the job. However, I'm not sure if this is the right way to do it.

this.addCommand({
  checkCallback: (checking) => {
    if (!checking) {
      new Notice('Reconnecting to Toggl...')
      this.toggl.setToken(this.settings.apiToken);
    } else {
      return this.settings.apiToken != null || this.settings.apiToken != "";
    }
  },
  id: "refresh-api",
  name: "Refresh API Connection",
});

Regarding the status bar item, it would be nice to get some visual indication that it is clickable and what it does. After looking at some of the native Obsidian status bar items, I tried the following, and it behaves like a button with a tooltip.

this._plugin = plugin;
this._statusBarItem = this._plugin.addStatusBarItem();
this._statusBarItem.setText("Connecting to Toggl...");
this._plugin.registerDomEvent(
  this._statusBarItem, "click", () => {
    new Notice("Reconnecting to Toggl...")
    this.setToken(this._plugin.settings.apiToken)
  }
)
this._statusBarItem.classList.add("mod-clickable")
this._statusBarItem.style.cursor = "pointer"
this._statusBarItem.setAttribute("aria-label", "Refresh Connection")
this._statusBarItem.setAttribute("data-tooltip-position", "top")

By the way, I'm quite new to this Obsidian plugin stuff, so I don't know if I'm doing something wrong or if there's a better way to do it. I was just playing around with the main.js file, and this seemed to work for me. So, do as you see fit. I'm no expert. Thanks again. Cheers.

[bfeitknecht]

can you help me out how to add the fix to the main.jsfile? i'm a bit stuck

[ShyamGadde]

Hey @bs10x,

Regarding how to setup the command, you will find more this.addCommand definitions around line 26214. Adding the above snippet after those definitions should work.

For the second part, search for the TogglService class, which should be around line 20126, and modify its constructor to look like this:

constructor(plugin) {
  this._currentTimerInterval = null;
  this._currentTimeEntry = null;
  this._ApiAvailable = "UNTESTED" /* UNTESTED */;
  this._plugin = plugin;
  this._statusBarItem = this._plugin.addStatusBarItem();
  this._statusBarItem.setText("Connecting to Toggl...");
  this._plugin.registerDomEvent(
    this._statusBarItem, "click", () => {
      new Notice("Reconnecting to Toggl...");
      this.setToken(this._plugin.settings.apiToken);
    }
  );
  this._statusBarItem.classList.add("mod-clickable");
  this._statusBarItem.style.cursor = "pointer";
  this._statusBarItem.setAttribute("aria-label", "Refresh Connection");
  this._statusBarItem.setAttribute("data-tooltip-position", "top");

  togglService.set(this);
  apiStatusStore.set("UNTESTED" /* UNTESTED */);
}

[mcndt]

Merged! Will release this in v0.12.0. Sorry for the delays.