Sdelal formochku sozdaniya treda.

src/app/app.module.ts

@@ -11,7 +11,7 @@ import { BoardsComponent } from './pages/SingleThread/boards.component';
 import { NotFoundComponent } from './pages/not-found/not-found.component';
 import { ApiChatService } from './services/api-chat.service';
 import { FormsModule } from '@angular/forms';
-import { SendPostComponent } from './pages/send-post/send-post.component';
+import { SendPostComponent } from './pages/SingleThread/send-post/send-post.component';
 import { PostComponent } from './pages/SingleThread/post/post.component'
 import { ThreadsComponent } from './pages/BoardThreads/threads.component';
 import { OPComponent } from './pages/BoardThreads/op/op.component';
@@ -19,6 +19,7 @@ import { AppRoutingModule } from './app-routing.module';
 import {MatSidenavModule} from "@angular/material/sidenav";
 import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
 import { NavBarComponent } from './pages/nav-bar/nav-bar.component';
+import { CreateThreadComponent } from './pages/BoardThreads/create-thread/create-thread.component';
 
 
 
@@ -34,6 +35,7 @@ import { NavBarComponent } from './pages/nav-bar/nav-bar.component';
     ThreadsComponent,
     OPComponent,
     NavBarComponent,
+    CreateThreadComponent,
 
   ],
   imports: [

src/app/pages/BoardThreads/create-thread/create-thread.component.css

@@ -0,0 +1,12 @@
+.create_thread {
+  border-width: 1px;
+  border-color: rgb(190,190,190);
+  border-style: solid;
+  background-color: #F0D0B6;
+  border-radius: 5px;
+  width: 600px;
+  word-break: break-word;
+  word-wrap: break-word;
+  margin-left: auto;
+  margin-right: auto;
+}

src/app/pages/BoardThreads/create-thread/create-thread.component.html

@@ -0,0 +1,14 @@
+<h3 *ngIf="!showCreateThread" (click)="showCreateThread = !showCreateThread">Открыть форму постинга</h3>
+<h3 *ngIf="showCreateThread" (click)="showCreateThread = !showCreateThread" style="align-content: center">Скрыть форму постинга</h3>
+<div *ngIf="showCreateThread" class="create_thread">
+  <h4>Создай то, о чем будут говорить многие в /{{board}}/.</h4>
+  <br>
+  <textarea type="text" rows="8" cols="45" placeholder="Печатать сюда" #textToOP></textarea>
+  <p>
+    <button (click)="sendOP(textToOP.value) ; textToOP.value=''" >Отправить</button>
+  </p>
+  <h1>Загрузить картинку:</h1>
+  <input type="file" #file placeholder="Загрузить картинку" (change)="sendPic($event)" style="display:none;">
+  <button type="button" class="btn btn-success" (click)="file.click()">Загрузить картинку</button>
+  <div *ngFor="let singlePic of OPfilename" >Картинка: {{singlePic}}</div>
+</div>

src/app/pages/BoardThreads/create-thread/create-thread.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateThreadComponent } from './create-thread.component';
+
+describe('CreateThreadComponent', () => {
+  let component: CreateThreadComponent;
+  let fixture: ComponentFixture<CreateThreadComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CreateThreadComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CreateThreadComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/BoardThreads/create-thread/create-thread.component.ts

@@ -0,0 +1,51 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {ApiChatService} from "../../../services/api-chat.service";
+import {ActivatedRoute} from "@angular/router";
+import * as vars from "../../../const/api";
+
+@Component({
+  selector: 'app-create-thread',
+  templateUrl: './create-thread.component.html',
+  styleUrls: ['./create-thread.component.css']
+})
+
+
+export class CreateThreadComponent implements OnInit {
+
+  @Input() board: string;
+  showCreateThread:boolean = false;
+  progress: number;
+  OPmessage: string = '';
+  OPfilename: string[] = [];
+
+  constructor(
+    public apiChatService: ApiChatService,
+    private activatedRoute:ActivatedRoute
+  ) {
+  }
+
+
+  sendOP(text: string) {
+    this.apiChatService.createThread(this.OPmessage, this.OPfilename, this.board)//.subscribe( response => {
+    //response = response.toString();
+    //vars.showAlert(response.toString(), "#ff0a36");
+    //this.refreshDisplayedThread();
+    //});
+    this.OPmessage = '0';
+    this.OPfilename = [];
+  }
+
+
+  sendPic(event: any) {
+    //this.apiChatService.sendpic(event.target.files[0]).subscribe(
+     // response => {
+        //response = response.value.toString();
+        //this.OPfilename.push(response);
+        //vars.showAlert("Картинка " + response + " добавлена к оп-посту!", "#ff0a36")
+      //});
+  }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/BoardThreads/op/op.component.html

@@ -1,5 +1,5 @@
 <div class="op">
-  <a [routerLink] ="['/board']" [queryParams]="{thread: op.Thread_Id}" >Зайти в тред{{op.Thread_Id}} </a>
+  <a [routerLink] ="['/board']" [queryParams]="{thread: op.Thread_Id}" >Зайти в тред {{op.Thread_Id}} </a>
   <p> # {{op.Id}} {{op.Timestamp}}</p>
   <div>
     <a *ngFor="let i of op.ImgURL" [href]="i" target="_blank">

src/app/pages/BoardThreads/threads.component.html

@@ -1,12 +1,16 @@
 <h2>Вы находитесь на доске {{boardName}} </h2>
+<div>
+  <app-create-thread [board]="boardName"
+  ></app-create-thread>
+</div>
 <a (click)="showGuide = !showGuide" style=" font-size: small; color: chocolate; width: 500px;"> Что это и как это работает?</a>
 <br>
 <div *ngIf="showGuide">
-  Добро пожаловать в список доступных тредов. Выберите подходящий для вас тред, затем введите его номер во вкладке "Тред" выше и нажмите "обновить" чтобы перейти в этот тред.
+  Добро пожаловать в список доступных тредов. Выберите подходящий для вас тред и нажмите "войти в тред".
 </div>
 <br>
 <button (click)="refreshOPs(boardName)">Обновить</button>
 <op-single
-  *ngFor="let ops of opsToShow" [op]="ops"
+  *ngFor="let op of opsToShow" [op]="op"
 ></op-single>
 <button (click)="refreshOPs(boardName)">Обновить</button>

src/app/pages/SingleThread/boards.component.css

@@ -7,4 +7,5 @@
 }
 .wrapper {width: 800px;
 margin-left: auto;
-margin-right: auto;}
+margin-right: auto;
+}

src/app/pages/SingleThread/post/post.component.css

@@ -11,3 +11,11 @@
   word-wrap: break-word;
   margin-top: 6px;
 }
+
+.postText{
+
+}
+
+.postPictures{
+  padding: 5px;
+}

src/app/pages/SingleThread/post/post.component.html

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

src/app/pages/SingleThread/send-post/send-post.component.css

@@ -1,5 +1,5 @@
 .send_post {
-  border-width: 1;
+  border-width: 1px;
   border-color: rgb(190,190,190);
   border-style: solid;
   background-color: #F0D0B6;

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

@@ -1,7 +1,7 @@
 import { Component,  OnInit, } from '@angular/core';
-import { ApiChatService } from '../../services/api-chat.service';
+import { ApiChatService } from '../../../services/api-chat.service';
-import { BoardsComponent } from "../SingleThread/boards.component";
+import { BoardsComponent } from "../boards.component";
-import * as vars from "../../const/api";
+import * as vars from "../../../const/api";
 import {ActivatedRoute} from "@angular/router";
 
 

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

@@ -42,6 +42,10 @@ export class ApiChatService {
     return this.http.get<SinglePost[]>(globals.api_endpoint + 'Threads/', {params: {board: boardName}});
   }
 
+  createThread(OPtext: string, OPimgUrl: string[], board: string,){
+    return alert("Скоро будет работать!");
+  }
+
   sampleBoardList = [
 {
   BoardName: 'b',