new structire

.vs/VSWorkspaceState.json

@@ -1,10 +1,6 @@
 {
   "ExpandedNodes": [
-    "",
-    "\\src",
-    "\\src\\app",
-    "\\src\\app\\about",
-    "\\src\\app\\boards"
+    ""
   ],
   "PreviewInSolutionExplorer": false
 }

src/app/about/about.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
             // двач лучший двач
-import { ApiChatService } from '../api-chat.service';
+import { ApiChatService } from '../services/api-chat.service';
 
 @Component({
   selector: 'app-about',

src/app/api-chat.service.ts

@@ -1,8 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class ApiChatService {
-  
-  }

src/app/app.module.ts

@@ -8,9 +8,10 @@ import { HomeComponent } from './home/home.component';
 import { AboutComponent } from './about/about.component';
 import { BoardsComponent } from './boards/boards.component';
 import { NotFoundComponent } from './not-found/not-found.component';
-import { ApiChatService } from './api-chat.service';
+import { ApiChatService } from './services/api-chat.service';
 import { FormsModule } from '@angular/forms';
 import { SendPostComponent } from './boards/send-post/send-post.component';
+import { PostComponent } from './boards/post/post.component'
 
 const appRoutes: Routes = [
   { path: '', component: HomeComponent },
@@ -26,6 +27,7 @@ const appRoutes: Routes = [
     AboutComponent,
     BoardsComponent,
     NotFoundComponent,
+    PostComponent,
     SendPostComponent
   ],
   imports: [

src/app/boards/boards.component.html

@@ -1,23 +1,16 @@
 <div class="wrappe">
 <img src="http://static.vdk2ch.ru:15555/test-public/16657431265390.png" alt="свiня" width="150">
- <app-send-post></app-send-post>,
-
-<button (click)="listPosts()">Обновить</button>
-<div *ngIf="response">
-  <div  class="singlePost" *ngFor="let post of response">
-    <a href="#{{post.Id}}"></a>
-      <img src="http://static.vdk2ch.ru:15555/test-public/оладий.jpg" alt="anonpls" width="140"> 
-      <p> >>{{post.Id}} {{post.Date}}</p>
-      <p>{{post.Text}}</p>
-    
-  </div>
-
-</div>
+<app-send-post></app-send-post>,
+<button (click)="refreshPosts()">Обновить</button>
+<post-single
+  *ngFor="let post of postsToShow" [post]="post"
+></post-single>
+<button (click)="refreshPosts()">Обновить</button>
 <br>
 <div class="hexagon">
   <div class="hexagon-inside">
-      <div class="hexagon-image">
-      </div> 
+    <div class="hexagon-image">
+    </div>
   </div>
 </div>
 </div>

src/app/boards/boards.component.ts

@@ -1,6 +1,7 @@
-import { Component, OnInit } from '@angular/core';
-import { ApiChatService } from '../api-chat.service';
-import { HttpClient  } from '@angular/common/http';
+import { Component, Input, OnInit } from '@angular/core';
+import { ApiChatService } from '../services/api-chat.service';
+import { HttpClient } from '@angular/common/http';
+import { SinglePost } from '../models/post'
 
 @Component({
   selector: 'app-boards',
@@ -10,24 +11,24 @@ import { HttpClient  } from '@angular/common/http';
 export class BoardsComponent implements OnInit {
   command: string = "";
   response: any;
+  postsToShow: SinglePost[] = [] //products: Iproduct[] = data
 
-  constructor(private http: HttpClient) {
-    console.log("Boards opened");
+  constructor(public apiChatService: ApiChatService) {
 
   }
 
-  listPosts() {
-    console.log("Получаю данные...");
-    this.http.get('http://api.vdk2ch.ru:5000/List')
-      .subscribe((response)=> {
-        this.response = response;
-        console.log(this.response);
-      })
+  refreshPosts() {
+    this.apiChatService.getPosts().subscribe(response => {
+      this.postsToShow = response
+    })
   }
 
   ngOnInit(): void {
-    this.listPosts();
+    this.apiChatService.getPosts().subscribe(response => {
+    this.postsToShow = response
+    })
   }
 
 
 }
+

src/app/boards/post/post.component.css

@@ -0,0 +1,10 @@
+.post {
+  border-width: 1;
+  border-color: rgb(190,190,190);
+  border-style: solid;
+  background-color: #F0D0B6;
+  border-radius: 5px;
+  width: 500px;
+  word-break: break-word;
+  word-wrap: break-word;
+}

src/app/boards/post/post.component.html

@@ -0,0 +1,5 @@
+<div class="post">
+  <img src="http://static.vdk2ch.ru:15555/test-public/оладий.jpg" alt="anonpls" width="140"> #  {{post.Id}} 
+  <h3>{{post.Date}}</h3>
+  <h2>{{post.Text}}</h2>
+</div>

src/app/boards/post/post.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { SinglePost } from '../../models/post';
+
+
+
+
+@Component({
+  selector: 'post-single',
+  templateUrl: './post.component.html',
+  styleUrls: [`./post.component.css`]
+})
+export class PostComponent implements OnInit {
+
+
+  @Input() post: SinglePost
+     
+  ngOnInit(): void {
+  }
+}

src/app/boards/send-post/send-post.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
+import { ApiChatService } from '../../services/api-chat.service';
 
 @Component({
   selector: 'app-send-post',
@@ -8,23 +9,11 @@ import { HttpClient } from '@angular/common/http';
 })
 export class SendPostComponent implements OnInit {
 
-  constructor(private http: HttpClient) {
-    console.log("Открыто окно постинга");
+  constructor(public apiChatService: ApiChatService) {
   }
 
   sendPost(text: string) {
-    console.log("Отправляю пост...");
-    var postToSend =
-    {
-      Date: Date,
-      Id: 0,
-      Text: text
-    }
-
-
-    this.http.post('http://api.vdk2ch.ru:5000/PostTo', postToSend).subscribe();
-
-
+    this.apiChatService.sendPostToApi(text).subscribe();
   }
 
 

src/app/home/home.component.ts

@@ -1,5 +1,4 @@
 import { Component, OnInit } from '@angular/core';
-import { ApiChatService } from '../api-chat.service';
 
 @Component({
   selector: 'app-home',

src/app/models/post.ts

@@ -0,0 +1,6 @@
+export interface SinglePost {
+  Date: string
+  Id: number
+  Text: string
+
+}

src/app/not-found/not-found.component.html

@@ -1 +1 @@
-<p>not-found works!</p>
+<p>Страничка не найдена. Попробуйте внимательнее.</p>

src/app/not-found/not-found.component.ts

@@ -2,7 +2,8 @@ import { Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-not-found',
-  template: `<h3>Страница не найдена.<h3>`
+  templateUrl: './not-found.component.html',
+  styleUrls: ['./not-found.component.css']
 })
 export class NotFoundComponent implements OnInit {
 

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

@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { SinglePost } from '../models/post';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ApiChatService {
+  constructor(private http: HttpClient) {
+  }
+
+  getPosts(): Observable<SinglePost[]> {
+    console.log("Получаю данные из сервиса");
+    return this.http.get<SinglePost[]>('http://api.vdk2ch.ru:5000/List/');
+  }
+
+    sendPostToApi(text: string) {
+    console.log("Отправляю пост...");
+    var postToSend =
+    {
+      Date: Date,
+      Id: 0,
+      Text: text
+    }
+      return this.http.post('http://api.vdk2ch.ru:5000/PostTo', postToSend)
+  }
+}

tsconfig.json

@@ -7,7 +7,7 @@
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "noImplicitOverride": true,
-    "noPropertyAccessFromIndexSignature": true,
+    "noPropertyAccessFromIndexSignature": false,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "sourceMap": true,
@@ -21,7 +21,8 @@
     "lib": [
       "es2020",
       "dom"
-    ]
+    ],
+    "strictPropertyInitialization" : false
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,