Common creating component

angular.json

@@ -97,5 +97,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

package-lock.json

@@ -17,6 +17,7 @@
         "@angular/platform-browser": "^14.2.0",
         "@angular/platform-browser-dynamic": "^14.2.0",
         "@angular/router": "^14.2.0",
+        "angular-material-sidenav": "^0.1.1",
         "dotenv": "^16.0.3",
         "minio": "^7.0.32",
         "nestjs-minio-client": "^2.0.0",
@@ -3442,6 +3443,11 @@
         "ajv": "^8.8.2"
       }
     },
+    "node_modules/angular-material-sidenav": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/angular-material-sidenav/-/angular-material-sidenav-0.1.1.tgz",
+      "integrity": "sha512-EasHTz6tJhGfgPdoBr+xS3gBZeOfvvkBandTimdIUyWrOa/sDTSU2ybp1LK+rWTLqqtPAK2o59cmqW7J36qzfw=="
+    },
     "node_modules/ansi-colors": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
@@ -15427,6 +15433,11 @@
         "fast-deep-equal": "^3.1.3"
       }
     },
+    "angular-material-sidenav": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/angular-material-sidenav/-/angular-material-sidenav-0.1.1.tgz",
+      "integrity": "sha512-EasHTz6tJhGfgPdoBr+xS3gBZeOfvvkBandTimdIUyWrOa/sDTSU2ybp1LK+rWTLqqtPAK2o59cmqW7J36qzfw=="
+    },
     "ansi-colors": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",

package.json

@@ -19,6 +19,7 @@
     "@angular/platform-browser": "^14.2.0",
     "@angular/platform-browser-dynamic": "^14.2.0",
     "@angular/router": "^14.2.0",
+    "angular-material-sidenav": "^0.1.1",
     "dotenv": "^16.0.3",
     "minio": "^7.0.32",
     "nestjs-minio-client": "^2.0.0",

src/app/app.module.ts

@@ -11,7 +11,6 @@ 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/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,7 +18,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';
+import { SendFormComponent } from './pages/send-form/send-form.component';
 
 
 
@@ -31,11 +30,10 @@ import { CreateThreadComponent } from './pages/BoardThreads/create-thread/create
     BoardsComponent,
     NotFoundComponent,
     PostComponent,
-    SendPostComponent,
     ThreadsComponent,
     OPComponent,
     NavBarComponent,
-    CreateThreadComponent,
+    SendFormComponent
 
   ],
   imports: [

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

@@ -1,12 +0,0 @@
-.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

@@ -1,14 +0,0 @@
-<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

@@ -1,23 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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/threads.component.html

@@ -1,7 +1,7 @@
 <h2>Вы находитесь на доске {{boardName}} </h2>
 <div>
-  <app-create-thread [board]="boardName"
+  <app-send-form [board]="boardName" (sendInfoToCreate)="alert($event)">
-  ></app-create-thread>
+  </app-send-form>
 </div>
 <a (click)="showGuide = !showGuide" style=" font-size: small; color: chocolate; width: 500px;"> Что это и как это работает?</a>
 <br>

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

@@ -24,6 +24,11 @@ export class ThreadsComponent implements OnInit {
     })
   }
 
+  alert(tosend: any){
+    console.log("Получен эмит создания треда " + tosend.text);
+    console.log("С картинками: " + tosend.images)
+  }
+
   ngOnInit(): void {
     this.apiChatService.getThreads(this.boardName).subscribe(response => {
       this.opsToShow = response

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

@@ -5,7 +5,7 @@
   background-color: rgb(143, 142, 142);
   color: #5d5d5d;
 }
-.wrapper {width: 800px;
+.wrapper {
-margin-left: auto;
+  width: 800px;
-margin-right: auto;
+
 }

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

@@ -1,6 +1,7 @@
-<div class="wrappe">
+<div class="wrapper">
 <img src="http://static.vdk2ch.ru:15555/test-public/16657431265390.png" alt="свiня" width="150">
-<app-send-post></app-send-post>,
+<app-send-form [board]="boardName" (sendInfoToCreate)="sendPost($event)">
+</app-send-form>  
 <h2>Вы находитесь на доске {{boardName}} </h2>
   <h3> в треде номер {{threadId}}</h3>
   <a (click)="showGuide = !showGuide" style=" font-size: small; color: chocolate; width: 500px;"> Что это и как это работает?</a>
@@ -10,8 +11,7 @@
 <post-single
   *ngFor="let post of postsToShow" [post]="post"
 ></post-single>
-<button (click)="refreshPosts(boardName , threadId)">Обновить</button>
+
-<br>
 <div class="hexagon">
   <div class="hexagon-inside">
     <div class="hexagon-image">

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

@@ -1,6 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { ApiChatService } from '../../services/api-chat.service';
 import { SinglePost } from '../../models/post'
+import * as vars from "../../const/api"
 import {ActivatedRoute} from "@angular/router";
 
 @Component({
@@ -28,10 +29,26 @@ export class BoardsComponent implements OnInit {
     })
   }
 
-  ngOnInit(): void {
+  sendPost(tosend: any){
-    this.threadId = parseInt(<string>this.activatedRoute.snapshot.queryParamMap.get('thread'));
+    console.log(`Получен эмит создания поста  с текстом ${tosend.text}`);
+    console.log("С картинками: " + tosend.images)
+    console.log("В тред " + this.threadId)
+
+    this.apiChatService.sendPostToApi(tosend.text, tosend.images, this.threadId).subscribe( response => {
+      response = response.toString();
+      vars.showAlert(response.toString(), "#ff0a36");
+      this.getThreadPosts();
+    });  
+  }
+
+  getThreadPosts(){
     this.apiChatService.getPosts('postgres', this.threadId).subscribe(response => {
       this.postsToShow = response
       })
   }
+
+  ngOnInit(): void {
+    this.threadId = parseInt(<string>this.activatedRoute.snapshot.queryParamMap.get('thread'));
+    this.getThreadPosts()
+  }
 }

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

@@ -1,12 +0,0 @@
-.send_post {
-  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/SingleThread/send-post/send-post.component.html

@@ -1,12 +0,0 @@
-<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>
-  </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 filename" >Картинка: {{singlePic}}</div>
-</div>

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

@@ -1,58 +0,0 @@
-import { Component,  OnInit, } from '@angular/core';
-import { ApiChatService } from '../../../services/api-chat.service';
-import { BoardsComponent } from "../boards.component";
-import * as vars from "../../../const/api";
-import {ActivatedRoute} from "@angular/router";
-
-
-@Component({
-  selector: 'app-send-post',
-  templateUrl: './send-post.component.html',
-  styleUrls: ['./send-post.component.css']
-})
-export class SendPostComponent implements OnInit {
-
-  progress: number;
-  message: string = '';
-  filename: string[] = [];
-  threadId: number;
-
-  constructor(
-    public apiChatService: ApiChatService,
-    private boards: BoardsComponent,
-    private activatedRoute:ActivatedRoute
-    ) {
-  }
-
-
-
-
-  sendPost(text: string) {
-    this.threadId =  parseInt(<string>this.activatedRoute.snapshot.queryParamMap.get('thread'));
-    this.apiChatService.sendPostToApi(text, this.filename, this.threadId).subscribe( response => {
-      response = response.toString();
-      vars.showAlert(response.toString(), "#ff0a36");
-      this.refreshDisplayedThread();
-    });
-    this.message = '0';
-    this.filename = [];
-  }
-
-
-   sendPic(event: any) {
-     this.apiChatService.sendpic(event.target.files[0]).subscribe(
-      response => {
-        response = response.value.toString();
-        this.filename.push(response);
-        vars.showAlert("Картинка " + response + " добавлена к посту!", "#ff0a36")
-    });
-  }
-
-  refreshDisplayedThread(){
-    this.boards.refreshPosts("b", this.threadId)
-  }
-
-  ngOnInit(): void {
-  }
-
-}

src/app/pages/send-form/send-form.component.css

@@ -0,0 +1,13 @@
+.posting_form {
+    border-width: 1px;
+    border-color: rgb(82, 77, 77);
+    border-style: solid;
+    background-color: #e7b58c;
+    border-radius: 5px;
+    width: 600px;
+    word-break: break-word;
+    word-wrap: break-word;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  

src/app/pages/send-form/send-form.component.html

@@ -0,0 +1,14 @@
+<h3 *ngIf="!showForm" (click)="showForm = !showForm">Открыть новую форму постинга</h3>
+<h3 *ngIf="showForm" (click)="showForm = !showForm" style="align-content: center">Скрыть новую форму постинга</h3>
+<div *ngIf="showForm" class="posting_form">
+    <h4>Создай то, о чем будут говорить многие в /{{board}}/.</h4>
+    <br>
+    <textarea type="text" rows="8" cols="45" placeholder="Печатать сюда" #textForm></textarea>
+    <p>
+      <button (click)="create(textForm.value) ; textForm.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 inputImages" >Картинка: {{singlePic}}</div>
+</div>

src/app/pages/send-form/send-form.component.spec.ts

@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { SendPostComponent } from './send-post.component';
+import { SendFormComponent } from './send-form.component';
 
-describe('SendPostComponent', () => {
+describe('SendFormComponent', () => {
-  let component: SendPostComponent;
+  let component: SendFormComponent;
-  let fixture: ComponentFixture<SendPostComponent>;
+  let fixture: ComponentFixture<SendFormComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ SendPostComponent ]
+      declarations: [ SendFormComponent ]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(SendPostComponent);
+    fixture = TestBed.createComponent(SendFormComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/pages/send-form/send-form.component.ts

@@ -0,0 +1,47 @@
+import { Component, Output, EventEmitter, Input,  OnInit } from '@angular/core';
+import { ApiChatService } from 'src/app/services/api-chat.service';
+import * as vars from "../../const/api"
+
+@Component({
+  selector: 'app-send-form',
+  templateUrl: './send-form.component.html',
+  styleUrls: ['./send-form.component.css']
+})
+export class SendFormComponent implements OnInit {
+
+  @Input() board: string;
+  showForm:boolean = false;
+  inputText: string;
+  inputImages: string[] = [];
+
+  @Output() sendInfoToCreate = new EventEmitter();
+
+
+
+  constructor(
+    public apiChatService: ApiChatService) { }
+
+  create(text:string){
+  var toSend =  {
+    text:  text,
+    images: this.inputImages
+  }
+    this.sendInfoToCreate.emit(toSend)
+    toSend.text = '';
+    toSend.images = [];
+  }
+
+  sendPic(event: any) {
+    this.apiChatService.sendpic(event.target.files[0]).subscribe(
+      response => {
+        response = response.value.toString();
+        this.inputImages.push(response);
+        vars.showAlert(`Картинка ${response} добавлена`, "#ff0a36")
+      });
+  }
+
+  ngOnInit(): void {
+  }
+
+}
+

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

@@ -10,6 +10,7 @@ import * as globals from '../const/api';
   providedIn: 'root'
 })
 export class ApiChatService {
+  se: any;
   constructor(private http: HttpClient) {
   }
 
@@ -42,6 +43,7 @@ export class ApiChatService {
     return this.http.get<SinglePost[]>(globals.api_endpoint + 'Threads/', {params: {board: boardName}});
   }
 
+  
   createThread(OPtext: string, OPimgUrl: string[], board: string,){
     return alert("Скоро будет работать!");
   }