Skip to content

Commit

Permalink
Rebuild information details with angular-material.
Browse files Browse the repository at this point in the history
  • Loading branch information
@seanwu1105
seanwu1105 committed Nov 5, 2020
1 parent 470752d commit 9f7df33
Show file tree
Hide file tree
Showing 6 changed files with 84 additions and 87 deletions.
14 changes: 11 additions & 3 deletions src/app/pages/storage/proof/information/information.module.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatToolbarModule } from '@angular/material/toolbar';
import { IonicModule } from '@ionic/angular';
import { TranslocoModule } from '@ngneat/transloco';
import { InformationPageRoutingModule } from './information-routing.module';
Expand All @@ -9,10 +13,14 @@ import { InformationPage } from './information.page';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
InformationPageRoutingModule,
TranslocoModule
TranslocoModule,
MatToolbarModule,
MatButtonModule,
MatIconModule,
MatListModule,
MatSnackBarModule
],
declarations: [InformationPage]
})
Expand Down
107 changes: 38 additions & 69 deletions src/app/pages/storage/proof/information/information.page.html
View file
Original file line number Diff line number Diff line change
@@ -1,69 +1,38 @@
<ion-header *transloco="let t">
<ion-toolbar>
<ion-buttons slot="start">
<ion-button routerLink="../../../" routerDirection="back">
<ion-icon slot="icon-only" name="arrow-back"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>{{ t('informationDetails') }}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content *transloco="let t">
<ion-item>
<ion-slide>
<ion-card class="slide-card">
<ion-card-header>
<ion-card-title>{{ t('location') }}</ion-card-title>
</ion-card-header>
<ion-card-content>
<ion-list lines="none" *ngFor="let information of (locationInformation$ | async)">
<ion-item>
<ion-label class="ion-text-wrap">
<h3>{{ information.name }}</h3>
<p>{{ information.value }}</p>
</ion-label>
</ion-item>
</ion-list>
</ion-card-content>
</ion-card>
</ion-slide>
</ion-item>
<ion-item>
<ion-slide>
<ion-card class="slide-card">
<ion-card-header>
<ion-card-title>{{ t('other') }}</ion-card-title>
</ion-card-header>
<ion-card-content>
<ion-list lines="none" *ngFor="let information of (otherInformation$ | async)">
<ion-item>
<ion-label class="ion-text-wrap">
<h3>{{ information.name }}</h3>
<p>{{ information.value }}</p>
</ion-label>
</ion-item>
</ion-list>
</ion-card-content>
</ion-card>
</ion-slide>
</ion-item>
<ion-item>
<ion-slide>
<ion-card class="slide-card">
<ion-card-header>
<ion-card-title>{{ t('device') }}</ion-card-title>
</ion-card-header>
<ion-card-content>
<ion-list lines="none" *ngFor="let information of (deviceInformation$ | async)">
<ion-item>
<ion-label class="ion-text-wrap">
<h3>{{ information.name }}</h3>
<p>{{ information.value }}</p>
</ion-label>
</ion-item>
</ion-list>
</ion-card-content>
</ion-card>
</ion-slide>
</ion-item>
</ion-content>
<mat-toolbar *transloco="let t">
<button routerLink="../../../" routerDirection="back" mat-icon-button>
<mat-icon>arrow_back</mat-icon>
</button>
<span>{{ t('informationDetails') }}</span>
</mat-toolbar>

<div class="page-content">
<mat-list *transloco="let t">
<div *ngIf="(locationInformation$ | async)?.length" mat-subheader>{{ t('location') }}</div>
<mat-list-item *ngFor="let information of (locationInformation$ | async)">
<mat-icon mat-list-icon>information</mat-icon>
<div mat-line>{{ information.name }}</div>
<div mat-line>{{ information.value }}</div>
<button *ngIf="information.value as value" (click)="copyToClipboard(value)" mat-icon-button>
<mat-icon>content_copy</mat-icon>
</button>
</mat-list-item>
<div *ngIf="(deviceInformation$ | async)?.length" mat-subheader>{{ t('device') }}</div>
<mat-list-item *ngFor="let information of (deviceInformation$ | async)">
<mat-icon mat-list-icon>information</mat-icon>
<div mat-line>{{ information.name }}</div>
<div mat-line>{{ information.value }}</div>
<button *ngIf="information.value as value" (click)="copyToClipboard(value)" mat-icon-button>
<mat-icon>content_copy</mat-icon>
</button>
</mat-list-item>
<div *ngIf="(otherInformation$ | async)?.length" mat-subheader>{{ t('other') }}</div>
<mat-list-item *ngFor="let information of (otherInformation$ | async)">
<mat-icon mat-list-icon>information</mat-icon>
<div mat-line>{{ information.name }}</div>
<div mat-line>{{ information.value }}</div>
<button *ngIf="information.value as value" (click)="copyToClipboard(value)" mat-icon-button>
<mat-icon>content_copy</mat-icon>
</button>
</mat-list-item>
</mat-list>
</div>
8 changes: 2 additions & 6 deletions src/app/pages/storage/proof/information/information.page.scss
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,3 @@
.slide-card {
width: 100%;
}

.multiline {
white-space: pre-wrap;
mat-toolbar {
background: white;
}
16 changes: 15 additions & 1 deletion src/app/pages/storage/proof/information/information.page.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatToolbarModule } from '@angular/material/toolbar';
import { RouterTestingModule } from '@angular/router/testing';
import { IonicModule } from '@ionic/angular';
import { getTranslocoModule } from 'src/app/transloco/transloco-root.module.spec';
Expand All @@ -11,7 +16,16 @@ describe('InformationPage', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [InformationPage],
imports: [IonicModule.forRoot(), RouterTestingModule, getTranslocoModule()]
imports: [
IonicModule.forRoot(),
RouterTestingModule,
getTranslocoModule(),
MatToolbarModule,
MatButtonModule,
MatIconModule,
MatListModule,
MatSnackBarModule
]
}).compileComponents();

fixture = TestBed.createComponent(InformationPage);
Expand Down
24 changes: 17 additions & 7 deletions src/app/pages/storage/proof/information/information.page.ts
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,17 @@
import { Component } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';
import { ActivatedRoute } from '@angular/router';
import { Plugins } from '@capacitor/core';
import { TranslocoService } from '@ngneat/transloco';
import { UntilDestroy } from '@ngneat/until-destroy';
import { map, pluck, switchMap } from 'rxjs/operators';
import { map, switchMap } from 'rxjs/operators';
import { InformationType } from 'src/app/services/data/information/information';
import { InformationRepository } from 'src/app/services/data/information/information-repository.service';
import { ProofRepository } from 'src/app/services/data/proof/proof-repository.service';
import { isNonNullable } from 'src/app/utils/rx-operators';

const { Clipboard } = Plugins;

@UntilDestroy({ checkProperties: true })
@Component({
selector: 'app-information',
Expand All @@ -22,26 +27,31 @@ export class InformationPage {
isNonNullable()
);

readonly hash$ = this.proof$.pipe(pluck('hash'));

readonly locationInformation$ = this.proof$.pipe(
switchMap(proof => this.informationRepository.getByProof$(proof)),
map(informationList => informationList.filter(information => information.type === InformationType.Location))
);

readonly otherInformation$ = this.proof$.pipe(
readonly deviceInformation$ = this.proof$.pipe(
switchMap(proof => this.informationRepository.getByProof$(proof)),
map(informationList => informationList.filter(information => information.type === InformationType.Other))
map(informationList => informationList.filter(information => information.type === InformationType.Device))
);

readonly deviceInformation$ = this.proof$.pipe(
readonly otherInformation$ = this.proof$.pipe(
switchMap(proof => this.informationRepository.getByProof$(proof)),
map(informationList => informationList.filter(information => information.type === InformationType.Device))
map(informationList => informationList.filter(information => information.type === InformationType.Other))
);

constructor(
private readonly route: ActivatedRoute,
private readonly proofRepository: ProofRepository,
private readonly informationRepository: InformationRepository,
private readonly translocoService: TranslocoService,
private readonly snackBar: MatSnackBar,
) { }

copyToClipboard(value: string) {
Clipboard.write({ string: value });
this.snackBar.open(this.translocoService.translate('message.copiedToClipboard'));
}
}
2 changes: 1 addition & 1 deletion src/app/services/collector/information/capacitor-provider/capacitor-provider.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ export class CapacitorProvider extends InformationProvider {
name: this.translocoService.translate('uuid'),
value: String(deviceInfo.uuid),
importance: Importance.High,
type: InformationType.Other
type: InformationType.Device
}, {
proofHash: proof.hash,
provider: this.id,
Expand Down

0 comments on commit 9f7df33

Please sign in to comment.