Merge pull request #163 from numbersprotocol/feature-capture-wall

Feature capture wall

capacitor.config.json

@@ -12,4 +12,4 @@
   },
   "cordova": {},
   "linuxAndroidStudioPath": "/home/username/android-studio/bin/studio.sh"
-}
+}

package.json

@@ -8,17 +8,20 @@
     "preconfig": "node set-secret.js",
     "serve": "npm run preconfig && ionic serve",
     "build": "npm run preconfig && ionic build",
-    "build-android": "npm run build && cap sync && cap open android",
+    "build-android": "npm run build && cap sync android && cap open android",
     "test": "npm run preconfig && ng test",
     "test-ci": "npm run preconfig && ng test --no-watch --no-progress --browsers=ChromeHeadlessCI",
     "lint": "npm run preconfig && ng lint",
     "e2e": "npm run preconfig && ng e2e"
   },
   "private": true,
   "dependencies": {
+    "@angular/animations": "~10.0.6",
+    "@angular/cdk": "^10.2.7",
     "@angular/common": "~10.0.6",
     "@angular/core": "~10.0.6",
     "@angular/forms": "~10.0.6",
+    "@angular/material": "^10.2.7",
     "@angular/platform-browser": "~10.0.6",
     "@angular/platform-browser-dynamic": "~10.0.6",
     "@angular/router": "~10.0.6",
@@ -30,10 +33,10 @@
     "@ionic/pwa-elements": "^3.0.1",
     "@ngneat/transloco": "^2.19.1",
     "@ngneat/until-destroy": "^8.0.2",
-    "image-blob-reduce": "^2.0.0",
     "@ngx-formly/core": "^5.0.0",
     "@ngx-formly/ionic": "^5.0.0",
     "@ngx-formly/schematics": "^5.10.3",
+    "image-blob-reduce": "^2.0.0",
     "rxjs": "~6.6.3",
     "tslib": "^2.0.1",
     "zone.js": "~0.10.2"

src/app/app-routing.module.ts

@@ -1,33 +1,38 @@
 import { NgModule } from '@angular/core';
 import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
-
 import { AuthGuardService } from './services/auth/auth-guard.service';
 import { LoginGuardService } from './services/auth/login-guard.service';
 
+
 const routes: Routes = [{
   path: '',
   redirectTo: 'storage',
   pathMatch: 'full'
-},
-{
+}, {
   path: 'login',
   loadChildren: () => import('./pages/login/login.module').then(m => m.LoginPageModule),
   canActivate: [LoginGuardService],
-},
-{
+}, {
   path: 'signup',
   loadChildren: () => import('./pages/signup/signup.module').then(m => m.SignupPageModule)
-},
-
-{
+}, {
   path: 'storage',
   loadChildren: () => import('./pages/storage/storage.module').then(m => m.StoragePageModule),
   canActivate: [AuthGuardService],
-},
-{
+}, {
+  path: 'profile',
+  loadChildren: () => import('./pages/profile/profile.module').then(m => m.ProfilePageModule)
+}, {
   path: 'settings',
   loadChildren: () => import('./pages/settings/settings.module').then(m => m.SettingsPageModule),
   canActivate: [AuthGuardService],
+}, {
+  path: 'privacy',
+  loadChildren: () => import('./pages/privacy/privacy.module').then(m => m.PrivacyPageModule)
+}, {
+  path: 'about',
+  loadChildren: () => import('./pages/about/about.module').then(m => m.AboutPageModule),
+  canActivate: [AuthGuardService],
 }, {
   path: 'proof',
   loadChildren: () => import('./pages/proof/proof.module').then(m => m.ProofPageModule),
@@ -44,25 +49,7 @@ const routes: Routes = [{
   path: 'publishers/numbers-storage',
   loadChildren: () => import('./pages/publishers/numbers-storage/numbers-storage.module').then(m => m.NumbersStoragePageModule),
   canActivate: [AuthGuardService],
-}, {
-  path: 'general',
-  loadChildren: () => import('./pages/general/general.module').then(m => m.GeneralPageModule),
-  canActivate: [AuthGuardService],
-}, {
-  path: 'defaultinformationprovider',
-  // tslint:disable-next-line: max-line-length
-  loadChildren: () => import('./pages/defaultinformationprovider/defaultinformationprovider.module').then(m => m.DefaultInformationProviderPageModule),
-  canActivate: [AuthGuardService],
-}, {
-  path: 'defaultsignature',
-  loadChildren: () => import('./pages/defaultsignature/defaultsignature.module').then(m => m.DefaultSignaturePageModule),
-  canActivate: [AuthGuardService],
-}, {
-  path: 'about',
-  loadChildren: () => import('./pages/about/about.module').then(m => m.AboutPageModule),
-  canActivate: [AuthGuardService],
-},
-];
+}];
 
 @NgModule({
   imports: [

src/app/app.module.ts

@@ -1,17 +1,19 @@
 import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MAT_SNACK_BAR_DEFAULT_OPTIONS } from '@angular/material/snack-bar';
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouteReuseStrategy, RouterModule } from '@angular/router';
-
 import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
 import { FormlyModule } from '@ngx-formly/core';
 import { FormlyIonicModule } from '@ngx-formly/ionic';
-
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { TranslocoRootModule } from './transloco/transloco-root.module';
 
+
+
 @NgModule({
   declarations: [AppComponent],
   entryComponents: [],
@@ -25,9 +27,14 @@ import { TranslocoRootModule } from './transloco/transloco-root.module';
     ReactiveFormsModule,
     FormlyModule.forRoot({ extras: { lazyRender: true } }),
     FormlyIonicModule,
-    RouterModule.forRoot([])
+    RouterModule.forRoot([]),
+    BrowserAnimationsModule
   ],
-  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
+  providers: [{
+    provide: RouteReuseStrategy, useClass: IonicRouteStrategy
+  }, {
+    provide: MAT_SNACK_BAR_DEFAULT_OPTIONS, useValue: { duration: 2500 }
+  }],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/components/post-capture-card/post-capture-card.component.html

@@ -0,0 +1,47 @@
+<mat-card *transloco="let t">
+  <mat-card-header>
+    <div mat-card-avatar class="post-capture-avatar"></div>
+    <mat-card-title>User Name</mat-card-title>
+    <mat-card-subtitle>sent from n hours</mat-card-subtitle>
+    <span class="toolbar-spacer"></span>
+    <button mat-icon-button>
+      <mat-icon>more_vert</mat-icon>
+    </button>
+  </mat-card-header>
+  <img [src]="imageSrc" mat-card-image>
+  <mat-card-content>
+    <mat-list dense class="info-list" [class.info-list-show]="openMore">
+      <mat-list-item>
+        <mat-icon mat-list-icon>access_time</mat-icon>
+        <div mat-line>
+          <span>{{ t('timestamp') }}</span>
+          <span class="info-list-content">{{ proof.timestamp | date:'medium' }}</span>
+        </div>
+      </mat-list-item>
+      <mat-list-item>
+        <mat-icon mat-list-icon>place</mat-icon>
+        <div mat-line>
+          <span>{{ t('address') }}</span>
+          <span class="info-list-content">877 N Trinity St Eagle Pass, Texas(TX), 78852</span>
+        </div>
+      </mat-list-item>
+      <mat-list-item>
+        <mat-icon svgIcon="media-id" mat-list-icon></mat-icon>
+        <div mat-line>
+          <span>{{ t('mediaId') }}</span>
+          <span class="info-list-content">abcdef-abcdef-abcdef-abcdef-abcdef-abcdef-abcdef-abcdef-abcdef</span>
+        </div>
+      </mat-list-item>
+    </mat-list>
+    <p class="caption-ellipsis mat-body" [class.caption-full]="openMore">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+      dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+      aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+      officia deserunt mollit anim id est laborum.
+    </p>
+  </mat-card-content>
+  <mat-card-actions [align]="'end'">
+    <button (click)="openMore = !openMore" mat-button>{{ t('viewAll') + '...' }}</button>
+  </mat-card-actions>
+</mat-card>

src/app/components/post-capture-card/post-capture-card.component.scss

@@ -0,0 +1,49 @@
+:host {
+  display: block;
+}
+
+.toolbar-spacer {
+  flex: 1 1 auto;
+}
+
+mat-card img {
+  max-width: initial;
+}
+
+mat-card-content {
+  margin-bottom: 0;
+}
+
+.post-capture-avatar {
+  background-image: url("https://gravatar.com/avatar/8db683da3c728970bb776f6cc4048fd2?s=400&d=mp&r=x");
+  background-size: cover;
+}
+
+.caption-ellipsis {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.caption-full {
+  overflow: visible;
+  height: auto;
+  text-overflow: initial;
+  white-space: initial;
+}
+
+.info-list {
+  display: none;
+}
+
+.info-list-show {
+  display: block;
+}
+
+.info-list-content {
+  width: 60%;
+  float: right;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}

src/app/components/post-capture-card/post-capture-card.component.spec.ts

@@ -0,0 +1,42 @@
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+import { IonicModule } from '@ionic/angular';
+import { Proof } from 'src/app/services/data/proof/proof';
+import { getTranslocoModule } from 'src/app/transloco/transloco-root.module.spec';
+import { PostCaptureCardComponent } from './post-capture-card.component';
+
+describe('PostCaptureCardComponent', () => {
+  let component: PostCaptureCardComponent;
+  let fixture: ComponentFixture<PostCaptureCardComponent>;
+  const expectedProof: Proof = { hash: '1234567890abcdef', timestamp: 1604473851208, mimeType: 'image/jpeg' };
+  const expectedImageSrc = 'https://picsum.photos/200/300';
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [PostCaptureCardComponent],
+      imports: [
+        IonicModule.forRoot(),
+        HttpClientTestingModule,
+        MatCardModule,
+        MatButtonModule,
+        MatIconModule,
+        MatListModule,
+        getTranslocoModule()
+      ]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PostCaptureCardComponent);
+    component = fixture.componentInstance;
+    component.proof = expectedProof;
+    component.imageSrc = expectedImageSrc;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/post-capture-card/post-capture-card.component.ts

@@ -0,0 +1,24 @@
+import { Component, Input } from '@angular/core';
+import { MatIconRegistry } from '@angular/material/icon';
+import { DomSanitizer } from '@angular/platform-browser';
+import { Proof } from 'src/app/services/data/proof/proof';
+
+@Component({
+  selector: 'app-post-capture-card',
+  templateUrl: './post-capture-card.component.html',
+  styleUrls: ['./post-capture-card.component.scss'],
+})
+export class PostCaptureCardComponent {
+
+  @Input() proof!: Proof;
+  @Input() imageSrc!: string;
+
+  openMore = false;
+
+  constructor(
+    iconRegistry: MatIconRegistry,
+    sanitizer: DomSanitizer
+  ) {
+    iconRegistry.addSvgIcon('media-id', sanitizer.bypassSecurityTrustResourceUrl('/assets/icon/media-id.svg'));
+  }
+}