Common creating component

2022-12-13 18:21:56 +05:00 · 2022-12-13 18:21:56 +05:00 · b857c1b573
commit b857c1b573
parent 2b26ea87b6
21 changed files with 138 additions and 209 deletions
--- a/angular.json
+++ b/angular.json
@ -97,5 +97,8 @@
        }
      }
    }
+  },
+  "cli": {
+    "analytics": false
  }
 }
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@ -11,15 +11,14 @@ 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';
 import { AppRoutingModule } from './app-routing.module';
-import {MatSidenavModule} from "@angular/material/sidenav";
-import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
+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: [
--- a/src/app/pages/BoardThreads/create-thread/create-thread.component.css
+++ b/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;
-}
--- a/src/app/pages/BoardThreads/create-thread/create-thread.component.html
+++ b/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>
--- a/src/app/pages/BoardThreads/create-thread/create-thread.component.spec.ts
+++ b/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();
-  });
-});
--- a/src/app/pages/BoardThreads/create-thread/create-thread.component.ts
+++ b/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 {
-  }
-
-}
--- a/src/app/pages/BoardThreads/threads.component.html
+++ b/src/app/pages/BoardThreads/threads.component.html
@ -1,7 +1,7 @@
 <h2>Вы находитесь на доске {{boardName}} </h2>
 <div>
-  <app-create-thread [board]="boardName"
-  ></app-create-thread>
+  <app-send-form [board]="boardName" (sendInfoToCreate)="alert($event)">
+  </app-send-form>
 </div>
 <a (click)="showGuide = !showGuide" style=" font-size: small; color: chocolate; width: 500px;"> Что это и как это работает?</a>
 <br>
--- a/src/app/pages/BoardThreads/threads.component.ts
+++ b/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
--- a/src/app/pages/SingleThread/boards.component.css
+++ b/src/app/pages/SingleThread/boards.component.css
@ -5,7 +5,7 @@
  background-color: rgb(143, 142, 142);
  color: #5d5d5d;
 }
-.wrapper {width: 800px;
-margin-left: auto;
-margin-right: auto;
+.wrapper {
+  width: 800px;
+
 }
--- a/src/app/pages/SingleThread/boards.component.html
+++ b/src/app/pages/SingleThread/boards.component.html
@ -1,7 +1,8 @@
-<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>,
-  <h2>Вы находитесь на доске {{boardName}} </h2>
+<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>
  <br>
@ -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">
--- a/src/app/pages/SingleThread/boards.component.ts
+++ b/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 {
    })
  }

+  sendPost(tosend: any){
+    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.apiChatService.getPosts('postgres', this.threadId).subscribe(response => {
-    this.postsToShow = response
-    })
+    this.getThreadPosts()
  }
 }
--- a/src/app/pages/SingleThread/send-post/send-post.component.css
+++ b/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;
-}
--- a/src/app/pages/SingleThread/send-post/send-post.component.html
+++ b/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>
--- a/src/app/pages/SingleThread/send-post/send-post.component.ts
+++ b/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 {
-  }
-
-}
--- a/src/app/pages/send-form/send-form.component.css
+++ b/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;
+  }
+  
--- a/src/app/pages/send-form/send-form.component.html
+++ b/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>
--- a/src/app/pages/SingleThread/send-post/send-post.component.spec.ts
+++ b/src/app/pages/SingleThread/send-post/send-post.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', () => {
-  let component: SendPostComponent;
-  let fixture: ComponentFixture<SendPostComponent>;
+describe('SendFormComponent', () => {
+  let component: SendFormComponent;
+  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();
  });
--- a/src/app/pages/send-form/send-form.component.ts
+++ b/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 {
+  }
+
+}
+
--- a/src/app/services/api-chat.service.ts
+++ b/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("Скоро будет работать!");
  }
@ -54,13 +56,13 @@ export class ApiChatService {
  ThreadCount: 4,
  PostCount: 4445
 },
-    {
+{
      BoardName: 'vdk',
      BoardExplainedName: 'Здесь живут тигры',
      BoardID: 223,
      ThreadCount: 1,
      PostCount: 245
-    }
+}
 ]

  getBoards(): Board[] {