Add status bar

plugin/src/services/sync-service.ts

@@ -1,7 +1,7 @@
 import * as lib from "../../../backend/sync_lib/pkg/sync_lib.js";
 
 import createClient, { Client } from "openapi-fetch";
-import type { components, paths } from "./types"; // generated by openapi-typescript
+import type { components, paths } from "./types.js"; // generated by openapi-typescript
 import { Logger } from "src/logger";
 import { Database } from "src/database/database";
 import { SyncSettings } from "src/database/sync-settings";
@@ -12,10 +12,24 @@ import {
 } from "src/database/document-metadata";
 import PQueue from "p-queue";
 
+export interface RequestCountStatus {
+	waiting: number;
+	success: number;
+	failure: number;
+}
+
 export class SyncService {
-	private promiseQueue: PQueue;
 	private client: Client<paths>;
 
+	private promiseQueue: PQueue;
+	private requestCountListeners: Array<(status: RequestCountStatus) => void> =
+		[];
+	private status: RequestCountStatus = {
+		waiting: 0,
+		success: 0,
+		failure: 0,
+	};
+
 	public constructor(private database: Database) {
 		this.createClient(database.getSettings());
 		this.promiseQueue = new PQueue({
@@ -26,6 +40,34 @@ export class SyncService {
 			this.createClient(s);
 			this.promiseQueue.concurrency = s.uploadConcurrency;
 		});
+
+		this.promiseQueue.on("active", () => {
+			this.status.waiting = this.promiseQueue.pending;
+			this.emitRequestCountChange();
+		});
+
+		this.promiseQueue.on("completed", () => {
+			this.status.success++;
+			this.emitRequestCountChange();
+		});
+
+		this.promiseQueue.on("error", () => {
+			this.status.failure++;
+			this.emitRequestCountChange();
+		});
+	}
+
+	public addRequestCountChangeListener(
+		listener: (status: RequestCountStatus) => void
+	): void {
+		this.requestCountListeners.push(listener);
+		listener({ ...this.status });
+	}
+
+	private emitRequestCountChange(): void {
+		this.requestCountListeners.forEach((listener) =>
+			listener({ ...this.status })
+		);
 	}
 
 	private createClient(settings: SyncSettings) {