- Add unstage() method in utils.idb class

- #stage implementation in utils.idb class changed to object from arrays
- login button gets focused on Home page
- added idb-keyval to acknowledgements. reviewed pricing statement

Author: SomajitDey

app/main.js

@@ -135,8 +135,6 @@ async function inbox (dataArray, fresh=true) {
         } else {
           /* the element was toggled closed */
           // Unaccentuate old messages
-          // querySelectorAll returns a live nodelist which may change whenever another event handler updates document
-          // Hence using a shallow copy (Array.from) to isolate
           Array.from(tableBody.querySelectorAll('tr.table-primary'))
             .forEach((el) => {
               el.classList.remove('table-primary');
@@ -503,6 +501,7 @@ function main() {
     idb.vals((el1, el2) => el1.time - el2.time).then((dataArray) => inbox(dataArray, false));
   } else {
     spaShow('login');
+    document.querySelector('#login').focus({ preventScroll: true, focusVisible: true });
   }
 };
 

app/utils.js

@@ -20,18 +20,24 @@ export class idb {
   }
 
   #clearStage () {
-    this.#staged = { set: [], del: [] };
+    this.#staged = { set: {}, del: {} };
   }
 
   async set (key, val, flush = false) {
     if (flush) return idbSet(key, val);
-    this.#staged.set.push([key, val]);
+    this.#staged.set[key] = val;
   }
 
+  unstage (key) {
+    delete this.#staged.set[key];
+    delete this.#staged.del[key];
+  }
+  
+  // Commits sets after deletes. A key staged for both set and delete gets updated.
   async flush () {
     const ret = Promise.all([
-      idbSetMany(this.#staged.set),
-      idbDelMany(this.#staged.del)
+      idbDelMany(Object.entries(this.#staged.del)),
+      idbSetMany(Object.entries(this.#staged.set))
     ])
     this.#clearStage();
     return ret;
@@ -45,7 +51,7 @@ export class idb {
 
   async del (key, flush = false) {
     if (flush) return idbDel(key);
-    this.#staged.del.push(key);
+    this.#staged.del[key] = true;
   }
 
   async clear () {

index.html

@@ -84,16 +84,15 @@ <h3>About</h3>
                 <p>You can also check if you are properly receiving form-submissions from <a href="#admin" onclick="spaGoTo('admin');">here</a>.</p>
                 </details>
 
-                <details class="my-2">
+                <details class="my-2" open>
                 <summary><h3>Pricing</h3></summary>
                 This service is free. However, if you find this project useful, <a href="https://buymeacoffee.com/somajitdey">please consider donating towards its survival</a>.
                 No support is too small. Thank you &#128154;
                 <br><br>
                 <p>Note that there are a few tradeoffs for availing this service free of cost &#128513;:</p>
                 <ol>
-                <li>1-day data retention</li>
-                <li>Data retention till first sync; synced data is lost upon page reload</li>
-                <li>Only support forms with textual data, of total size less than 10KiB, and POSTed as 'application/x-www-form-urlencoded'</li>
+                <li>Form-data is retained in cloud until synced, for a max period of 1-day</li>
+                <li>Only supports forms containing textual data, of size less than 10KiB, POSTed as 'application/x-www-form-urlencoded' or 'application/json'</li>
                 </ol>
                 </details>
 
@@ -140,6 +139,7 @@ <h3>About</h3>
                   <li class="nav-item"><a class="nav-link" href="https://icons8.com/icons">icons8.com</a></li>
                   <li class="nav-item"><a class="nav-link" href="https://goqr.me/">goQR.me</a></li>
                   <li class="nav-item"><a class="nav-link" href="https://onesignal.com/web-push">OneSignal</a></li>
+                  <li class="nav-item"><a class="nav-link" href="https://github.com/jakearchibald/idb-keyval">idb-keyval</a></li>
                 </ul>
                 </details>