gsd
2 weeks ago
7 changed files with 190 additions and 54 deletions
@ -1,8 +1,29 @@ |
|||
export interface Annonce { |
|||
header: string |
|||
short: string |
|||
full: string|null |
|||
image: string |
|||
type: 'news' | 'reason4play', |
|||
redirect: string|null |
|||
export class Annonce { |
|||
id!: number; |
|||
header!: string |
|||
shortText!: string |
|||
fullText!: string|null |
|||
type!: 'news' | 'reason4play' |
|||
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; |
|||
} |
|||
} |
|||
|
|||
@ -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 "Всякое говно"; |
|||
} |
|||
} |
|||
} |
|||
@ -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); |
|||
} |
|||
} |
|||
@ -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[] = [ |
|||
{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}, |
|||
] |
|||
constructor(private http: HttpClient) {} |
|||
|
|||
getAnnonces(type: 'news' | 'reason4play'): Annonce[] { |
|||
return this.annonces.filter((a) => a.type == type) |
|||
private default_count: number = 4; |
|||
|
|||
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)) |
|||
); |
|||
} |
|||
} |
|||
|
|||
Loading…
Reference in new issue