Rebuild Capture - Step D2 (Auto-uploading)

src/app/app.component.ts

@@ -10,6 +10,7 @@ import { CaptureService } from './shared/services/capture/capture.service';
 import { CollectorService } from './shared/services/collector/collector.service';
 import { CapacitorFactsProvider } from './shared/services/collector/facts/capacitor-facts-provider/capacitor-facts-provider.service';
 import { WebCryptoApiSignatureProvider } from './shared/services/collector/signature/web-crypto-api-signature-provider/web-crypto-api-signature-provider.service';
+import { DiaBackendAssetUploadingService } from './shared/services/dia-backend/asset/uploading/dia-backend-asset-uploading.service';
 import { DiaBackendAuthService } from './shared/services/dia-backend/auth/dia-backend-auth.service';
 import { DiaBackendNotificationService } from './shared/services/dia-backend/notification/dia-backend-notification.service';
 import { LanguageService } from './shared/services/language/language.service';
@@ -38,12 +39,14 @@ export class AppComponent {
     pushNotificationService: PushNotificationService,
     langaugeService: LanguageService,
     diaBackendAuthService: DiaBackendAuthService,
-    diaBackendNotificationService: DiaBackendNotificationService
+    diaBackendNotificationService: DiaBackendNotificationService,
+    uploadService: DiaBackendAssetUploadingService
   ) {
     notificationService.requestPermission();
     pushNotificationService.register();
     langaugeService.initialize();
     diaBackendAuthService.initialize$().pipe(untilDestroyed(this)).subscribe();
+    uploadService.initialize$().pipe(untilDestroyed(this)).subscribe();
     diaBackendNotificationService
       .initialize$()
       .pipe(untilDestroyed(this))

src/app/features/home/capture-tab/capture-details/capture-details.page.html

@@ -24,16 +24,23 @@
         {{ location$ | async }}
       </div>
     </mat-list-item>
-    <mat-list-item>
-      <mat-icon mat-list-icon>access_time</mat-icon>
-      <div mat-line>
-        {{ (proof$ | async)?.truth.timestamp | date: 'long' }}
-      </div>
-    </mat-list-item>
-    <mat-list-item>
-      <mat-icon svgIcon="media-id" mat-list-icon></mat-icon>
-      <div mat-line>{{ '' }}</div>
-    </mat-list-item>
+    <ng-container *ngIf="proof$ | async as proof">
+      <mat-list-item>
+        <mat-icon mat-list-icon>access_time</mat-icon>
+        <div mat-line>
+          {{ proof.truth.timestamp | date: 'long' }}
+        </div>
+      </mat-list-item>
+      <mat-list-item>
+        <mat-icon svgIcon="media-id" mat-list-icon></mat-icon>
+        <div mat-line *ngIf="proof.diaBackendAssetId">
+          {{ proof.diaBackendAssetId }}
+        </div>
+        <div mat-line *ngIf="!proof.diaBackendAssetId">
+          {{ t('notRegistered') }}
+        </div>
+      </mat-list-item>
+    </ng-container>
     <mat-list-item>
       <button
         routerLink="information"

src/app/features/home/capture-tab/uploading-bar/uploading-bar.component.html

@@ -0,0 +1,48 @@
+<ng-container
+  *ngIf="{
+    currentUploadingCount: currentUploadingCount$ | async,
+    isPaused: isPaused$ | async,
+    isPausedByFailure: isPausedByFailure$ | async
+  } as uploadState"
+>
+  <mat-toolbar color="background" class="thin-upload-bar" *transloco="let t">
+    <ng-container *ngIf="uploadState.currentUploadingCount > 0; else completed">
+      <span class="upload-text" *ngIf="!uploadState.isPaused">{{
+        t('message.registeringPhotos', {
+          photos: uploadState.currentUploadingCount
+        })
+      }}</span>
+      <span
+        class="upload-text"
+        *ngIf="uploadState.isPaused && !uploadState.isPausedByFailure"
+        >{{
+          t('message.registeringPhotosPaused', {
+            photos: uploadState.currentUploadingCount
+          })
+        }}</span
+      >
+      <span
+        class="upload-text"
+        *ngIf="uploadState.isPaused && uploadState.isPausedByFailure"
+        >{{ t('message.serverConnectionLost') }}</span
+      >
+      <span class="spacer">
+        <mat-progress-bar
+          *ngIf="!uploadState.isPaused"
+          mode="indeterminate"
+        ></mat-progress-bar>
+      </span>
+      <mat-icon *ngIf="!uploadState.isPaused" (click)="pause()">pause</mat-icon>
+      <mat-icon *ngIf="uploadState.isPaused" (click)="resume()"
+        >publish</mat-icon
+      >
+    </ng-container>
+    <ng-template #completed>
+      <span
+        class="complete-text"
+        *ngIf="uploadState.currentUploadingCount === 0"
+        >{{ t('message.allPhotosRegistered') }}</span
+      >
+    </ng-template>
+  </mat-toolbar>
+</ng-container>

src/app/features/home/capture-tab/uploading-bar/uploading-bar.component.scss

@@ -0,0 +1,31 @@
+.thin-upload-bar {
+  min-height: 32px;
+  height: 32px;
+  justify-content: stretch;
+  transition: all 1s;
+
+  .upload-text {
+    flex-grow: 0;
+    font-size: 0.7em;
+    margin-left: 10px;
+    margin-right: 10px;
+    color: darkgray;
+  }
+
+  .complete-text {
+    flex-grow: 1;
+    font-size: 0.7em;
+    margin-left: 10px;
+    margin-right: 10px;
+    color: darkgray;
+  }
+
+  mat-icon {
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+}
+
+.spacer {
+  flex: 1 1 auto;
+}

src/app/features/home/capture-tab/uploading-bar/uploading-bar.component.spec.ts

@@ -0,0 +1,23 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { SharedTestingModule } from '../../../../shared/shared-testing.module';
+import { UploadingBarComponent } from './uploading-bar.component';
+
+describe('UploadingBarComponent', () => {
+  let component: UploadingBarComponent;
+  let fixture: ComponentFixture<UploadingBarComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [UploadingBarComponent],
+      imports: [SharedTestingModule],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(UploadingBarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/features/home/capture-tab/uploading-bar/uploading-bar.component.ts

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { DiaBackendAssetUploadingService } from '../../../../shared/services/dia-backend/asset/uploading/dia-backend-asset-uploading.service';
+
+@Component({
+  selector: 'app-uploading-bar',
+  templateUrl: './uploading-bar.component.html',
+  styleUrls: ['./uploading-bar.component.scss'],
+})
+export class UploadingBarComponent {
+  currentUploadingCount$ = this.uploadService.currentUploadingCount$;
+  isPaused$ = this.uploadService.isPaused$;
+  isPausedByFailure$ = this.uploadService.isPausedByFailure$;
+
+  constructor(
+    private readonly uploadService: DiaBackendAssetUploadingService
+  ) {}
+
+  pause() {
+    this.uploadService.pause();
+  }
+
+  resume() {
+    this.uploadService.resume();
+  }
+}

src/app/features/home/home.module.ts

@@ -2,11 +2,12 @@ import { NgModule } from '@angular/core';
 import { PostCaptureCardModule } from '../../shared/core/post-capture-card/post-capture-card.module';
 import { SharedModule } from '../../shared/shared.module';
 import { CaptureTabComponent } from './capture-tab/capture-tab.component';
+import { UploadingBarComponent } from './capture-tab/uploading-bar/uploading-bar.component';
 import { HomePageRoutingModule } from './home-routing.module';
 import { HomePage } from './home.page';
 
 @NgModule({
   imports: [SharedModule, HomePageRoutingModule, PostCaptureCardModule],
-  declarations: [HomePage, CaptureTabComponent],
+  declarations: [HomePage, CaptureTabComponent, UploadingBarComponent],
 })
 export class HomePageModule {}

src/app/features/home/home.page.html

@@ -53,13 +53,13 @@
         >
       </button>
     </mat-toolbar>
-
     <mat-tab-group
       (selectedTabChange)="onTapChanged($event)"
       mat-align-tabs="center"
       backgroundColor="primary"
     >
       <mat-tab label="Capture">
+        <app-uploading-bar></app-uploading-bar>
         <app-capture-tab></app-capture-tab>
       </mat-tab>
       <mat-tab label="PostCapture">

src/app/features/home/home.page.spec.ts

@@ -2,6 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { Router } from '@angular/router';
 import { SharedTestingModule } from '../../shared/shared-testing.module';
 import { CaptureTabComponent } from './capture-tab/capture-tab.component';
+import { UploadingBarComponent } from './capture-tab/uploading-bar/uploading-bar.component';
 import { HomePage } from './home.page';
 
 describe('HomePage', () => {
@@ -10,7 +11,7 @@ describe('HomePage', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [HomePage, CaptureTabComponent],
+      declarations: [HomePage, CaptureTabComponent, UploadingBarComponent],
       imports: [SharedTestingModule],
     }).compileComponents();
 

src/app/shared/services/collector/collector.service.ts

@@ -23,7 +23,9 @@ export class CollectorService {
   async run(assets: Assets) {
     const truth = await this.collectTruth(assets);
     const signatures = await this.signTargets({ assets, truth });
-    return Proof.from(this.imageStore, assets, truth, signatures);
+    const proof = await Proof.from(this.imageStore, assets, truth, signatures);
+    proof.isCollected = true;
+    return proof;
   }
 
   private async collectTruth(assets: Assets): Promise<Truth> {

src/app/shared/services/dia-backend/asset/dia-backend-asset-repository.service.ts

@@ -6,6 +6,7 @@ import {
   concatMap,
   concatMapTo,
   distinctUntilChanged,
+  map,
   pluck,
   single,
   tap,
@@ -15,6 +16,7 @@ import { toExtension } from '../../../../utils/mime-type';
 import { Tuple } from '../../database/table/table';
 import { NotificationService } from '../../notification/notification.service';
 import {
+  getOldProof,
   getOldSignatures,
   getSortedProofInformation,
   OldSignature,
@@ -55,6 +57,18 @@ export class DiaBackendAssetRepository {
     );
   }
 
+  fetchByProof$(proof: Proof) {
+    return defer(() => this.authService.getAuthHeaders()).pipe(
+      concatMap(headers =>
+        this.httpClient.get<ListAssetResponse>(`${BASE_URL}/api/v2/assets/`, {
+          headers,
+          params: { proof_hash: getOldProof(proof).hash },
+        })
+      ),
+      map(listAssetResponse => listAssetResponse.results[0])
+    );
+  }
+
   private fetchAll$() {
     return defer(async () => this._isFetching$.next(true)).pipe(
       concatMapTo(defer(() => this.authService.getAuthHeaders())),

src/app/shared/services/dia-backend/asset/uploading/dia-backend-asset-uploading.service.spec.ts

@@ -0,0 +1,18 @@
+import { TestBed } from '@angular/core/testing';
+import { SharedTestingModule } from '../../../../shared-testing.module';
+import { DiaBackendAssetUploadingService } from './dia-backend-asset-uploading.service';
+
+describe('DiaBackendAssetUploadingService', () => {
+  let service: DiaBackendAssetUploadingService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [SharedTestingModule],
+    });
+    service = TestBed.inject(DiaBackendAssetUploadingService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});