Added guide and uploaded pictures list display.
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
RakVhalate 2022-11-21 11:09:15 +10:00
parent cc37c2b622
commit 592509f337
7 changed files with 54 additions and 14 deletions

View File

@ -1,10 +1,19 @@
<div class="wrappe"> <div class="wrappe">
<img src="http://static.vdk2ch.ru:15555/test-public/16657431265390.png" alt="свiня" width="150"> <img src="http://static.vdk2ch.ru:15555/test-public/16657431265390.png" alt="свiня" width="150">
<app-send-post></app-send-post>, <app-send-post></app-send-post>,
<h2> {{boardName}} </h2> <h2>Вы находитесь на доске {{boardName}} </h2>
<h3> {{displayed_thread_number}}</h3> <h3> в треде номер {{displayed_thread_number}}</h3>
<button (click)="refreshPosts(boardName , displayed_thread_number)">Обновить</button> <a (click)="showGuide = !showGuide" style=" font-size: small; color: chocolate; width: 500px;"> Что это и как это работает?</a>
<br>
<div *ngIf="showGuide">
Добро пожаловать на эту небольшую борду. Сейчас тут только три треда и одна доска, но скоро будет больше.
Чтобы выбрать тред воспользуйтесь полем ниже, после выбора нажмите кнопку "Обновить" дабы перейти в этот тред.
Вы можете отправлять сообщения в открытый тред и прикреплять к сообщению картинки.
Ведите себя хорошо.
</div>
<input type="number" [(ngModel)]=displayed_thread_number> <input type="number" [(ngModel)]=displayed_thread_number>
<br>
<button (click)="refreshPosts(boardName , displayed_thread_number)">Обновить</button>
<post-single <post-single
*ngFor="let post of postsToShow" [post]="post" *ngFor="let post of postsToShow" [post]="post"
></post-single> ></post-single>

View File

@ -1,6 +1,5 @@
import { Component, Input, OnInit } from '@angular/core'; import { Component, Input, OnInit } from '@angular/core';
import { ApiChatService } from '../services/api-chat.service'; import { ApiChatService } from '../services/api-chat.service';
import { HttpClient } from '@angular/common/http';
import { SinglePost } from '../models/post' import { SinglePost } from '../models/post'
import * as vars from '../var/api' import * as vars from '../var/api'
@ -15,6 +14,7 @@ export class BoardsComponent implements OnInit {
postsToShow: SinglePost[] = [] postsToShow: SinglePost[] = []
boardName:string = 'b'; boardName:string = 'b';
displayed_thread_number = vars.displayed_thread; displayed_thread_number = vars.displayed_thread;
showGuide: boolean = false;
constructor(public apiChatService: ApiChatService) { constructor(public apiChatService: ApiChatService) {

View File

@ -1,6 +1,6 @@
<div class="post"> <div class="post">
<p> # {{post.Id}} {{post.Timestamp}}</p> <p> # {{post.Id}} {{post.Timestamp}}</p>
<div > <div>
<a *ngFor="let i of post.ImgURL" [href]="i" target="_blank"> <a *ngFor="let i of post.ImgURL" [href]="i" target="_blank">
<img [src]="i" style="height:140px"> <img [src]="i" style="height:140px">
</a> </a>

View File

@ -8,5 +8,5 @@
<h1>Загрузить картинку:</h1> <h1>Загрузить картинку:</h1>
<input type="file" #file placeholder="Загрузить картинку" (change)="sendPic($event)" style="display:none;"> <input type="file" #file placeholder="Загрузить картинку" (change)="sendPic($event)" style="display:none;">
<button type="button" class="btn btn-success" (click)="file.click()">Загрузить картинку</button> <button type="button" class="btn btn-success" (click)="file.click()">Загрузить картинку</button>
<p>Картинка: {{filename}}</p> <div *ngFor="let singlePic of filename" >Картинка: {{singlePic}}</div>
</div> </div>

View File

@ -4,6 +4,7 @@ import { MinIoService } from '../services/min-io.service.'
import {IPicresponse} from "../models/picResponse"; import {IPicresponse} from "../models/picResponse";
import * as vars from "../var/api"; import * as vars from "../var/api";
@Component({ @Component({
selector: 'app-send-post', selector: 'app-send-post',
templateUrl: './send-post.component.html', templateUrl: './send-post.component.html',
@ -15,22 +16,31 @@ export class SendPostComponent implements OnInit {
message: string; message: string;
filename: string[] = []; filename: string[] = [];
constructor(public apiChatService: ApiChatService, public minIoService: MinIoService) { constructor(
public apiChatService: ApiChatService,
public minIoService: MinIoService,
) {
} }
sendPost(text: string) { sendPost(text: string) {
var threadId = vars.displayed_thread; var threadId = vars.displayed_thread;
this.apiChatService.sendPostToApi(text, this.filename, threadId).subscribe(); this.apiChatService.sendPostToApi(text, this.filename, threadId).subscribe();
this.message = '0'; this.message = '0';
this.filename = []; this.filename = [];
alert("Сообщение отправлено."); alert("Сообщение отправлено.");
} }
sendPic(event: any) { sendPic(event: any) {
this.apiChatService.sendpic(event.target.files[0]).subscribe( this.apiChatService.sendpic(event.target.files[0]).subscribe(
response => { response => {
response = response.value.toString(); response = response.value.toString();
this.filename.push(response); this.filename.push(response);
vars.showAlert("Картинка " + response + " добавлена к посту!", "#696116")
}); });
} }

View File

@ -4,3 +4,24 @@ export var displayed_thread: number = 2;
export function setDisplayedThread(toset:number){ export function setDisplayedThread(toset:number){
displayed_thread = toset; displayed_thread = toset;
}; };
const ALERT_SHOW_TIME = 5000;
const showAlert = (message:string, color:string) => {
const alertContainer = document.createElement('div');
alertContainer.style.zIndex = '100';
alertContainer.style.position = 'fixed';
alertContainer.style.left = '50';
alertContainer.style.top = '0';
alertContainer.style.right = '0';
alertContainer.style.padding = '10px 3px';
alertContainer.style.fontSize = '30px';
alertContainer.style.textAlign = 'center';
alertContainer.style.backgroundColor = color;
alertContainer.style.border = "2px dashed #6CFFDD"
alertContainer.textContent = message;
document.body.append(alertContainer);
setTimeout(() => {
alertContainer.remove();
}, ALERT_SHOW_TIME);
}
export {showAlert}