вооо крутооо спискок серверов да еще и игроками 2

src/app/app.module.ts

@@ -30,6 +30,7 @@ import {ServerService} from "./services/server.service";
 import {registerLocaleData} from "@angular/common";
 import localeRu from "@angular/common/locales/ru";
 import {Tf2dataService} from "./services/tf2data.service";
+import {MatDividerModule} from "@angular/material/divider";
 
 registerLocaleData(localeRu, "ru")
 
@@ -43,24 +44,25 @@ registerLocaleData(localeRu, "ru")
     RulesPageComponent,
     BanlistPageComponent
   ],
-    imports: [
-        BrowserModule,
-        AppRoutingModule,
-        BrowserAnimationsModule,
-        MatToolbarModule,
-        MatIconModule,
-        MatButtonModule,
-        MatGridListModule,
-        MatCardModule,
-        MatInputModule,
-        MatChipsModule,
-        MatExpansionModule,
-        MatMenuModule,
-        HttpClientModule,
-        MatSnackBarModule,
-        MatAutocompleteModule,
-        FormsModule
-    ],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    BrowserAnimationsModule,
+    MatToolbarModule,
+    MatIconModule,
+    MatButtonModule,
+    MatGridListModule,
+    MatCardModule,
+    MatInputModule,
+    MatChipsModule,
+    MatExpansionModule,
+    MatMenuModule,
+    HttpClientModule,
+    MatSnackBarModule,
+    MatAutocompleteModule,
+    FormsModule,
+    MatDividerModule
+  ],
   providers: [
     {provide: LOCALE_ID, useValue: 'ru' },
     AnnonceService,

src/app/entities/profile/Permition.ts

@@ -0,0 +1,7 @@
+export interface Permition {
+  flags: string;
+  u_timestamp: number;
+  amount: number;
+  immunity: number;
+  status: string
+}

src/app/entities/profile/PlayOn.ts

@@ -0,0 +1,7 @@
+export interface PlayOn {
+  server_id: string;
+  player_id: number;
+  ip: string;
+  name: string;
+  country: string;
+}

src/app/entities/profile/PlayerProfile.ts

@@ -1,22 +1,26 @@
 import {SteamData} from "./SteamData";
 import {SteamIDs} from "./SteamIDs";
+import {Ban} from "../ban/Ban";
+import {Permition} from "./Permition";
+import {Reports} from "./Reports";
+import {PlayOn} from "./PlayOn";
 
 export class PlayerProfile {
-  ban: any|null = null;
+  ban: Ban|null = null;
   gametime: {[srv_name: string]: {[map_name: string]: number}} = {};
   lastplay: {[srv_name: string]: {[map_name: string]: number}} = {};
-  permition: any|null = null;
+  permition: Permition|null = null;
   response_time: {[request: string]: number} = {};
   steam_data: SteamData|null = null;
   steamids: SteamIDs|null = null;
-  play_on: any|null = null;
+  play_on: PlayOn|null = null;
   attached_discords: any[]|null = null;
   donates: any[]|null = null;
   ban_list: any[]|null = null;
   killfeed: any|null = null;
   killfeed_current: any = null;
-  messages: any = null;
-  reports: any = null;
+  messages: number|null = null;
+  reports: Reports|null = null;
 
   static fromData(data:any): PlayerProfile {
     const p = new PlayerProfile();

src/app/entities/profile/ProfileRequestData.ts

@@ -16,7 +16,8 @@ export class ProfileRequestData {
     ProfileRequestData.PLAY_ON,
     ProfileRequestData.PERMITION,
     ProfileRequestData.BAN,
-    ProfileRequestData.STEAM_DATA
+    ProfileRequestData.STEAM_DATA,
+    ProfileRequestData.REPORTS
   ]
   param: string;
   description: string;

src/app/entities/profile/Reports.ts

@@ -0,0 +1,5 @@
+export interface Reports {
+  created: number;
+  accepted: number;
+  selfcount: number;
+}

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

@@ -15,7 +15,166 @@
 
 <div class="content-in-center">
   <app-need-auth-to-continue *ngIf="authService.steamdata == null && loading == null"></app-need-auth-to-continue>
-  <div *ngIf="loading == false">
-    <p>Профиль малютки</p>
+  <div *ngIf="loading == false && profile != null">
+    <div class="container responsive-grid-400">
+      <mat-card class="example-card">
+        <mat-card-title-group>
+          <mat-card-title *ngIf="profile.steam_data != null">{{profile.steam_data.nickname}}</mat-card-title>
+          <mat-card-subtitle>
+            <div>
+              <p *ngIf="profile.steamids != null">Steam64: {{profile.steamids.steam64}}</p>
+              <p *ngIf="profile.steamids != null">Steam3: {{profile.steamids.steam3}}</p>
+              <p *ngIf="profile.steamids != null">Steam2: {{profile.steamids.steam2}}</p>
+            </div>
+          </mat-card-subtitle>
+          <img *ngIf="profile != null && profile.steam_data != null" mat-card-sm-image [src]="profile.steam_data.avatar" >
+        </mat-card-title-group><mat-divider inset></mat-divider>
+        <mat-card-actions>
+          <button mat-button>Открыть Steam</button>
+          <button mat-button>Купить VIP</button>
+        </mat-card-actions>
+      </mat-card>
+      <mat-card *ngIf="profile.permition != null">
+        <mat-card-title>Имеет {{profile.permition.status}} права</mat-card-title>
+        <mat-card-subtitle>
+          <div>
+            <p>Назначены: {{profile.permition.u_timestamp * 1000 | date:"hh:mm dd.MM.YYYY"}}</p>
+            <p>{{profile.permition.amount == 0?'Выданы на неопределенный срок':'Выданы до: ' + (((profile.permition.u_timestamp + profile.permition.amount) * 1000)| date:"hh:mm dd.MM.YYYY")}}</p>
+          </div>
+        </mat-card-subtitle>
+      </mat-card>
+      <mat-card *ngIf="profile.ban != null">
+        <mat-card-title>Бан, {{profile.ban.ban_length_seconds > 0?'до ' + ((profile.ban.ban_utime+profile.ban.ban_length_seconds)*1000 | date:"hh:mm dd.MM.YYYY"):'навсегда'}}</mat-card-title>
+        <mat-card-subtitle>
+          <div>
+            <p>Причина: {{profile.ban.ban_reason}}</p>
+            <p>Дата: {{profile.ban.ban_utime*1000 | date:"hh:mm dd.MM.YYYY"}}</p>
+          </div>
+        </mat-card-subtitle>
+        <mat-divider inset></mat-divider>
+        <mat-card-actions>
+          <button mat-button>Копировать ID бана</button>
+          <button mat-button>Steam модератора</button>
+          <button mat-button>Discord модератора</button>
+        </mat-card-actions>
+      </mat-card>
+    </div>
+    <div class="container responsive-grid-250">
+      <mat-card *ngIf="profile.reports != null">
+        <mat-card-title>{{profile.reports.created}}</mat-card-title>
+        <mat-card-subtitle>репортов создал</mat-card-subtitle>
+      </mat-card>
+      <mat-card *ngIf="profile.reports != null">
+        <mat-card-title>{{profile.reports.accepted}}</mat-card-title>
+        <mat-card-subtitle>раз жаловались</mat-card-subtitle>
+      </mat-card>
+      <mat-card *ngIf="profile.messages != null">
+        <mat-card-title>{{profile.messages}}</mat-card-title>
+        <mat-card-subtitle>раз писал в чат</mat-card-subtitle>
+      </mat-card>
+      <mat-card *ngIf="profile.play_on != null">
+        <mat-card-title>Сейчас играет</mat-card-title>
+        <mat-card-subtitle>на {{profile.play_on.server_id}} из {{profile.play_on.country}}</mat-card-subtitle>
+      </mat-card>
+      <mat-card *ngIf="profile.play_on != null">
+        <mat-card-title>IP адрес</mat-card-title>
+        <mat-card-subtitle>нажми чтоб скопировать</mat-card-subtitle>
+      </mat-card>
+    </div>
+    <!--Сколько наиграно -->
+    <div>
+      <mat-accordion>
+        <mat-expansion-panel hideToggle>
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              Последние подключение
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+          <div>
+            <p>ебануть табличку где по серверам выборка когда чел полсдений раз заходил</p>
+          </div>
+        </mat-expansion-panel>
+        <mat-expansion-panel hideToggle>
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              Наиграно времени
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+          <div>
+            <p>ебануть табличку где разпределение по времени </p>
+          </div>
+        </mat-expansion-panel>
+        <mat-expansion-panel hideToggle>
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              История банов
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+          <div>
+            <p>Тоже табличку</p>
+          </div>
+        </mat-expansion-panel>
+        <mat-expansion-panel hideToggle>
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              История получения VIP
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+          <div>
+            <p>Табличка где каво когда </p>
+          </div>
+        </mat-expansion-panel>
+        <mat-expansion-panel hideToggle>
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              Репорты с участием игрока
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+          <div>
+            <p>Табличку с репортом</p>
+          </div>
+        </mat-expansion-panel>
+        <mat-expansion-panel hideToggle>
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              Сообщения пользователя
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+          <div>
+            <p>табличку с поиском сообщений</p>
+          </div>
+        </mat-expansion-panel>
+        <mat-expansion-panel hideToggle>
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              Убийства на сервере
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+          <div>
+            <p>табличку с убийствами</p>
+          </div>
+        </mat-expansion-panel>
+        <mat-expansion-panel hideToggle>
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              Смерти на сервере
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+          <div>
+            <p>huy</p>
+          </div>
+        </mat-expansion-panel>
+        <mat-expansion-panel hideToggle>
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              Время загрузки данных с сервера (не для пельменя)
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+          <div>
+            <p *ngFor="let req of profile.response_time | keyvalue">{{req.key}} - {{req.value*1000}} милисекунды</p>
+          </div>
+        </mat-expansion-panel>
+      </mat-accordion>
+    </div>
   </div>
 </div>

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

@@ -0,0 +1,7 @@
+.container {
+  padding: 24px;
+}
+
+p {
+  margin: 0 0;
+}

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

@@ -121,7 +121,7 @@
                 </mat-card>
                 <mat-card style="cursor: pointer"
                   *ngIf="player.steam.steam64 != null"
-                  (click)="actionService.goToUrlViaRouter(['profile', player.steam.steam64])">
+                  (click)="authService.isAuth()?actionService.goToUrlViaRouter(['profile', player.steam.steam64]):actionService.showSnack('Сначала нужно войти на сайте')">
                   <mat-card-title>Открыть профиль</mat-card-title>
                   <mat-card-subtitle>на сайте</mat-card-subtitle>
                 </mat-card>
@@ -131,7 +131,7 @@
                   <mat-card-subtitle>в стиме</mat-card-subtitle>
                 </mat-card>
                 <mat-card style="cursor: pointer"
-                          (click)="actionService.showSnack('Пока что нет')">
+                          (click)="authService.isAuth()?null:actionService.showSnack('Сначала нужно войти на сайте')">
                   <mat-card-title>Пожаловаться</mat-card-title>
                   <mat-card-subtitle>на игрока который играет</mat-card-subtitle>
                 </mat-card>

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

@@ -4,6 +4,7 @@ import {Server} from "../../entities/servers/Server";
 import {KeyValue} from "@angular/common";
 import {ActionService} from "../../services/action.service";
 import {Tf2dataService} from "../../services/tf2data.service";
+import {AuthService} from "../../services/auth.service";
 
 @Component({
   selector: 'app-servers-page',
@@ -16,7 +17,8 @@ export class ServersPageComponent implements OnInit {
 
   constructor(private servers_ws:WebsocketServersListenerService,
               public actionService: ActionService,
-              public tf2data: Tf2dataService) { }
+              public tf2data: Tf2dataService,
+              public authService: AuthService) { }
 
   ngOnInit(): void {
     this.servers_ws.getServers().subscribe((r) => {

src/app/services/auth.service.ts

@@ -23,7 +23,7 @@ export class AuthService {
 
   login() {
     sessionStorage.removeItem(AuthService.KEY);
-    window.open("api/auth/login?subdomain=tf3")
+    window.open(`api/auth/login?subdomain=${location.hostname.split(".").shift()}`)
   }
 
   logout() {

src/styles.scss

@@ -205,3 +205,9 @@ span {
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
   gap: 24px;
 }
+
+.responsive-grid-400 {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+  gap: 24px;
+}