вооо крутооо 5

src/app/app-routing.module.ts

@@ -4,12 +4,14 @@ import {MainPageComponent} from "./pages/main-page/main-page.component";
 import {ServersPageComponent} from "./pages/servers-page/servers-page.component";
 import {ProfilePageComponent} from "./pages/profile-page/profile-page.component";
 import {RulesPageComponent} from "./pages/rules-page/rules-page.component";
+import {BanlistPageComponent} from "./pages/banlist-page/banlist-page.component";
 
 const routes: Routes = [
   { path: "", component: MainPageComponent},
   { path: "servers", component: ServersPageComponent },
   { path: "profile/:steam64", component: ProfilePageComponent },
-  { path: "rules", component: RulesPageComponent }
+  { path: "rules", component: RulesPageComponent },
+  { path: "banlist", component: BanlistPageComponent }
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -22,6 +22,8 @@ import {HttpClientModule} from "@angular/common/http";
 import {PlayerServiceService} from "./services/player-service.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";
 
 @NgModule({
   declarations: [
@@ -30,7 +32,8 @@ import { RulesPageComponent } from './pages/rules-page/rules-page.component';
     ServersPageComponent,
     ProfilePageComponent,
     NeedAuthToContinue,
-    RulesPageComponent
+    RulesPageComponent,
+    BanlistPageComponent
   ],
   imports: [
     BrowserModule,
@@ -50,7 +53,8 @@ import { RulesPageComponent } from './pages/rules-page/rules-page.component';
   ],
   providers: [
     AnnonceService,
-    PlayerServiceService
+    PlayerServiceService,
+    BanService
   ],
   bootstrap: [AppComponent]
 })

src/app/entities/ShityPaginator.ts

@@ -0,0 +1,13 @@
+export class ShityPaginator<T> {
+  data: T[] = [];
+  count: number = 0;
+  fromData(data:any, field: string): ShityPaginator<T> {
+    this.count = data.count;
+    this.data = data[field];
+    return this;
+  }
+
+  static newObj():ShityPaginator<any> {
+    return new ShityPaginator<any>()
+  }
+}

src/app/entities/ban/Ban.ts

@@ -0,0 +1,19 @@
+export interface Ban {
+  id: number;
+  steam_id: string;
+  account_id: number;
+  player_name: string;
+  ban_length: number;
+  ban_length_seconds: number;
+  ban_reason: string;
+  banned_by: string;
+  banned_by_id: string;
+  ip: string;
+  timestamp: Date;
+  ban_utime: number;
+  active: boolean;
+  unbanned_by_id: string;
+  unbanned_timestamp: Date;
+  admin_info: any;
+  unbanned_admin_info: any;
+}

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

@@ -0,0 +1,25 @@
+<div class="content-in-center-header" style="flex-direction: column;">
+  <h1>Бан лист</h1>
+  <h3>Скоро и ты сюда попадешь браток{{total==0?'':'как и остальные ' + total + ' карликов'}}</h3>
+</div>
+
+<div class="content-in-center">
+  <div class="content-in-border">
+    <app-need-auth-to-continue *ngIf="authService.steamdata == null && loading == null"></app-need-auth-to-continue>
+    <div *ngIf="loading == false">
+      <mat-accordion>
+        <mat-expansion-panel *ngFor="let ban of bans">
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              <p>#{{ban.id}} {{ban.player_name}}</p>
+            </mat-panel-title>
+            <mat-panel-description>
+              <p>{{ban.timestamp | date:'dd/MM/YYYY hh:mm:ss'}}</p>
+            </mat-panel-description>
+          </mat-expansion-panel-header>
+          <p>А хуй знает я еще не приудмал</p>
+        </mat-expansion-panel>
+      </mat-accordion>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,36 @@
+import { Component, OnInit } from '@angular/core';
+import {AuthService} from "../../services/auth.service";
+import {BanService} from "../../services/ban.service";
+import {Ban} from "../../entities/ban/Ban";
+
+@Component({
+  selector: 'app-banlist-page',
+  templateUrl: './banlist-page.component.html',
+  styleUrls: ['./banlist-page.component.scss']
+})
+export class BanlistPageComponent implements OnInit {
+  loading: boolean | null = null;
+  bans: Ban[] = [];
+  total: number = 0;
+
+  constructor(public authService: AuthService,
+              private banService: BanService) {
+  }
+
+  ngOnInit(): void {
+    if (this.authService.isAuth()) {
+      this.getBanList();
+    }
+  }
+
+  getBanList() {
+    this.loading = true;
+    this.banService.getBanList().subscribe(
+      (res) => {
+        this.bans = res.data;
+        this.total = res.count;
+      }, () => {}, () => this.loading = false
+    )
+  }
+
+}

src/app/pages/internal-components/NeedAuthToContinue.ts

@@ -7,7 +7,7 @@ import {AuthService} from "../../services/auth.service";
     <div style="display: flex; justify-content: center">
       <div>
         <img style="height: 200px" src="assets/images/stop.png">
-        <h4>Нужно сначала авторизоваться</h4>
+        <h4 style="color: black">Нужно сначала авторизоваться</h4>
 
         <button style="width: 100%" mat-button mat-raised-button (click)="login()">Войти</button>
       </div>

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

@@ -41,8 +41,8 @@
     </div>
     <div style="padding-bottom: 1%">
       <mat-form-field style="width: 100%; background: white; border-radius: 15px" appearance="fill">
-        <mat-label>Введите ник...</mat-label>
-        <input matInput placeholder="отдыхаем" value="">
+        <mat-label>{{authService.isAuth()?'Введите ник...':'Войди в свой профиль для поиска'}}</mat-label>
+        <input matInput placeholder="отдыхаем" [value]="search" [disabled]="!authService.isAuth()">
       </mat-form-field>
     </div>
     <div style="padding-bottom: 1%">

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

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import {AnnonceService} from "../../services/AnnonceService";
 import {Annonce} from "../../entities/Annonce";
 import {Router} from "@angular/router";
+import {AuthService} from "../../services/auth.service";
 
 @Component({
   selector: 'app-main-page',
@@ -20,7 +21,10 @@ export class MainPageComponent implements OnInit {
     {ico: 'live_help', name: 'О нас', url: 'abot'}
   ]
 
+  search: string|null = null;
+
   constructor(private annoncesService: AnnonceService,
+              protected authService: AuthService,
               private router: Router) { }
 
   ngOnInit(): void {

src/app/services/auth.service.ts

@@ -8,7 +8,7 @@ import {SteamIDs} from "../entities/profile/SteamIDs";
   providedIn: 'root'
 })
 export class AuthService {
-  static KEY: string = "steam_data";
+  static KEY: string = "steam_ids";
   steamdata: SteamData | null = null;
   steamIds: SteamIDs | null = null;
 
@@ -17,14 +17,21 @@ export class AuthService {
       .subscribe((res) => {
         this.steamdata = res.steam_data;
         this.steamIds = res.steamids
+        sessionStorage.setItem(AuthService.KEY, JSON.stringify(res.steamids))
       })
   }
 
   login() {
+    sessionStorage.removeItem(AuthService.KEY);
     window.open("api/auth/login?subdomain=tf2")
   }
 
   logout() {
+    sessionStorage.removeItem(AuthService.KEY);
     window.open("api/auth/logout")
   }
+
+  isAuth() {
+    return sessionStorage.getItem(AuthService.KEY) != null;
+  }
 }

src/app/services/ban.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import {HttpClient} from "@angular/common/http";
+import {ShityPaginator} from "../entities/ShityPaginator";
+import {Ban} from "../entities/ban/Ban";
+import {map, Observable} from "rxjs";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class BanService {
+
+  constructor(private http: HttpClient) { }
+
+  getBanList(): Observable<ShityPaginator<Ban>> {
+    return this.http.get("api/web/banlist").pipe(
+      map((res) => ShityPaginator.newObj().fromData(res, "bans"))
+    )
+  }
+}

src/styles.scss

@@ -87,14 +87,93 @@ span {
   color: #5e7edf;
 }
 
+//размеры говна начало
+
 .content-in-center {
   width: 66%; margin: 0 auto
 }
 
 .content-in-center-header {
-  display: flex; width: 66%; padding-left: calc((100% - 66%)/2); padding-right: calc((100% - 66%)/2); margin: 0 auto; background: linear-gradient(to top, #f2a998, #e65e11);
+  display: flex;
+  width: 66%;
+  padding-left: calc((100% - 66%)/2);
+  padding-right: calc((100% - 66%)/2);
+  margin: 0 auto;
+  background: linear-gradient(to top, #f2a998, #e65e11);
+}
+
+@media only screen and (max-width: 600px) {
+  $screen-width: 95%;
+
+  .content-in-center {
+    width: $screen-width;
+  }
+
+  .content-in-center-header {
+    width: $screen-width;
+    padding-left: calc((100% - $screen-width)/2);
+    padding-right: calc((100% - $screen-width)/2);
+  }
+}
+
+@media only screen and (min-width: 600px) {
+  $screen-width: 90%;
+
+  .content-in-center {
+    width: $screen-width;
+  }
+
+  .content-in-center-header {
+    width: $screen-width;
+    padding-left: calc((100% - $screen-width)/2);
+    padding-right: calc((100% - $screen-width)/2);
+  }
+}
+
+@media only screen and (min-width: 768px) {
+  $screen-width: 80%;
+
+  .content-in-center {
+    width: $screen-width;
+  }
+
+  .content-in-center-header {
+    width: $screen-width;
+    padding-left: calc((100% - $screen-width)/2);
+    padding-right: calc((100% - $screen-width)/2);
+  }
+}
+
+@media only screen and (min-width: 992px) {
+  $screen-width: 70%;
+
+  .content-in-center {
+    width: $screen-width;
+  }
+
+  .content-in-center-header {
+    width: $screen-width;
+    padding-left: calc((100% - $screen-width)/2);
+    padding-right: calc((100% - $screen-width)/2);
+  }
 }
 
+@media only screen and (min-width: 1200px) {
+  $screen-width: 66%;
+
+  .content-in-center {
+    width: $screen-width;
+  }
+
+  .content-in-center-header {
+    width: $screen-width;
+    padding-left: calc((100% - $screen-width)/2);
+    padding-right: calc((100% - $screen-width)/2);
+  }
+}
+
+//размеры говна конец
+
 .content-in-border {
   border-radius: 15px;
   background-color: #f5f5f5;