Filters for created_at and kind.

Shared (Extension)/Resources/db.js

@@ -19,13 +19,13 @@ export async function saveEvent(event) {
     return db.put('events', event);
 }
 
-export async function sortByIndex(index, asc, max) {
+export async function sortByIndex(index, query, asc, max) {
     let db = await openEventsDb();
     let events = [];
     let cursor = await db
         .transaction('events')
         .store.index(index)
-        .openCursor(null, asc ? 'next' : 'prev');
+        .openCursor(query, asc ? 'next' : 'prev');
     while (cursor) {
         events.push(cursor.value);
         if (cursor.length >= max) {

Shared (Extension)/Resources/event_log.html

@@ -17,19 +17,53 @@
 
   <h1 class="section-header">Event Log</h1>
 
-  <div>
+  <div class="section">
-    <select id="view" class="input" x-model="view" @change="reload">
+    <div class="section-header">Filters</div>
-      <option value="created_at">created_at</option>
+
-      <option value="kind">kind</option>
+    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
-      <option value="host">host</option>
+      <div>
-      <option value="pubkey">pubkey</option>
+        <label for="view">View</label>
-    </select>
+        <select id="view" class="input" x-model="view" @change="reload">
+          <option value="created_at">created_at</option>
+          <option value="kind">kind</option>
+          <option value="host">host</option>
+          <option value="pubkey">pubkey</option>
+        </select>
+      </div>
+
+      <div>
+        <label for="sort">Order</label>
+        <select id="sort" x-model="sort" class="input" @change="reload">
+          <option value="asc">Ascending</option>
+          <option value="desc">Descending</option>
+        </select>
+      </div>
+
+      <div></div>
+      <div></div>
+
+      <div x-show="view === 'created_at'">
+        <label for="fromCreatedAt">From</label>
+        <input type="date" id="fromCreatedAt" x-model="fromCreatedAt" class="input" @change="reload">
+      </div>
+
+      <div x-show="view === 'created_at'">
+        <label for="toCreatedAt">To</label>
+        <input type="date" id="toCreatedAt" x-model="toCreatedAt" class="input" @change="reload">
+      </div>
+
+      <div x-show="view === 'kind'">
+        <label for="fromKind">From</label>
+        <input type="number" id="fromKind" x-model.number="fromKind" class="input" @change="reload">
+      </div>
+
+      <div x-show="view === 'kind'">
+        <label for="toKind">To</label>
+        <input type="number" id="toKind" x-model.number="toKind" class="input" @change="reload">
+      </div>
+    </div>
   </div>
 
-  <div>
-    <input type="checkbox" id="asc" class="checkbox" x-model="ascending" @change="reload">
-    <label for="asc">Ascending order</label>
-  </div>
 
   <template x-for="event in events">
     <div class="mt-3" x-text="JSON.stringify(event, 2)">

Shared (Extension)/Resources/event_log.js

@@ -5,16 +5,52 @@ Alpine.data('eventLog', () => ({
     events: [],
     view: 'created_at',
     max: 100,
-    ascending: false,
+    sort: 'asc',
+
+    // date view
+    fromCreatedAt: '2008-10-31',
+    toCreatedAt: new Date().toISOString().split('T')[0],
+
+    // kind view
+    fromKind: 0,
+    toKind: 50000,
 
     async init() {
         await this.reload();
     },
 
     async reload() {
-        let events = await sortByIndex(this.view, this.ascending, this.max);
+        let events = await sortByIndex(
+            this.view,
+            this.keyRange,
+            this.sort === 'asc',
+            this.max
+        );
         this.events = events;
     },
+
+    get fromTime() {
+        let dt = new Date(this.fromCreatedAt);
+        return Math.floor(dt.getTime() / 1000);
+    },
+
+    get toTime() {
+        let dt = new Date(this.toCreatedAt);
+        return Math.floor(dt.getTime() / 1000);
+    },
+
+    get keyRange() {
+        switch (this.view) {
+            case 'created_at':
+                return IDBKeyRange.bound(this.fromTime, this.toTime);
+
+            case 'kind':
+                return IDBKeyRange.bound(this.fromKind, this.toKind);
+
+            default:
+                return null;
+        }
+    },
 }));
 
 Alpine.start();