feat: Add comment text input field for Log (#11)

nfreear · Sep 4, 2024 · 54a4fc2 · 54a4fc2
1 parent 1cb287d
commit 54a4fc2
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 9 deletions.
diff --git a/assets/index.css b/assets/index.css
@@ -41,6 +41,12 @@ button {
   padding: .8rem 1.6rem;
 }
 
+input {
+  font-size: inherit;
+  padding: .3rem .5rem;
+  min-width: 14rem;
+}
+
 img[ src *= evergreen_tree ] {
   height: 9rem;
 }

diff --git a/assets/options.css b/assets/options.css
@@ -68,5 +68,19 @@ input[ type = url ] {
 
 time[ dt ] {
   display: inline-block;
-  min-width: 10.8rem;
+  min-width: 10.6rem;
+}
+
+@media screen {
+  comma {
+    display: none;
+  }
+
+  time[ dt ]:after {
+    content: ' – ';
+  }
+
+  time[ dur ]:after {
+    content: ',';
+  }
 }
diff --git a/lib/index.js b/lib/index.js
@@ -5,15 +5,20 @@
 const AUDIO_URL = 'https://upload.wikimedia.org/wikipedia/commons/6/68/Bicycle-bell-1.wav';
 
 class PopupTimer /* was: TimerDisplay */ {
-  attachDOM () {
+  async attachDOM () {
     this._formElem = document.querySelector('#popupTimerForm');
 
     console.assert(this._formElem);
     console.assert(this._form('timer'));
+    console.assert(this._storage);
+
+    const { comment } = await this._storage.get();
+    this._form('comment').value = comment ? comment.text : '';
   }
 
   get _browser () { return globalThis.browser || globalThis.chrome; }
   get _runtime () { return this._browser.runtime; }
+  get _storage () { return this._browser.storage.local; }
 
   _form (name) {
     console.assert(this._formElem.elements[name], name);
@@ -39,7 +44,7 @@ class PopupTimer /* was: TimerDisplay */ {
     }
   }
 
-  handleButtonEvents () {
+  handleUserEvents () {
     this._formElem.addEventListener('submit', (ev) => {
     // WAS: this._startButton.addEventListener('click', (ev) => {
       ev.preventDefault();
@@ -61,6 +66,16 @@ class PopupTimer /* was: TimerDisplay */ {
 
       console.debug('PT ~ reset:', 'sending timer:stop');
     });
+
+    this._form('comment').addEventListener('input', async (ev) => {
+      const comment = {
+        text: ev.target.value,
+        timeISO: new Date().toISOString()
+      };
+      await this._storage.set({ comment });
+
+      console.debug('input:', comment, ev.target, ev);
+    });
   }
 
   _postMessage (type, reason = null) {
@@ -79,7 +94,7 @@ const popupTimer = new PopupTimer();
 
 popupTimer.attachDOM();
 popupTimer.connect();
-popupTimer.handleButtonEvents();
+popupTimer.handleUserEvents();
 
 const CLASS_NAME = / Gecko\//.test(navigator.userAgent) ? 'is-gecko' : 'not-gecko';
 document.body.classList.add(CLASS_NAME);

diff --git a/lib/service-worker.js b/lib/service-worker.js
@@ -17,11 +17,18 @@ const log = new Log();
 async function stopCallback (reason) {
   await offScreenAudio.play();
   dynamicIcon.stop();
-  await log.append({ type: 'timer:stop', reason });
+  const comment = await commentFromStorage();
+  await log.append({ type: 'timer:stop', reason, comment });
 
   console.debug('stopCallback - timer:stopped');
 }
 
+async function commentFromStorage () {
+  const { comment } = await log._storage.get('comment');
+  await log._storage.set({ comment: null });
+  return comment || { text: '' };
+}
+
 workerTimer.addStopCallback(stopCallback);
 workerTimer.initialize();
 

diff --git a/lib/worker/Log.js b/lib/worker/Log.js
@@ -64,8 +64,9 @@ export class Log {
         case 'timer:stop':
         case 'timer:stopped': // Drop-through.
           listItems.push(`
-            <li><time dt>${this._fmtDate(startISOtime)}</time>
-            — duration: <time dur>${this._duration(it.time, startTS)}</time></li>`);
+            <li><time dt>${this._fmtDate(startISOtime)}</time><comma>,</comma>
+            duration: <time dur>${this._duration(it.time, startTS)}</time><comma>,</comma>
+            <q>${it.comment ? it.comment.text : ''}</q></li>`);
           break;
       }
     });

diff --git a/pages/index.html b/pages/index.html
@@ -7,7 +7,7 @@
 
 <link rel="stylesheet" href="../assets/index.css">
 
-<title>My Pomodoro</title>
+<title> Popup – My Pomodoro</title>
 
 <div>
 
@@ -21,7 +21,11 @@ <h1> Grow a tree! </h1>
 </p>
 
 <p>
-  <output name="timer">10:00</output>
+  <output name="timer"></output>
+</p>
+
+<p>
+  <label><small>Comment</small> <input name="comment" autocomplete="on"></label>
 </p>
 
 <p>