поиск игрока

src/app/app.component.html

@@ -16,7 +16,7 @@
     {{auth_service.steamdata?.nickname}}
   </button>
   <mat-menu #menu="matMenu">
-    <button *ngIf="auth_service.steamIds != null" mat-menu-item (click)="go2url(['profile', auth_service.steamIds.steam64])">Мой профиль</button>
+    <button *ngIf="auth_service.steamIds != null && auth_service.steamIds.steam64 != null" mat-menu-item (click)="go2url(['profile', auth_service.steamIds.steam64])">Мой профиль</button>
     <button mat-menu-item>Привязать дискорд</button>
     <button mat-menu-item (click)="logout()">Выйти</button>
   </mat-menu>

src/app/app.module.ts

@@ -19,11 +19,13 @@ import { ProfilePageComponent } from './pages/profile-page/profile-page.componen
 import {NeedAuthToContinue} from "./pages/internal-components/NeedAuthToContinue";
 import {MatMenuModule} from "@angular/material/menu";
 import {HttpClientModule} from "@angular/common/http";
-import {PlayerServiceService} from "./services/player-service.service";
+import {PlayerService} from "./services/player.service";
 import {MatSnackBarModule} from "@angular/material/snack-bar";
 import { RulesPageComponent } from './pages/rules-page/rules-page.component';
 import { BanlistPageComponent } from './pages/banlist-page/banlist-page.component';
 import {BanService} from "./services/ban.service";
+import {MatAutocompleteModule} from "@angular/material/autocomplete";
+import {FormsModule} from "@angular/forms";
 
 @NgModule({
   declarations: [
@@ -35,25 +37,27 @@ import {BanService} from "./services/ban.service";
     RulesPageComponent,
     BanlistPageComponent
   ],
-  imports: [
-    BrowserModule,
-    AppRoutingModule,
-    BrowserAnimationsModule,
-    MatToolbarModule,
-    MatIconModule,
-    MatButtonModule,
-    MatGridListModule,
-    MatCardModule,
-    MatInputModule,
-    MatChipsModule,
-    MatExpansionModule,
-    MatMenuModule,
-    HttpClientModule,
-    MatSnackBarModule
-  ],
+    imports: [
+        BrowserModule,
+        AppRoutingModule,
+        BrowserAnimationsModule,
+        MatToolbarModule,
+        MatIconModule,
+        MatButtonModule,
+        MatGridListModule,
+        MatCardModule,
+        MatInputModule,
+        MatChipsModule,
+        MatExpansionModule,
+        MatMenuModule,
+        HttpClientModule,
+        MatSnackBarModule,
+        MatAutocompleteModule,
+        FormsModule
+    ],
   providers: [
     AnnonceService,
-    PlayerServiceService,
+    PlayerService,
     BanService
   ],
   bootstrap: [AppComponent]

src/app/entities/profile/SteamIDs.ts

@@ -1,7 +1,13 @@
-export interface SteamIDs {
-  steam3: string;
-  steam2: string;
-  steam64: string;
-  community_url: string;
-  account_id: number;
+export class SteamIDs {
+  steam3: string|null = null;
+  steam2: string|null = null;
+  steam64: string|null = null;
+  community_url: string|null = null;
+  account_id: number|null = null;
+
+  static fromData(res: any) {
+    const s: SteamIDs = new SteamIDs();
+    Object.assign(s, res);
+    return s;
+  }
 }

src/app/pages/main-page/main-page.component.html

@@ -42,12 +42,20 @@
     <div style="padding-bottom: 1%">
       <mat-form-field style="width: 100%; background: white; border-radius: 15px" appearance="fill">
         <mat-label>{{authService.isAuth()?'Введите ник...':'Войди в свой профиль для поиска'}}</mat-label>
-        <input matInput placeholder="отдыхаем" [value]="search" [disabled]="!authService.isAuth()">
+        <input
+          matInput
+          placeholder="отдыхаем"
+          [(ngModel)]="search"
+          [disabled]="!authService.isAuth() || loading"
+        >
+        <button *ngIf="search" matSuffix mat-icon-button (click)="searchPlayer(search)">
+          <mat-icon>search</mat-icon>
+        </button>
       </mat-form-field>
     </div>
     <div style="padding-bottom: 1%">
       <mat-chip-list aria-label="Fish selection">
-        <mat-chip class="chips" *ngFor="let h of getSearchHistory()">{{h}}</mat-chip>
+        <mat-chip class="chips" *ngFor="let h of getSearchHistory()" (click)="searchPlayer(h)">{{h}}</mat-chip>
       </mat-chip-list>
     </div>
   </div>

src/app/pages/main-page/main-page.component.scss

@@ -28,3 +28,7 @@
 .chips {
   border-radius: 8px 16px 16px 16px;
 }
+
+::ng-deep .mat-autocomplete-panel {
+  border-radius: 15px;
+}

src/app/pages/main-page/main-page.component.ts

@@ -3,6 +3,8 @@ import {AnnonceService} from "../../services/AnnonceService";
 import {Annonce} from "../../entities/Annonce";
 import {Router} from "@angular/router";
 import {AuthService} from "../../services/auth.service";
+import {PlayerService} from "../../services/player.service";
+import {MatSnackBar} from "@angular/material/snack-bar";
 
 @Component({
   selector: 'app-main-page',
@@ -21,11 +23,15 @@ export class MainPageComponent implements OnInit {
     {ico: 'live_help', name: 'О нас', url: 'abot'}
   ]
 
-  search: string|null = null;
+  search: string = "";
+  loading: boolean = false;
+  public static SEARCH_HISTORY = "SEARCH_HISTORY";
 
   constructor(private annoncesService: AnnonceService,
               protected authService: AuthService,
-              private router: Router) { }
+              protected playerService: PlayerService,
+              private router: Router,
+              protected snack: MatSnackBar) { }
 
   ngOnInit(): void {
   }
@@ -46,17 +52,36 @@ export class MainPageComponent implements OnInit {
   }
 
   getSearchHistory(limit: number = 5) {
-    const SEARCH_HISTORY = "SEARCH_HISTORY";
-    if (localStorage.getItem(SEARCH_HISTORY) == null)
-      localStorage.setItem(SEARCH_HISTORY, JSON.stringify(["отдыхаем", "#1488", "<@88005553535>", "STEAM:0:0:1337228"]))
+    if (localStorage.getItem(MainPageComponent.SEARCH_HISTORY) == null)
+      localStorage.setItem(MainPageComponent.SEARCH_HISTORY, JSON.stringify(["отдыхаем", "#1488", "<@88005553535>", "STEAM:0:0:1337228"]))
 
     let sh: string = "[]";
-    if (localStorage.getItem(SEARCH_HISTORY) != null)
+    if (localStorage.getItem(MainPageComponent.SEARCH_HISTORY) != null)
       { // @ts-ignore
-        sh = localStorage.getItem(SEARCH_HISTORY);
+        sh = localStorage.getItem(MainPageComponent.SEARCH_HISTORY);
       }
     const res: string[] = JSON.parse(sh)
     return res.slice(res.length - limit < 0?0:res.length - limit, res.length);
   }
 
+  addToSearchHistory(search: string) {}
+
+  searchPlayer(search: string) {
+    if (search.length == 0) {
+      this.snack.open("Сначала стоит ввести данные об игроке");
+      return;
+    }
+    this.search = search;
+    this.loading = true;
+    this.playerService.searchProfile(search).subscribe(
+      (res) => {
+        if (res.steam64 != null)
+          this.router.navigate(['profile', res.steam64])
+        else
+          this.snack.open(`Игрок с данными ${search} не найден`, "Закрыть", {duration: 3000})
+      },
+      (err) => this.snack.open("Нельзя выполнить поиск, сервер прислал ошибку", "Закрыть", {duration: 3000}),
+      () => this.loading = false
+    )
+  }
 }

src/app/pages/profile-page/profile-page.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import {ActivatedRoute} from "@angular/router";
-import {PlayerServiceService} from "../../services/player-service.service";
+import {PlayerService} from "../../services/player.service";
 import {PlayerProfile} from "../../entities/profile/PlayerProfile";
 import {MatSnackBar} from "@angular/material/snack-bar";
 import {AuthService} from "../../services/auth.service";
@@ -17,7 +17,7 @@ export class ProfilePageComponent implements OnInit {
   loading: boolean | null = null;
 
   constructor(private route: ActivatedRoute,
-              private playerService: PlayerServiceService,
+              private playerService: PlayerService,
               private snack: MatSnackBar,
               public authService: AuthService) { }
 

src/app/services/auth.service.ts

@@ -1,5 +1,5 @@
 import {Injectable, OnInit} from '@angular/core';
-import {PlayerServiceService} from "./player-service.service";
+import {PlayerService} from "./player.service";
 import {ProfileRequestData} from "../entities/profile/ProfileRequestData";
 import {SteamData} from "../entities/profile/SteamData";
 import {SteamIDs} from "../entities/profile/SteamIDs";
@@ -12,7 +12,7 @@ export class AuthService {
   steamdata: SteamData | null = null;
   steamIds: SteamIDs | null = null;
 
-  constructor(private playerService: PlayerServiceService) {
+  constructor(private playerService: PlayerService) {
     this.playerService.getProfile(null, [ProfileRequestData.STEAM_DATA])
       .subscribe((res) => {
         this.steamdata = res.steam_data;

src/app/services/player-service.service.ts → src/app/services/player.service.ts

@@ -4,11 +4,12 @@ import {ProfileRequestData} from "../entities/profile/ProfileRequestData";
 import * as http from "http";
 import {map, Observable} from "rxjs";
 import {PlayerProfile} from "../entities/profile/PlayerProfile";
+import {SteamIDs} from "../entities/profile/SteamIDs";
 
 @Injectable({
   providedIn: 'root'
 })
-export class PlayerServiceService {
+export class PlayerService {
 
   constructor(private http: HttpClient) {}
 
@@ -16,4 +17,10 @@ export class PlayerServiceService {
     return this.http.get(`api/profile/${steam64 == null ? 'current' : 'web'}?requests=${request.map((p) => p.param).join(',')}&steam64=${steam64}`)
       .pipe(map((r) => PlayerProfile.fromData(r)));
   }
+
+  searchProfile(str: string): Observable<SteamIDs> {
+    return this.http.post(`api/profile/steam/web`, {any: str}).pipe(
+      map((res) => SteamIDs.fromData(res))
+    )
+  }
 }