Added guide and uploaded pictures list display.

src/app/boards/boards.component.html

@@ -1,10 +1,19 @@
 <div class="wrappe">
 <img src="http://static.vdk2ch.ru:15555/test-public/16657431265390.png" alt="свiня" width="150">
 <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>
+  <br>
+  <button (click)="refreshPosts(boardName , displayed_thread_number)">Обновить</button>
 <post-single
   *ngFor="let post of postsToShow" [post]="post"
 ></post-single>

src/app/boards/boards.component.ts

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

src/app/send-post/send-post.component.html

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

src/app/send-post/send-post.component.ts

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

src/app/var/api.ts

@@ -4,3 +4,24 @@ export var displayed_thread: number = 2;
 export function setDisplayedThread(toset:number){
   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}