сообщения говна

src/app/app-routing.module.ts

@@ -5,13 +5,15 @@ 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";
+import {MessagesPageComponent} from "./pages/messages-page/messages-page.component";
 
 const routes: Routes = [
   { path: "", component: MainPageComponent},
   { path: "servers", component: ServersPageComponent },
   { path: "profile/:steam64", component: ProfilePageComponent },
   { path: "rules", component: RulesPageComponent },
-  { path: "banlist", component: BanlistPageComponent }
+  { path: "banlist", component: BanlistPageComponent },
+  { path: "messages", component: MessagesPageComponent }
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -33,6 +33,10 @@ import {Tf2dataService} from "./services/tf2data.service";
 import {MatDividerModule} from "@angular/material/divider";
 import {MatListModule} from "@angular/material/list";
 import {MatProgressBarModule} from "@angular/material/progress-bar";
+import { MessagesPageComponent } from './pages/messages-page/messages-page.component';
+import {MatPaginatorModule} from "@angular/material/paginator";
+import {MatTableModule} from "@angular/material/table";
+import {MatSortModule} from "@angular/material/sort";
 
 registerLocaleData(localeRu, "ru")
 
@@ -44,7 +48,8 @@ registerLocaleData(localeRu, "ru")
     ProfilePageComponent,
     NeedAuthToContinue,
     RulesPageComponent,
-    BanlistPageComponent
+    BanlistPageComponent,
+    MessagesPageComponent
   ],
   imports: [
     BrowserModule,
@@ -66,7 +71,10 @@ registerLocaleData(localeRu, "ru")
     MatDividerModule,
     MatListModule,
     MatProgressBarModule,
-    ValueServerMapDatePipe
+    ValueServerMapDatePipe,
+    MatPaginatorModule,
+    MatTableModule,
+    MatSortModule
   ],
   providers: [
     {provide: LOCALE_ID, useValue: 'ru' },

src/app/entities/PagingAndSortingPaginator.ts

@@ -0,0 +1,27 @@
+import {MatPaginator, MatPaginatorIntl} from "@angular/material/paginator";
+import {ChangeDetectorRef} from "@angular/core";
+
+export class PagingAndSortingPaginator<T> {
+  data: T[] = [];
+  count: number = 0;
+  size: number = 0;
+
+  fromData(data: any) {
+    this.data = data['content'];
+    this.count = data['totalElements'];
+    this.size = data['size'];
+    return this;
+  }
+
+  static newObj():PagingAndSortingPaginator<any> {
+    return new PagingAndSortingPaginator<any>();
+  }
+
+  updatePaginator(paginator: MatPaginator) {
+    if (paginator == null)
+      paginator = new MatPaginator(new MatPaginatorIntl(), ChangeDetectorRef.prototype);
+    paginator.pageSize = this.size;
+    paginator.length = this.count;
+    return this;
+  }
+}

src/app/entities/profile/Message.ts

@@ -0,0 +1,7 @@
+export class Message {
+  id: number = 0;
+  account_id: number = 0;
+  utime: number =0 ;
+  server_id: string = "";
+  account_name: string = "";
+}

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

@@ -0,0 +1,44 @@
+<div class="content-in-center-header" style="flex-direction: column;">
+  <h1>Сообщения</h1>
+  <h3>Все что ты пишешь в чате игре, общедоступное достояние</h3>
+</div>
+
+<div class="content-in-center">
+  <div class="content-in-border">
+    <app-need-auth-to-continue *ngIf="!authService.isAuth()"></app-need-auth-to-continue>
+    <div *ngIf="authService.isAuth()">
+      <table mat-table [dataSource]="dataSource" matSort style="width: 100%">
+
+        <ng-container matColumnDef="account_id">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> AccountId </th>
+          <td mat-cell *matCellDef="let row"> {{row.account_id}} </td>
+        </ng-container>
+
+        <ng-container matColumnDef="date">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Date </th>
+          <td mat-cell *matCellDef="let row"> {{row.utime*1000 | date:"hh:mm:ss dd/MM/yyyy"}} </td>
+        </ng-container>
+
+        <ng-container matColumnDef="message">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Message </th>
+          <td mat-cell *matCellDef="let row"> {{row.message}} </td>
+        </ng-container>
+
+        <ng-container matColumnDef="server_id">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> ServerId </th>
+          <td mat-cell *matCellDef="let row"> {{row.server_id}} </td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+
+        <!-- Row shown when there is no matching data. -->
+        <tr class="mat-row" *matNoDataRow>
+          <td class="mat-cell" colspan="4">No data matching the filter </td>
+        </tr>
+      </table>
+
+      <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page of users"></mat-paginator>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,46 @@
+import {AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild} from '@angular/core';
+import {AuthService} from "../../services/auth.service";
+import {MatTableDataSource} from "@angular/material/table";
+import {MatPaginator, MatPaginatorIntl} from "@angular/material/paginator";
+import {MatSort} from "@angular/material/sort";
+import {Message} from "../../entities/profile/Message";
+import {MessageService} from "../../services/message.service";
+
+@Component({
+  selector: 'app-messages-page',
+  templateUrl: './messages-page.component.html',
+  styleUrls: ['./messages-page.component.scss']
+})
+export class MessagesPageComponent implements OnInit, AfterViewInit {
+
+  displayedColumns: string[] = ['account_id', 'date', 'message', 'server_id'];
+  dataSource: MatTableDataSource<Message>;
+
+  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort!: MatSort;
+
+  constructor(public authService: AuthService,
+              private messageService: MessageService) {
+    this.dataSource = new MatTableDataSource<Message>();
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+  }
+
+  ngOnInit(): void {
+    this.getMessages(null);
+  }
+
+  getMessages(filter:any) {
+    this.messageService.getMessages(filter, this.paginator).subscribe(
+      (res) => {
+        this.dataSource = new MatTableDataSource<Message>(res.data)
+      }
+    )
+  }
+
+  ngAfterViewInit() {
+    this.paginator ? this.dataSource.paginator = this.paginator: null;
+    this.sort ? this.dataSource.sort = this.sort : null;
+  }
+
+}

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

@@ -14,6 +14,7 @@
 </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 && profile != null">
     <div class="container responsive-grid-400">
@@ -213,4 +214,5 @@
       </mat-accordion>
     </div>
   </div>
+  </div>
 </div>

src/app/services/message.service.ts

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import {HttpClient} from "@angular/common/http";
+import {MatPaginator} from "@angular/material/paginator";
+import {map} from "rxjs";
+import {PagingAndSortingPaginator} from "../entities/PagingAndSortingPaginator";
+import {Message} from "../entities/profile/Message";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MessageService {
+
+  constructor(private http: HttpClient) { }
+
+  getMessages(filters: any, paginator: MatPaginator) {
+    return this.http.post(
+      `/api/profile/messages/pages`,
+      filters,
+      {params: {size: paginator?paginator.pageSize:20, page: paginator?paginator.pageIndex:0}}).pipe(
+      (map((res) => PagingAndSortingPaginator<Message>.newObj().fromData(res).updatePaginator(paginator)))
+    );
+  }
+}