From b857c1b5734922c10eae76d791a65c9c3b477d68 Mon Sep 17 00:00:00 2001 From: RakVhalate Date: Tue, 13 Dec 2022 18:21:56 +0500 Subject: [PATCH] Common creating component --- angular.json | 3 + package-lock.json | 11 ++++ package.json | 1 + src/app/app.module.ts | 10 ++-- .../create-thread/create-thread.component.css | 12 ---- .../create-thread.component.html | 14 ----- .../create-thread.component.spec.ts | 23 -------- .../create-thread/create-thread.component.ts | 51 ---------------- .../pages/BoardThreads/threads.component.html | 4 +- .../pages/BoardThreads/threads.component.ts | 5 ++ .../pages/SingleThread/boards.component.css | 6 +- .../pages/SingleThread/boards.component.html | 10 ++-- .../pages/SingleThread/boards.component.ts | 23 +++++++- .../send-post/send-post.component.css | 12 ---- .../send-post/send-post.component.html | 12 ---- .../send-post/send-post.component.ts | 58 ------------------- .../pages/send-form/send-form.component.css | 13 +++++ .../pages/send-form/send-form.component.html | 14 +++++ .../send-form.component.spec.ts} | 12 ++-- .../pages/send-form/send-form.component.ts | 47 +++++++++++++++ src/app/services/api-chat.service.ts | 6 +- 21 files changed, 138 insertions(+), 209 deletions(-) delete mode 100644 src/app/pages/BoardThreads/create-thread/create-thread.component.css delete mode 100644 src/app/pages/BoardThreads/create-thread/create-thread.component.html delete mode 100644 src/app/pages/BoardThreads/create-thread/create-thread.component.spec.ts delete mode 100644 src/app/pages/BoardThreads/create-thread/create-thread.component.ts delete mode 100644 src/app/pages/SingleThread/send-post/send-post.component.css delete mode 100644 src/app/pages/SingleThread/send-post/send-post.component.html delete mode 100644 src/app/pages/SingleThread/send-post/send-post.component.ts create mode 100644 src/app/pages/send-form/send-form.component.css create mode 100644 src/app/pages/send-form/send-form.component.html rename src/app/pages/{SingleThread/send-post/send-post.component.spec.ts => send-form/send-form.component.spec.ts} (53%) create mode 100644 src/app/pages/send-form/send-form.component.ts diff --git a/angular.json b/angular.json index ff3b644..955db09 100644 --- a/angular.json +++ b/angular.json @@ -97,5 +97,8 @@ } } } + }, + "cli": { + "analytics": false } } diff --git a/package-lock.json b/package-lock.json index bb0f7ba..aa715f8 100644 --- 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", diff --git a/package.json b/package.json index 2bd10a0..35df16d 100644 --- 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", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 9f0d7b3..9a16491 100644 --- 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: [ diff --git a/src/app/pages/BoardThreads/create-thread/create-thread.component.css b/src/app/pages/BoardThreads/create-thread/create-thread.component.css deleted file mode 100644 index 551d810..0000000 --- a/src/app/pages/BoardThreads/create-thread/create-thread.component.css +++ /dev/null @@ -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; -} diff --git a/src/app/pages/BoardThreads/create-thread/create-thread.component.html b/src/app/pages/BoardThreads/create-thread/create-thread.component.html deleted file mode 100644 index c80f58e..0000000 --- a/src/app/pages/BoardThreads/create-thread/create-thread.component.html +++ /dev/null @@ -1,14 +0,0 @@ -

Открыть форму постинга

-

Скрыть форму постинга

-
-

Создай то, о чем будут говорить многие в /{{board}}/.

-
- -

- -

-

Загрузить картинку:

- - -
Картинка: {{singlePic}}
-
diff --git a/src/app/pages/BoardThreads/create-thread/create-thread.component.spec.ts b/src/app/pages/BoardThreads/create-thread/create-thread.component.spec.ts deleted file mode 100644 index 197587e..0000000 --- a/src/app/pages/BoardThreads/create-thread/create-thread.component.spec.ts +++ /dev/null @@ -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; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ CreateThreadComponent ] - }) - .compileComponents(); - - fixture = TestBed.createComponent(CreateThreadComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/pages/BoardThreads/create-thread/create-thread.component.ts b/src/app/pages/BoardThreads/create-thread/create-thread.component.ts deleted file mode 100644 index 375b79e..0000000 --- a/src/app/pages/BoardThreads/create-thread/create-thread.component.ts +++ /dev/null @@ -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 { - } - -} diff --git a/src/app/pages/BoardThreads/threads.component.html b/src/app/pages/BoardThreads/threads.component.html index 70aa218..8d20d31 100644 --- a/src/app/pages/BoardThreads/threads.component.html +++ b/src/app/pages/BoardThreads/threads.component.html @@ -1,7 +1,7 @@

Вы находитесь на доске {{boardName}}

- + +
Что это и как это работает?
diff --git a/src/app/pages/BoardThreads/threads.component.ts b/src/app/pages/BoardThreads/threads.component.ts index f1e2751..9a616f2 100644 --- 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 diff --git a/src/app/pages/SingleThread/boards.component.css b/src/app/pages/SingleThread/boards.component.css index de14865..43c715f 100644 --- 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; + } diff --git a/src/app/pages/SingleThread/boards.component.html b/src/app/pages/SingleThread/boards.component.html index a09a066..7e4a526 100644 --- a/src/app/pages/SingleThread/boards.component.html +++ b/src/app/pages/SingleThread/boards.component.html @@ -1,7 +1,8 @@ -
+
свiня -, -

Вы находитесь на доске {{boardName}}

+ + +

Вы находитесь на доске {{boardName}}

в треде номер {{threadId}}

Что это и как это работает?
@@ -10,8 +11,7 @@ - -
+
diff --git a/src/app/pages/SingleThread/boards.component.ts b/src/app/pages/SingleThread/boards.component.ts index 1d2887d..a022df5 100644 --- 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(this.activatedRoute.snapshot.queryParamMap.get('thread')); - this.apiChatService.getPosts('postgres', this.threadId).subscribe(response => { - this.postsToShow = response - }) + this.getThreadPosts() } } diff --git a/src/app/pages/SingleThread/send-post/send-post.component.css b/src/app/pages/SingleThread/send-post/send-post.component.css deleted file mode 100644 index b8517cf..0000000 --- a/src/app/pages/SingleThread/send-post/send-post.component.css +++ /dev/null @@ -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; -} diff --git a/src/app/pages/SingleThread/send-post/send-post.component.html b/src/app/pages/SingleThread/send-post/send-post.component.html deleted file mode 100644 index 45cf52d..0000000 --- a/src/app/pages/SingleThread/send-post/send-post.component.html +++ /dev/null @@ -1,12 +0,0 @@ -
-

Поведай миру что-нибудь хорошее.

-
- -

- -

-

Загрузить картинку:

- - -
Картинка: {{singlePic}}
-
diff --git a/src/app/pages/SingleThread/send-post/send-post.component.ts b/src/app/pages/SingleThread/send-post/send-post.component.ts deleted file mode 100644 index 87afd2d..0000000 --- a/src/app/pages/SingleThread/send-post/send-post.component.ts +++ /dev/null @@ -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(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 { - } - -} diff --git a/src/app/pages/send-form/send-form.component.css b/src/app/pages/send-form/send-form.component.css new file mode 100644 index 0000000..5673eeb --- /dev/null +++ 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; + } + \ No newline at end of file diff --git a/src/app/pages/send-form/send-form.component.html b/src/app/pages/send-form/send-form.component.html new file mode 100644 index 0000000..81181d7 --- /dev/null +++ b/src/app/pages/send-form/send-form.component.html @@ -0,0 +1,14 @@ +

Открыть новую форму постинга

+

Скрыть новую форму постинга

+
+

Создай то, о чем будут говорить многие в /{{board}}/.

+
+ +

+ +

+

Загрузить картинку:

+ + +
Картинка: {{singlePic}}
+
\ No newline at end of file diff --git a/src/app/pages/SingleThread/send-post/send-post.component.spec.ts b/src/app/pages/send-form/send-form.component.spec.ts similarity index 53% rename from src/app/pages/SingleThread/send-post/send-post.component.spec.ts rename to src/app/pages/send-form/send-form.component.spec.ts index 5849c6e..daaf7d3 100644 --- a/src/app/pages/SingleThread/send-post/send-post.component.spec.ts +++ b/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', () => { - let component: SendPostComponent; - let fixture: ComponentFixture; +describe('SendFormComponent', () => { + let component: SendFormComponent; + let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ SendPostComponent ] + declarations: [ SendFormComponent ] }) .compileComponents(); - fixture = TestBed.createComponent(SendPostComponent); + fixture = TestBed.createComponent(SendFormComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/src/app/pages/send-form/send-form.component.ts b/src/app/pages/send-form/send-form.component.ts new file mode 100644 index 0000000..b9800dc --- /dev/null +++ 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 { + } + +} + diff --git a/src/app/services/api-chat.service.ts b/src/app/services/api-chat.service.ts index 300bfdf..8eb8133 100644 --- 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(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[] {