news update

src/app/app.module.ts

@@ -55,6 +55,8 @@ import {BanlistSearchTable} from "./pages/banlist-page/banlist-search-table";
 import {FilterMatChipActiveBan} from "./pages/internal-components/search-filters/ban/FilterMatChipActiveBan";
 import {FilterMatChipAdmins} from "./pages/internal-components/search-filters/ban/FilterMatChipAdmins";
 import {LivetimeServerMap} from "./pages/servers-page/livetime-server-map";
+import {NewsViewDialog} from "./pages/main-page/NewsViewDialog";
+import {AnnoncesListCarules} from "./pages/main-page/AnnoncesListCarules";
 
 registerLocaleData(localeRu, "ru")
 
@@ -73,6 +75,7 @@ registerLocaleData(localeRu, "ru")
     //tables
     MessageSearchTable,
     BanlistSearchTable,
+    AnnoncesListCarules,
     //search filters
     FilterMatChipAccount,
     FilterMatChipMessage,
@@ -83,7 +86,8 @@ registerLocaleData(localeRu, "ru")
     FilterMatChipActiveBan,
     FilterMatChipAdmins,
     //dialogs
-    BanViewDialog
+    BanViewDialog,
+    NewsViewDialog
   ],
   imports: [
     BrowserModule,

src/app/entities/Annonce.ts

@@ -1,8 +1,29 @@
-export interface Annonce {
+export class Annonce {
-  header: string
+  id!: number;
-  short: string
+  header!: string
-  full: string|null
+  shortText!: string
-  image: string
+  fullText!: string|null
-  type: 'news' | 'reason4play',
+  type!: 'news' | 'reason4play'
-  redirect: string|null
+  redirect!: string|null
+  attachments: string[] = [];
+  timestamp!: Date
+  author!: string
+
+  static getPreview(a: Annonce): string {
+    if (a.attachments.length == 0)
+      return "../../../../assets/images/test.jpg";
+    else
+      return a.attachments[0];
+  }
+
+  public static createHtml(a: Annonce):string {
+    if (!a.fullText) return "хуй";
+    let toDiv: string = "";
+    a.fullText.split("\n").forEach(
+      (chain) => {
+        toDiv += `<p>${chain}</p>`
+      }
+    )
+    return toDiv;
+  }
 }

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

@@ -0,0 +1,98 @@
+import {AbstractSearchTable} from "../internal-components/abstract-search-table.component";
+import {Annonce} from "../../entities/Annonce";
+import {AuthService} from "../../services/auth.service";
+import {ServerService} from "../../services/server.service";
+import {PlayerService} from "../../services/player.service";
+import {ActivatedRoute, Router} from "@angular/router";
+import {AnnonceService} from "../../services/AnnonceService";
+import {Component, Input} from "@angular/core";
+import {NewsViewDialog} from "./NewsViewDialog";
+import {MatDialog} from "@angular/material/dialog";
+import {ActionService} from "../../services/action.service";
+
+@Component({
+  selector: 'app-annonces-list-carules',
+  template: `
+    <h2 style="margin: 0 0; margin-bottom: 15px; color: black">{{getHeader()}}</h2>
+    <div class="container responsive-grid">
+      <mat-card
+        *ngFor="let a of annonces"
+        (click)="openNews(a)" style="cursor: pointer"
+        class="card-annonce"
+        [ngStyle]="generateStyle4Card(a)"
+      >
+        <mat-card-title class="card-text-color">{{a.header}}</mat-card-title>
+        <mat-card-subtitle class="card-text-color">{{a.shortText!=null?a.shortText:'от ' + (a.timestamp|date:'HH:mm dd.MM.YYYY')}}</mat-card-subtitle>
+      </mat-card>
+    </div>
+    <mat-paginator style="display: none"
+      [pageSizeOptions]="[4]"
+      [pageSize]="4"
+      (page)="updateData()"
+    ></mat-paginator>
+  `, styleUrls: ['main-page.component.scss']
+})
+export class AnnoncesListCarules extends AbstractSearchTable<Annonce, any> {
+
+  @Input("type")
+  type!: 'news' | 'reason4play';
+
+  annonces: Annonce[] = [];
+
+  constructor(authService: AuthService,
+              serverService: ServerService,
+              playerService: PlayerService,
+              route: ActivatedRoute,
+              router: Router,
+              private annonceService: AnnonceService,
+              private dialog: MatDialog,
+              private actionService: ActionService) {
+    super(authService, serverService, playerService, route, router);
+  }
+
+  override updateData() {
+    super.updateData();
+    this.getNewsList();
+  }
+
+  getNewsList() {
+    switch (this.type) {
+      case "news":{
+        this.annonceService.getNews(this.paginator).subscribe((n) => {
+          this.annonces = n.data;
+        });
+        break;
+      }
+      case "reason4play":{
+        this.annonceService.getAnnonces(this.paginator).subscribe((a) => {
+          this.annonces = a.data;
+        });
+        break;
+      }
+      default: break;
+    }
+  }
+
+  generateStyle4Card(a: Annonce) {
+    return {
+      'background': 'linear-gradient(to right, black, transparent), url(\''+Annonce.getPreview(a)+'\')',
+      'background-size': 'cover'
+    }
+  }
+
+  openNews(annonce: Annonce) {
+    if (annonce.type != "news" || !annonce.fullText) {
+      if (annonce.redirect) this.actionService.goToUrlViaTab(annonce.redirect)
+      return;
+    }
+    this.dialog.open(NewsViewDialog, {data: annonce})
+  }
+
+  getHeader():string {
+    switch (this.type) {
+      case "news": return "Интереснные приколы";
+      case "reason4play": return "Почему стоит начать играть?";
+      default: return "Всякое говно";
+    }
+  }
+}

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

@@ -0,0 +1,41 @@
+import {Component, Inject} from "@angular/core";
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+import {Annonce} from "../../entities/Annonce";
+import {ActionService} from "../../services/action.service";
+
+@Component({
+  selector: "app-news-view-dialog",
+  template: `
+    <h1 mat-dialog-title style="color: black">{{annonce.header}}</h1>
+    <mat-dialog-content>
+      <div class="container responsive-grid-250">
+        <!--todo image preview dialog-->
+        <img *ngFor="let img of annonce.attachments" style="width: 100%" [src]="img">
+      </div>
+      <div [innerHtml]="createHtml(annonce)"></div>
+      <div>
+        <p>{{annonce.author}} | {{annonce.timestamp | date:'HH:mm dd.MM.YYYY'}}</p>
+      </div>
+    </mat-dialog-content>
+    <mat-dialog-actions>
+      <button mat-button mat-raised-button *ngIf="annonce.redirect" (click)="actionService.goToUrlViaTab(annonce.redirect)">Открыть оригинал</button>
+      <button mat-button mat-raised-button mat-dialog-close="true">Закрыть</button>
+    </mat-dialog-actions>
+  `
+})
+export class NewsViewDialog {
+  constructor(
+    @Inject(MAT_DIALOG_DATA) public annonce: Annonce,
+    private dialogRef: MatDialogRef<any>,
+    public actionService: ActionService
+  ) {
+  }
+
+  close() {
+    this.dialogRef.close();
+  }
+
+  createHtml(a: Annonce): string {
+    return Annonce.createHtml(a);
+  }
+}

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

@@ -61,30 +61,9 @@
 <!--тут продолжение главной страницы-->
 <div class="content-in-center">
   <div class="content-in-border">
-    <h2 style="margin: 0 0; margin-bottom: 15px; color: black">Интереснные приколы</h2>
+    <app-annonces-list-carules type="news"></app-annonces-list-carules>
-    <div class="container responsive-grid">
-      <mat-card
-        *ngFor="let a of getAnnonces('news')"
-        class="card-annonce"
-        [ngStyle]="generateStyle4Card(a)"
-      >
-        <mat-card-title class="card-text-color">{{a.header}}</mat-card-title>
-        <mat-card-subtitle class="card-text-color">{{a.short}}</mat-card-subtitle>
-      </mat-card>
-    </div>
   </div>
-
   <div class="content-in-border">
-    <h2 style="margin: 0 0; margin-bottom: 15px; color: black">Почему стоит начать играть?</h2>
+    <app-annonces-list-carules type="reason4play"></app-annonces-list-carules>
-    <div class="container responsive-grid">
-      <mat-card
-        *ngFor="let a of getAnnonces('reason4play')"
-        class="card-annonce"
-        [ngStyle]="generateStyle4Card(a)"
-      >
-        <mat-card-title class="card-text-color">{{a.header}}</mat-card-title>
-        <mat-card-subtitle class="card-text-color">{{a.short}}</mat-card-subtitle>
-      </mat-card>
-    </div>
   </div>
 </div>

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

@@ -1,6 +1,5 @@
 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";
 import {PlayerService} from "../../services/player.service";
@@ -43,17 +42,6 @@ export class MainPageComponent implements OnInit {
     )
   }
 
-  getAnnonces(type: any, limit: number = 3): Annonce[] {
-    return this.annoncesService.getAnnonces(type);
-  }
-
-  generateStyle4Card(a: Annonce) {
-    return {
-      'background': 'linear-gradient(to right, black, transparent), url(\''+a.image+'\')',
-      'background-size': 'cover'
-    }
-  }
-
   go2url(url:string) {
     this.router.navigate([url])
   }

src/app/services/AnnonceService.ts

@@ -1,20 +1,25 @@
 import {Annonce} from "../entities/Annonce";
 import {Injectable} from "@angular/core";
 import {MatPaginator, MatPaginatorIntl} from "@angular/material/paginator";
+import {HttpClient} from "@angular/common/http";
+import {map} from "rxjs";
+import {PagingAndSortingPaginator} from "../entities/PagingAndSortingPaginator";
 
 @Injectable()
 export class AnnonceService {
-  annonces: Annonce[] = [
+  constructor(private http: HttpClient) {}
-    {header: 'Пиздатая коллекция карт', short: 'Жми сюда карлик и получи пачку карт факты13', full: null, type: 'news', image: '../../../../assets/images/test.jpg', redirect: null},
-    {header: 'Крутые поделки наших работяг', short: 'Заходи в дискорд и насоалист качественным исскуством самых рукастых карликов', full: null, type: 'news', image: '../../../../assets/images/test.jpg', redirect: null},
-    {header: 'Ютуб канал какого-то злодея', short: 'Зацени забавные видосики по нашему серверу', full: null, type: 'news', image: '../../../../assets/images/test.jpg', redirect: null},
-    {header: 'Уникальный опыт', short: 'Все карты на сервере уникальны и сделаны нами, ты всегда можншь найти место по вкусу!', full: null, type: 'reason4play', image: '../../../../assets/images/test.jpg', redirect: null},
-    {header: 'Качественный геймплей', short: 'Большенство плагинов на сервере сделаны нами и добавляют некий шарм в геймплей.', full: null, type: 'reason4play', image: '../../../../assets/images/test.jpg', redirect: null},
-    {header: 'Отсутствие правил', short: 'Правила для вас не писаны(каканы), можете делать всё что душе угодно, но ожидайте что вам дадут пиздюлей наши модераторы.', full: null, type: 'reason4play', image: '../../../../assets/images/test.jpg', redirect: null},
-    {header: 'Uptime 99%', short: 'Сервера работают на божем слове, так что шанс что проект закроется стремится к нулю. Конечно пока нам не надоест.', full: null, type: 'reason4play', image: '../../../../assets/images/test.jpg', redirect: null},
-  ]
 
-  getAnnonces(type: 'news' | 'reason4play'): Annonce[] {
+  private default_count: number = 4;
-    return this.annonces.filter((a) => a.type == type)
+
+  getNews(paginator: MatPaginator | undefined) {
+    return this.http.get("api/web/news", {params: {size:paginator?paginator.pageSize:this.default_count, page: paginator?paginator.pageIndex:0}}).pipe(
+      map((res) => PagingAndSortingPaginator<Annonce>.newObj().fromData(res).updatePaginator(paginator))
+    );
+  }
+
+  getAnnonces(paginator: MatPaginator | undefined) {
+    return this.http.get("api/web/annonces", {params: {size:paginator?paginator.pageSize:this.default_count, page: paginator?paginator.pageIndex:0}}).pipe(
+      map((res) => PagingAndSortingPaginator<Annonce>.newObj().fromData(res).updatePaginator(paginator))
+    );
   }
 }