RakVhalate/Angular_App
Archived
1
0
Fork 0
Code Issues 2 Pull Requests Packages Projects 1 Releases Wiki Activity

Common creating component
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
RakVhalate 2022-12-13 18:21:56 +05:00
parent 2b26ea87b6
commit b857c1b573
21 changed files with 138 additions and 209 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
angular.json
View File

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

11
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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",

6
src/app/app.module.ts
View File

@ -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: [

12
src/app/pages/BoardThreads/create-thread/create-thread.component.css
View File

@ -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;
}

14
src/app/pages/BoardThreads/create-thread/create-thread.component.html
View File

@ -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>

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

@ -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();
});
});

51
src/app/pages/BoardThreads/create-thread/create-thread.component.ts
View File

@ -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 {
}
}

4
src/app/pages/BoardThreads/threads.component.html
View File

@ -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>

5
src/app/pages/BoardThreads/threads.component.ts
View File

@ -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

6
src/app/pages/SingleThread/boards.component.css
View File

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

8
src/app/pages/SingleThread/boards.component.html
View File

@ -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">

21
src/app/pages/SingleThread/boards.component.ts
View File

@ -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 {
this.threadId = parseInt(<string>this.activatedRoute.snapshot.queryParamMap.get('thread'));
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.getThreadPosts()
}
}

12
src/app/pages/SingleThread/send-post/send-post.component.css
View File

@ -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;
}

12
src/app/pages/SingleThread/send-post/send-post.component.html
View File

@ -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>

58
src/app/pages/SingleThread/send-post/send-post.component.ts
View File

@ -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 {
}
}

13
src/app/pages/send-form/send-form.component.css Normal file
View File

@ -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;
}

14
src/app/pages/send-form/send-form.component.html Normal file
View File

@ -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>

12
src/app/pages/SingleThread/send-post/send-post.component.spec.ts → src/app/pages/send-form/send-form.component.spec.ts
View File

@ -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();
});

47
src/app/pages/send-form/send-form.component.ts Normal file
View File

@ -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 {
}
}

2
src/app/services/api-chat.service.ts
View File

@ -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("Скоро будет работать!");
}