add text input

mtimkovich · Jan 19, 2024 · b19a83f · b19a83f
1 parent c8e2b4c
commit b19a83f
Show file tree

Hide file tree

Showing 11 changed files with 63 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -12,13 +12,15 @@ Quick Add was a Google Calendar feature that enabled creating calendar events fr
 2. Parses the input to find date info
 3. Returns a Google Calendar URL for adding the event to your calendar.
 
+Events can be created by either highlighting date information and selecting the extension in the context menu or by clicking the extension icon and entering event info into the text field.
+
 ## Usage
 
 ### Chrome Extension
 Install the Chrome extension from [Chrome Web Store][webstore].
 
 ### Web App
-Alternatively, I have a running implementation [on my website][max].
+Alternatively, I have a running implementation [on my website][max]. This is useful when you're on a device without Chrome extensions, like a phone.
 
 #### Local
 If you want to run the webapp locally:
@@ -40,5 +42,4 @@ Max Timkovich
 [docs]: https://github.com/InteractionDesignFoundation/add-event-to-calendar-docs/blob/main/services/google.md#google
 [max]: https://timkovi.ch/rip_quick_add
 [chrono]: https://github.com/wanasit/chrono
-[rip]: https://joshdance.medium.com/i-miss-google-cal-quick-add-d4beee62fd27
 [webstore]: https://chrome.google.com/webstore/detail/rip-quick-add/einookkhlkagdckkngcebldmicpilpmk
diff --git a/chrome/background.js b/chrome/background.js
@@ -27,3 +27,10 @@ chrome.runtime.onInstalled.addListener(() => {
 });
 
 chrome.contextMenus.onClicked.addListener(quickAdd);
+
+// chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+//     if (request.type === 'add') {
+//         quickAdd(request.data);
+//     }
+//     return true;
+// });
diff --git a/chrome/icon_128.png → chrome/images/icon_128.png b/chrome/icon_128.png → chrome/images/icon_128.png
diff --git a/chrome/icon_16.png → chrome/images/icon_16.png b/chrome/icon_16.png → chrome/images/icon_16.png
diff --git a/chrome/icon_32.png → chrome/images/icon_32.png b/chrome/icon_32.png → chrome/images/icon_32.png
diff --git a/chrome/icon_48.png → chrome/images/icon_48.png b/chrome/icon_48.png → chrome/images/icon_48.png
diff --git a/chrome/manifest.json b/chrome/manifest.json
@@ -1,7 +1,7 @@
 {
   "name": "Rip Quick Add",
   "description": "Quickly create Google calendar events from natural language.",
-  "version": "1.0",
+  "version": "1.2",
   "manifest_version": 3,
   "permissions": [
     "contextMenus"
@@ -13,9 +13,17 @@
     "service_worker": "background.js"
   },
   "icons": {
-    "16": "icon_16.png",
-    "32": "icon_32.png",
-    "48": "icon_48.png",
-    "128": "icon_128.png"
+    "16": "images/icon_16.png",
+    "32": "images/icon_32.png",
+    "48": "images/icon_48.png",
+    "128": "images/icon_128.png"
+  },
+  "action": {
+    "default_icon": {
+    "16": "images/icon_16.png",
+    "32": "images/icon_32.png"
+    },
+    "default_title": "Quick Add",
+    "default_popup": "popup.html"
   }
 }
diff --git a/chrome/popup.html b/chrome/popup.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <textarea id="input" rows="6" cols="30"></textarea>
+    <br>
+    <button type="button" id="add">Add</button>
+    <div id="error" style="color: red"></div>
+
+    <script src="popup.js"></script>
+  </body>
+</html>
diff --git a/chrome/popup.js b/chrome/popup.js
@@ -0,0 +1,28 @@
+// Same thing but synchronous because we love javascript so much.
+function quickAdd(text) {
+    const endpoint = 'https://timkovi.ch/rip_quick_add_api';
+
+    let url = null;
+    fetch(endpoint, {
+        method: 'POST',
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({text})
+    })
+        .then(x => x.json())
+        .then(data => {
+            const url = data.url;
+            if (url) {
+                chrome.tabs.create({url});
+            } else {
+                document.getElementById('error').textContent = 'Could not parse time data from input';
+            }
+        });
+}
+
+document.getElementById('add').addEventListener('click', (e) => {
+    const input = document.getElementById('input').value;
+    quickAdd(input);
+});
diff --git a/package.json b/package.json
@@ -7,6 +7,6 @@
   },
   "type": "module",
   "scripts": {
-    "start": "node app.js"
+    "start": "node server.js"
   }
 }
diff --git a/app.js → server.js b/app.js → server.js