Working options page
This commit is contained in:
Ian Gulliver
@@ -12,9 +12,9 @@
|
|||||||
|
|
||||||
"permissions": [
|
"permissions": [
|
||||||
"clipboardRead",
|
"clipboardRead",
|
||||||
"storage",
|
"storage",
|
||||||
"unlimitedStorage",
|
"unlimitedStorage",
|
||||||
"<all_urls>"
|
"<all_urls>"
|
||||||
],
|
],
|
||||||
|
|
||||||
"browser_action": {
|
"browser_action": {
|
||||||
@@ -32,6 +32,10 @@
|
|||||||
"scripts": ["background.js"]
|
"scripts": ["background.js"]
|
||||||
},
|
},
|
||||||
|
|
||||||
|
"options_ui": {
|
||||||
|
"page": "options.html"
|
||||||
|
},
|
||||||
|
|
||||||
"browser_specific_settings": {
|
"browser_specific_settings": {
|
||||||
"gecko": {
|
"gecko": {
|
||||||
"id": "{073d8528-4b24-11ed-9b73-c71d3da4ab37}"
|
"id": "{073d8528-4b24-11ed-9b73-c71d3da4ab37}"
|
||||||
|
|||||||
17
options.css
Normal file
17
options.css
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
body {
|
||||||
|
margin: 10px;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
font-family: monospace;
|
||||||
|
width: 53ch;
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
34
options.html
Normal file
34
options.html
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<link rel="stylesheet" href="options.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div>
|
||||||
|
<ul>
|
||||||
|
<li>Click <a href="https://app.asana.com/0/my-apps">here</a></li>
|
||||||
|
<li>Click "+ Create new token"</li>
|
||||||
|
<li>Type "Quick Asana" in the "Token name" field</li>
|
||||||
|
<li>Check the box next to "I agree to the API terms and conditions"</li>
|
||||||
|
<li>Click "Create token"</li>
|
||||||
|
<li>Click "Copy"</li>
|
||||||
|
<li>Return to this tab</li>
|
||||||
|
<li>Paste the token into the field below</li>
|
||||||
|
</ul>
|
||||||
|
Personal access token: <input type="text" id="token">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
Workspace: <select id="workspace"></select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
Assignee: <select id="assignee"></select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="options.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
110
options.js
Normal file
110
options.js
Normal file
@@ -0,0 +1,110 @@
|
|||||||
|
async function onLoad() {
|
||||||
|
const cfg = await browser.storage.sync.get();
|
||||||
|
|
||||||
|
const token = document.getElementById('token');
|
||||||
|
token.value = cfg.token || '';
|
||||||
|
token.addEventListener('input', async () => {
|
||||||
|
set('token', token.value);
|
||||||
|
await populateWorkspaces();
|
||||||
|
await populateAssignees();
|
||||||
|
});
|
||||||
|
|
||||||
|
await populateWorkspaces();
|
||||||
|
await populateAssignees();
|
||||||
|
|
||||||
|
const workspace = document.getElementById('workspace');
|
||||||
|
workspace.addEventListener('change', async () => {
|
||||||
|
await set('workspace', workspace.value);
|
||||||
|
});
|
||||||
|
|
||||||
|
const assignee = document.getElementById('assignee');
|
||||||
|
assignee.addEventListener('change', async () => {
|
||||||
|
await set('assignee', assignee.value);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function populateWorkspaces() {
|
||||||
|
const cfg = await browser.storage.sync.get();
|
||||||
|
|
||||||
|
if (!cfg.token) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const workspacesResp = await fetch(
|
||||||
|
'https://app.asana.com/api/1.0/workspaces',
|
||||||
|
{
|
||||||
|
method: 'GET',
|
||||||
|
headers: {
|
||||||
|
'Authorization': `Bearer ${cfg.token}`,
|
||||||
|
'Accept': 'application/json',
|
||||||
|
},
|
||||||
|
credentials: 'omit',
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
const workspaces = await workspacesResp.json();
|
||||||
|
|
||||||
|
const select = document.getElementById('workspace');
|
||||||
|
select.innerHTML = '';
|
||||||
|
|
||||||
|
for (const workspace of workspaces.data) {
|
||||||
|
const option = document.createElement('option');
|
||||||
|
option.innerText = workspace.name;
|
||||||
|
option.value = workspace.gid;
|
||||||
|
select.appendChild(option);
|
||||||
|
|
||||||
|
if (option.value == cfg.workspace) {
|
||||||
|
option.selected = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!cfg.workspace) {
|
||||||
|
await set('workspace', select.value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function populateAssignees() {
|
||||||
|
const cfg = await browser.storage.sync.get();
|
||||||
|
|
||||||
|
if (!cfg.token) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO: Support other assignees
|
||||||
|
|
||||||
|
const meResp = await fetch(
|
||||||
|
'https://app.asana.com/api/1.0/users/me',
|
||||||
|
{
|
||||||
|
method: 'GET',
|
||||||
|
headers: {
|
||||||
|
'Authorization': `Bearer ${cfg.token}`,
|
||||||
|
'Accept': 'application/json',
|
||||||
|
},
|
||||||
|
credentials: 'omit',
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
const me = await meResp.json();
|
||||||
|
|
||||||
|
const select = document.getElementById('assignee');
|
||||||
|
select.innerHTML = '';
|
||||||
|
|
||||||
|
const option = document.createElement('option');
|
||||||
|
option.innerText = `${me.data.name} <${me.data.email}>`;
|
||||||
|
option.value = me.data.gid;
|
||||||
|
select.appendChild(option);
|
||||||
|
|
||||||
|
option.selected = true;
|
||||||
|
|
||||||
|
if (!cfg.assignee) {
|
||||||
|
await set('assignee', select.value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function set(key, val) {
|
||||||
|
const store = {};
|
||||||
|
store[key] = val;
|
||||||
|
await browser.storage.sync.set(store);
|
||||||
|
}
|
||||||
|
|
||||||
|
addEventListener('DOMContentLoaded', onLoad);
|
||||||
Reference in New Issue
Block a user