ахуенный поиск

src/app/app.module.ts

@@ -34,9 +34,13 @@ 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 {MatPaginatorIntl, MatPaginatorModule} from "@angular/material/paginator";
 import {MatTableModule} from "@angular/material/table";
 import {MatSortModule} from "@angular/material/sort";
+import {RussianPaginatorIntl} from "./utils/RussianPaginatorIntl";
+import {MatSelectModule} from "@angular/material/select";
+import {MatDatepickerModule} from "@angular/material/datepicker";
+import {MatNativeDateModule} from "@angular/material/core";
 
 registerLocaleData(localeRu, "ru")
 
@@ -74,15 +78,20 @@ registerLocaleData(localeRu, "ru")
     ValueServerMapDatePipe,
     MatPaginatorModule,
     MatTableModule,
-    MatSortModule
+    MatSortModule,
+    MatSelectModule,
+    MatDatepickerModule,
+    MatNativeDateModule
   ],
   providers: [
     {provide: LOCALE_ID, useValue: 'ru' },
+    {provide: MatPaginatorIntl, useValue: RussianPaginatorIntl() },
     AnnonceService,
     PlayerService,
     BanService,
     ServerService,
-    Tf2dataService
+    Tf2dataService,
+    MatDatepickerModule
   ],
   bootstrap: [AppComponent]
 })

src/app/entities/PagingAndSortingPaginator.ts

@@ -3,13 +3,15 @@ import {ChangeDetectorRef} from "@angular/core";
 
 export class PagingAndSortingPaginator<T> {
   data: T[] = [];
-  count: number = 0;
+  totalElements: number = 0;
+  number: number = 0;
   size: number = 0;
 
   fromData(data: any) {
-    this.data = data['content'];
-    this.count = data['totalElements'];
-    this.size = data['size'];
+    this.data = data.content;
+    this.size = data.size;
+    this.totalElements = data.totalElements;
+    this.number = data.number;
     return this;
   }
 
@@ -17,11 +19,11 @@ export class PagingAndSortingPaginator<T> {
     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;
+  updatePaginator(paginator: MatPaginator|undefined) {
+    if (paginator) {
+      paginator.pageIndex = this.number;
+      paginator.length = this.totalElements;
+    }
     return this;
   }
 }

src/app/entities/profile/Message.ts

@@ -4,4 +4,5 @@ export class Message {
   utime: number =0 ;
   server_id: string = "";
   account_name: string = "";
+  serverName: string = "";
 }

src/app/entities/search/MessageSearchFilter.ts

@@ -0,0 +1,5 @@
+import {SearchFilter} from "./SearchFilter";
+
+export class MessageSearchFilter extends SearchFilter {
+  message: string | null = null;
+}

src/app/entities/search/SearchFilter.ts

@@ -0,0 +1,7 @@
+export class SearchFilter {
+  accounts: string[]|null = null;
+  begin: Date | null = null;
+  end: Date | null = null;
+  serverId : string | null = null;
+  updated: boolean = false;
+}

src/app/pages/internal-components/abstract-search-table.component.ts

@@ -0,0 +1,106 @@
+import {AfterViewInit, Component, ViewChild} from "@angular/core";
+import {MatTableDataSource} from "@angular/material/table";
+import {Message} from "../../entities/profile/Message";
+import {MatPaginator} from "@angular/material/paginator";
+import {merge, switchMap} from "rxjs";
+import {MatSort} from "@angular/material/sort";
+import {SearchFilter} from "../../entities/search/SearchFilter";
+import {ServerService} from "../../services/server.service";
+
+@Component({template: ''})
+export abstract class AbstractSearchTable<T,U extends SearchFilter> implements AfterViewInit {
+
+  dataSource: MatTableDataSource<T>;
+  filter: U = new SearchFilter() as U;
+  @ViewChild(MatPaginator) paginator: MatPaginator | undefined;
+  @ViewChild(MatSort) sort: MatSort | undefined;
+  serverList: {name: string, server_id: string }[] = []
+
+  protected constructor(protected serverService: ServerService) {
+    this.dataSource = new MatTableDataSource<T>();
+  }
+
+  public updateData() {}
+
+  ngAfterViewInit(): void {
+    this.updateData();
+    this.serverService.getStats("servers").subscribe(
+      (res) => {
+        const keys = Object.keys(res.data);
+        for (const key of keys) {
+          this.serverList.push({name: res.data[key].name, server_id: key});
+        }
+        console.log(this.serverList);
+      }
+    )
+  }
+
+  addAccountToSearch(name: string) {
+    if (this.filter.accounts == null)
+      this.filter.accounts = [];
+    if (this.filter.accounts.indexOf(name) == -1)
+      this.filter.accounts.push(name);
+    this.filter.updated = true;
+  }
+
+  removeAccountFromSearch(name: string) {
+    if (this.filter.accounts == null) return;
+    this.filter.accounts = this.filter.accounts.filter(v => v !== name);
+    this.filter.updated = true;
+  }
+
+  addServerToSearch(server_id: string|null = null) {
+    this.filter.serverId = server_id == null ? "%" : server_id;
+    if (server_id != null) {
+      this.filter.updated = true;
+    }
+  }
+
+  removeServerFromSearch() {
+    this.filter.serverId = null;
+    this.filter.updated = true;
+  }
+
+  getServerName(server_id: string|null) {
+    try {
+      // @ts-ignore
+      return this.serverList.filter(s => s.server_id == server_id).pop().name;
+    } catch (e) {
+      return "Выбрать сервер";
+    }
+  }
+
+  addBeginTimeToSearch(custom_date: number|null = null) {
+    if (custom_date == null) {
+      const d: Date = new Date();
+      d.setUTCHours(0, 0, 0, 0);
+      this.filter.begin = d;
+    }
+    if (typeof custom_date == "number") {
+      this.filter.begin = new Date(custom_date);
+    }
+    this.filter.updated = true;
+  }
+
+  removeBeginTimeFromSearch() {
+    this.filter.begin = null;
+    this.filter.updated = true;
+  }
+
+  addEndTimeToSearch(custom_date: number|null = null) {
+    if (custom_date == null) {
+      const d: Date = new Date();
+      d.setUTCHours(23, 59, 59, 999);
+      this.filter.end = d;
+    }
+    if (typeof custom_date == "number") {
+      this.filter.end = new Date(custom_date);
+    }
+    this.filter.updated = true;
+  }
+
+  removeEndTimeFromSearch() {
+    this.filter.end = null;
+    this.filter.updated = true;
+  }
+}

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

@@ -7,26 +7,121 @@
   <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%">
+      <div style="padding-bottom: 10px;">
+        <mat-chip-list>
+          <mat-chip [matMenuTriggerFor]="addFilter">Искать по...</mat-chip>
+          <mat-menu #addFilter>
+            <button mat-menu-item>Имени</button>
+            <button mat-menu-item [matMenuTriggerFor]="timeSelect">Времени</button>
 
-        <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>
+
+            <button mat-menu-item (click)="addServerToSearch()">Серверу</button>
+            <button mat-menu-item>Содержимому</button>
+          </mat-menu>
+          <mat-menu #timeSelect>
+            <button mat-menu-item (click)="addEndTimeToSearch()">До ...</button>
+            <button mat-menu-item (click)="addBeginTimeToSearch()">После ...</button>
+          </mat-menu>
+
+          <mat-chip *ngIf="filter.updated" (click)="getMessages()">Обновить</mat-chip>
+          <mat-chip
+            *ngFor="let acId of filter.accounts"
+            (removed)="removeAccountFromSearch(acId)">{{acId}}
+            <button matChipRemove>
+              <mat-icon>cancel</mat-icon>
+            </button>
+          </mat-chip>
+          <mat-chip
+            *ngIf="filter.message!=null"
+            (removed)="removeMessageFromSearch()">Сообщение содержит: {{filter.message}}
+            <button matChipRemove>
+              <mat-icon>cancel</mat-icon>
+            </button>
+          </mat-chip>
+
+          <mat-chip *ngIf="filter.serverId!=null"
+            (removed)="removeServerFromSearch()" [matMenuTriggerFor]="serverSelect">
+            {{getServerName(filter.serverId)}}
+            <button matChipRemove>
+              <mat-icon>cancel</mat-icon>
+            </button>
+            <mat-menu #serverSelect>
+              <button mat-menu-item *ngFor="let server of serverList" (click)="addServerToSearch(server.server_id)">{{server.name}}</button>
+            </mat-menu>
+          </mat-chip>
+
+          <mat-chip
+            *ngIf="filter.begin!=null"
+            (removed)="removeBeginTimeFromSearch()"
+            [matMenuTriggerFor]="dateBeginSelect">
+            Дата после {{filter.begin | date:"HH:mm dd/MM/yyyy"}}
+            <button matChipRemove>
+              <mat-icon>cancel</mat-icon>
+            </button>
+            <mat-menu #dateBeginSelect>
+              <mat-form-field appearance="fill"
+                              (click)="$event.stopPropagation()">
+                <mat-label>Дата после</mat-label>
+                <input matInput type="datetime-local" [(ngModel)]="filter.begin">
+              </mat-form-field>
+            </mat-menu>
+          </mat-chip>
+
+          <mat-chip
+            *ngIf="filter.end!=null"
+            (removed)="removeEndTimeFromSearch()"
+            [matMenuTriggerFor]="dateEndSelect">
+            Дата до {{filter.end | date:"HH:mm dd/MM/yyyy"}}
+            <button matChipRemove>
+              <mat-icon>cancel</mat-icon>
+            </button>
+            <mat-menu #dateEndSelect>
+              <mat-form-field appearance="fill"
+                              (click)="$event.stopPropagation()">
+                <mat-label>Дата после</mat-label>
+                <input matInput type="datetime-local" [(ngModel)]="filter.end">
+              </mat-form-field>
+            </mat-menu>
+          </mat-chip>
+        </mat-chip-list>
+      </div>
+
+      <table mat-table [dataSource]="dataSource" style="width: 100%">
+
+        <ng-container matColumnDef="account_name">
+          <th mat-header-cell *matHeaderCellDef> Игрок </th>
+          <td mat-cell *matCellDef="let row" [matMenuTriggerFor]="accountMenu"> {{row.account_name}}
+            <mat-menu #accountMenu>
+              <button mat-menu-item  (click)="addAccountToSearch(row.account_name)">Добавить в поиск</button>
+              <button mat-menu-item (click)="searchPlayer(row.account_name)">Открыть профиль</button>
+            </mat-menu></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>
+          <th mat-header-cell *matHeaderCellDef> Дата </th>
+          <td mat-cell *matCellDef="let row" [matMenuTriggerFor]="dateMenu"> {{row.utime*1000 | date:"HH:mm:ss dd/MM/yyyy"}}
+            <mat-menu #dateMenu>
+              <button mat-menu-item (click)="addEndTimeToSearch(row.utime*1000)">Искать до {{row.utime*1000 | date:"HH:mm:ss dd/MM/yyyy"}}</button>
+              <button mat-menu-item (click)="addBeginTimeToSearch(row.utime*1000)">Искать после {{row.utime*1000 | date:"HH:mm:ss dd/MM/yyyy"}}</button>
+            </mat-menu>
+          </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>
+          <th mat-header-cell *matHeaderCellDef> Сообщение </th>
+          <td mat-cell *matCellDef="let row" [matMenuTriggerFor]="messageMenu"> {{row.message}}
+            <mat-menu #messageMenu>
+              <button mat-menu-item (click)="addMessageToSearch(row.message)">Добавить в поиск</button>
+            </mat-menu></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 matColumnDef="serverName">
+          <th mat-header-cell *matHeaderCellDef> Сервер </th>
+          <td mat-cell *matCellDef="let row" [matMenuTriggerFor]="serverMenu"> {{row.serverName}}
+            <mat-menu #serverMenu>
+              <button mat-menu-item (click)="addServerToSearch(row.server_id)">Добавить в поиск</button>
+            </mat-menu>
+          </td>
         </ng-container>
 
         <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
@@ -34,11 +129,15 @@
 
         <!-- 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>
+          <td class="mat-cell" colspan="4">Нет сообщений</td>
         </tr>
       </table>
 
-      <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page of users"></mat-paginator>
+      <mat-paginator
+        [pageSizeOptions]="[5, 10, 25, 100]"
+        [pageSize]="10"
+        (page)="getMessages()"
+        ></mat-paginator>
     </div>
   </div>
 </div>

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

@@ -0,0 +1,7 @@
+::ng-deep .mat-form-field-wrapper {
+  padding-bottom: unset !important;
+}
+
+::ng-deep .mat-form-field-underline {
+  display: none;
+}

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

@@ -5,42 +5,69 @@ 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";
+import {AbstractSearchTable} from "../internal-components/abstract-search-table.component";
+import {SearchFilter} from "../../entities/search/SearchFilter";
+import {ServerService} from "../../services/server.service";
+import {MessageSearchFilter} from "../../entities/search/MessageSearchFilter";
+import {PlayerService} from "../../services/player.service";
+import {Router} from "@angular/router";
 
 @Component({
   selector: 'app-messages-page',
   templateUrl: './messages-page.component.html',
   styleUrls: ['./messages-page.component.scss']
 })
-export class MessagesPageComponent implements OnInit, AfterViewInit {
+export class MessagesPageComponent extends AbstractSearchTable<Message, MessageSearchFilter> {
 
-  displayedColumns: string[] = ['account_id', 'date', 'message', 'server_id'];
-  dataSource: MatTableDataSource<Message>;
-
-  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort!: MatSort;
+  displayedColumns: string[] = ['account_name', 'date', 'message', 'serverName'];
 
   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);
+              private messageService: MessageService,
+              protected override serverService: ServerService,
+              private playerService: PlayerService,
+              private router: Router) {
+    super(serverService);
+    super.filter = new MessageSearchFilter();
   }
 
-  getMessages(filter:any) {
-    this.messageService.getMessages(filter, this.paginator).subscribe(
+  getMessages(): boolean {
+    this.filter.updated = false;
+    this.messageService.getMessages(this.filter, this.paginator).subscribe(
       (res) => {
-        this.dataSource = new MatTableDataSource<Message>(res.data)
+        this.dataSource = new MatTableDataSource<Message>(res.data);
       }
     )
+    return true;
   }
 
-  ngAfterViewInit() {
-    this.paginator ? this.dataSource.paginator = this.paginator: null;
-    this.sort ? this.dataSource.sort = this.sort : null;
+  override updateData() {
+    this.getMessages();
   }
 
+  addMessageToSearch(name: string) {
+    this.filter.message = name;
+    this.filter.updated = true;
+  }
+
+  removeMessageFromSearch() {
+    this.filter.message = null;
+    this.filter.updated = true;
+  }
+
+  searchPlayer(search: string) {
+    if (search.length == 0) {
+      return;
+    }
+    if (!this.authService.isAuth()) {
+      return;
+    }
+
+    this.playerService.searchProfile(search).subscribe(
+      (res) => {
+        if (res.steam64 != null)
+          this.router.navigate(['profile', res.steam64])
+      },
+      (err) => {}
+    )
+  }
 }

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

@@ -39,17 +39,17 @@
         <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>
+            <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-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>
+            <p>Дата: {{profile.ban.ban_utime*1000 | date:"HH:mm dd.MM.YYYY"}}</p>
           </div>
         </mat-card-subtitle>
         <mat-divider inset></mat-divider>

src/app/services/message.service.ts

@@ -4,6 +4,7 @@ import {MatPaginator} from "@angular/material/paginator";
 import {map} from "rxjs";
 import {PagingAndSortingPaginator} from "../entities/PagingAndSortingPaginator";
 import {Message} from "../entities/profile/Message";
+import {SearchFilter} from "../entities/search/SearchFilter";
 
 @Injectable({
   providedIn: 'root'
@@ -12,7 +13,7 @@ export class MessageService {
 
   constructor(private http: HttpClient) { }
 
-  getMessages(filters: any, paginator: MatPaginator) {
+  getMessages(filters: SearchFilter, paginator: MatPaginator | undefined) {
     return this.http.post(
       `/api/profile/messages/pages`,
       filters,

src/app/utils/RussianPaginatorIntl.ts

@@ -0,0 +1,21 @@
+import {MatPaginatorIntl} from "@angular/material/paginator";
+
+const rangeLevel = (page: number, pageSize: number, length: number) => {
+  if (length == 0 || pageSize == 0) {
+    return `0 из ${length}`;
+  }
+
+  length = Math.max(length, 0);
+  const startIndex = page * pageSize;
+  const endIndex = startIndex < length ? Math.min(startIndex + pageSize, length) : startIndex + pageSize;
+  return `${startIndex + 1} - ${endIndex} из ${length}`;
+}
+
+export function RussianPaginatorIntl() {
+  const p = new MatPaginatorIntl();
+  p.getRangeLabel = rangeLevel;
+  p.itemsPerPageLabel = 'Количество строк:';
+  p.nextPageLabel = 'Следующая страница';
+  p.previousPageLabel = 'Предыдущая страница';
+  return p;
+}