Redesign

src/app/boards/boards.component.html

@@ -2,11 +2,13 @@
 <img src="http://static.vdk2ch.ru:15555/test-public/16657431265390.png" alt="свiня" width="150">
 <app-send-post></app-send-post>,
   <h2> {{boardName}} </h2>
-<button (click)="refreshPosts('postgres')">Общий раздел</button>
+  <h3> {{displayed_thread_number}}</h3>
+<button (click)="refreshPosts(boardName , displayed_thread_number)">Обновить</button>
+  <input type="number" [(ngModel)]=displayed_thread_number>
 <post-single
   *ngFor="let post of postsToShow" [post]="post"
 ></post-single>
-<button (click)="refreshPosts('postgres')">Обновить</button>
+<button (click)="refreshPosts(boardName , displayed_thread_number)">Обновить</button>
 <br>
 <div class="hexagon">
   <div class="hexagon-inside">

src/app/boards/boards.component.ts

@@ -2,6 +2,7 @@ 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'
 
 @Component({
   selector: 'app-boards',
@@ -12,20 +13,22 @@ export class BoardsComponent implements OnInit {
   command: string = "";
   response: any;
   postsToShow: SinglePost[] = []
-  boardName:string = 'postgres';
+  boardName:string = 'b';
+  displayed_thread_number = vars.displayed_thread;
 
   constructor(public apiChatService: ApiChatService) {
 
   }
 
-  refreshPosts(boardName: string) {
-    this.apiChatService.getPosts(boardName).subscribe(response => {
+  refreshPosts(boardName: string , threadId:number) {
+    this.apiChatService.getPosts(boardName, threadId).subscribe(response => {
       this.postsToShow = response
+      vars.setDisplayedThread(this.displayed_thread_number);
     })
   }
 
   ngOnInit(): void {
-    this.apiChatService.getPosts('postgres').subscribe(response => {
+    this.apiChatService.getPosts('postgres', vars.displayed_thread).subscribe(response => {
     this.postsToShow = response
     })
   }

src/app/boards/post/post.component.css

@@ -1,13 +1,12 @@
 .post {
-  border-width: 1;
+  border-width: 1px;
   border-color: rgb(190,190,190);
   border-style: solid;
   background-color: #F0D0B6;
   border-radius: 5px;
+  padding:20px;
   width: 500px;
   word-break: break-word;
   word-wrap: break-word;
-  margin-left: auto;
-  margin-right: auto;
   margin-top: 6px;
 }

src/app/boards/post/post.component.html

@@ -1,8 +1,9 @@
 <div class="post">
   <p> # {{post.Id}} {{post.Timestamp}}</p>
-  <a href="{{post.ImgURL}}" target="_blank">
-    <img *ngIf="post.ImgURL != '0'" src="{{post.ImgURL}}" alt="anonpls" width="140">
-  </a>
-  <a routerLink = "{{post.ImgURL}}">pic</a>
+  <div >
+    <a *ngFor="let i of post.ImgURL" [href]="i" target="_blank">
+      <img  [src]="i" style="height:140px">
+    </a>
+  </div>
   <p>{{post.Text}}</p>
 </div>

src/app/models/post.ts

@@ -2,5 +2,7 @@ export interface SinglePost {
   Timestamp: string
   Id: number
   Text: string
-  ImgURL: string
+  ImgURL: string[]
+  Thread_Id: number
+  Is_OP: boolean
 }

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

@@ -1,5 +1,6 @@
 <div class="send_post">
   <h4>Поведай миру что-нибудь хорошее.</h4>
+  <br>
   <textarea type="text" rows="8" cols="45" placeholder="Печатать сюда" #textToPost> </textarea>
   <p>
     <button (click)="sendPost(textToPost.value) ; textToPost.value=''" >Отправить</button>

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

@@ -2,6 +2,7 @@ import { Component, EventEmitter, OnInit, Output } from '@angular/core';
 import { ApiChatService } from '../services/api-chat.service';
 import { MinIoService } from '../services/min-io.service.'
 import {IPicresponse} from "../models/picResponse";
+import * as vars from "../var/api";
 
 @Component({
   selector: 'app-send-post',
@@ -12,28 +13,25 @@ export class SendPostComponent implements OnInit {
 
   progress: number;
   message: string;
-  filename = '0';
-
-  picResponse: IPicresponse
-
+  filename: string[] = [];
 
   constructor(public apiChatService: ApiChatService, public minIoService: MinIoService) {
   }
 
-
   sendPost(text: string) {
-    this.apiChatService.sendPostToApi(text, this.filename).subscribe();
+    var threadId = vars.displayed_thread;
+    this.apiChatService.sendPostToApi(text, this.filename, threadId).subscribe();
     this.message = '0';
-    this.filename = '0';
+    this.filename = [];
     alert("Сообщение отправлено.");
   }
 
    sendPic(event: any) {
      this.apiChatService.sendpic(event.target.files[0]).subscribe(
       response => {
-      this.filename = response.value.toString()
+        response = response.value.toString();
+        this.filename.push(response);
     });
-    //this.filename = this.picResponse.value.toString()
   }
 
   ngOnInit(): void {

src/app/services/api-chat.service.ts

@@ -2,6 +2,8 @@ import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { SinglePost } from '../models/post';
+import * as globals from '../var/api';
+
 
 @Injectable({
   providedIn: 'root'
@@ -10,31 +12,28 @@ export class ApiChatService {
   constructor(private http: HttpClient) {
   }
 
-  getPosts(boardName:string): Observable<SinglePost[]> {
+  getPosts(boardName:string, threadID: number): Observable<SinglePost[]> {
     //console.log("Получаю посты и картинки");
-    return this.http.get<SinglePost[]>('http://api.vdk2ch.ru:5000/List/?board=' + boardName);
-    //return this.http.get<SinglePost[]>('http://localhost:7141/List/?board=' + boardName);
+    return this.http.get<SinglePost[]>(globals.api_endpoint +'List/', {params:{board: boardName , thread: threadID}}) ;
   }
 
-  sendPostToApi(text: string, imgUrl: string) {
+  sendPostToApi(text: string, imgUrl: string[], threadId: number,) {
     //console.log("Отправляю пост...");
     var postToSend =
     {
-      Timestamp: text,
+      Timestamp: "time",
       Id: 0,
       Text: text,
-      ImgURL: imgUrl
+      ImgURL: imgUrl,
+      Thread_Id: threadId
     }
-    //console.log(postToSend)
-    return this.http.post('http://api.vdk2ch.ru:5000/PostTo', postToSend)
-    //return this.http.post('http://localhost:7141/PostTo', postToSend)
-
+    return this.http.post( globals.api_endpoint +'PostTo', postToSend)
   }
+
   sendpic(picToSend: File):Observable<any> {
     const PostPicture = new FormData();
     PostPicture.append('PostPicture', picToSend);
-    //return this.http.post('http://localhost:7141/UploadPic', PostPicture)
-    return this.http.post('http://api.vdk2ch.ru:5000/UploadPic', PostPicture)
+    return this.http.post(globals.api_endpoint +'UploadPic', PostPicture)
   }
 
   }

src/app/var/api.ts

@@ -0,0 +1,6 @@
+//export const api_endpoint: string = 'http://api.vdk2ch.ru:5000/';
+export const api_endpoint: string = 'http://localhost:7141/';
+export var displayed_thread: number = 2;
+export function setDisplayedThread(toset:number){
+  displayed_thread = toset;
+};