show my tombstones WC-2

wc/src/app/app-routing.module.ts

@@ -6,6 +6,7 @@ import {LoginComponent} from './pages/login/login.component';
 import {AuthGuard} from './helpers';
 import {UserProfileComponent} from './pages/user-profile/user-profile.component';
 import {BuyTombstoneComponent} from './pages/buy-tombstone/buy-tombstone.component';
+import {CheckTombstoneComponent} from './pages/check-tombstone/check-tombstone.component';
 
 const routes: Routes = [
   { path: '', component: HomeComponent },
@@ -13,6 +14,7 @@ const routes: Routes = [
   { path: 'register', component: RegisterComponent },
   { path: 'user-profile', component: UserProfileComponent },
   { path: 'buyTombstone', component: BuyTombstoneComponent },
+  { path: 'check-tombstone', component: CheckTombstoneComponent },
   // otherwise redirect to home
   { path: '**', redirectTo: '' }
 ];

wc/src/app/pages/check-tombstone/check-tombstone.component.css

@@ -1,3 +1,14 @@
+table {
+  width: 100%;
+}
 
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+.main {
+  margin-bottom: 500px;
+}
 
 /*# sourceMappingURL=check-tombstone.component.css.map */

wc/src/app/pages/check-tombstone/check-tombstone.component.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"check-tombstone.component.css"}
+{"version":3,"sourceRoot":"","sources":["check-tombstone.component.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE","file":"check-tombstone.component.css"}

wc/src/app/pages/check-tombstone/check-tombstone.component.html

@@ -1 +1,35 @@
-<p>check-tombstone works!</p>
+<mat-form-field>
+  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+</mat-form-field>
+
+<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+
+  <!-- Position Column -->
+  <ng-container matColumnDef="position">
+    <th mat-header-cell *matHeaderCellDef> Imię pupila </th>
+    <td mat-cell *matCellDef="let element"> {{element.petName}} </td>
+  </ng-container>
+
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <th mat-header-cell *matHeaderCellDef> Rozmiar nagrobka </th>
+    <td mat-cell *matCellDef="let element"> {{element.size}} </td>
+  </ng-container>
+
+  <!-- Weight Column -->
+  <ng-container matColumnDef="weight">
+    <th mat-header-cell *matHeaderCellDef> Właściciel nagrobka </th>
+    <td mat-cell *matCellDef="let element"> {{element.userName}} </td>
+  </ng-container>
+
+<!--  &lt;!&ndash; Symbol Column &ndash;&gt;-->
+<!--  <ng-container matColumnDef="symbol">-->
+<!--    <th mat-header-cell *matHeaderCellDef> Symbol </th>-->
+<!--    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>-->
+<!--  </ng-container>-->
+
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+</table>
+
+<div class="main"></div>

wc/src/app/pages/check-tombstone/check-tombstone.component.scss

@@ -0,0 +1,13 @@
+table {
+  width: 100%;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+.main {
+  margin-bottom: 500px;
+}
+

wc/src/app/pages/check-tombstone/check-tombstone.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import {MatTableDataSource} from '@angular/material';
 
 @Component({
   selector: 'app-check-tombstone',
@@ -7,9 +8,43 @@ import { Component, OnInit } from '@angular/core';
 })
 export class CheckTombstoneComponent implements OnInit {
 
+  displayedColumns: string[] = ['position', 'name', 'weight'];
+  private dataSource: MatTableDataSource<any>;
+  private username: any;
+  private x: any;
+  private myTombstones = [];
+
   constructor() { }
 
   ngOnInit() {
+      const tombstones = localStorage.getItem('tombstones');
+      const jsonValue = JSON.parse(tombstones)
+      console.log(jsonValue);
+      const user = localStorage.getItem('currentUser');
+      const userName = JSON.parse(user)
+      this.username = userName.username;
+      console.log(this.username);
+
+    // tslint:disable-next-line:prefer-for-of
+      for (let i = 0; i < jsonValue.length; i++) {
+        // tslint:disable-next-line:triple-equals
+        if (jsonValue[i].userName == this.username) {
+          // this.x = jsonValue[i].petName
+          // console.log(this.x)
+          this.myTombstones.push(jsonValue[i]);
+        }
+        console.log(this.myTombstones)
+
+
+      }
+      this.dataSource = new MatTableDataSource(this.myTombstones);
+
+  }
+
+
+
+  applyFilter(filterValue: string) {
+    this.dataSource.filter = filterValue.trim().toLowerCase();
   }
 
 }

wc/src/app/pages/user-profile/user-profile.component.html

@@ -5,7 +5,7 @@
       <mat-list-item>{{secondName}}</mat-list-item>
     </mat-list>
   <button mat-raised-button routerLink="/buyTombstone">Kup nowy nagrobek</button>
-  <button mat-raised-button>Moje nagrobki</button>
+  <button mat-raised-button routerLink="/check-tombstone">Moje nagrobki</button>
   <button mat-raised-button>Zarządzaj moim nagrobkami</button>
   <button mat-raised-button>Odwiedzane nagrobki</button>
 </mat-card>