From 592509f33759e98f17ed31c786024353297532d3 Mon Sep 17 00:00:00 2001
From: RakVhalate <viktzajcev@mail.ru>
Date: Mon, 21 Nov 2022 11:09:15 +1000
Subject: [PATCH] Added guide and uploaded pictures list display.

---
 src/app/boards/boards.component.html       | 15 ++++++++++++---
 src/app/boards/boards.component.ts         |  2 +-
 src/app/boards/post/post.component.html    |  2 +-
 src/app/send-post/send-post.component.html |  2 +-
 src/app/send-post/send-post.component.ts   | 12 +++++++++++-
 src/app/services/api-chat.service.ts       | 14 +++++++-------
 src/app/var/api.ts                         | 21 +++++++++++++++++++++
 7 files changed, 54 insertions(+), 14 deletions(-)

diff --git a/src/app/boards/boards.component.html b/src/app/boards/boards.component.html
index a3d0f57..6002101 100644
--- a/src/app/boards/boards.component.html
+++ b/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>
-  <h3> {{displayed_thread_number}}</h3>
-<button (click)="refreshPosts(boardName , displayed_thread_number)">Обновить</button>
+  <h2>Вы находитесь на доске {{boardName}} </h2>
+  <h3> в треде номер {{displayed_thread_number}}</h3>
+  <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>
diff --git a/src/app/boards/boards.component.ts b/src/app/boards/boards.component.ts
index d3a764e..e00ae63 100644
--- a/src/app/boards/boards.component.ts
+++ b/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) {
 
diff --git a/src/app/boards/post/post.component.html b/src/app/boards/post/post.component.html
index c92f0d8..831f1eb 100644
--- a/src/app/boards/post/post.component.html
+++ b/src/app/boards/post/post.component.html
@@ -1,6 +1,6 @@
 <div class="post">
   <p> # {{post.Id}} {{post.Timestamp}}</p>
-  <div >
+  <div>
     <a *ngFor="let i of post.ImgURL" [href]="i" target="_blank">
       <img  [src]="i" style="height:140px">
     </a>
diff --git a/src/app/send-post/send-post.component.html b/src/app/send-post/send-post.component.html
index 1e3bbe4..9ae10d7 100644
--- a/src/app/send-post/send-post.component.html
+++ b/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>
diff --git a/src/app/send-post/send-post.component.ts b/src/app/send-post/send-post.component.ts
index ee007f1..ef63357 100644
--- a/src/app/send-post/send-post.component.ts
+++ b/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")
     });
   }
 
diff --git a/src/app/services/api-chat.service.ts b/src/app/services/api-chat.service.ts
index 33d1b66..f19985d 100644
--- a/src/app/services/api-chat.service.ts
+++ b/src/app/services/api-chat.service.ts
@@ -20,13 +20,13 @@ export class ApiChatService {
   sendPostToApi(text: string, imgUrl: string[], threadId: number,) {
     //console.log("Отправляю пост...");
     var postToSend =
-    {
-      Timestamp: "time",
-      Id: 0,
-      Text: text,
-      ImgURL: imgUrl,
-      Thread_Id: threadId
-    }
+      {
+        Timestamp: "time",
+        Id: 0,
+        Text: text,
+        ImgURL: imgUrl,
+        Thread_Id: threadId
+      }
     return this.http.post( globals.api_endpoint +'PostTo', postToSend)
   }
 
diff --git a/src/app/var/api.ts b/src/app/var/api.ts
index 92d7dff..842f10b 100644
--- a/src/app/var/api.ts
+++ b/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}