From 96ff8ae45fd638602c48689fc5174335c5f17b37 Mon Sep 17 00:00:00 2001
From: Natalia Gawron <natgaw1@st.amu.edu.pl>
Date: Wed, 20 Jan 2021 20:57:59 +0100
Subject: [PATCH 1/5] SES-165 created weapon teble for player, connected with
 backend

---
 .../ClientApp/src/app/app.module.ts           |  5 ++
 .../player-dashboard.component.html           |  6 +-
 .../player-dashboard.component.ts             |  9 ++-
 .../player-weapons-table.component.css        | 43 ++++++++++++
 .../player-weapons-table.component.html       | 39 +++++++++++
 .../player-weapons-table.component.spec.ts    | 25 +++++++
 .../player-weapons-table.component.ts         | 69 +++++++++++++++++++
 .../src/services/equipment.service.ts         | 60 ++++++++++++++++
 .../OtherEquipmentViewModel.ts                |  7 ++
 9 files changed, 258 insertions(+), 5 deletions(-)
 create mode 100644 SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.css
 create mode 100644 SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.html
 create mode 100644 SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.spec.ts
 create mode 100644 SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.ts
 create mode 100644 SessionCompanion/SessionCompanion/ClientApp/src/services/equipment.service.ts
 create mode 100644 SessionCompanion/SessionCompanion/ClientApp/src/types/viewmodels/otherEquipment-viewmodels/OtherEquipmentViewModel.ts

diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts
index 20c56c3..4539f8b 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts
@@ -50,6 +50,8 @@ import { GameMasterMonstersTableComponent } from './components/game-master-monst
 import { MonsterService } from '../services/monster.service';
 import { SpellDetailsDialogComponent } from './components/spell-details-dialog/spell-details-dialog.component';
 import { GameMasterShopkeepersTableComponent } from './components/game-master-shopkeepers-table/game-master-shopkeepers-table.component';
+import { PlayerWeaponsTableComponent } from './components/player-weapons-table/player-weapons-table.component';
+import {EquipmentService} from "../services/equipment.service";
 
 @NgModule({
   declarations: [
@@ -70,6 +72,7 @@ import { GameMasterShopkeepersTableComponent } from './components/game-master-sh
     GameMasterMonstersTableComponent,
     SpellDetailsDialogComponent,
     GameMasterShopkeepersTableComponent,
+    PlayerWeaponsTableComponent,
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
@@ -107,6 +110,7 @@ import { GameMasterShopkeepersTableComponent } from './components/game-master-sh
     ArmorService,
     OtherEquipmentService,
     MonsterService,
+    EquipmentService,
   ],
   bootstrap: [AppComponent],
   entryComponents: [
@@ -119,6 +123,7 @@ import { GameMasterShopkeepersTableComponent } from './components/game-master-sh
     ThrowPrimaryAbilityComponent,
     SpellDetailsDialogComponent,
     GameMasterShopkeepersTableComponent,
+    PlayerWeaponsTableComponent,
   ],
 })
 export class AppModule {}
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.html b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.html
index d209480..3607b2e 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.html
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.html
@@ -15,12 +15,12 @@
     <mat-sidenav #sidenav class="sidenav">
       <mat-nav-list>
 
-        <mat-list-item>
+        <mat-list-item (click)="SwitchMiddleComponent('AbilitiesComponent')">
           <mat-icon [class.active]="selected" matListIcon>query_stats</mat-icon>
             <a matLine>Statistic and throws</a>
         </mat-list-item>
-    
-        <mat-list-item>
+
+        <mat-list-item (click)="SwitchMiddleComponent('PlayerWeaponsTableComponent')">
           <mat-icon [class.active]="selected" matListIcon>local_mall</mat-icon>
           <a matLine>Equipment</a>
         </mat-list-item>
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.ts
index 1ed96bf..a602e78 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.ts
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.ts
@@ -4,9 +4,10 @@ import { first } from 'rxjs/operators';
 import { Store } from '@ngrx/store';
 import { AppState } from 'src/app/store/models/app-state.model';
 import { AbilitiesComponent } from '../abilities/abilities.component';
-import {ClearStore, ClearUserId} from '../../store/actions/app.actions';
+import { ClearStore } from '../../store/actions/app.actions';
 import { Router } from '@angular/router';
-import {ClearCharacterId} from "../../store/actions/player.action";
+import { ClearCharacterId } from '../../store/actions/player.action';
+import { PlayerWeaponsTableComponent } from '../player-weapons-table/player-weapons-table.component';
 
 @Component({
   selector: 'app-player-dashboard',
@@ -35,6 +36,10 @@ export class PlayerDashboardComponent implements OnInit {
     switch (componentName) {
       case 'AbilitiesComponent':
         this.middleComponent = AbilitiesComponent;
+        break;
+      case 'PlayerWeaponsTableComponent':
+        this.middleComponent = PlayerWeaponsTableComponent;
+        break;
     }
   }
 
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.css b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.css
new file mode 100644
index 0000000..a4eef06
--- /dev/null
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.css
@@ -0,0 +1,43 @@
+.text-cut {
+  max-width: 60px; /* feel free to include any other value */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+table {
+  background-color: initial;
+}
+
+mat-paginator {
+  background-color: initial;
+  color: white;
+}
+
+::ng-deep .mat-select-arrow {
+  color: whitesmoke;
+}
+
+::ng-deep .mat-select-value {
+  color: white;
+}
+
+.mat-sort-header-container {
+  color: whitesmoke !important;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+td,
+th {
+  color: whitesmoke;
+}
+
+.text-centre {
+  padding: 1%;
+  text-align: center;
+  align-items: center
+}
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.html b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.html
new file mode 100644
index 0000000..a4d1940
--- /dev/null
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.html
@@ -0,0 +1,39 @@
+<div class="text-centre">Your weapons:</div>
+<mat-form-field>
+  <mat-label>Filter</mat-label>
+  <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Sword" #input>
+</mat-form-field>
+
+<div class="mat-elevation-z8">
+  <table mat-table [dataSource]="dataSource" matSort>
+
+    <ng-container matColumnDef="name">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
+      <td mat-cell *matCellDef="let row"> {{row.name}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="weaponType">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Weapon Type </th>
+      <td mat-cell *matCellDef="let row"> {{row.weaponType}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="weight">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Weight </th>
+      <td mat-cell *matCellDef="let row"> {{row.weight}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="cost">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Cost </th>
+      <td mat-cell *matCellDef="let row"> {{row.cost}} $ </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+
+    <tr class="mat-row" *matNoDataRow>
+      <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
+    </tr>
+  </table>
+
+  <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
+</div>
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.spec.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.spec.ts
new file mode 100644
index 0000000..d20347a
--- /dev/null
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PlayerWeaponsTableComponent } from './player-weapons-table.component';
+
+describe('PlayerWeaponsTableComponent', () => {
+  let component: PlayerWeaponsTableComponent;
+  let fixture: ComponentFixture<PlayerWeaponsTableComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PlayerWeaponsTableComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PlayerWeaponsTableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.ts
new file mode 100644
index 0000000..16b9385
--- /dev/null
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.ts
@@ -0,0 +1,69 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { WeaponViewModel } from '../../../types/viewmodels/weapon-viewmodels/WeaponViewModel';
+import { first } from 'rxjs/operators';
+import { ErrorResponse } from '../../../types/ErrorResponse';
+import { HttpErrorResponse } from '@angular/common/http';
+import { EquipmentService } from '../../../services/equipment.service';
+import { Store } from '@ngrx/store';
+import { AppState } from '../../store/models/app-state.model';
+
+@Component({
+  selector: 'app-player-weapons-table',
+  templateUrl: './player-weapons-table.component.html',
+  styleUrls: ['./player-weapons-table.component.css']
+})
+export class PlayerWeaponsTableComponent implements OnInit {
+  weapons: WeaponViewModel[];
+  displayedColumns: string[] = [
+    'name',
+    'weaponType',
+    'weight',
+    'cost',
+  ];
+  dataSource: MatTableDataSource<WeaponViewModel>;
+
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
+
+  constructor(private store: Store<AppState>, private equipmentService: EquipmentService) {}
+
+  ngOnInit() {
+    this.getCharacterWeapons();
+  }
+
+  getCharacterWeapons() {
+    this.store
+      .select((s) => s.playerStore.characterId)
+      .pipe(first())
+      .subscribe((characterId) => {
+        this.equipmentService
+          .getCharacterWeapons(characterId)
+          .pipe(first())
+          .subscribe(
+            (result) => {
+              this.dataSource = new MatTableDataSource(result);
+              this.dataSource.paginator = this.paginator;
+              this.dataSource.sort = this.sort;
+            },
+            (error: ErrorResponse | HttpErrorResponse) => {
+              if (error instanceof HttpErrorResponse) {
+                error = error.error as ErrorResponse;
+              }
+              console.error(error.message);
+            }
+          );
+      });
+  }
+
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
+  }
+}
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/services/equipment.service.ts b/SessionCompanion/SessionCompanion/ClientApp/src/services/equipment.service.ts
new file mode 100644
index 0000000..3c8e4b8
--- /dev/null
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/services/equipment.service.ts
@@ -0,0 +1,60 @@
+import { Inject, Injectable } from '@angular/core';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { WeaponViewModel } from '../types/viewmodels/weapon-viewmodels/WeaponViewModel';
+import { Observable, of, throwError } from 'rxjs';
+import { Either } from '../types/Either';
+import { ErrorResponse } from '../types/ErrorResponse';
+import { switchMap } from 'rxjs/operators';
+import { ArmorViewModel } from '../types/viewmodels/armor-viewmodels/ArmorViewModel';
+import { OtherEquipmentViewModel } from '../types/viewmodels/otherEquipment-viewmodels/OtherEquipmentViewModel';
+
+Injectable({
+  providedIn: 'root',
+});
+
+export class EquipmentService {
+  private baseUrl = 'api/character/equipment/';
+  constructor(private http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
+    this.baseUrl = baseUrl + this.baseUrl;
+  }
+
+  getCharacterWeapons(characterId: number): Observable<WeaponViewModel[]> {
+    const params = new HttpParams().set('characterId', characterId.toString());
+    return this.http.get<Either<WeaponViewModel[], ErrorResponse>>(this.baseUrl + 'getWeapons', {params}).pipe(
+        switchMap((response) => {
+          if (response.isLeft) {
+            return of(response.left);
+          } else {
+            return throwError(response.right);
+          }
+        })
+      );
+  }
+
+  getCharacterArmors(characterId: number): Observable<ArmorViewModel[]> {
+    const params = new HttpParams().set('characterId', characterId.toString());
+    return this.http.get<Either<ArmorViewModel[], ErrorResponse>>(this.baseUrl + 'getArmors', {params}).pipe(
+      switchMap((response) => {
+        if (response.isLeft) {
+          return of(response.left);
+        } else {
+          return throwError(response.right);
+        }
+      })
+    );
+  }
+
+  getCharacterOtherEquipment(characterId: number): Observable<OtherEquipmentViewModel[]> {
+    const params = new HttpParams().set('characterId', characterId.toString());
+    return this.http.get<Either<OtherEquipmentViewModel[], ErrorResponse>>(this.baseUrl + 'getOtherEquipment', {params}).pipe(
+      switchMap((response) => {
+        if (response.isLeft) {
+          return of(response.left);
+        } else {
+          return throwError(response.right);
+        }
+      })
+    );
+  }
+
+}
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/types/viewmodels/otherEquipment-viewmodels/OtherEquipmentViewModel.ts b/SessionCompanion/SessionCompanion/ClientApp/src/types/viewmodels/otherEquipment-viewmodels/OtherEquipmentViewModel.ts
new file mode 100644
index 0000000..93c3308
--- /dev/null
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/types/viewmodels/otherEquipment-viewmodels/OtherEquipmentViewModel.ts
@@ -0,0 +1,7 @@
+export interface OtherEquipmentViewModel {
+  id: number;
+  name: string;
+  description: string;
+  const: number;
+  currencyType: number;
+}

From 47f5132f142bb518acb389a7f2dcd2871388a3da Mon Sep 17 00:00:00 2001
From: Natalia Gawron <natgaw1@st.amu.edu.pl>
Date: Thu, 21 Jan 2021 18:43:39 +0100
Subject: [PATCH 2/5] SES-165 added armors table connected with backend

---
 .../ClientApp/src/app/app.module.ts           |  6 ++
 .../player-armors-table.component.css         | 38 ++++++++++
 .../player-armors-table.component.html        | 44 ++++++++++++
 .../player-armors-table.component.spec.ts     | 25 +++++++
 .../player-armors-table.component.ts          | 69 +++++++++++++++++++
 .../player-dashboard.component.html           | 12 +++-
 .../player-dashboard.component.ts             |  8 +++
 ...player-other-equipment-table.component.css |  0
 ...layer-other-equipment-table.component.html |  1 +
 ...er-other-equipment-table.component.spec.ts | 25 +++++++
 .../player-other-equipment-table.component.ts | 15 ++++
 11 files changed, 242 insertions(+), 1 deletion(-)
 create mode 100644 SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-armors-table/player-armors-table.component.css
 create mode 100644 SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-armors-table/player-armors-table.component.html
 create mode 100644 SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-armors-table/player-armors-table.component.spec.ts
 create mode 100644 SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-armors-table/player-armors-table.component.ts
 create mode 100644 SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.css
 create mode 100644 SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.html
 create mode 100644 SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.spec.ts
 create mode 100644 SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.ts

diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts
index 4539f8b..66e440b 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts
@@ -52,6 +52,8 @@ import { SpellDetailsDialogComponent } from './components/spell-details-dialog/s
 import { GameMasterShopkeepersTableComponent } from './components/game-master-shopkeepers-table/game-master-shopkeepers-table.component';
 import { PlayerWeaponsTableComponent } from './components/player-weapons-table/player-weapons-table.component';
 import {EquipmentService} from "../services/equipment.service";
+import { PlayerArmorsTableComponent } from './components/player-armors-table/player-armors-table.component';
+import { PlayerOtherEquipmentTableComponent } from './components/player-other-equipment-table/player-other-equipment-table.component';
 
 @NgModule({
   declarations: [
@@ -73,6 +75,8 @@ import {EquipmentService} from "../services/equipment.service";
     SpellDetailsDialogComponent,
     GameMasterShopkeepersTableComponent,
     PlayerWeaponsTableComponent,
+    PlayerArmorsTableComponent,
+    PlayerOtherEquipmentTableComponent,
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
@@ -124,6 +128,8 @@ import {EquipmentService} from "../services/equipment.service";
     SpellDetailsDialogComponent,
     GameMasterShopkeepersTableComponent,
     PlayerWeaponsTableComponent,
+    PlayerArmorsTableComponent,
+    PlayerOtherEquipmentTableComponent,
   ],
 })
 export class AppModule {}
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-armors-table/player-armors-table.component.css b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-armors-table/player-armors-table.component.css
new file mode 100644
index 0000000..63c69a9
--- /dev/null
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-armors-table/player-armors-table.component.css
@@ -0,0 +1,38 @@
+table {
+  width: 100%;
+  background-color: initial;
+}
+
+mat-paginator {
+  background-color: initial;
+  color: white;
+}
+
+::ng-deep .mat-select-arrow {
+  color: whitesmoke;
+}
+
+::ng-deep .mat-select-value {
+  color: white;
+}
+
+.mat-sort-header-container {
+  color: whitesmoke !important;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+td,
+th {
+  color: whitesmoke;
+  width: 25%;
+}
+
+.text-centre {
+  padding: 1%;
+  text-align: center;
+  align-items: center
+}
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-armors-table/player-armors-table.component.html b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-armors-table/player-armors-table.component.html
new file mode 100644
index 0000000..779c60c
--- /dev/null
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-armors-table/player-armors-table.component.html
@@ -0,0 +1,44 @@
+<div class="text-centre">Your armors:</div>
+<mat-form-field>
+  <mat-label>Filter</mat-label>
+  <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Shield" #input>
+</mat-form-field>
+
+<div class="mat-elevation-z8">
+  <table mat-table [dataSource]="dataSource" matSort>
+
+    <ng-container matColumnDef="name">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
+      <td mat-cell *matCellDef="let row"> {{row.name}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="category">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Category </th>
+      <td mat-cell *matCellDef="let row"> {{row.category}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="minimumStrength">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Minimum Strength </th>
+      <td mat-cell *matCellDef="let row"> {{row.minimumStrength}}% </td>
+    </ng-container>
+
+    <ng-container matColumnDef="weight">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Weight </th>
+      <td mat-cell *matCellDef="let row"> {{row.weight}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="cost">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Cost </th>
+      <td mat-cell *matCellDef="let row"> {{row.cost}} $ </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+
+    <tr class="mat-row" *matNoDataRow>
+      <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
+    </tr>
+  </table>
+
+  <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
+</div>
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-armors-table/player-armors-table.component.spec.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-armors-table/player-armors-table.component.spec.ts
new file mode 100644
index 0000000..56b5a1e
--- /dev/null
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-armors-table/player-armors-table.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PlayerArmorsTableComponent } from './player-armors-table.component';
+
+describe('PlayerArmorsTableComponent', () => {
+  let component: PlayerArmorsTableComponent;
+  let fixture: ComponentFixture<PlayerArmorsTableComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PlayerArmorsTableComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PlayerArmorsTableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-armors-table/player-armors-table.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-armors-table/player-armors-table.component.ts
new file mode 100644
index 0000000..e8e5cfe
--- /dev/null
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-armors-table/player-armors-table.component.ts
@@ -0,0 +1,69 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { ArmorViewModel } from '../../../types/viewmodels/armor-viewmodels/ArmorViewModel';
+import { first } from 'rxjs/operators';
+import { ErrorResponse } from '../../../types/ErrorResponse';
+import { HttpErrorResponse } from '@angular/common/http';
+import { EquipmentService } from '../../../services/equipment.service';
+import { Store } from '@ngrx/store';
+import { AppState } from '../../store/models/app-state.model';
+
+@Component({
+  selector: 'app-player-armors-table',
+  templateUrl: './player-armors-table.component.html',
+  styleUrls: ['./player-armors-table.component.css']
+})
+export class PlayerArmorsTableComponent implements OnInit {
+  displayedColumns: string[] = [
+    'name',
+    'category',
+    'minimumStrength',
+    'weight',
+    'cost',
+  ];
+  dataSource: MatTableDataSource<ArmorViewModel>;
+
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
+
+  constructor(private store: Store<AppState>, private equipmentService: EquipmentService) {}
+
+  ngOnInit() {
+    this.getCharacterArmors();
+  }
+
+  getCharacterArmors() {
+    this.store
+      .select((s) => s.playerStore.characterId)
+      .pipe(first())
+      .subscribe((characterId) => {
+        this.equipmentService
+          .getCharacterArmors(characterId)
+          .pipe(first())
+          .subscribe(
+            (result) => {
+              this.dataSource = new MatTableDataSource(result);
+              this.dataSource.paginator = this.paginator;
+              this.dataSource.sort = this.sort;
+            },
+            (error: ErrorResponse | HttpErrorResponse) => {
+              if (error instanceof HttpErrorResponse) {
+                error = error.error as ErrorResponse;
+              }
+              console.error(error.message);
+            }
+          );
+      });
+  }
+
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
+  }
+}
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.html b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.html
index 3607b2e..19abaa5 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.html
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.html
@@ -22,7 +22,17 @@
 
         <mat-list-item (click)="SwitchMiddleComponent('PlayerWeaponsTableComponent')">
           <mat-icon [class.active]="selected" matListIcon>local_mall</mat-icon>
-          <a matLine>Equipment</a>
+          <a matLine>Weapons</a>
+        </mat-list-item>
+
+        <mat-list-item (click)="SwitchMiddleComponent('PlayerArmorsTableComponent')">
+          <mat-icon [class.active]="selected" matListIcon>local_mall</mat-icon>
+          <a matLine>Armors</a>
+        </mat-list-item>
+
+        <mat-list-item (click)="SwitchMiddleComponent('PlayerOtherEquipmentTableComponent')">
+          <mat-icon [class.active]="selected" matListIcon>local_mall</mat-icon>
+          <a matLine>Other equipment</a>
         </mat-list-item>
 
         <mat-list-item>
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.ts
index a602e78..9ebedf3 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.ts
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.ts
@@ -8,6 +8,8 @@ import { ClearStore } from '../../store/actions/app.actions';
 import { Router } from '@angular/router';
 import { ClearCharacterId } from '../../store/actions/player.action';
 import { PlayerWeaponsTableComponent } from '../player-weapons-table/player-weapons-table.component';
+import { PlayerArmorsTableComponent } from '../player-armors-table/player-armors-table.component';
+import {PlayerOtherEquipmentTableComponent} from "../player-other-equipment-table/player-other-equipment-table.component";
 
 @Component({
   selector: 'app-player-dashboard',
@@ -40,6 +42,12 @@ export class PlayerDashboardComponent implements OnInit {
       case 'PlayerWeaponsTableComponent':
         this.middleComponent = PlayerWeaponsTableComponent;
         break;
+      case 'PlayerArmorsTableComponent':
+        this.middleComponent = PlayerArmorsTableComponent;
+        break;
+      case 'PlayerOtherEquipmentTableComponent':
+        this.middleComponent = PlayerOtherEquipmentTableComponent;
+        break;
     }
   }
 
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.css b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.html b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.html
new file mode 100644
index 0000000..219c271
--- /dev/null
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.html
@@ -0,0 +1 @@
+<p>player-other-equipment-table works!</p>
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.spec.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.spec.ts
new file mode 100644
index 0000000..c809af0
--- /dev/null
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PlayerOtherEquipmentTableComponent } from './player-other-equipment-table.component';
+
+describe('PlayerOtherEquipmentTableComponent', () => {
+  let component: PlayerOtherEquipmentTableComponent;
+  let fixture: ComponentFixture<PlayerOtherEquipmentTableComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PlayerOtherEquipmentTableComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PlayerOtherEquipmentTableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.ts
new file mode 100644
index 0000000..5f934a0
--- /dev/null
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-player-other-equipment-table',
+  templateUrl: './player-other-equipment-table.component.html',
+  styleUrls: ['./player-other-equipment-table.component.css']
+})
+export class PlayerOtherEquipmentTableComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

From 44e6fd20b909d189cd53b263ed2717f2d7fdc303 Mon Sep 17 00:00:00 2001
From: Natalia Gawron <natgaw1@st.amu.edu.pl>
Date: Thu, 21 Jan 2021 19:47:37 +0100
Subject: [PATCH 3/5] SES-165 added other equipment table connected with
 backend

---
 .../player-armors-table.component.css         |  9 ++-
 .../player-armors-table.component.html        |  9 +--
 .../player-armors-table.component.ts          |  1 -
 ...player-other-equipment-table.component.css | 43 ++++++++++++++
 ...layer-other-equipment-table.component.html | 35 +++++++++++-
 .../player-other-equipment-table.component.ts | 56 ++++++++++++++++++-
 .../player-weapons-table.component.html       |  2 +-
 7 files changed, 142 insertions(+), 13 deletions(-)

diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-armors-table/player-armors-table.component.css b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-armors-table/player-armors-table.component.css
index 63c69a9..a4eef06 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-armors-table/player-armors-table.component.css
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-armors-table/player-armors-table.component.css
@@ -1,5 +1,11 @@
+.text-cut {
+  max-width: 60px; /* feel free to include any other value */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 table {
-  width: 100%;
   background-color: initial;
 }
 
@@ -28,7 +34,6 @@ mat-paginator {
 td,
 th {
   color: whitesmoke;
-  width: 25%;
 }
 
 .text-centre {
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-armors-table/player-armors-table.component.html b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-armors-table/player-armors-table.component.html
index 779c60c..0708404 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-armors-table/player-armors-table.component.html
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-armors-table/player-armors-table.component.html
@@ -1,4 +1,5 @@
 <div class="text-centre">Your armors:</div>
+<div class="custom-container">
 <mat-form-field>
   <mat-label>Filter</mat-label>
   <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Shield" #input>
@@ -17,11 +18,6 @@
       <td mat-cell *matCellDef="let row"> {{row.category}} </td>
     </ng-container>
 
-    <ng-container matColumnDef="minimumStrength">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Minimum Strength </th>
-      <td mat-cell *matCellDef="let row"> {{row.minimumStrength}}% </td>
-    </ng-container>
-
     <ng-container matColumnDef="weight">
       <th mat-header-cell *matHeaderCellDef mat-sort-header> Weight </th>
       <td mat-cell *matCellDef="let row"> {{row.weight}} </td>
@@ -40,5 +36,6 @@
     </tr>
   </table>
 
-  <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
+  <mat-paginator [pageSizeOptions]="[5, 10]"></mat-paginator>
+</div>
 </div>
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-armors-table/player-armors-table.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-armors-table/player-armors-table.component.ts
index e8e5cfe..9ebcadc 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-armors-table/player-armors-table.component.ts
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-armors-table/player-armors-table.component.ts
@@ -19,7 +19,6 @@ export class PlayerArmorsTableComponent implements OnInit {
   displayedColumns: string[] = [
     'name',
     'category',
-    'minimumStrength',
     'weight',
     'cost',
   ];
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.css b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.css
index e69de29..a4eef06 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.css
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.css
@@ -0,0 +1,43 @@
+.text-cut {
+  max-width: 60px; /* feel free to include any other value */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+table {
+  background-color: initial;
+}
+
+mat-paginator {
+  background-color: initial;
+  color: white;
+}
+
+::ng-deep .mat-select-arrow {
+  color: whitesmoke;
+}
+
+::ng-deep .mat-select-value {
+  color: white;
+}
+
+.mat-sort-header-container {
+  color: whitesmoke !important;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+td,
+th {
+  color: whitesmoke;
+}
+
+.text-centre {
+  padding: 1%;
+  text-align: center;
+  align-items: center
+}
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.html b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.html
index 219c271..7db917a 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.html
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.html
@@ -1 +1,34 @@
-<p>player-other-equipment-table works!</p>
+<div class="text-centre">Your other equipment:</div>
+<mat-form-field class="filter-class">
+  <mat-label>Filter</mat-label>
+  <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Equipment" #input>
+</mat-form-field>
+
+<div class="mat-elevation-z8">
+  <table mat-table [dataSource]="dataSource" matSort>
+
+    <ng-container matColumnDef="name">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
+      <td mat-cell *matCellDef="let row"> {{row.name}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="cost">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Cost </th>
+      <td mat-cell *matCellDef="let row"> {{row.cost}} $ </td>
+    </ng-container>
+
+    <ng-container matColumnDef="description">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Description </th>
+      <td mat-cell *matCellDef="let row"> {{row.description}} </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+
+    <tr class="mat-row" *matNoDataRow>
+      <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
+    </tr>
+  </table>
+
+  <mat-paginator [pageSizeOptions]="[5, 10]"></mat-paginator>
+</div>
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.ts
index 5f934a0..e40a32b 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.ts
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.ts
@@ -1,4 +1,14 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { OtherEquipmentViewModel} from '../../../types/viewmodels/otherEquipment-viewmodels/OtherEquipmentViewModel';
+import { first } from 'rxjs/operators';
+import { ErrorResponse } from '../../../types/ErrorResponse';
+import { HttpErrorResponse } from '@angular/common/http';
+import { EquipmentService } from '../../../services/equipment.service';
+import { Store } from '@ngrx/store';
+import { AppState } from '../../store/models/app-state.model';
 
 @Component({
   selector: 'app-player-other-equipment-table',
@@ -6,10 +16,52 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./player-other-equipment-table.component.css']
 })
 export class PlayerOtherEquipmentTableComponent implements OnInit {
+  displayedColumns: string[] = [
+    'name',
+    'cost',
+    'description',
+  ];
+  dataSource: MatTableDataSource<OtherEquipmentViewModel>;
 
-  constructor() { }
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
+
+  constructor(private store: Store<AppState>, private equipmentService: EquipmentService) {}
 
   ngOnInit() {
+    this.getCharacterOtherEquipment();
   }
 
+  getCharacterOtherEquipment() {
+    this.store
+      .select((s) => s.playerStore.characterId)
+      .pipe(first())
+      .subscribe((characterId) => {
+        this.equipmentService
+          .getCharacterOtherEquipment(characterId)
+          .pipe(first())
+          .subscribe(
+            (result) => {
+              this.dataSource = new MatTableDataSource(result);
+              this.dataSource.paginator = this.paginator;
+              this.dataSource.sort = this.sort;
+            },
+            (error: ErrorResponse | HttpErrorResponse) => {
+              if (error instanceof HttpErrorResponse) {
+                error = error.error as ErrorResponse;
+              }
+              console.error(error.message);
+            }
+          );
+      });
+  }
+
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
+  }
 }
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.html b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.html
index a4d1940..a813753 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.html
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.html
@@ -35,5 +35,5 @@
     </tr>
   </table>
 
-  <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
+  <mat-paginator [pageSizeOptions]="[5, 10]"></mat-paginator>
 </div>

From c31075e54f2af9f23a9dee5ba6ecdc587c95322e Mon Sep 17 00:00:00 2001
From: Natalia Gawron <natgaw1@st.amu.edu.pl>
Date: Thu, 21 Jan 2021 20:50:29 +0100
Subject: [PATCH 4/5] SES-165 updated css

---
 .../player-armors-table.component.css         | 20 +++++++++++++++++++
 .../player-dashboard.component.html           | 14 +++++++------
 ...player-other-equipment-table.component.css | 20 +++++++++++++++++++
 ...layer-other-equipment-table.component.html |  3 ++-
 .../player-weapons-table.component.css        | 20 +++++++++++++++++++
 .../player-weapons-table.component.ts         |  2 +-
 6 files changed, 71 insertions(+), 8 deletions(-)

diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-armors-table/player-armors-table.component.css b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-armors-table/player-armors-table.component.css
index a4eef06..db5e93a 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-armors-table/player-armors-table.component.css
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-armors-table/player-armors-table.component.css
@@ -41,3 +41,23 @@ th {
   text-align: center;
   align-items: center
 }
+
+th.mat-header-cell {
+  border-bottom: #e8cca7
+  solid 1px;
+}
+
+td.mat-cell {
+  border-bottom: #e8cca7
+  solid 1px;
+}
+
+table.mat-table {
+  margin-left: 7%;
+}
+
+@media (max-width: 365px) {
+  table.mat-table {
+    margin-left: 0%;
+  }
+}
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.html b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.html
index 19abaa5..9920974 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.html
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.html
@@ -21,12 +21,12 @@
         </mat-list-item>
 
         <mat-list-item (click)="SwitchMiddleComponent('PlayerWeaponsTableComponent')">
-          <mat-icon [class.active]="selected" matListIcon>local_mall</mat-icon>
+          <mat-icon [class.active]="selected" matListIcon><i class="ra ra-daggers "></i></mat-icon>
           <a matLine>Weapons</a>
         </mat-list-item>
 
         <mat-list-item (click)="SwitchMiddleComponent('PlayerArmorsTableComponent')">
-          <mat-icon [class.active]="selected" matListIcon>local_mall</mat-icon>
+          <mat-icon [class.active]="selected" matListIcon><i class="ra ra-vest"></i></mat-icon>
           <a matLine>Armors</a>
         </mat-list-item>
 
@@ -35,15 +35,17 @@
           <a matLine>Other equipment</a>
         </mat-list-item>
 
-        <mat-list-item>
+        <!--Uncomment when Spells will be implemented-->
+        <!--<mat-list-item>
           <mat-icon [class.active]="selected" matListIcon>brightness_4</mat-icon>
           <a matLine>Spells</a>
-        </mat-list-item>
+        </mat-list-item>-->
 
-        <mat-list-item>
+        <!--Uncomment when Profile will be implemented-->
+       <!-- <mat-list-item>
           <mat-icon [class.active]="selected" matListIcon>account_circle</mat-icon>
           <a matLine>Profile</a>
-        </mat-list-item>
+        </mat-list-item>-->
 
         <mat-list-item>
           <mat-icon [class.active]="selected" matListIcon>shopping_cart</mat-icon>
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.css b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.css
index a4eef06..c68c961 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.css
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.css
@@ -41,3 +41,23 @@ th {
   text-align: center;
   align-items: center
 }
+
+th.mat-header-cell {
+  border-bottom: #e8cca7
+  solid 1px;
+}
+
+td.mat-cell {
+  border-bottom: #e8cca7
+  solid 1px;
+}
+
+table.mat-table {
+  margin-left: 0%;
+}
+
+@media (max-width: 365px) {
+  table.mat-table {
+    margin-left: 0%;
+  }
+}
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.html b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.html
index 7db917a..286383e 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.html
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.html
@@ -19,7 +19,8 @@
 
     <ng-container matColumnDef="description">
       <th mat-header-cell *matHeaderCellDef mat-sort-header> Description </th>
-      <td mat-cell *matCellDef="let row"> {{row.description}} </td>
+      <td mat-cell *matCellDef="let row"> {{row.description}}
+    </td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.css b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.css
index a4eef06..b073f89 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.css
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.css
@@ -41,3 +41,23 @@ th {
   text-align: center;
   align-items: center
 }
+
+th.mat-header-cell {
+  border-bottom: #e8cca7
+  solid 1px;
+}
+
+td.mat-cell {
+  border-bottom: #e8cca7
+  solid 1px;
+}
+
+table.mat-table {
+  margin-left: 10%;
+}
+
+@media (max-width: 365px) {
+  table.mat-table {
+    margin-left: 3%;
+  }
+}
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.ts
index 16b9385..89d454a 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.ts
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-weapons-table/player-weapons-table.component.ts
@@ -40,7 +40,7 @@ export class PlayerWeaponsTableComponent implements OnInit {
       .pipe(first())
       .subscribe((characterId) => {
         this.equipmentService
-          .getCharacterWeapons(characterId)
+          .getCharacterWeapons(1)
           .pipe(first())
           .subscribe(
             (result) => {

From 98079872ca8a757713afef9c6917b7aadcf163cc Mon Sep 17 00:00:00 2001
From: Natalia Gawron <natgaw1@st.amu.edu.pl>
Date: Thu, 21 Jan 2021 21:06:37 +0100
Subject: [PATCH 5/5] SES-165 updated css for mobile

---
 .../player-other-equipment-table.component.css       | 12 ++++++++++++
 .../player-other-equipment-table.component.html      |  4 ++++
 2 files changed, 16 insertions(+)

diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.css b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.css
index c68c961..43b1669 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.css
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.css
@@ -61,3 +61,15 @@ table.mat-table {
     margin-left: 0%;
   }
 }
+
+@media (min-width: 468px) and (max-width: 768px) {
+  .custom-container {
+    width: 410px;
+  }
+}
+
+@media (min-width: 768px) {
+  .custom-container {
+    width: 580px;
+  }
+}
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.html b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.html
index 286383e..d1e8992 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.html
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-other-equipment-table/player-other-equipment-table.component.html
@@ -1,3 +1,5 @@
+<div class="custom-container">
+<div class="custom-container">
 <div class="text-centre">Your other equipment:</div>
 <mat-form-field class="filter-class">
   <mat-label>Filter</mat-label>
@@ -33,3 +35,5 @@
 
   <mat-paginator [pageSizeOptions]="[5, 10]"></mat-paginator>
 </div>
+</div>
+</div>