Basic event log view functions.

This commit is contained in:
Ryan Breen
2023-02-12 15:09:35 -05:00
parent dfec82deb2
commit 0847a55afa
6 changed files with 98 additions and 1 deletions

View File

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

View File

@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script defer src="event_log.build.js"></script>
<link rel="stylesheet" href="options.build.css">
<title>Event Log</title>
</head>
<body class="text-fuchsia-900 p-3.5 lg:p-32" x-data="eventLog">
<p>
<a href="options.html" class="border-none hover:underline">← Back</a>
</p>
<h1 class="section-header">Event Log</h1>
<div>
<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>
<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)">
</div>
</template>
</body>
</html>

View File

@@ -0,0 +1,20 @@
import Alpine from 'alpinejs';
import { sortByIndex } from './db';
Alpine.data('eventLog', () => ({
events: [],
view: 'created_at',
max: 100,
ascending: false,
async init() {
await this.reload();
},
async reload() {
let events = await sortByIndex(this.view, this.ascending, this.max);
this.events = events;
},
}));
Alpine.start();

View File

@@ -162,6 +162,8 @@
<div class="mt-6">
<a href="experimental.html" class="border-none hover:underline">Experimental features →</a>
<br>
<a href="event_log.html" class="border-none hover:underline">Event log →</a>
</div>
</body>