- added trade message ui

src/app/modules/trade/class/index.ts

@@ -0,0 +1 @@
+export * from './trade-message-action';

src/app/modules/trade/class/trade-message-action.ts

@@ -0,0 +1,15 @@
+export enum TradeMessageAction {
+    Invite = 'invite',
+    Wait = 'wait',
+    ItemGone = 'item-gone',
+    Resend = 'resend',
+    Trade = 'trade',
+    ItemHighlight = 'item-highlight',
+    Whisper = 'whisper',
+    Finished = 'finished',
+    Dismiss = 'dismiss',
+}
+
+export interface TradeMessageActionState {
+    [action: string]: boolean;
+}

src/app/modules/trade/component/index.ts

@@ -1,2 +1,10 @@
+export * from './trade-message-action/trade-message-action.component';
+export * from './trade-message-bulk/trade-message-bulk.component';
+export * from './trade-message-direction/trade-message-direction.component';
+export * from './trade-message-item/trade-message-item.component';
+export * from './trade-message-map-tier/trade-message-map-tier.component';
+export * from './trade-message-map/trade-message-map.component';
+export * from './trade-message/trade-message.component';
+export * from './trade-messages/trade-messages.component';
 export * from './trade-settings/trade-settings.component';
 

src/app/modules/trade/component/trade-message-action/trade-message-action.component.html

@@ -0,0 +1,13 @@
+<button class="poe-control poe-button" (click)="execute.next(action)" [title]="'trade.action.' + action | translate">
+    <ng-container [ngSwitch]="action">
+        <mat-icon *ngSwitchCase="'invite'">how_to_reg</mat-icon>
+        <mat-icon *ngSwitchCase="'wait'">pan_tool</mat-icon>
+        <mat-icon *ngSwitchCase="'item-gone'">not_interested</mat-icon>
+        <mat-icon *ngSwitchCase="'resend'">replay</mat-icon>
+        <mat-icon *ngSwitchCase="'trade'">sync_alt</mat-icon>
+        <mat-icon *ngSwitchCase="'item-highlight'">visibility</mat-icon>
+        <mat-icon *ngSwitchCase="'whisper'">chat</mat-icon>
+        <mat-icon *ngSwitchCase="'finished'">done</mat-icon>
+        <mat-icon *ngSwitchCase="'dismiss'">close</mat-icon>
+    </ng-container>
+</button>

src/app/modules/trade/component/trade-message-action/trade-message-action.component.scss

@@ -0,0 +1,20 @@
+@import "../../../../../styles/variables";
+
+::ng-deep {
+  app-trade-message-action {
+    display: none;
+
+    &.visible {
+      display: inline-flex;
+      margin-left: $gutter-half;
+    }
+  }
+}
+
+button {
+  display: inline-flex;
+  justify-content: center;
+  padding: 0;
+  height: 32px;
+  width: 32px;
+}

src/app/modules/trade/component/trade-message-action/trade-message-action.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TradeMessageActionComponent } from './trade-message-action.component';
+
+describe('TradeMessageActionComponent', () => {
+  let component: TradeMessageActionComponent;
+  let fixture: ComponentFixture<TradeMessageActionComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TradeMessageActionComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TradeMessageActionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/trade/component/trade-message-action/trade-message-action.component.ts

@@ -0,0 +1,24 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
+import { TradeMessageAction, TradeMessageActionState } from '@modules/trade/class';
+
+@Component({
+  selector: 'app-trade-message-action',
+  templateUrl: './trade-message-action.component.html',
+  styleUrls: ['./trade-message-action.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TradeMessageActionComponent {
+  @HostBinding('class.visible')
+  public get isVisible(): boolean {
+    return this.visible[this.action];
+  }
+
+  @Input()
+  public action: TradeMessageAction;
+
+  @Input()
+  public visible: TradeMessageActionState;
+
+  @Output()
+  public execute = new EventEmitter<string>();
+}

src/app/modules/trade/component/trade-message-bulk/trade-message-bulk.component.html

@@ -0,0 +1,25 @@
+<div class="item">
+    <div class="value left">
+        <app-trade-static-frame [count]="message.count1" [id]="message.type1" [reverse]="true">
+        </app-trade-static-frame>
+        <div class="rate">
+            <app-trade-static-frame [count]="1" [id]="message.type1" [small]="true" [reverse]="true">
+            </app-trade-static-frame>
+            <span>&nbsp;≈&nbsp;</span>
+            <app-trade-static-frame [amount]="message.count2 / message.count1" [id]="message.type2" [small]="true">
+            </app-trade-static-frame>
+        </div>
+    </div>
+    <app-trade-message-direction></app-trade-message-direction>
+    <div class="value">
+        <app-trade-static-frame [count]="message.count2" [id]="message.type2">
+        </app-trade-static-frame>
+        <div class="rate">
+            <app-trade-static-frame [count]="1" [id]="message.type2" [small]="true" [reverse]="true">
+            </app-trade-static-frame>
+            <span>&nbsp;≈&nbsp;</span>
+            <app-trade-static-frame [amount]="message.count1 / message.count2" [id]="message.type1" [small]="true">
+            </app-trade-static-frame>
+        </div>
+    </div>
+</div>

src/app/modules/trade/component/trade-message-bulk/trade-message-bulk.component.scss

@@ -0,0 +1,24 @@
+@import "../../../../../styles/variables";
+
+:host,
+.item {
+  display: flex;
+  width: 100%;
+}
+
+.item {
+  padding: 3px 0;
+}
+
+.value {
+  width: 100%;
+
+  &.left {
+    text-align: right;
+  }
+
+  > .rate {
+    color: $light-dark-grey;
+    font-size: 12px;
+  }
+}

src/app/modules/trade/component/trade-message-bulk/trade-message-bulk.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TradeMessageBulkComponent } from './trade-message-bulk.component';
+
+describe('TradeMessageBulkComponent', () => {
+  let component: TradeMessageBulkComponent;
+  let fixture: ComponentFixture<TradeMessageBulkComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TradeMessageBulkComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TradeMessageBulkComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/trade/component/trade-message-bulk/trade-message-bulk.component.ts

@@ -0,0 +1,29 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { TradeBulkMessage, TradeDirection } from '@shared/module/poe/trade/chat';
+
+@Component({
+  selector: 'app-trade-message-bulk',
+  templateUrl: './trade-message-bulk.component.html',
+  styleUrls: ['./trade-message-bulk.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TradeMessageBulkComponent {
+  private _message: TradeBulkMessage;
+
+  public get message(): TradeBulkMessage {
+    return this._message;
+  }
+
+  @Input()
+  public set message(message: TradeBulkMessage) {
+    this._message = JSON.parse(JSON.stringify(message));
+    if (this._message.tradeDirection === TradeDirection.Outgoing) {
+      const count = this._message.count1;
+      this._message.count1 = this._message.count2;
+      this._message.count2 = count;
+      const type = this._message.type1;
+      this._message.type1 = this._message.type2;
+      this._message.type2 = type;
+    }
+  }
+}

src/app/modules/trade/component/trade-message-direction/trade-message-direction.component.html

@@ -0,0 +1,8 @@
+<div class="dir">
+    <div class="pay">
+        <mat-icon>arrow_right</mat-icon>
+    </div>
+    <div class="get">
+        <mat-icon>arrow_left</mat-icon>
+    </div>
+</div>

src/app/modules/trade/component/trade-message-direction/trade-message-direction.component.scss

@@ -0,0 +1,24 @@
+@import "../../../../../styles/variables";
+
+:host {
+  align-self: center;
+}
+
+.dir {
+  display: flex;
+  align-self: center;
+  flex-flow: column;
+  padding: 0 $gutter;
+  height: 20px;
+
+  > .pay {
+    height: 10px;
+    color: red;
+    margin-top: -7px;
+  }
+
+  > .get {
+    height: 10px;
+    color: lightgreen;
+  }
+}

src/app/modules/trade/component/trade-message-direction/trade-message-direction.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TradeMessageDirectionComponent } from './trade-message-direction.component';
+
+describe('TradeMessageDirectionComponent', () => {
+  let component: TradeMessageDirectionComponent;
+  let fixture: ComponentFixture<TradeMessageDirectionComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TradeMessageDirectionComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TradeMessageDirectionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/trade/component/trade-message-direction/trade-message-direction.component.ts

@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'app-trade-message-direction',
+  templateUrl: './trade-message-direction.component.html',
+  styleUrls: ['./trade-message-direction.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TradeMessageDirectionComponent { }

src/app/modules/trade/component/trade-message-item/trade-message-item.component.html

@@ -0,0 +1,8 @@
+<div class="item" [class.reverse]="message.tradeDirection === 'outgoing'">
+    <div class="name">{{message.itemName}}</div>
+    <app-trade-message-direction></app-trade-message-direction>
+    <div class="price" *ngIf="message.price && message.currencyType">
+        <app-trade-static-frame [count]="message.price" [id]="message.currencyType">
+        </app-trade-static-frame>
+    </div>
+</div>

src/app/modules/trade/component/trade-message-item/trade-message-item.component.scss

@@ -0,0 +1,9 @@
+.item {
+  display: flex;
+  flex-direction: row;
+  line-height: 32px;
+
+  &.reverse {
+    flex-direction: row-reverse;
+  }
+}

src/app/modules/trade/component/trade-message-item/trade-message-item.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TradeMessageItemComponent } from './trade-message-item.component';
+
+describe('TradeMessageItemComponent', () => {
+  let component: TradeMessageItemComponent;
+  let fixture: ComponentFixture<TradeMessageItemComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TradeMessageItemComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TradeMessageItemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/trade/component/trade-message-item/trade-message-item.component.ts

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { TradeItemMessage } from '@shared/module/poe/trade/chat';
+
+@Component({
+  selector: 'app-trade-message-item',
+  templateUrl: './trade-message-item.component.html',
+  styleUrls: ['./trade-message-item.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TradeMessageItemComponent {
+  @Input()
+  public message: TradeItemMessage;
+}

src/app/modules/trade/component/trade-message-map-tier/trade-message-map-tier.component.html

@@ -0,0 +1,9 @@
+<div class="list">
+    <div class="tier">{{list.tier}}</div>
+    <div class="maps">
+        <span class="map" *ngFor="let map of list.maps;last as last" [title]="map">
+            <ng-container *ngIf="last">{{map}}</ng-container>
+            <ng-container *ngIf="!last">{{map}},&nbsp;</ng-container>
+        </span>
+    </div>
+</div>

src/app/modules/trade/component/trade-message-map-tier/trade-message-map-tier.component.scss

@@ -0,0 +1,18 @@
+@import "../../../../../styles/variables";
+
+.list {
+  display: flex;
+}
+
+.tier {
+  color: $light-dark-grey;
+  padding-right: $gutter-half;
+}
+
+.map {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100px;
+}