add "Trek Now" button

background.js

@@ -1,12 +1,22 @@
-trektor.runtime.onMessage.addListener((msg) => {
+trektor.runtime.onMessage.addListener(async (msg) => {
   switch (msg.action) {
+    case 'track':
+      await track(...msg.args);
+      return;
     case 'addTask':
-      return addTask(...msg.args);
+      await addTask(...msg.args);
+      return;
     default:
-      return Promise.reject(new Error('unknown action'));
+      throw new Error(`unknown action: ${msg.action}`);
   }
 });
 
+async function track(cardId) {
+  const task = await addTask(cardId);
+  const response = await trektor.togglGateway.startTimeEntry(task.id);
+  return response.data;
+}
+
 async function addTask(cardId) {
   const card = await trektor.trelloGateway.getCard(cardId);
 
@@ -49,7 +59,9 @@ async function addTask(cardId) {
     throw new Error('Found multiple matching toggl projects. Not sure how to deal with that...');
   }
   const tasks = await trektor.togglGateway.getTasks(projects[0].id);
-  if (tasks.some((task) => task.name === taskName)) return;
+  const task = tasks.find((task) => task.name === taskName);
+  if (task !== undefined) return task;
 
-  await trektor.togglGateway.createTask(projects[0].id, taskName);
+  const response = await trektor.togglGateway.createTask(projects[0].id, taskName)
+  return response.data;
 }

content_script.js

@@ -1,22 +1,45 @@
 async function addButton() {
   const sidebar = await awaitSelector(".window-sidebar", 10000);
-  sidebar.querySelector(".mod-no-top-margin")?.classList?.remove("mod-no-top-margin");
-  sidebar.querySelector(".js-sidebar-add-heading")?.classList?.remove("mod-no-top-margin");
 
-  const button = document.createElement("span");
-  button.classList.add("button-link");
-  sidebar.prepend(button);
+  const module = document.createElement("div");
+  module.classList.add("window-module", "u-clearfix");
+  sidebar.prepend(module);
 
-  const buttonIcon = document.createElement("span");
-  buttonIcon.classList.add("icon-sm", "plugin-icon");
-  buttonIcon.innerText = "+";
-  button.append(buttonIcon);
+  const moduleHeading = document.createElement('h3');
+  moduleHeading.innerText = 'Trektor';
+  module.append(moduleHeading);
 
-  const buttonText = document.createElement("span");
-  buttonText.innerText = "Toggl Task";
-  button.append(buttonText);
+  const buttonList = document.createElement("div");
+  buttonList.classList.add("u-clearfix");
+  module.append(buttonList);
 
-  button.addEventListener("click", async () => {
+  const trackButton = document.createElement("span");
+  trackButton.classList.add("button-link");
+  buttonList.append(trackButton);
+
+  const trackButtonIcon = document.createElement("span");
+  trackButtonIcon.classList.add("icon-sm", "icon-clock");
+  trackButton.append(trackButtonIcon);
+
+  const trackButtonText = document.createElement("span");
+  trackButtonText.innerText = "Trek Now";
+  trackButton.append(trackButtonText);
+
+  const addButton = document.createElement("span");
+  addButton.classList.add("button-link", "add-button-link");
+  addButton.innerText = "Toggl Task hinzufügen";
+  buttonList.append(addButton);
+
+  trackButton.addEventListener("click", async () => {
+    const response = await trektor.runtime.sendMessage({
+        action: 'track',
+        args: [window.location.pathname.split('/', 3)[2]],
+    });
+
+    if (response) window.alert(response);
+  });
+
+  addButton.addEventListener("click", async () => {
     const response = await trektor.runtime.sendMessage({
         action: 'addTask',
         args: [window.location.pathname.split('/', 3)[2]],

options/script.js

@@ -1,14 +1,8 @@
-let trelloTextField = document.querySelector("input[name='trello']");
-let togglTextField = document.querySelector("input[name='toggl']");
+const fields = document.querySelectorAll("input").forEach(async (field) => {
+  field.addEventListener("input", (e) => {
+    trektor.storage.set({[e.target.name]: e.target.value});
+  });
 
-trelloTextField.addEventListener("input", onChange)
-togglTextField.addEventListener("input", onChange)
-
-function onChange(e) {
-  trektor.storage.set({[e.target.name]: e.target.value});
-}
-
-trektor.storage.get(['trello', 'toggl']).then(result => {
-  trelloTextField.value = result.trello;
-  togglTextField.value = result.toggl;
-})
+  const { [field.name] : value } = await trektor.storage.get(field.name);
+  field.value = (value === undefined) ? '' : value;
+});

trektor.js

@@ -94,7 +94,15 @@ class TogglGateway {
   }
 
   createTask(projectId, name) {
-    return this.request("post", "/tasks", { task: { name, pid: projectId } });
+    return this.request("post", "/tasks", {
+      task: { name, pid: projectId },
+    });
+  }
+
+  startTimeEntry(taskId) {
+    return this.request("post", "/time_entries/start", {
+      time_entry: { tid: taskId, created_with: "trektor" },
+    });
   }
 
   async request(method, path, data = null) {