diff --git a/.vs/VSWorkspaceState.json b/.vs/VSWorkspaceState.json index 20ae7b8..4969a6c 100644 --- a/.vs/VSWorkspaceState.json +++ b/.vs/VSWorkspaceState.json @@ -3,7 +3,6 @@ "", "\\src", "\\src\\app", - "\\src\\app\\send-post", "\\src\\app\\services" ], "PreviewInSolutionExplorer": false diff --git a/.vs/slnx.sqlite b/.vs/slnx.sqlite index e94d76f..de4bfe8 100644 Binary files a/.vs/slnx.sqlite and b/.vs/slnx.sqlite differ diff --git a/package-lock.json b/package-lock.json index 791181c..bb0f7ba 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index ef32b85..2bd10a0 100644 --- a/package.json +++ b/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", diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts new file mode 100644 index 0000000..d34a5e8 --- /dev/null +++ b/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 { } diff --git a/src/app/app.component.css b/src/app/app.component.css index 1675c58..6240e0b 100644 --- a/src/app/app.component.css +++ b/src/app/app.component.css @@ -1,4 +1,63 @@ -h1{ - color: red; - font-size: 10rem; + +.main-container { + 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; } diff --git a/src/app/app.component.html b/src/app/app.component.html index e69de29..d2e585c 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -0,0 +1,15 @@ +
+

Welcome, traveler.

+ + + + + +
+ +
+ + +
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 67729d2..f011eac 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,18 +1,19 @@ import { Component } from '@angular/core'; + @Component({ selector: 'app-root', - template: `
-

Welcome, traveler.

- - -
` + templateUrl: `app.component.html`, + styleUrls:['app.component.css'] }) + export class AppComponent { title = 'Nedvach Angular'; + + ngOnInit(): void { + } } + + + + diff --git a/src/app/app.module.ts b/src/app/app.module.ts index c9f72e8..435ee3b 100644 --- a/src/app/app.module.ts +++ b/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 diff --git a/src/app/models/boards.ts b/src/app/models/boards.ts new file mode 100644 index 0000000..becdad3 --- /dev/null +++ b/src/app/models/boards.ts @@ -0,0 +1,9 @@ +export interface Board { + BoardName: string, + BoardExplainedName: string, + BoardID: number, + ThreadCount: number, + PostCount: number +} + + diff --git a/src/app/pages/about/about.component.ts b/src/app/pages/about/about.component.ts index de35370..3f4af62 100644 --- a/src/app/pages/about/about.component.ts +++ b/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('ya tochno ne ta stroka chto budet v drugom commite!'); + console.log('Yeah, you REALLY expect me to push changes without any console debugging?'); } } diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html index 16a058d..ef2973b 100644 --- a/src/app/pages/home/home.component.html +++ b/src/app/pages/home/home.component.html @@ -1 +1 @@ -

home works!

\ No newline at end of file + diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts index fe46403..912dbc4 100644 --- a/src/app/pages/home/home.component.ts +++ b/src/app/pages/home/home.component.ts @@ -2,11 +2,11 @@ import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-home', - template: `` - + templateUrl: `home.component.html`, + }) export class HomeComponent implements OnInit { - title = 'Home компонент'; + title = 'Напоминание'; diff --git a/src/app/pages/nav-bar/nav-bar.component.css b/src/app/pages/nav-bar/nav-bar.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/pages/nav-bar/nav-bar.component.html b/src/app/pages/nav-bar/nav-bar.component.html new file mode 100644 index 0000000..bc235da --- /dev/null +++ b/src/app/pages/nav-bar/nav-bar.component.html @@ -0,0 +1,10 @@ + diff --git a/src/app/pages/nav-bar/nav-bar.component.spec.ts b/src/app/pages/nav-bar/nav-bar.component.spec.ts new file mode 100644 index 0000000..1cefcdb --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ NavBarComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(NavBarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/nav-bar/nav-bar.component.ts b/src/app/pages/nav-bar/nav-bar.component.ts new file mode 100644 index 0000000..41af055 --- /dev/null +++ b/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() + } + +} diff --git a/src/app/services/api-chat.service.ts b/src/app/services/api-chat.service.ts index 010ac5a..02ac9b3 100644 --- a/src/app/services/api-chat.service.ts +++ b/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'; @@ -12,9 +13,9 @@ export class ApiChatService { constructor(private http: HttpClient) { } - getPosts(boardName:string, threadID: number): Observable { + getPosts(boardName: string, threadID: number): Observable { //console.log("Получаю посты и картинки"); - return this.http.get(globals.api_endpoint +'List/', {params:{board: boardName , thread: threadID}}) ; + return this.http.get(globals.api_endpoint + 'List/', {params: {board: boardName, thread: threadID}}); } sendPostToApi(text: string, imgUrl: string[], threadId: number,) { @@ -27,19 +28,33 @@ export class ApiChatService { ImgURL: imgUrl, Thread_Id: threadId } - return this.http.post( globals.api_endpoint +'PostTo', postToSend) + return this.http.post(globals.api_endpoint + 'PostTo', postToSend) } - sendpic(picToSend: File):Observable { + sendpic(picToSend: File): Observable { const PostPicture = new FormData(); PostPicture.append('PostPicture', picToSend); - return this.http.post(globals.api_endpoint +'UploadPic', PostPicture) + return this.http.post(globals.api_endpoint + 'UploadPic', PostPicture) } - getThreads(boardName:string): Observable { + getThreads(boardName: string): Observable { //console.log("Получаю посты и картинки"); - return this.http.get(globals.api_endpoint +'Threads/', {params:{board: boardName}}) ; + return this.http.get(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(globals.api_endpoint + 'Boards/'); + } +}