From e1b75e27fab2eaeff6c68daff0cbf9ca2b23f6c9 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Sun, 31 Jan 2021 11:47:58 +0200 Subject: Implemented post page; when you click on a posts's message or timestamp, you'll be redirected to a page with the post --- src/DevHive.Angular/src/app/app-routing.module.ts | 6 ++++-- src/DevHive.Angular/src/app/app.module.ts | 4 +++- .../app/components/post-page/post-page.component.css | 7 +++++++ .../components/post-page/post-page.component.html | 3 +++ .../app/components/post-page/post-page.component.ts | 20 ++++++++++++++++++++ .../src/app/components/post/post.component.css | 4 ++++ .../src/app/components/post/post.component.html | 4 ++-- .../src/app/components/post/post.component.ts | 4 ++++ 8 files changed, 47 insertions(+), 5 deletions(-) create mode 100644 src/DevHive.Angular/src/app/components/post-page/post-page.component.css create mode 100644 src/DevHive.Angular/src/app/components/post-page/post-page.component.html create mode 100644 src/DevHive.Angular/src/app/components/post-page/post-page.component.ts diff --git a/src/DevHive.Angular/src/app/app-routing.module.ts b/src/DevHive.Angular/src/app/app-routing.module.ts index c9a8c61..e4e3d63 100644 --- a/src/DevHive.Angular/src/app/app-routing.module.ts +++ b/src/DevHive.Angular/src/app/app-routing.module.ts @@ -4,8 +4,9 @@ import { FeedComponent } from './components/feed/feed.component'; import { LoginComponent } from './components/login/login.component'; import { RegisterComponent } from './components/register/register.component'; import { ProfileComponent } from './components/profile/profile.component'; -import {ProfileSettingsComponent} from './components/profile-settings/profile-settings.component'; -import {NotFoundComponent} from './components/not-found/not-found.component'; +import { ProfileSettingsComponent } from './components/profile-settings/profile-settings.component'; +import { NotFoundComponent } from './components/not-found/not-found.component'; +import { PostPageComponent } from './components/post-page/post-page.component'; const routes: Routes = [ { path: '', component: FeedComponent }, @@ -13,6 +14,7 @@ const routes: Routes = [ { path: 'register', component: RegisterComponent }, { path: 'profile/:username', component: ProfileComponent }, { path: 'profile/:username/settings', component: ProfileSettingsComponent }, + { path: 'post/:id', component: PostPageComponent }, { path: 'not-found', component: NotFoundComponent }, { path: '**', component: NotFoundComponent } ]; diff --git a/src/DevHive.Angular/src/app/app.module.ts b/src/DevHive.Angular/src/app/app.module.ts index 586064e..1867787 100644 --- a/src/DevHive.Angular/src/app/app.module.ts +++ b/src/DevHive.Angular/src/app/app.module.ts @@ -19,6 +19,7 @@ import { NotFoundComponent } from './components/not-found/not-found.component'; import { LoadingComponent } from './components/loading/loading.component'; import { ErrorBarComponent } from './components/error-bar/error-bar.component'; import { SuccessBarComponent } from './components/success-bar/success-bar.component'; +import { PostPageComponent } from './components/post-page/post-page.component'; @NgModule({ declarations: [ @@ -32,7 +33,8 @@ import { SuccessBarComponent } from './components/success-bar/success-bar.compon NotFoundComponent, LoadingComponent, ErrorBarComponent, - SuccessBarComponent + SuccessBarComponent, + PostPageComponent ], imports: [ BrowserModule, diff --git a/src/DevHive.Angular/src/app/components/post-page/post-page.component.css b/src/DevHive.Angular/src/app/components/post-page/post-page.component.css new file mode 100644 index 0000000..fec3466 --- /dev/null +++ b/src/DevHive.Angular/src/app/components/post-page/post-page.component.css @@ -0,0 +1,7 @@ +#content { + justify-content: flex-start !important; +} + +#content > * { + width: 100%; +} diff --git a/src/DevHive.Angular/src/app/components/post-page/post-page.component.html b/src/DevHive.Angular/src/app/components/post-page/post-page.component.html new file mode 100644 index 0000000..5a824a4 --- /dev/null +++ b/src/DevHive.Angular/src/app/components/post-page/post-page.component.html @@ -0,0 +1,3 @@ +
+ +
diff --git a/src/DevHive.Angular/src/app/components/post-page/post-page.component.ts b/src/DevHive.Angular/src/app/components/post-page/post-page.component.ts new file mode 100644 index 0000000..026f97f --- /dev/null +++ b/src/DevHive.Angular/src/app/components/post-page/post-page.component.ts @@ -0,0 +1,20 @@ +import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; +import { Guid } from 'guid-typescript'; + +@Component({ + selector: 'app-post-page', + templateUrl: './post-page.component.html', + styleUrls: ['./post-page.component.css'] +}) +export class PostPageComponent implements OnInit { + public postId: Guid; + + constructor(private _router: Router) + { } + + ngOnInit(): void { + this.postId = Guid.parse(this._router.url.substring(6)); + } + +} diff --git a/src/DevHive.Angular/src/app/components/post/post.component.css b/src/DevHive.Angular/src/app/components/post/post.component.css index 4095ff2..1ae5d8f 100644 --- a/src/DevHive.Angular/src/app/components/post/post.component.css +++ b/src/DevHive.Angular/src/app/components/post/post.component.css @@ -55,6 +55,10 @@ hr { color: gray; } +.message:hover, .timestamp:hover { + cursor: pointer; +} + /* Rating */ .rating { diff --git a/src/DevHive.Angular/src/app/components/post/post.component.html b/src/DevHive.Angular/src/app/components/post/post.component.html index 8fbda35..95011d2 100644 --- a/src/DevHive.Angular/src/app/components/post/post.component.html +++ b/src/DevHive.Angular/src/app/components/post/post.component.html @@ -11,10 +11,10 @@
-
+
{{ post.message }}
-
+
{{ timeCreated }}
diff --git a/src/DevHive.Angular/src/app/components/post/post.component.ts b/src/DevHive.Angular/src/app/components/post/post.component.ts index 43ea058..0842e3c 100644 --- a/src/DevHive.Angular/src/app/components/post/post.component.ts +++ b/src/DevHive.Angular/src/app/components/post/post.component.ts @@ -49,4 +49,8 @@ export class PostComponent implements OnInit { goToAuthorProfile(): void { this._router.navigate(['/profile/' + this.user.userName]); } + + goToPostPage(): void { + this._router.navigate(['/post/' + this.post.postId]); + } } -- cgit v1.2.3