Added one button

.vs/VSWorkspaceState.json

@@ -3,7 +3,6 @@
     "",
     "\\src",
     "\\src\\app",
-    "\\src\\app\\send-post",
     "\\src\\app\\services"
   ],
   "PreviewInSolutionExplorer": false

package-lock.json

@@ -13,6 +13,7 @@
         "@angular/compiler": "^14.2.0",
         "@angular/core": "^14.2.0",
         "@angular/forms": "^14.2.0",
+        "@angular/material": "^7.0.0",
         "@angular/platform-browser": "^14.2.0",
         "@angular/platform-browser-dynamic": "^14.2.0",
         "@angular/router": "^14.2.0",
@@ -349,6 +350,35 @@
         "@angular/core": "14.2.6"
       }
     },
+    "node_modules/@angular/cdk": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-7.0.0.tgz",
+      "integrity": "sha512-HX+gIJzST/Nu07ASg1XR583KSEmHI6kUbiSBdq0LqF3mIQgId5z3auBqQcXAgvB0Cg29+/38aj31hnoK/LswEQ==",
+      "peer": true,
+      "dependencies": {
+        "tslib": "^1.7.1"
+      },
+      "optionalDependencies": {
+        "parse5": "^5.0.0"
+      },
+      "peerDependencies": {
+        "@angular/common": ">=7.0.0",
+        "@angular/core": ">=7.0.0"
+      }
+    },
+    "node_modules/@angular/cdk/node_modules/parse5": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
+      "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+      "optional": true,
+      "peer": true
+    },
+    "node_modules/@angular/cdk/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+      "peer": true
+    },
     "node_modules/@angular/cli": {
       "version": "14.2.6",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-14.2.6.tgz",
@@ -481,6 +511,25 @@
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
+    "node_modules/@angular/material": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-7.0.0.tgz",
+      "integrity": "sha512-HgHzHWsUvNiSpRmoOJqnH/TVb4Ki7sXxbWuw5OVKOKiBW6Gwvd29+cP4XauzH47wHMyvS9/HH8kj3gC72pLhJQ==",
+      "dependencies": {
+        "tslib": "^1.7.1"
+      },
+      "peerDependencies": {
+        "@angular/animations": ">=7.0.0",
+        "@angular/cdk": "7.0.0",
+        "@angular/common": ">=7.0.0",
+        "@angular/core": ">=7.0.0"
+      }
+    },
+    "node_modules/@angular/material/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
     "node_modules/@angular/platform-browser": {
       "version": "14.2.6",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-14.2.6.tgz",
@@ -13153,6 +13202,31 @@
         "tslib": "^2.3.0"
       }
     },
+    "@angular/cdk": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-7.0.0.tgz",
+      "integrity": "sha512-HX+gIJzST/Nu07ASg1XR583KSEmHI6kUbiSBdq0LqF3mIQgId5z3auBqQcXAgvB0Cg29+/38aj31hnoK/LswEQ==",
+      "peer": true,
+      "requires": {
+        "parse5": "^5.0.0",
+        "tslib": "^1.7.1"
+      },
+      "dependencies": {
+        "parse5": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
+          "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+          "optional": true,
+          "peer": true
+        },
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+          "peer": true
+        }
+      }
+    },
     "@angular/cli": {
       "version": "14.2.6",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-14.2.6.tgz",
@@ -13231,6 +13305,21 @@
         "tslib": "^2.3.0"
       }
     },
+    "@angular/material": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-7.0.0.tgz",
+      "integrity": "sha512-HgHzHWsUvNiSpRmoOJqnH/TVb4Ki7sXxbWuw5OVKOKiBW6Gwvd29+cP4XauzH47wHMyvS9/HH8kj3gC72pLhJQ==",
+      "requires": {
+        "tslib": "^1.7.1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
     "@angular/platform-browser": {
       "version": "14.2.6",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-14.2.6.tgz",

package.json

@@ -15,6 +15,7 @@
     "@angular/compiler": "^14.2.0",
     "@angular/core": "^14.2.0",
     "@angular/forms": "^14.2.0",
+    "@angular/material": "^7.0.0",
     "@angular/platform-browser": "^14.2.0",
     "@angular/platform-browser-dynamic": "^14.2.0",
     "@angular/router": "^14.2.0",

src/app/app-routing.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import {RouterModule, Routes} from "@angular/router";
+import {HomeComponent} from "./pages/home/home.component";
+import {ThreadsComponent} from "./pages/BoardThreads/threads.component";
+import {BoardsComponent} from "./pages/SingleThread/boards.component";
+import {AboutComponent} from "./pages/about/about.component";
+import {NotFoundComponent} from "./pages/not-found/not-found.component";
+
+const appRoutes: Routes = [
+  { path: '', component: HomeComponent },
+  { path: 'threads', component: ThreadsComponent},
+  { path: 'board', component: BoardsComponent },
+  { path: 'about', component: AboutComponent },
+  { path: '**', component: NotFoundComponent }
+]
+
+@NgModule({
+  imports: [RouterModule.forRoot(appRoutes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

src/app/app.component.css

@@ -1,4 +1,63 @@
-h1{
+
-    color: red;
+.main-container {
-    font-size: 10rem;
+  height: 100%;
+}
+
+.sidenav-content {
+
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+}
+
+.sidenav {
+  padding: 20px;
+  border: 1px solid rgba(25, 116, 211, 0.5);
+}
+.navToggle-btn {
+  height: 40px;
+  color: #fff;
+  border-radius: 5px;
+  padding: 10px 25px;
+  font-family: 'Lato', sans-serif;
+  font-weight: 500;
+  background: transparent;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
+  display: inline-block;
+  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
+  7px 7px 20px 0px rgba(0,0,0,.1),
+  4px 4px 5px 0px rgba(0,0,0,.1);
+  outline: none;
+}
+.btn-14 {
+  background: rgb(255,151,0);
+  border: none;
+  z-index: 1;
+}
+.btn-14:after {
+  position: absolute;
+  content: "";
+  width: 100%;
+  height: 0;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  border-radius: 5px;
+  background-color: #ff0000;
+  background-image: linear-gradient(315deg, #000000 0%, #ff0000 74%);
+  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5);
+  transition: all 0.3s ease;
+}
+.btn-14:hover {
+  color: #ffffff;
+}
+.btn-14:hover:after {
+  top: auto;
+  bottom: 0;
+  height: 100%;
+}
+.btn-14:active {
+  top: 2px;
 }

src/app/app.component.html

@@ -0,0 +1,15 @@
+<div>
+  <h1>Welcome, traveler.</h1>
+
+  <mat-drawer-container class="main-container" [autosize]="true">
+    <mat-drawer #drawer class="sidenav" mode="side" [mode]="'push'">
+      <app-nav-bar></app-nav-bar>
+    </mat-drawer>
+    <div class="sidenav-content">
+      <button type="button" class = "navToggle-btn btn-14" (click)="drawer.toggle()">
+        Отобразить панель навигации
+      </button>
+    </div>
+    <router-outlet></router-outlet>
+  </mat-drawer-container>
+</div>

src/app/app.component.ts

@@ -1,18 +1,19 @@
 import { Component } from '@angular/core';
 
+
 @Component({
   selector: 'app-root',
-  template: `<div>
+  templateUrl: `app.component.html`,
-        <h1>Welcome, traveler.</h1>
+  styleUrls:['app.component.css']
-        <nav>
-          <a routerLink = "">Главная </a>
-          <a routerLink = "about">О нас </a>
-          <a routerLink = "board">Тред </a>
-          <a routerLink = "threads">Борда </a>
-        </nav>
-        <router-outlet></router-outlet>
-        </div>`
 })
+
 export class AppComponent {
   title = 'Nedvach Angular';
+
+  ngOnInit(): void {
   }
+}
+
+
+
+

src/app/app.module.ts

@@ -1,9 +1,9 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { Routes, RouterModule } from '@angular/router';
 import { HttpClientModule } from '@angular/common/http';
 
 
+
 import { AppComponent } from './app.component';
 import { HomeComponent } from './pages/home/home.component';
 import { AboutComponent } from './pages/about/about.component';
@@ -15,14 +15,12 @@ import { SendPostComponent } from './pages/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 { NavBarComponent } from './pages/nav-bar/nav-bar.component';
+
 
-const appRoutes: Routes = [
-  { path: '', component: HomeComponent },
-  { path: 'threads', component: ThreadsComponent},
-  { path: 'board', component: BoardsComponent },
-  { path: 'about', component: AboutComponent },
-  { path: '**', component: NotFoundComponent }
-]
 
 @NgModule({
   declarations: [
@@ -34,13 +32,17 @@ const appRoutes: Routes = [
     PostComponent,
     SendPostComponent,
     ThreadsComponent,
-    OPComponent
+    OPComponent,
+    NavBarComponent,
+
   ],
   imports: [
     BrowserModule,
-    RouterModule.forRoot(appRoutes),
     HttpClientModule,
-    FormsModule
+    FormsModule,
+    AppRoutingModule,
+    MatSidenavModule,
+    BrowserAnimationsModule
   ],
   providers: [
     ApiChatService

src/app/models/boards.ts

@@ -0,0 +1,9 @@
+export interface Board {
+  BoardName: string,
+  BoardExplainedName: string,
+  BoardID: number,
+  ThreadCount: number,
+  PostCount: number
+}
+
+

src/app/pages/about/about.component.ts

@@ -1,6 +1,4 @@
 import { Component, OnInit } from '@angular/core';
-            // двач лучший двач
-import { ApiChatService } from '../../services/api-chat.service';
 
 @Component({
   selector: 'app-about',
@@ -8,12 +6,9 @@ import { ApiChatService } from '../../services/api-chat.service';
   styleUrls: [`./about.component.css`]
 })
 export class AboutComponent implements OnInit {
-// это комментарий
 
   ngOnInit(): void {
-
+    console.log('Yeah, you REALLY expect me to push changes without any console debugging?');
-
-    console.log('ya tochno ne ta stroka chto budet v drugom commite!');
   }
 
 }

src/app/pages/home/home.component.html

@@ -1 +1 @@
-<p>home works!</p>
+<img src="http://static.vdk2ch.ru:15555/test-public/sin.jpg">

src/app/pages/home/home.component.ts

@@ -2,11 +2,11 @@ import { Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-home',
-  template: `<img src="http://static.vdk2ch.ru:15555/test-public/sin.jpg">`
+  templateUrl: `home.component.html`,
 
 })
 export class HomeComponent implements OnInit {
-  title = 'Home компонент';
+  title = 'Напоминание';
 
 
 

src/app/pages/nav-bar/nav-bar.component.html

@@ -0,0 +1,10 @@
+<nav>
+  <a routerLink = "">Напоминание </a>
+  <br>
+  <a routerLink = "about">О нас </a>
+  <br>
+  Доски:
+  <div>
+    <a *ngFor="let board of boardsToList" routerLink = "threads" title="{{board.BoardExplainedName}}">{{board.BoardName}}</a>
+  </div>
+</nav>

src/app/pages/nav-bar/nav-bar.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavBarComponent } from './nav-bar.component';
+
+describe('NavBarComponent', () => {
+  let component: NavBarComponent;
+  let fixture: ComponentFixture<NavBarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ NavBarComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(NavBarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/nav-bar/nav-bar.component.ts

@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+import {Board} from "../../models/boards";
+import {ApiChatService} from "../../services/api-chat.service";
+
+@Component({
+  selector: 'app-nav-bar',
+  templateUrl: './nav-bar.component.html',
+  styleUrls: ['./nav-bar.component.css']
+})
+export class NavBarComponent implements OnInit {
+  boardsToList: Board[];
+
+
+  constructor(public apiChatService: ApiChatService) {
+  }
+
+  ngOnInit(): void {
+    this.boardsToList = this.apiChatService.getBoards()
+  }
+
+}

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

@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { SinglePost } from '../models/post';
+import {Board} from "../models/boards";
 import * as globals from '../const/api';
 
 
@@ -41,5 +42,19 @@ export class ApiChatService {
     return this.http.get<SinglePost[]>(globals.api_endpoint + 'Threads/', {params: {board: boardName}});
   }
 
+  sampleBoardList = [
+{
+  BoardName: 'b',
+  BoardExplainedName: 'Всего понемногу',
+  BoardID: 228,
+  ThreadCount: 4,
+  PostCount: 4445
+}
+]
+
+  getBoards(): Board[] {
+    return this.sampleBoardList;
+    //return this.http.get<Board[]>(globals.api_endpoint + 'Boards/');
+  }
 }