Feature/5260

content_script.js

@@ -1,3 +1,11 @@
+let engine;
+
+if (window.browser !== undefined) {
+    engine = browser;
+} else {
+    engine = chrome;
+}
+
 function addButton() {
     const sidebar = document.querySelector(".window-sidebar")
     const button = document.createElement('span');
@@ -19,7 +27,6 @@ function addButton() {
 }
 
 const mappings = {
-    "Globalgold": "gg",
     "GG": "gg",
     "Audience Builder": "ab",
     "Audience Exporter": "ae",
@@ -29,110 +36,115 @@ const mappings = {
 };
 
 function onClick() {
-    let apiKey = "***"
-    //generate token at https://trello.com/1/authorize?expiration=never&scope=read,write,account&response_type=token&name=Server%20Token&key=afadffe77f745496f80ebb4bf460c615
-    let token = "af00d9597af9fb897f6b2fedb3b7152845991fe186caca08cf5dbb03bba40ffc"
-    let togglToken = "***"
-
-    const idLong = window.location.pathname.split("/")[2];
-    var url = new URL(`https://api.trello.com/1/cards/${idLong}?key=${apiKey}&token=${token}`)
-    fetch(url.toString()).then(response => response.json()).then(response => {
-        const idShort = response["idShort"]
-
-        console.log("Hallo")
-        var labelShort, labelLong = undefined
-        for (var i in response["labels"]) {
-            if (labelShort == undefined) {
-                labelShort = mappings[response["labels"][i]["name"]]
-                labelLong = (labelShort != undefined) ? response["labels"][i]["name"] : labelLong
-            } else if (mappings[response["labels"][i]["name"]] != undefined) {
-                alert(`Diese Karte hat sowohl "${labelShort}" als auch "${mappings[response["labels"][i]["name"]]}".`)
-            }
-        }
-
-        if (labelShort == undefined) {
-            alert("Diese Karte besitzt kein in den mappings vorhandenes Label.")
-            return false
-        }
-
-        if (!response["name"].endsWith(`#${labelShort}_${idShort}`)) {
-
-
-            url = new URL(`https://api.trello.com/1/cards/${idLong}`)
-
-            var data = {
-                "name": `${response["name"]} #${labelShort}_${idShort}`
-            };
-            fetch(url.toString(), {
-                method: 'PUT',
-                headers: {
-                    'Authorization': `OAuth oauth_consumer_key="${apiKey}", oauth_token="${token}"`,
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify(data)
-            }).then(response => {
-                if (!response.ok) {
-                    alert(`Error ${response.status}:\n${response.statusText}`)
-                    return false
-                }
+    let trelloApiKey = "afadffe77f745496f80ebb4bf460c615"
+    engine.storage.local.get().then(result => {
+        const trelloToken = result.trello
+        const togglToken = result.toggl
 
-            })
-
-
-        }
-
-        url = new URL("https://api.track.toggl.com/api/v8/workspaces")
-        const togglAuth = btoa(`${togglToken}:api_token`)
+        const idLong = window.location.pathname.split("/")[2];
+        var url = new URL(`https://api.trello.com/1/cards/${idLong}`)
         fetch(url.toString(), {
             headers: {
-                'Authorization': `Basic ${togglAuth}`,
+                'Authorization': `OAuth oauth_consumer_key="${trelloApiKey}", oauth_token="${trelloToken}"`,
                 'Content-Type': 'application/json'
-            }
+            },
         }).then(response => response.json()).then(response => {
-            for (var i in response) {
-                if (response[i]["name"] == "aboutsource") {
-                    var wid = response[i]["id"]
+            const idShort = response["idShort"]
+
+            var labelShort, labelLong = undefined
+            for (var i in response["labels"]) {
+                if (labelShort == undefined) {
+                    labelShort = mappings[response["labels"][i]["name"]]
+                    labelLong = (labelShort != undefined) ? response["labels"][i]["name"] : labelLong
+                } else if (mappings[response["labels"][i]["name"]] != undefined) {
+                    alert(`Diese Karte hat sowohl "${labelShort}" als auch "${mappings[response["labels"][i]["name"]]}".`)
                 }
             }
-            if (wid == undefined) {
-                alert("WorkspaceID undefined\nDies bedeutet, du hast entweder keinen Zugriff zum a:s toggl oder es ist kein API-Token angegeben.")
+
+            if (labelShort == undefined) {
+                alert("Diese Karte besitzt kein unterstütztes Projekt Label.")
                 return false
             }
 
-            url = new URL(`https://api.track.toggl.com/api/v8/workspaces/${wid}/projects`)
+            if (!response["name"].endsWith(`#${labelShort}_${idShort}`)) {
+
+
+                url = new URL(`https://api.trello.com/1/cards/${idLong}`)
+
+                var data = {
+                    "name": `${response["name"]} #${labelShort}_${idShort}`
+                };
+                fetch(url.toString(), {
+                    method: 'PUT',
+                    headers: {
+                        'Authorization': `OAuth oauth_consumer_key="${trelloApiKey}", oauth_token="${trelloToken}"`,
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify(data)
+                }).then(response => {
+                    if (!response.ok) {
+                        alert(`Error ${response.status}:\n${response.statusText}`)
+                        return false
+                    }
+
+                })
+
+
+            }
+
+            url = new URL("https://api.track.toggl.com/api/v8/workspaces")
+            const togglAuth = btoa(`${togglToken}:api_token`)
             fetch(url.toString(), {
                 headers: {
                     'Authorization': `Basic ${togglAuth}`,
                     'Content-Type': 'application/json'
                 }
             }).then(response => response.json()).then(response => {
                 for (var i in response) {
-                    if (response[i]["name"].endsWith(`(${labelShort})`)) {
-                        var pid = response[i]["id"]
-
-                        url = new URL('https://api.track.toggl.com/api/v8/tasks')
-                        data = {
-                            "task": {
-                                "name": `${labelShort}_${idShort}`,
-                                "pid": pid
+                    if (response[i]["name"] == "aboutsource") {
+                        var wid = response[i]["id"]
+                    }
+                }
+                if (wid == undefined) {
+                    alert("WorkspaceID undefined\nDies bedeutet, du hast entweder keinen Zugriff zum a:s toggl oder es ist kein API-Token angegeben.")
+                    return false
+                }
+
+                url = new URL(`https://api.track.toggl.com/api/v8/workspaces/${wid}/projects`)
+                fetch(url.toString(), {
+                    headers: {
+                        'Authorization': `Basic ${togglAuth}`,
+                        'Content-Type': 'application/json'
+                    }
+                }).then(response => response.json()).then(response => {
+                    for (var i in response) {
+                        if (response[i]["name"].endsWith(`(${labelShort})`)) {
+                            var pid = response[i]["id"]
+
+                            url = new URL('https://api.track.toggl.com/api/v8/tasks')
+                            data = {
+                                "task": {
+                                    "name": `${labelShort}_${idShort}`,
+                                    "pid": pid
+                                }
                             }
+                            fetch(url.toString(), {
+                                method: 'POST',
+                                headers: {
+                                    'Authorization': `Basic ${togglAuth}`,
+                                    'Content-Type': 'application/json'
+                                },
+                                body: JSON.stringify(data)
+                            })
                         }
-                        fetch(url.toString(), {
-                            method: 'POST',
-                            headers: {
-                                'Authorization': `Basic ${togglAuth}`,
-                                'Content-Type': 'application/json'
-                            },
-                            body: JSON.stringify(data)
-                        }).then(response => {
-                            console.log(response)
-                        })
                     }
-                }
+                })
             })
-        })
 
+        })
     })
+
+
 }
 
 window.addEventListener("pushstate", function () {

manifest.json

@@ -4,7 +4,7 @@
   "description": "Browser-Extension zum automatischen Anlegen von Toggl tracking tasks",
   "version": "0.0.1",
   "icons": {
-    "64": "icons/icon.png"
+    "64": "icons/64.png"
   },
 
   "content_scripts": [
@@ -20,7 +20,8 @@
 
   "permissions": [
     "*://api.trello.com/*",
-    "*://*.toggl.com/*"
+    "*://*.toggl.com/*",
+    "storage"
   ],
 
   "options_ui": {

options/index.html

@@ -1,11 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <link rel="icon" href="icons/64.png">
+    <title>Trektor settings</title>
     <meta charset="UTF-8">
     <link href="style.css" rel="stylesheet" />
   </head>
-  <body>
-    <h1>Extension settings</h1>
+  <body class="browser-style">
+    <h2>Trektor settings</h2>
+
+    <a href="https://trello.com/1/authorize?expiration=never&scope=read,write,account&response_type=token&name=Trektor&key=afadffe77f745496f80ebb4bf460c615">
+      Trello Token generieren</a><br>
+    <input type="text" id='trello_token' class="browser-style" aria-label="Trello Token"/><br><a href="https://track.toggl.com/profile">Toggl Token (ziemlich weit runter scrollen)</a> <br>
+    <input type="text" id="toggl_token"/><br><br><br>
     <script src="script.js"></script>
   </body>
 </html>

options/script.js

@@ -1 +1,27 @@
-//extension settings script
+let engine;
+
+if (window.browser !== undefined) {
+    engine = browser;
+} else {
+    engine = chrome;
+}
+
+const trelloTextField = document.querySelector("#trello_token")
+const togglTextField = document.querySelector("#toggl_token")
+
+trelloTextField.addEventListener("input", onChange)
+togglTextField.addEventListener("input", onChange)
+
+function onChange() {
+    engine.storage.local.set({
+        "trello": trelloTextField.value,
+        "toggl": togglTextField.value
+    })
+    console.log(`set trello token to ${togglTextField.value}`)
+    console.log(`set toggl token to ${togglTextField.value}`)
+}
+
+engine.storage.local.get().then(result => {
+    trelloTextField.value = result["trello"]
+    togglTextField.value = result["toggl"]
+})