Quick select for kind.

Shared (Extension)/Resources/event_log.html

@@ -52,6 +52,16 @@
         <input type="date" id="toCreatedAt" x-model="toCreatedAt" class="input" @change="reload">
       </div>
 
+      <div x-show="view === 'kind'">
+        <label for="kindShortcut">Quick Select</label>
+        <select id="kindShortcut" class="input" @change="quickKindSelect" x-model="quickKind">
+          <option></option>
+          <template x-for="k in kinds">
+            <option :value="k[0]" x-text="k[1]"></option>
+          </template>
+        </select>
+      </div>
+
       <div x-show="view === 'kind'">
         <label for="fromKind">From</label>
         <input type="number" id="fromKind" x-model.number="fromKind" class="input" @change="reload">

Shared (Extension)/Resources/event_log.js

@@ -1,7 +1,9 @@
 import Alpine from 'alpinejs';
 import { sortByIndex } from './db';
+import { KINDS } from './utils';
 
 Alpine.data('eventLog', () => ({
+    kinds: KINDS,
     events: [],
     view: 'created_at',
     max: 100,
@@ -12,6 +14,7 @@ Alpine.data('eventLog', () => ({
     toCreatedAt: new Date().toISOString().split('T')[0],
 
     // kind view
+    quickKind: '',
     fromKind: 0,
     toKind: 50000,
 
@@ -29,6 +32,16 @@ Alpine.data('eventLog', () => ({
         this.events = events;
     },
 
+    quickKindSelect() {
+        if (this.quickKind === '') return;
+        const i = parseInt(this.quickKind);
+        this.fromKind = i;
+        this.toKind = i;
+        this.reload();
+    },
+
+    // Properties
+
     get fromTime() {
         let dt = new Date(this.fromCreatedAt);
         return Math.floor(dt.getTime() / 1000);