Merge pull request #12 from Involve-Digital/progress-bar

[WIP] progress bar

manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "Asana task name extension",
   "description": "Asana task name extension",
-  "version": "2.5",
+  "version": "2.6",
   "permissions": ["clipboardWrite", "storage"],
   "action": {
     "default_popup": "/popup/hello.html",
@@ -20,7 +20,14 @@
   "content_scripts": [
     {
       "matches": ["*://app.asana.com/*"],
-      "js": ["/scripts/content.js"]
+      "js": [
+        "/scripts/content.js",
+        "/scripts/progressBar.js",
+        "/scripts/mutationHandler.js",
+        "/scripts/listeners.js",
+        "/scripts/buttonUtils.js",
+        "/scripts/api.js"
+      ]
     }
   ],
   "web_accessible_resources": [

popup/hello.html

@@ -54,10 +54,11 @@ <h1 class="title">Asana task name</h1>
                     <input type="checkbox" id="crTrackingButton">
                 </li>
                 <li>
-                    <button id="save">Save</button>
+                    <label for="progressBar">Used budget bar</label>
+                    <input type="checkbox" id="progressBar">
                 </li>
                 <li>
-                    <small>Refresh page to update buttons</small>
+                    <button id="save">Save</button>
                 </li>
             </ul>
         </div>

popup/options.js

@@ -35,13 +35,20 @@ document.addEventListener("DOMContentLoaded", function () {
     }
   });
 
+  chrome.storage.sync.get("progressBar", function (data) {
+    if (data.progressBar) {
+      document.getElementById("progressBar").checked = data.progressBar;
+    }
+  });
+
   document.getElementById("save").addEventListener("click", function () {
     const togglApiKey = document.getElementById("togglApiKey").value;
     const asanaApiKey = document.getElementById("asanaApiKey").value;
     const copyButton = document.getElementById("copyButton").checked;
     const togglReportButton = document.getElementById("togglReportButton").checked;
     const trackingButton = document.getElementById("trackingButton").checked;
     const crTrackingButton = document.getElementById("crTrackingButton").checked;
+    const progressBar = document.getElementById("progressBar").checked;
 
     chrome.storage.sync.set({
       "togglApiKey": togglApiKey,
@@ -50,6 +57,13 @@ document.addEventListener("DOMContentLoaded", function () {
       "togglReportButton": togglReportButton,
       "trackingButton": trackingButton,
       "crTrackingButton": crTrackingButton,
+      "progressBar": progressBar,
+    });
+
+    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+      if (tabs[0]) {
+        chrome.tabs.reload(tabs[0].id);
+      }
     });
   });
 });

scripts/api.js

@@ -0,0 +1,87 @@
+const BASE_API_URL = 'https://involve-backend.local/api/v1';
+const TOGGL_REPORT_URL = 'https://track.toggl.com/reports/summary/1033184/description/__taskName__/period/last12Months';
+
+const handleRunTracking = async (taskName, project, tags) => {
+  const togglApiKey = await getDataFromChromeStorage('togglApiKey');
+
+  if (!togglApiKey){
+    return;
+  }
+
+  fetch(BASE_API_URL + '/asana-extension/run-tracking', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      apiKey: togglApiKey,
+      taskName,
+      project,
+      tags: tags
+    })
+  }).catch(err => console.error(err));
+};
+
+const getTaskInfo = async (taskId) => {
+  const asanaApiKey = await getDataFromChromeStorage('asanaApiKey');
+
+  if (!asanaApiKey){
+    return;
+  }
+
+  const response = await fetch(BASE_API_URL + '/asana-extension/task-information', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      apiKey: asanaApiKey,
+      taskId,
+    })
+  });
+
+  const jsonResponse = await response.json();
+
+  return jsonResponse?.data
+};
+
+const getUsedBudget = async (taskId) => {
+  const asanaApiKey = await getDataFromChromeStorage('asanaApiKey');
+  const togglApiKey = await getDataFromChromeStorage('togglApiKey');
+
+  if (!asanaApiKey || !togglApiKey){
+    return;
+  }
+
+  const response = await fetch(BASE_API_URL + '/asana-extension/time-spent', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      apiKey: asanaApiKey,
+      togglApiKey,
+      taskId,
+    })
+  });
+
+  const jsonResponse = await response.json();
+
+  return jsonResponse?.data?.usedBudget ?? null;
+};
+
+const getDataFromChromeStorage = (key) => {
+  return new Promise((resolve, reject) => {
+    chrome.storage.sync.get(key, function (data) {
+      if (chrome.runtime.lastError) {
+        reject(chrome.runtime.lastError);
+      } else if (data[key]) {
+        resolve(data[key]);
+      } else {
+        console.log('Could not get data for key: ' + key);
+        resolve(null);
+      }
+    });
+  });
+};
+

scripts/buttonUtils.js

@@ -0,0 +1,48 @@
+const ICONS_TO_BUTTON = {
+  [COPY_BUTTON_ID]: 'copy',
+  [START_TRACKING_BUTTON_ID]: 'start',
+  [START_CODE_REVIEW_TRACKING_BUTTON_ID]: 'start-cr',
+}
+
+const appendButton = (
+  elementToAppendButton,
+  id,
+  svg,
+  onClickCallback,
+  title,
+  childrenToInsertBeforeIndex = 3,
+) => {
+  const buttonExists = document.getElementById(id);
+  let button = buttonExists;
+
+  if (!button) {
+    button = document.createElement('button');
+  }
+
+  button.id = id;
+  button.innerHTML = svg;
+
+  if (title) {
+    button.title = title;
+  }
+
+  button.onclick = (e) => onClickCallback(e);
+
+  if (!buttonExists) {
+    const referenceElement = elementToAppendButton.children[childrenToInsertBeforeIndex];
+
+    elementToAppendButton.insertBefore(button,referenceElement);
+  }
+};
+
+const getSvgIcon = (name) => {
+  const svgPath = chrome.runtime.getURL('icons/' + name + '.svg');
+
+  return fetch(svgPath)
+    .then(response => response.text())
+    .catch(error => {
+      console.error('Error loading SVG:', error);
+
+      return '';
+    });
+}