Move views
This commit is contained in:
parent
6408eff326
commit
532ee8aa45
4 changed files with 11 additions and 5 deletions
198
frontend/obsidian-plugin/src/views/history/history-view.ts
Normal file
198
frontend/obsidian-plugin/src/views/history/history-view.ts
Normal file
|
|
@ -0,0 +1,198 @@
|
||||||
|
import "./history-view.scss";
|
||||||
|
|
||||||
|
import type { IconName, WorkspaceLeaf } from "obsidian";
|
||||||
|
import { ItemView, setIcon } from "obsidian";
|
||||||
|
import { intlFormatDistance } from "date-fns";
|
||||||
|
import type { HistoryEntry, SyncClient } from "sync-client";
|
||||||
|
import { SyncType } from "sync-client";
|
||||||
|
|
||||||
|
export class HistoryView extends ItemView {
|
||||||
|
public static readonly TYPE = "history-view";
|
||||||
|
public static readonly ICON = "square-stack";
|
||||||
|
private timer: NodeJS.Timeout | null = null;
|
||||||
|
|
||||||
|
private historyContainer: HTMLElement | undefined;
|
||||||
|
private readonly historyEntryToElement = new Map<
|
||||||
|
HistoryEntry,
|
||||||
|
HTMLElement
|
||||||
|
>();
|
||||||
|
|
||||||
|
public constructor(
|
||||||
|
leaf: WorkspaceLeaf,
|
||||||
|
private readonly client: SyncClient
|
||||||
|
) {
|
||||||
|
super(leaf);
|
||||||
|
this.icon = HistoryView.ICON;
|
||||||
|
|
||||||
|
this.client.addSyncHistoryUpdateListener(
|
||||||
|
() =>
|
||||||
|
void this.updateView().catch((error: unknown) => {
|
||||||
|
this.client.logger.error(
|
||||||
|
`Failed to update history view: ${error}`
|
||||||
|
);
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
private static getSyncTypeIcon(type: SyncType | undefined): IconName {
|
||||||
|
switch (type) {
|
||||||
|
case SyncType.CREATE:
|
||||||
|
return "file-plus";
|
||||||
|
case SyncType.DELETE:
|
||||||
|
return "trash-2";
|
||||||
|
case SyncType.UPDATE:
|
||||||
|
return "file-pen-line";
|
||||||
|
case undefined:
|
||||||
|
default:
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private static renderSyncItemTitle(
|
||||||
|
element: HTMLElement,
|
||||||
|
entry: HistoryEntry
|
||||||
|
): void {
|
||||||
|
const syncTypeIcon = HistoryView.getSyncTypeIcon(entry.type);
|
||||||
|
if (syncTypeIcon) {
|
||||||
|
setIcon(element.createDiv(), syncTypeIcon);
|
||||||
|
}
|
||||||
|
|
||||||
|
element.createEl("span", {
|
||||||
|
text: entry.relativePath.split("/").pop()
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private static updateTimeSince(
|
||||||
|
element: HTMLElement,
|
||||||
|
entry: HistoryEntry
|
||||||
|
): void {
|
||||||
|
const timestampElement = element.querySelector(
|
||||||
|
".history-card-timestamp"
|
||||||
|
);
|
||||||
|
if (timestampElement != null) {
|
||||||
|
timestampElement.textContent = intlFormatDistance(
|
||||||
|
entry.timestamp,
|
||||||
|
new Date()
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public getViewType(): string {
|
||||||
|
return HistoryView.TYPE;
|
||||||
|
}
|
||||||
|
|
||||||
|
public getDisplayText(): string {
|
||||||
|
return "VaultLink history";
|
||||||
|
}
|
||||||
|
|
||||||
|
public async onOpen(): Promise<void> {
|
||||||
|
const container = this.containerEl.children[1];
|
||||||
|
container.createEl("h4", { text: "VaultLink history" });
|
||||||
|
|
||||||
|
this.historyContainer = container.createDiv({ cls: "logs-container" });
|
||||||
|
|
||||||
|
await this.updateView();
|
||||||
|
this.timer = setInterval(() => void this.updateView(), 1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
public async onClose(): Promise<void> {
|
||||||
|
if (this.timer) {
|
||||||
|
clearInterval(this.timer);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private async updateView(): Promise<void> {
|
||||||
|
const container = this.historyContainer;
|
||||||
|
if (container === undefined) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const entries = this.client.getHistoryEntries();
|
||||||
|
|
||||||
|
if (this.historyEntryToElement.size === 0 && entries.length > 0) {
|
||||||
|
// Clear the "No update has happened yet" message
|
||||||
|
container.empty();
|
||||||
|
}
|
||||||
|
|
||||||
|
entries.forEach((entry) => {
|
||||||
|
const element = this.historyEntryToElement.get(entry);
|
||||||
|
if (element !== undefined) {
|
||||||
|
HistoryView.updateTimeSince(element, entry);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const newElement = this.createHistoryCard(container, entry);
|
||||||
|
container.prepend(newElement);
|
||||||
|
this.historyEntryToElement.set(entry, newElement);
|
||||||
|
});
|
||||||
|
|
||||||
|
const newEntries = new Set(entries);
|
||||||
|
for (const [entry, element] of this.historyEntryToElement) {
|
||||||
|
if (!newEntries.has(entry)) {
|
||||||
|
element.remove();
|
||||||
|
this.historyEntryToElement.delete(entry);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (entries.length === 0) {
|
||||||
|
container.empty();
|
||||||
|
container.createEl("p", {
|
||||||
|
text: "No update has happened yet."
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private createHistoryCard(
|
||||||
|
container: HTMLElement,
|
||||||
|
entry: HistoryEntry
|
||||||
|
): HTMLElement {
|
||||||
|
return container.createDiv(
|
||||||
|
{
|
||||||
|
cls: ["history-card", entry.status.toLocaleLowerCase()]
|
||||||
|
},
|
||||||
|
(card) => {
|
||||||
|
if (this.app.vault.getFileByPath(entry.relativePath) !== null) {
|
||||||
|
card.addEventListener("click", () => {
|
||||||
|
void this.app.workspace.openLinkText(
|
||||||
|
entry.relativePath,
|
||||||
|
entry.relativePath,
|
||||||
|
false
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
card.addClass("clickable");
|
||||||
|
}
|
||||||
|
|
||||||
|
card.createDiv(
|
||||||
|
{
|
||||||
|
cls: "history-card-header"
|
||||||
|
},
|
||||||
|
(header) => {
|
||||||
|
header.createEl(
|
||||||
|
"h5",
|
||||||
|
{
|
||||||
|
cls: "history-card-title"
|
||||||
|
},
|
||||||
|
(title) => {
|
||||||
|
HistoryView.renderSyncItemTitle(title, entry);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
header.createSpan({
|
||||||
|
text: intlFormatDistance(
|
||||||
|
entry.timestamp,
|
||||||
|
new Date()
|
||||||
|
),
|
||||||
|
cls: "history-card-timestamp"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
card.createEl("p", {
|
||||||
|
text: `${entry.message}.`,
|
||||||
|
cls: "history-card-message"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
340
frontend/obsidian-plugin/src/views/settings/settings-tab.ts
Normal file
340
frontend/obsidian-plugin/src/views/settings/settings-tab.ts
Normal file
|
|
@ -0,0 +1,340 @@
|
||||||
|
import "./settings-tab.scss";
|
||||||
|
|
||||||
|
import type { App } from "obsidian";
|
||||||
|
import { Notice, PluginSettingTab, Setting } from "obsidian";
|
||||||
|
import VaultLinkPlugin from "src/vault-link-plugin";
|
||||||
|
import type { SyncClient, SyncSettings } from "sync-client";
|
||||||
|
import { HistoryView } from "../history/history-view";
|
||||||
|
import { LogsView } from "../logs/logs-view";
|
||||||
|
import { StatusDescription } from "../status-description/status-description";
|
||||||
|
|
||||||
|
export class SyncSettingsTab extends PluginSettingTab {
|
||||||
|
private editedServerUri: string;
|
||||||
|
private editedToken: string;
|
||||||
|
private editedVaultName: string;
|
||||||
|
|
||||||
|
private readonly plugin: VaultLinkPlugin;
|
||||||
|
private readonly syncClient: SyncClient;
|
||||||
|
private readonly statusDescription: StatusDescription;
|
||||||
|
private statusDescriptionSubscription: (() => void) | undefined;
|
||||||
|
|
||||||
|
public constructor({
|
||||||
|
app,
|
||||||
|
plugin,
|
||||||
|
syncClient,
|
||||||
|
statusDescription
|
||||||
|
}: {
|
||||||
|
app: App;
|
||||||
|
plugin: VaultLinkPlugin;
|
||||||
|
syncClient: SyncClient;
|
||||||
|
statusDescription: StatusDescription;
|
||||||
|
}) {
|
||||||
|
super(app, plugin);
|
||||||
|
this.plugin = plugin;
|
||||||
|
this.syncClient = syncClient;
|
||||||
|
this.statusDescription = statusDescription;
|
||||||
|
|
||||||
|
this.editedServerUri = this.syncClient.getSettings().remoteUri;
|
||||||
|
this.editedToken = this.syncClient.getSettings().token;
|
||||||
|
this.editedVaultName = this.syncClient.getSettings().vaultName;
|
||||||
|
|
||||||
|
this.syncClient.addOnSettingsChangeListener(
|
||||||
|
(newSettings, oldSettings) => {
|
||||||
|
let hasChanged = false;
|
||||||
|
|
||||||
|
if (newSettings.remoteUri !== oldSettings.remoteUri) {
|
||||||
|
this.editedServerUri = newSettings.remoteUri;
|
||||||
|
hasChanged = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (newSettings.token !== oldSettings.token) {
|
||||||
|
this.editedToken = newSettings.token;
|
||||||
|
hasChanged = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (newSettings.vaultName !== oldSettings.vaultName) {
|
||||||
|
this.editedVaultName = newSettings.vaultName;
|
||||||
|
hasChanged = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (hasChanged) {
|
||||||
|
this.display();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
public display(): void {
|
||||||
|
const { containerEl } = this;
|
||||||
|
containerEl.empty();
|
||||||
|
containerEl.addClass("vault-link-settings");
|
||||||
|
|
||||||
|
this.renderSettingsHeader(containerEl);
|
||||||
|
this.renderConnectionSettings(containerEl);
|
||||||
|
this.renderSyncSettings(containerEl);
|
||||||
|
}
|
||||||
|
|
||||||
|
public hide(): void {
|
||||||
|
super.hide();
|
||||||
|
this.setStatusDescriptionSubscription();
|
||||||
|
}
|
||||||
|
|
||||||
|
private renderSettingsHeader(containerEl: HTMLElement): void {
|
||||||
|
containerEl.createEl("h2", { text: "VaultLink" }).createSpan({
|
||||||
|
text: this.plugin.manifest.version,
|
||||||
|
cls: "version"
|
||||||
|
});
|
||||||
|
|
||||||
|
containerEl.createDiv(
|
||||||
|
{
|
||||||
|
cls: "description"
|
||||||
|
},
|
||||||
|
(descriptionContainer) => {
|
||||||
|
this.setStatusDescriptionSubscription((): void => {
|
||||||
|
this.statusDescription.renderStatusDescription(
|
||||||
|
descriptionContainer
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
containerEl.createDiv(
|
||||||
|
{
|
||||||
|
cls: "button-container"
|
||||||
|
},
|
||||||
|
(buttonContainer) => {
|
||||||
|
buttonContainer.createEl(
|
||||||
|
"button",
|
||||||
|
{
|
||||||
|
text: "Show history"
|
||||||
|
},
|
||||||
|
(button) =>
|
||||||
|
(button.onclick = async (): Promise<void> => {
|
||||||
|
this.plugin.closeSettings();
|
||||||
|
await this.plugin.activateView(HistoryView.TYPE);
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
buttonContainer.createEl(
|
||||||
|
"button",
|
||||||
|
{
|
||||||
|
text: "Show logs"
|
||||||
|
},
|
||||||
|
(button) =>
|
||||||
|
(button.onclick = async (): Promise<void> => {
|
||||||
|
this.plugin.closeSettings();
|
||||||
|
await this.plugin.activateView(LogsView.TYPE);
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
private renderConnectionSettings(containerEl: HTMLElement): void {
|
||||||
|
containerEl.createEl("h3", { text: "Connection" });
|
||||||
|
|
||||||
|
const [title, updateTitle] = this.unsavedAwareSettingName(
|
||||||
|
"Server address",
|
||||||
|
"remoteUri"
|
||||||
|
);
|
||||||
|
|
||||||
|
new Setting(containerEl)
|
||||||
|
.setName(title)
|
||||||
|
.setDesc(
|
||||||
|
"Your VaultLink server's URL including the protocol and full path."
|
||||||
|
)
|
||||||
|
.setTooltip("This is the URL of the server you want to sync with.")
|
||||||
|
.addText((text) =>
|
||||||
|
text
|
||||||
|
.setPlaceholder("https://example.com:3000")
|
||||||
|
.setValue(this.editedServerUri)
|
||||||
|
.onChange((value) => {
|
||||||
|
this.editedServerUri = value;
|
||||||
|
updateTitle(value);
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
const [tokenTitle, updateTokenTitle] = this.unsavedAwareSettingName(
|
||||||
|
"Access token",
|
||||||
|
"token"
|
||||||
|
);
|
||||||
|
|
||||||
|
new Setting(containerEl)
|
||||||
|
.setName(tokenTitle)
|
||||||
|
.setClass("sync-settings-access-token")
|
||||||
|
.setDesc(
|
||||||
|
"Set the access token for the server that you can get from the server"
|
||||||
|
)
|
||||||
|
.setTooltip("todo, links to dcocs")
|
||||||
|
.addTextArea((text) =>
|
||||||
|
text
|
||||||
|
.setPlaceholder("ey...")
|
||||||
|
.setValue(this.editedToken)
|
||||||
|
.onChange((value) => {
|
||||||
|
this.editedToken = value;
|
||||||
|
updateTokenTitle(value);
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
const [vaultNameTitle, updateVaultNameTitle] =
|
||||||
|
this.unsavedAwareSettingName("Vault name", "vaultName");
|
||||||
|
|
||||||
|
new Setting(containerEl)
|
||||||
|
.setName(vaultNameTitle)
|
||||||
|
.setDesc(
|
||||||
|
"Set the name of the remote vault that you want to sync with"
|
||||||
|
)
|
||||||
|
.setTooltip("todo, links to dcocs")
|
||||||
|
.addText((text) =>
|
||||||
|
text
|
||||||
|
.setPlaceholder("My Obsidian Vault")
|
||||||
|
.setValue(this.editedVaultName)
|
||||||
|
.onChange((value) => {
|
||||||
|
this.editedVaultName = value;
|
||||||
|
updateVaultNameTitle(value);
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
new Setting(containerEl)
|
||||||
|
.addButton((button) =>
|
||||||
|
button.setButtonText("Apply").onClick(async () => {
|
||||||
|
if (
|
||||||
|
this.editedVaultName !==
|
||||||
|
this.syncClient.getSettings().vaultName ||
|
||||||
|
this.editedServerUri !==
|
||||||
|
this.syncClient.getSettings().remoteUri ||
|
||||||
|
this.editedToken !== this.syncClient.getSettings().token
|
||||||
|
) {
|
||||||
|
await this.syncClient.setSettings({
|
||||||
|
vaultName: this.editedVaultName,
|
||||||
|
remoteUri: this.editedServerUri,
|
||||||
|
token: this.editedToken
|
||||||
|
});
|
||||||
|
new Notice(
|
||||||
|
"The changes have been applied successfully!"
|
||||||
|
);
|
||||||
|
await this.statusDescription.updateConnectionState();
|
||||||
|
} else {
|
||||||
|
new Notice("No changes to apply");
|
||||||
|
}
|
||||||
|
})
|
||||||
|
)
|
||||||
|
.addButton((button) =>
|
||||||
|
button.setButtonText("Test connection").onClick(async () => {
|
||||||
|
new Notice(
|
||||||
|
(await this.syncClient.checkConnection()).message
|
||||||
|
);
|
||||||
|
await this.statusDescription.updateConnectionState();
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
private renderSyncSettings(containerEl: HTMLElement): void {
|
||||||
|
containerEl.createEl("h3", { text: "Sync" });
|
||||||
|
|
||||||
|
new Setting(containerEl)
|
||||||
|
.setName("Enable sync")
|
||||||
|
.setDesc(
|
||||||
|
"Enable pulling and pushing changes to the remote server. The first time it's enabled, or after the sync state has been reset, all local files will be pushed to the server."
|
||||||
|
)
|
||||||
|
.setTooltip(
|
||||||
|
"Enable pulling and pushing changes to the remote server."
|
||||||
|
)
|
||||||
|
.addToggle((toggle) =>
|
||||||
|
toggle
|
||||||
|
.setValue(this.syncClient.getSettings().isSyncEnabled)
|
||||||
|
.onChange(async (value) =>
|
||||||
|
this.syncClient.setSetting("isSyncEnabled", value)
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
new Setting(containerEl)
|
||||||
|
.setName("Sync concurrency")
|
||||||
|
.setDesc(
|
||||||
|
"How many concurrent sync operations to run. Setting this value higher may increase the overall performance, however, it will require more memory as well. If you notice frequent crashes, especially on mobile, set this to 1."
|
||||||
|
)
|
||||||
|
.addSlider((text) =>
|
||||||
|
text
|
||||||
|
.setLimits(1, 16, 1)
|
||||||
|
.setDynamicTooltip()
|
||||||
|
.setInstant(false)
|
||||||
|
.setValue(this.syncClient.getSettings().syncConcurrency)
|
||||||
|
.onChange(async (value) =>
|
||||||
|
this.syncClient.setSetting("syncConcurrency", value)
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
new Setting(containerEl)
|
||||||
|
.setName("Maximum file size to be uploaded (MB)")
|
||||||
|
.setDesc(
|
||||||
|
"Set the maximum file size that can be uploaded to the server. Files larger than this size will be ignored."
|
||||||
|
)
|
||||||
|
.addSlider((slider) =>
|
||||||
|
slider
|
||||||
|
.setLimits(1, 64, 1)
|
||||||
|
.setDynamicTooltip()
|
||||||
|
.setInstant(false)
|
||||||
|
.setValue(this.syncClient.getSettings().maxFileSizeMB)
|
||||||
|
.onChange(async (value) =>
|
||||||
|
this.syncClient.setSetting("maxFileSizeMB", value)
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
new Setting(containerEl)
|
||||||
|
.setName("Danger zone")
|
||||||
|
.setDesc(
|
||||||
|
"Delete the local metadata database while leaving the local and remote files intact."
|
||||||
|
)
|
||||||
|
.addButton((button) =>
|
||||||
|
button.setButtonText("Reset sync state").onClick(async () => {
|
||||||
|
await this.syncClient.reset();
|
||||||
|
new Notice(
|
||||||
|
"Sync state has been reset, you will need to resync"
|
||||||
|
);
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
private setStatusDescriptionSubscription(
|
||||||
|
newSubscription?: () => void
|
||||||
|
): void {
|
||||||
|
if (this.statusDescriptionSubscription) {
|
||||||
|
this.statusDescription.removeStatusChangeListener(
|
||||||
|
this.statusDescriptionSubscription
|
||||||
|
);
|
||||||
|
}
|
||||||
|
this.statusDescriptionSubscription = newSubscription;
|
||||||
|
if (this.statusDescriptionSubscription) {
|
||||||
|
this.statusDescriptionSubscription();
|
||||||
|
this.statusDescription.addStatusChangeListener(
|
||||||
|
this.statusDescriptionSubscription
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private unsavedAwareSettingName(
|
||||||
|
name: string,
|
||||||
|
settingName: keyof SyncSettings
|
||||||
|
): [
|
||||||
|
DocumentFragment,
|
||||||
|
(newValue: SyncSettings[keyof SyncSettings]) => void
|
||||||
|
] {
|
||||||
|
const titleContainer = document.createDocumentFragment();
|
||||||
|
const title = titleContainer.createEl("div", {
|
||||||
|
text: name,
|
||||||
|
cls: "setting-item-name"
|
||||||
|
});
|
||||||
|
|
||||||
|
const updateTitle = (
|
||||||
|
currentValue: SyncSettings[keyof SyncSettings]
|
||||||
|
): void => {
|
||||||
|
title.innerText = `${name}${
|
||||||
|
currentValue !== this.syncClient.getSettings()[settingName]
|
||||||
|
? " (unsaved)"
|
||||||
|
: ""
|
||||||
|
}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
return [titleContainer, updateTitle];
|
||||||
|
}
|
||||||
|
}
|
||||||
77
frontend/obsidian-plugin/src/views/status-bar/status-bar.ts
Normal file
77
frontend/obsidian-plugin/src/views/status-bar/status-bar.ts
Normal file
|
|
@ -0,0 +1,77 @@
|
||||||
|
import "./sync-status.scss";
|
||||||
|
|
||||||
|
import type { HistoryStats, SyncClient } from "sync-client";
|
||||||
|
import type VaultLinkPlugin from "../../vault-link-plugin";
|
||||||
|
|
||||||
|
export class StatusBar {
|
||||||
|
private readonly statusBarItem: HTMLElement;
|
||||||
|
|
||||||
|
private lastHistoryStats: HistoryStats | undefined;
|
||||||
|
private lastRemaining: number | undefined;
|
||||||
|
|
||||||
|
public constructor(
|
||||||
|
private readonly plugin: VaultLinkPlugin,
|
||||||
|
private readonly syncClient: SyncClient
|
||||||
|
) {
|
||||||
|
this.statusBarItem = plugin.addStatusBarItem();
|
||||||
|
this.syncClient.addSyncHistoryUpdateListener((status) => {
|
||||||
|
this.lastHistoryStats = status;
|
||||||
|
this.updateStatus();
|
||||||
|
});
|
||||||
|
|
||||||
|
this.syncClient.addRemainingSyncOperationsListener(
|
||||||
|
(remainingOperations) => {
|
||||||
|
this.lastRemaining = remainingOperations;
|
||||||
|
this.updateStatus();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
this.syncClient.addOnSettingsChangeListener(() => {
|
||||||
|
this.updateStatus();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private updateStatus(): void {
|
||||||
|
this.statusBarItem.empty();
|
||||||
|
const container = this.statusBarItem.createDiv({
|
||||||
|
cls: ["sync-status"]
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!this.syncClient.getSettings().isSyncEnabled) {
|
||||||
|
const button = container.createEl("button", {
|
||||||
|
text: "VaultLink is disabled, click to configure",
|
||||||
|
cls: "initialize-button"
|
||||||
|
});
|
||||||
|
button.onclick = (): void => {
|
||||||
|
this.plugin.openSettings();
|
||||||
|
};
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let hasShownMessage = false;
|
||||||
|
|
||||||
|
if ((this.lastRemaining ?? 0) > 0) {
|
||||||
|
hasShownMessage = true;
|
||||||
|
container.createSpan({ text: `${this.lastRemaining} ⏳` });
|
||||||
|
}
|
||||||
|
|
||||||
|
if ((this.lastHistoryStats?.success ?? 0) > 0) {
|
||||||
|
hasShownMessage = true;
|
||||||
|
container.createSpan({
|
||||||
|
text: `${this.lastHistoryStats?.success ?? 0} ✅`
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if ((this.lastHistoryStats?.error ?? 0) > 0) {
|
||||||
|
hasShownMessage = true;
|
||||||
|
container.createSpan({
|
||||||
|
text: `${this.lastHistoryStats?.error ?? 0} ❌`
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!hasShownMessage) {
|
||||||
|
container.createSpan({ text: "VaultLink is idle" });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,134 @@
|
||||||
|
import type {
|
||||||
|
HistoryStats,
|
||||||
|
CheckConnectionResult,
|
||||||
|
SyncClient
|
||||||
|
} from "sync-client";
|
||||||
|
|
||||||
|
export class StatusDescription {
|
||||||
|
private lastHistoryStats: HistoryStats | undefined;
|
||||||
|
private lastRemaining: number | undefined;
|
||||||
|
private lastConnectionState: CheckConnectionResult | undefined;
|
||||||
|
|
||||||
|
private statusChangeListeners: (() => void)[] = [];
|
||||||
|
|
||||||
|
public constructor(private readonly syncClient: SyncClient) {
|
||||||
|
void this.updateConnectionState();
|
||||||
|
|
||||||
|
syncClient.addSyncHistoryUpdateListener((status) => {
|
||||||
|
this.lastHistoryStats = status;
|
||||||
|
this.updateDescription();
|
||||||
|
});
|
||||||
|
|
||||||
|
this.syncClient.addRemainingSyncOperationsListener(
|
||||||
|
(remainingOperations) => {
|
||||||
|
this.lastRemaining = remainingOperations;
|
||||||
|
this.updateDescription();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
this.syncClient.addOnSettingsChangeListener(() => {
|
||||||
|
void this.updateConnectionState();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
public async updateConnectionState(): Promise<void> {
|
||||||
|
this.lastConnectionState = await this.syncClient.checkConnection();
|
||||||
|
this.updateDescription();
|
||||||
|
}
|
||||||
|
|
||||||
|
public addStatusChangeListener(listener: () => void): void {
|
||||||
|
this.statusChangeListeners.push(listener);
|
||||||
|
}
|
||||||
|
public removeStatusChangeListener(listener: () => void): void {
|
||||||
|
this.statusChangeListeners = this.statusChangeListeners.filter(
|
||||||
|
(l) => l !== listener
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
public renderStatusDescription(container: HTMLElement): void {
|
||||||
|
container.empty();
|
||||||
|
container.addClass("status-description");
|
||||||
|
|
||||||
|
if (this.lastConnectionState == undefined) {
|
||||||
|
container.createSpan({
|
||||||
|
text: "VaultLink is starting up…",
|
||||||
|
cls: "warning"
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!this.lastConnectionState.isSuccessful) {
|
||||||
|
container.createSpan({
|
||||||
|
text: `VaultLink failed to connect to the remote server with the error "${this.lastConnectionState.message}"`,
|
||||||
|
cls: "error"
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
container.createSpan({ text: "VaultLink is connected to the server " });
|
||||||
|
container.createEl("a", {
|
||||||
|
text: this.syncClient.getSettings().remoteUri,
|
||||||
|
href: this.syncClient.getSettings().remoteUri
|
||||||
|
});
|
||||||
|
|
||||||
|
container.createSpan({
|
||||||
|
text: ` and has indexed approximately `
|
||||||
|
});
|
||||||
|
container.createSpan({
|
||||||
|
text: `${this.syncClient.documentCount}`,
|
||||||
|
cls: "number"
|
||||||
|
});
|
||||||
|
container.createSpan({
|
||||||
|
text: ` documents. `
|
||||||
|
});
|
||||||
|
|
||||||
|
if (
|
||||||
|
(this.lastRemaining ?? 0) === 0 &&
|
||||||
|
(this.lastHistoryStats?.success ?? 0) === 0 &&
|
||||||
|
(this.lastHistoryStats?.error ?? 0) === 0
|
||||||
|
) {
|
||||||
|
if (this.syncClient.getSettings().isSyncEnabled) {
|
||||||
|
container.createSpan({
|
||||||
|
text: "Syncing is enabled but VaultLink hasn't found anything to sync yet."
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
container.createSpan({
|
||||||
|
text: "However, syncing is disabled right now.",
|
||||||
|
cls: "warning"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
container.createSpan({
|
||||||
|
text: "The plugin has "
|
||||||
|
});
|
||||||
|
container.createSpan({
|
||||||
|
text: `${this.lastRemaining ?? 0}`,
|
||||||
|
cls: "number"
|
||||||
|
});
|
||||||
|
container.createSpan({
|
||||||
|
text: " outstanding operations while having succeeded "
|
||||||
|
});
|
||||||
|
container.createSpan({
|
||||||
|
text: `${this.lastHistoryStats?.success ?? 0}`,
|
||||||
|
cls: ["number", "good"]
|
||||||
|
});
|
||||||
|
container.createSpan({
|
||||||
|
text: " times and failed "
|
||||||
|
});
|
||||||
|
container.createSpan({
|
||||||
|
text: `${this.lastHistoryStats?.error ?? 0}`,
|
||||||
|
cls: ["number", "bad"]
|
||||||
|
});
|
||||||
|
container.createSpan({
|
||||||
|
text: " times."
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private updateDescription(): void {
|
||||||
|
this.statusChangeListeners.forEach((listener) => {
|
||||||
|
listener();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue