@duplicati/ngclient 0.0.1

package/src/app/core/components/status-bar/status-bar.component.html

@@ -0,0 +1,38 @@
+<div class="current-backup">
+  <div class="current-backup-progress">
+    @if (statusData()?.task?.Status && statusData()?.task?.Status !== 'Completed') {
+      <div class="label">{{ statusData()?.task?.Status }} - {{ statusData()?.backup?.Backup?.Name }}</div>
+
+      <spk-progress-bar
+        class="raised primary"
+        [value]="statusData()?.OverallProgress ? statusData()?.OverallProgress! * 100 : 3"></spk-progress-bar>
+    } @else if (nextBackup()) {
+      <div class="label">{{ nextBackup().backup?.Backup?.Name }} - {{ nextBackup().time | appRelativeTime }}</div>
+      <spk-progress-bar class="raised" [value]="3"></spk-progress-bar>
+    } @else if (!statusData() || statusData()?.task?.Status === 'Completed') {
+      <div class="label">No scheduled tasks</div>
+      <spk-progress-bar class="raised" [value]="3"></spk-progress-bar>
+    } @else {
+      <div class="label">Loading...</div>
+      <spk-progress-bar class="raised" [value]="3"></spk-progress-bar>
+    }
+  </div>
+
+  <!-- <div class="current-backup-actions">
+    <button spk-button>
+      <spk-icon>play-circle</spk-icon>
+      Start
+    </button>
+
+    <button spk-button disabled>
+      <spk-icon>x-circle</spk-icon>
+    </button>
+  </div> -->
+</div>
+
+<!-- <div class="actions">
+  <button spk-button>
+    <spk-icon>gauge</spk-icon>
+    Throttle settings
+  </button>
+</div> -->

package/src/app/core/components/status-bar/status-bar.component.scss

@@ -0,0 +1,27 @@
+@use '@sparkle-ui/core/styles/helpers' as *;
+
+:host {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: p2r(16);
+  border-bottom: 1px solid var(--base-level-40);
+}
+
+.current-backup {
+  display: flex;
+  align-items: center;
+  gap: p2r(8);
+}
+
+.current-backup-progress {
+  display: flex;
+  flex-direction: column;
+  gap: p2r(4);
+  min-width: p2r(300);
+}
+
+.current-backup-actions {
+  display: flex;
+  gap: p2r(8);
+}

package/src/app/core/components/status-bar/status-bar.component.ts

@@ -0,0 +1,33 @@
+import { JsonPipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
+import { SparkleButtonComponent, SparkleIconComponent, SparkleProgressBarComponent } from '@sparkle-ui/core';
+import { RelativeTimePipe } from '../../pipes/relative-time.pipe';
+import { StatusBarState } from './status-bar.state';
+
+@Component({
+  selector: 'app-status-bar',
+  standalone: true,
+  imports: [SparkleButtonComponent, SparkleIconComponent, SparkleProgressBarComponent, RelativeTimePipe, JsonPipe],
+  templateUrl: './status-bar.component.html',
+  styleUrl: './status-bar.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export default class StatusBarComponent {
+  #statusBarState = inject(StatusBarState);
+
+  statusData = this.#statusBarState.statusData;
+  serverState = this.#statusBarState.serverState;
+
+  nextBackup = computed(() => ({
+    backup: (this.serverState()?.ProposedSchedule?.[0] as any)?.backup,
+    time: (this.serverState()?.ProposedSchedule?.[0] as any)?.Item2,
+  }));
+
+  ngOnInit() {
+    this.#statusBarState.start();
+  }
+
+  ngOnDestroy() {
+    this.#statusBarState.stop();
+  }
+}

package/src/app/core/components/status-bar/status-bar.state.ts

@@ -0,0 +1,182 @@
+import { computed, effect, inject, Injectable, signal } from '@angular/core';
+import { finalize, map, of, switchMap } from 'rxjs';
+import {
+  DuplicatiServerService,
+  GetApiV1ProgressstateResponse,
+  GetApiV1ServerstateData,
+  GetApiV1TaskByTaskidResponse,
+  ProgressStateService,
+  ServerStatusDto,
+} from '../../openapi';
+import { Backup, BackupsState } from '../../states/backups.state';
+
+type Task = GetApiV1TaskByTaskidResponse;
+
+export type Status = GetApiV1ProgressstateResponse & {
+  task?: Task | null;
+  backup?: Backup | null;
+};
+
+@Injectable({
+  providedIn: 'root',
+})
+export class StatusBarState {
+  #MIN_POLL_INTERVAL = 1000;
+  #progState = inject(ProgressStateService);
+  #dupServer = inject(DuplicatiServerService);
+  #backupState = inject(BackupsState);
+  #isPolling = signal(false);
+  #isFetching = signal(false);
+  #pollingInterval = signal<number | null>(this.#MIN_POLL_INTERVAL);
+  #statusData = signal<Status | null>(null);
+  #isGettingServerState = signal(false);
+  #serverStateLoading = signal(false);
+  #serverState = signal<ServerStatusDto | null>(null);
+  #blocker = signal<boolean>(false);
+
+  statusData = this.#statusData.asReadonly();
+  serverState = computed(() => {
+    const serverState = this.#serverState();
+
+    if (!serverState) return null;
+
+    serverState.ProposedSchedule = serverState?.ProposedSchedule?.map((x) => {
+      const backup = x.Item1 ? this.#backupState.getBackupById(x.Item1) : null;
+
+      return {
+        ...x,
+        backup,
+      };
+    });
+
+    return serverState;
+  });
+  isFetching = this.#isFetching.asReadonly();
+
+  #activeInterval: number | null = null;
+
+  #polling = effect(() => {
+    const isPolling = this.#isPolling();
+    const pollingInterval = this.#pollingInterval();
+
+    if (!isPolling || !pollingInterval || pollingInterval < this.#MIN_POLL_INTERVAL) {
+      this.#activeInterval && window.clearInterval(this.#activeInterval);
+      return;
+    }
+
+    this.#activeInterval = window.setInterval(() => {
+      this.#getStatus();
+    }, pollingInterval);
+  });
+
+  start() {
+    this.#isGettingServerState.set(true);
+    this.#getServerState();
+  }
+
+  stop() {
+    this.#isGettingServerState.set(false);
+  }
+
+  startPollingProgress() {
+    this.#getStatus();
+    this.#isPolling.set(true);
+  }
+
+  stopPollingProgress() {
+    this.#isPolling.set(false);
+  }
+
+  setPollingInterval(time: number) {
+    if (time < this.#MIN_POLL_INTERVAL) {
+      console.error(`Polling interval must be at least ${this.#MIN_POLL_INTERVAL}ms`);
+
+      return;
+    }
+
+    this.#pollingInterval.set(time);
+  }
+
+  serverStateEffect = effect(
+    () => {
+      if (this.#blocker()) {
+        this.stopPollingProgress();
+        return;
+      }
+
+      if (!this.#serverStateLoading() && this.#isGettingServerState()) {
+        setTimeout(() => {
+          this.startPollingProgress();
+          this.#getServerState();
+        }, 1000);
+      } else {
+        this.stopPollingProgress();
+      }
+    },
+    {
+      allowSignalWrites: true,
+    }
+  );
+
+  #getServerState() {
+    if (this.#serverStateLoading()) return;
+
+    this.#serverStateLoading.set(true);
+    const lastEventId = this.#serverState()?.LastEventID;
+
+    const params: GetApiV1ServerstateData = lastEventId === null || lastEventId === undefined
+      ? {}
+      : {
+          lastEventId: lastEventId,
+          longpoll: true,
+          duration: '299s',
+        };
+
+    this.#dupServer
+      .getApiV1Serverstate(params)
+      .pipe(finalize(() => this.#serverStateLoading.set(false)))
+      .subscribe({
+        next: (res) => {
+          if (this.#serverState()?.LastDataUpdateID !== res.LastDataUpdateID) {
+            this.#backupState.getBackups();
+          }
+
+          this.#serverState.set(res);
+        },
+      });
+  }
+
+  #getStatus() {
+    this.#isFetching.set(true);
+    this.#progState
+      .getApiV1Progressstate()
+      .pipe(
+        switchMap((x) => {
+          const taskId = x.TaskID ?? null;
+
+          if (taskId === null) return of(x);
+
+          return this.#dupServer
+            .getApiV1TaskByTaskid({
+              taskid: taskId,
+            })
+            .pipe(map((res) => ({ ...x, task: res ?? null })));
+        }),
+        finalize(() => this.#isFetching.set(false))
+      )
+      .subscribe({
+        next: (res: Status) => {
+          const taskId = res.TaskID ?? null;
+          const backupId = res.BackupID ?? null;
+
+          if (taskId !== null && backupId !== null) {
+            const backup = this.#backupState.getBackupById(backupId);
+
+            res.backup = backup;
+          }
+
+          this.#statusData.set(res);
+        },
+      });
+  }
+}

package/src/app/core/components/toggle-card/toggle-card.component.html

@@ -0,0 +1,11 @@
+<h3 (click)="disallowToggle() || toggle()">
+  <ng-content select="[title]">Title</ng-content>
+
+  @if (!disallowToggle()) {
+    <spk-icon>caret-down</spk-icon>
+  }
+</h3>
+
+<div class="content">
+  <ng-content></ng-content>
+</div>

package/src/app/core/components/toggle-card/toggle-card.component.scss

@@ -0,0 +1,49 @@
+@use '@sparkle-ui/core/styles/helpers' as *;
+
+:host {
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--shape-3);
+  background-color: var(--base-level-20);
+
+  &.active {
+    .content {
+      max-height: 1000px;
+      transition: max-height 1s linear;
+      padding: p2r(0 16 16);
+    }
+
+    spk-icon {
+      transform: rotate(180deg);
+    }
+  }
+
+  h3 {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font: var(--paragraph-10);
+    padding: p2r(16);
+    cursor: pointer;
+    user-select: none;
+  }
+
+  spk-icon {
+    transform: rotate(0);
+    transform-origin: center;
+    transition: transform 200ms ease;
+  }
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: p2r(16);
+
+  padding: p2r(0 16 0);
+  overflow: hidden;
+  max-height: 0;
+  transition:
+    max-height 250ms linear,
+    padding 250ms linear;
+}

package/src/app/core/components/toggle-card/toggle-card.component.ts

@@ -0,0 +1,28 @@
+import { ChangeDetectionStrategy, Component, input, model } from '@angular/core';
+import { SparkleIconComponent } from '@sparkle-ui/core';
+
+@Component({
+  selector: 'app-toggle-card',
+  standalone: true,
+  imports: [SparkleIconComponent],
+  templateUrl: './toggle-card.component.html',
+  styleUrl: './toggle-card.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    '[class.active]': 'isActive()',
+  },
+})
+export default class ToggleCardComponent {
+  isActive = model(false);
+  disallowToggle = input(false);
+
+  ngOnInit() {
+    if (this.disallowToggle()) {
+      this.isActive.set(true);
+    }
+  }
+
+  toggle() {
+    this.isActive.set(!this.isActive());
+  }
+}

package/src/app/core/interceptors/http.interceptor.ts

@@ -0,0 +1,69 @@
+import { HttpInterceptorFn } from '@angular/common/http';
+import { inject } from '@angular/core';
+import { Router } from '@angular/router';
+import { SparkleAlertService } from '@sparkle-ui/core';
+import { catchError, switchMap, throwError } from 'rxjs';
+import { ENVIRONMENT_TOKEN } from '../../../environments/environment-token';
+import { AccessTokenOutput } from '../openapi';
+import { AppAuthState } from '../states/app-auth.state';
+
+let count = 0;
+
+export const httpInterceptor: HttpInterceptorFn = (req, next) => {
+  const auth = inject(AppAuthState);
+  const router = inject(Router);
+  const env = inject(ENVIRONMENT_TOKEN);
+  const sparkleAlertService = inject(SparkleAlertService);
+
+  let modifiedRequest = req;
+
+  // Refresh token if it's older than 15 minutes
+  if (auth.tokenSetTime() && Date.now() - auth.tokenSetTime()! > 15 * 60 * 1000 && count < 1) {
+    count++;
+
+    return auth.refreshToken().pipe(
+      switchMap((newToken: AccessTokenOutput) => {
+        modifiedRequest = req.clone({
+          headers: req.headers.set('Authorization', `Bearer ${newToken.AccessToken}`),
+        });
+
+        return next(modifiedRequest);
+      })
+    );
+  }
+
+  // Add Authorization header if token exists and request URL matches base URL
+  if (auth.token() && req.url.startsWith(env.baseUrl)) {
+    modifiedRequest = req.clone({
+      headers: req.headers.set('Authorization', `Bearer ${auth.token()}`),
+    });
+  }
+
+  // Handle HTTP errors
+  return next(modifiedRequest).pipe(
+    catchError((error) => {
+      sparkleAlertService.error(error.message);
+
+      // If 401 error, attempt to refresh token and retry request (uncomment if needed)
+      if (error.status === 401 && count < 1) {
+        count++;
+
+        return auth.refreshToken().pipe(
+          switchMap(() => {
+            return next(
+              req.clone({
+                headers: req.headers.set('Authorization', `Bearer ${auth.token()}`),
+              })
+            );
+          })
+        );
+      } else if (error.status === 401) {
+        router.navigate(['/logout']);
+        count = 0;
+      }
+
+      const errorMsg = `Error Code: ${error.status}, Message: ${error.message}`;
+      return throwError(() => errorMsg);
+    })
+  );
+};

package/src/app/core/interceptors/websocket.interceptor.ts

@@ -0,0 +1,66 @@
+import { HttpEvent, HttpHeaders, HttpInterceptorFn, HttpResponse } from '@angular/common/http';
+import { inject } from '@angular/core';
+import { Observable } from 'rxjs';
+import { ENVIRONMENT_TOKEN } from '../../../environments/environment-token';
+import { RelayWebsocketService, RequestMethod } from '../services/relay-websocket.service';
+import { RelayconfigState } from '../states/relayconfig.state';
+
+function bufferToStringBase64(str: any) {
+  // TODO - Handle files... (Probably a buffer already and should just be returned as is)
+  if (typeof str !== 'string') {
+    return null;
+  }
+
+  const encoder = new TextEncoder();
+  const uint8Array = encoder.encode(str);
+  return window.btoa(String.fromCharCode(...uint8Array));
+}
+
+export const httpInterceptorWebsocketRelay: HttpInterceptorFn = (req, next) => {
+  const relayconfigState = inject(RelayconfigState);
+  const relayconfig = relayconfigState.config();
+  const environment = inject(ENVIRONMENT_TOKEN);
+
+  if (relayconfig === null) return next(req);
+
+  const relayWebsocket = inject(RelayWebsocketService);
+  const bodyBase64 = bufferToStringBase64(req.body);
+  const headers: { [key: string]: string } = {};
+  req.headers.keys().forEach((key) => {
+    headers[key] = req.headers.get(key) ?? '';
+  });
+
+  const timeoutHeaderValue = req.headers.get('timeout');
+  const timeoutValue = timeoutHeaderValue !== null ? parseInt(timeoutHeaderValue) : environment.defaultTimeout;
+
+  const p = relayWebsocket.sendCommand(
+    relayconfig.accessToken,
+    relayconfig.clientId,
+    req.method as RequestMethod,
+    req.url,
+    bodyBase64,
+    headers,
+    timeoutValue
+  );
+
+  return new Observable<HttpEvent<any>>((observer) => {
+    p.then((response) => {
+      const httpHeaders = new HttpHeaders();
+      if (headers != null) {
+        Object.keys(headers).forEach((key) => {
+          httpHeaders.set(key, headers[key]);
+        });
+      }
+
+      const httpResponse = new HttpResponse({
+        body: response.body,
+        status: response.code,
+        statusText: 'OK',
+        headers: httpHeaders,
+      });
+
+      observer.next(httpResponse);
+      observer.complete();
+    });
+  });
+};

package/src/app/core/openapi/core/ApiError.ts

@@ -0,0 +1,21 @@
+import type { ApiRequestOptions } from './ApiRequestOptions';
+import type { ApiResult } from './ApiResult';
+
+export class ApiError extends Error {
+	public readonly url: string;
+	public readonly status: number;
+	public readonly statusText: string;
+	public readonly body: unknown;
+	public readonly request: ApiRequestOptions;
+
+	constructor(request: ApiRequestOptions, response: ApiResult, message: string) {
+		super(message);
+
+		this.name = 'ApiError';
+		this.url = response.url;
+		this.status = response.status;
+		this.statusText = response.statusText;
+		this.body = response.body;
+		this.request = request;
+	}
+}

package/src/app/core/openapi/core/ApiRequestOptions.ts

@@ -0,0 +1,21 @@
+export type ApiRequestOptions<T = unknown> = {
+	readonly body?: any;
+	readonly cookies?: Record<string, unknown>;
+	readonly errors?: Record<number | string, string>;
+	readonly formData?: Record<string, unknown> | any[] | Blob | File;
+	readonly headers?: Record<string, unknown>;
+	readonly mediaType?: string;
+	readonly method:
+		| 'DELETE'
+		| 'GET'
+		| 'HEAD'
+		| 'OPTIONS'
+		| 'PATCH'
+		| 'POST'
+		| 'PUT';
+	readonly path?: Record<string, unknown>;
+	readonly query?: Record<string, unknown>;
+	readonly responseHeader?: string;
+	readonly responseTransformer?: (data: unknown) => Promise<T>;
+	readonly url: string;
+};

package/src/app/core/openapi/core/ApiResult.ts

@@ -0,0 +1,7 @@
+export type ApiResult<TData = any> = {
+	readonly body: TData;
+	readonly ok: boolean;
+	readonly status: number;
+	readonly statusText: string;
+	readonly url: string;
+};

package/src/app/core/openapi/core/OpenAPI.ts

@@ -0,0 +1,55 @@
+import type { HttpResponse } from '@angular/common/http';
+import type { ApiRequestOptions } from './ApiRequestOptions';
+
+type Headers = Record<string, string>;
+type Middleware<T> = (value: T) => T | Promise<T>;
+type Resolver<T> = (options: ApiRequestOptions<T>) => Promise<T>;
+
+export class Interceptors<T> {
+  _fns: Middleware<T>[];
+
+  constructor() {
+    this._fns = [];
+  }
+
+  eject(fn: Middleware<T>): void {
+    const index = this._fns.indexOf(fn);
+    if (index !== -1) {
+      this._fns = [...this._fns.slice(0, index), ...this._fns.slice(index + 1)];
+    }
+  }
+
+  use(fn: Middleware<T>): void {
+    this._fns = [...this._fns, fn];
+  }
+}
+
+export type OpenAPIConfig = {
+	BASE: string;
+	CREDENTIALS: 'include' | 'omit' | 'same-origin';
+	ENCODE_PATH?: ((path: string) => string) | undefined;
+	HEADERS?: Headers | Resolver<Headers> | undefined;
+	PASSWORD?: string | Resolver<string> | undefined;
+	TOKEN?: string | Resolver<string> | undefined;
+	USERNAME?: string | Resolver<string> | undefined;
+	VERSION: string;
+	WITH_CREDENTIALS: boolean;
+	interceptors: {
+		response: Interceptors<HttpResponse<any>>;
+	};
+};
+
+export const OpenAPI: OpenAPIConfig = {
+	BASE: '',
+	CREDENTIALS: 'include',
+	ENCODE_PATH: undefined,
+	HEADERS: undefined,
+	PASSWORD: undefined,
+	TOKEN: undefined,
+	USERNAME: undefined,
+	VERSION: '1',
+	WITH_CREDENTIALS: false,
+	interceptors: {
+		response: new Interceptors(),
+	},
+};