- added settings to header

- added misc module
  - stash highlight
- fixed error if ggg api is not reachable first time launching

CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 1.0.2 (x)
+
+- added misc module
+  - stash highlight on `alt+f`
+- added trade module
+  - support for poe.app, poemap.live, poetrade, official trade
+  - view incoming/ outgoing trades
+  - invite/ trade player
+  - highlight item in stash
+- fixed a first time launching error occuring if the GGG API could not be reached
+
 ## 1.0.0 (2020-06-10)
 
 - added added a interactive introduction

manifest.json

@@ -105,7 +105,7 @@
                 "block_top_window_navigation": true,
                 "disable_restore_animation": true,
                 "disable_rightclick": true,
-                "transparent": true,                
+                "transparent": true,
                 "size": {
                     "width": 1212,
                     "height": 699
@@ -126,7 +126,7 @@
                     "height": 327
                 }
             },
-            "annotation": {                
+            "annotation": {
                 "file": "dist/poe-overlay-overwolf/index.html",
                 "in_game_only": true,
                 "block_top_window_navigation": true,
@@ -263,6 +263,11 @@
             "bookmark6": {
                 "title": "Open Bookmark 6",
                 "action-type": "custom"
+            },
+            "misc-stash-highlight": {
+                "title": "Highlight Item in Stash",
+                "action-type": "custom",
+                "default": "Alt+F"
             }
         },
         "externally_connectable": {

src/app/app.module.ts

@@ -5,6 +5,7 @@ import { CommandsModule } from '@modules/commands/commands.module';
 import { EvaluateModule } from '@modules/evaluate/evaluate.module';
 import { InspectModule } from '@modules/inspect/inspect.module';
 import { MarketModule } from '@modules/market/market.module';
+import { MiscModule } from '@modules/misc/misc.module';
 import { ReplayModule } from '@modules/replay/replay.module';
 import { TradeModule } from '@modules/trade/trade.module';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
@@ -29,10 +30,11 @@ import { LayoutModule } from './layout/layout.module';
         // app
         EvaluateModule,
         MarketModule,
-        InspectModule,
         TradeModule,
+        InspectModule,
         CommandsModule,
         ReplayModule,
+        MiscModule,
         BookmarksModule
     ],
     providers: [{ provide: ErrorHandler, useClass: AppErrorHandler }],

src/app/core/annotation/annotation.service.ts

@@ -44,6 +44,15 @@ const ANNOTATIONS: Annotation[] = [
             }
         ]
     },
+    // TODO
+    // {
+    //     id: 'trade',
+    //     children: [
+    //         { id: 'filter' },
+    //         { id: 'search' },
+    //         { id: 'reset' },
+    //     ]
+    // },
     {
         id: 'evaluate',
         hotkey: Hotkey.Evaluate,

src/app/core/config/hotkey.ts

@@ -15,5 +15,6 @@ export enum Hotkey {
     Bookmark3 = 'bookmark3',
     Bookmark4 = 'bookmark4',
     Bookmark5 = 'bookmark5',
-    Bookmark6 = 'bookmark6'
+    Bookmark6 = 'bookmark6',
+    MiscStasHighlight = 'misc-stash-highlight'
 }

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

@@ -0,0 +1 @@
+export * from './misc-settings/misc-settings.component';

src/app/modules/misc/component/misc-settings/misc-settings.component.html

@@ -0,0 +1,13 @@
+<div class="row">
+    <div class="col-md-6">
+        <app-card [title]="'misc.highlight' | translate">
+            <mat-form-field>
+                <mat-label>{{'app.hotkey' | translate}}</mat-label>
+                <input matInput [value]="'misc-stash-highlight' | hotkey" readonly>
+                <a matSuffix [href]="'misc-stash-highlight' | hotkeyUrl">
+                    <mat-icon> keyboard </mat-icon>
+                </a>
+            </mat-form-field>
+        </app-card>
+    </div>
+</div>

src/app/modules/misc/component/misc-settings/misc-settings.component.spec.ts

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

src/app/modules/misc/component/misc-settings/misc-settings.component.ts

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FeatureSettingsComponent } from '@app/feature';
+import { MiscFeatureSettings } from '@modules/misc/misc-feature-settings';
+
+@Component({
+  selector: 'app-misc-settings',
+  templateUrl: './misc-settings.component.html',
+  styleUrls: ['./misc-settings.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class MiscSettingsComponent extends FeatureSettingsComponent<MiscFeatureSettings> {
+  public load(): void { }
+}

src/app/modules/misc/misc-feature-settings.ts

@@ -0,0 +1,5 @@
+import { FeatureSettings } from '@app/feature';
+
+export interface MiscFeatureSettings extends FeatureSettings {
+    todo?: boolean;
+}

src/app/modules/misc/misc.module.ts

@@ -0,0 +1,45 @@
+import { NgModule } from '@angular/core';
+import { Hotkey } from '@app/config';
+import { Feature, FeatureConfig, FeatureModule, FEATURE_MODULES } from '@app/feature';
+import { SharedModule } from '@shared/shared.module';
+import { MiscSettingsComponent } from './component';
+import { MiscFeatureSettings } from './misc-feature-settings';
+import { MiscStashService } from './service/misc-stash.service';
+
+
+@NgModule({
+    providers: [{ provide: FEATURE_MODULES, useClass: MiscModule, multi: true }],
+    declarations: [
+        MiscSettingsComponent
+    ],
+    imports: [SharedModule]
+})
+export class MiscModule implements FeatureModule<MiscFeatureSettings> {
+    constructor(private readonly miscStash: MiscStashService) { }
+
+    public getConfig(): FeatureConfig<MiscFeatureSettings> {
+        const config: FeatureConfig<MiscFeatureSettings> = {
+            name: 'misc.name',
+            component: MiscSettingsComponent,
+            default: {}
+        };
+        return config;
+    }
+
+    public getFeatures(): Feature[] {
+        const features: Feature[] = [
+            { hotkey: Hotkey.MiscStasHighlight }
+        ];
+        return features;
+    }
+
+    public onKeyPressed(hotkey: Hotkey): void {
+        switch (hotkey) {
+            case Hotkey.MiscStasHighlight:
+                this.miscStash.highlight().subscribe();
+                break;
+            default:
+                throw new Error(`Hotkey: '${hotkey}' out of range.`);
+        }
+    }
+}

src/app/modules/misc/service/misc-stash.service.ts

@@ -0,0 +1,42 @@
+import { Injectable } from '@angular/core';
+import { NotificationService } from '@app/notification';
+import { ItemClipboardResultCode, ItemClipboardService } from '@shared/module/poe/item/clipboard';
+import { ItemSectionType } from '@shared/module/poe/item/clipboard/section-parser';
+import { StashService } from '@shared/module/poe/stash';
+import { Observable, of, throwError } from 'rxjs';
+import { flatMap } from 'rxjs/operators';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class MiscStashService {
+    constructor(
+        private readonly stash: StashService,
+        private readonly itemClipboard: ItemClipboardService,
+        private readonly notification: NotificationService) { }
+
+    public highlight(): Observable<void> {
+        return this.itemClipboard.copy({
+            [ItemSectionType.Rartiy]: true
+        }).pipe(
+            flatMap(({ code, item }) => {
+                switch (code) {
+                    case ItemClipboardResultCode.Success:
+                        if (item.type?.length) {
+                            this.stash.highlight(item.type);
+                        }
+                        break;
+                    case ItemClipboardResultCode.Empty:
+                        this.notification.show('clipboard.empty');
+                        break;
+                    case ItemClipboardResultCode.ParserError:
+                        this.notification.show('clipboard.parser-error');
+                        break;
+                    default:
+                        return throwError(`code: '${code}' out of range`);
+                }
+                return of(null);
+            })
+        );
+    }
+}

src/app/modules/trade/window/trade-window/trade-window.component.html

@@ -2,7 +2,7 @@
     <ng-container *ngIf="data$ | async as data">
         <app-header [name]="'PoE Overlay - Trade (' + (data.messages.length - data.removed.length) + ')'" [width]="300"
             [margin]="10" [closeable]="false" [pinnable]="true" [pinned]="data.settings.tradeWindowPinned"
-            (pinnedChange)="onPinnedChange($event)">
+            (pinnedChange)="onPinnedChange($event)" (settingsToggle)="onSettingsToggle()">
             <ng-container ngProjectAs="controls">
                 <mat-icon (click)="toggle = !toggle" class="indicator" [class.open]="toggle">keyboard_arrow_down
                 </mat-icon>

src/app/modules/trade/window/trade-window/trade-window.component.ts

@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, NgZone, OnDestroy, OnInit } from '@angular/core';
 import { EventSubscription } from '@app/event';
 import { FeatureSettingsService } from '@app/feature/feature-settings.service';
+import { SettingsWindowService } from '@layout/service';
 import { TradeWindowData, TradeWindowService } from '@modules/trade/service';
 import { TradeFeatureSettings } from '@modules/trade/trade-feature-settings';
 import { TradeExchangeMessage } from '@shared/module/poe/trade/chat';
@@ -21,7 +22,8 @@ export class TradeWindowComponent implements OnInit, OnDestroy {
   constructor(
     private readonly window: TradeWindowService,
     private readonly ngZone: NgZone,
-    private readonly settings: FeatureSettingsService) { }
+    private readonly settings: FeatureSettingsService,
+    private readonly settingsWindow: SettingsWindowService) { }
 
   public ngOnInit(): void {
     this.data$.next(this.window.data$.get());
@@ -45,4 +47,8 @@ export class TradeWindowComponent implements OnInit, OnDestroy {
       settings.tradeWindowPinned = pinned
     ).subscribe();
   }
+
+  public onSettingsToggle(): void {
+    this.settingsWindow.toggle('trade.name').subscribe();
+  }
 }

src/app/shared/module/odk/component/header/header.component.html

@@ -8,6 +8,8 @@
         <ng-content select="controlsRight"></ng-content>
         <mat-icon (click)="onClose($event)" *ngIf="closeable">close</mat-icon>
         <mat-icon (click)="onPinned($event)" class="pin" [class.pinned]="pinned" *ngIf="pinnable">push_pin</mat-icon>
+        <mat-icon (click)="onSettings($event)" class="settings" *ngIf="settingsToggle.observers.length">settings
+        </mat-icon>
     </div>
 </div>
 <div class="content" [class.inline]="inline" [style.width.px]="width" [style.margin-right.px]="margin">

src/app/shared/module/odk/component/header/header.component.scss

@@ -14,6 +14,10 @@ $border-color: #1a1a1a;
         width: $icon-size;
         font-size: $icon-size;
         line-height: $icon-size;
+
+        & + .mat-icon{
+          margin-left: 3px;
+        }
       }
     }
   }
@@ -48,12 +52,15 @@ $border-color: #1a1a1a;
     left: 10px;
   }
 
+  .settings,
   .pin {
     height: $icon-size - 3px;
     width: $icon-size - 3px;
     font-size: $icon-size - 3px;
     line-height: $icon-size - 3px;
+  }
 
+  .pin {
     will-change: transform, top;
     transition: transform ease-in-out 200ms, top ease-in 100ms;
 

src/app/shared/module/odk/component/header/header.component.ts

@@ -40,6 +40,9 @@ export class HeaderComponent implements OnInit {
   @Input()
   public margin: number;
 
+  @Output()
+  public settingsToggle = new EventEmitter<void>();
+
   public ngOnInit(): void {
     this.obtained$ = this.window.assureObtained()
       .pipe(
@@ -68,4 +71,9 @@ export class HeaderComponent implements OnInit {
     this.pinned = !this.pinned;
     this.pinnedChange.next(this.pinned);
   }
+
+  public onSettings(event: MouseEvent): void {
+    event.preventDefault();
+    this.settingsToggle.next();
+  }
 }

src/app/shared/module/poe/context/context.factory.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { Observable, of } from 'rxjs';
+import { catchError, map } from 'rxjs/operators';
 import { TradeLeaguesProvider } from '../trade/leagues/trade-leagues.provider';
 import { Context } from './context';
 
@@ -12,6 +12,13 @@ export class ContextFactory {
 
     public create(context: Context): Observable<Context> {
         return this.leaguesProvider.provide(context.language).pipe(
+            catchError(error => {
+                console.error(`Could not establish a connection to the GGG API: ${error?.message ?? JSON.stringify(error)}`);
+                return of([
+                    { id: 'Standard', text: 'Standard' },
+                    { id: 'Hardcore', text: 'Hardcore' }
+                ]);
+            }),
             map(leagues => {
                 const result: Context = {
                     ...context,