From 5fd7c12c4e7b9c15fdd878377db5718b8d74351e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tormod=20Nyg=C3=A5rd?= <tormodny@stud.ntnu.no>
Date: Wed, 17 Feb 2021 14:09:36 +0100
Subject: [PATCH] Issue: Added post detail component (#4)
---
client/src/app/app-routing.module.ts | 4 ++-
.../post-details/post-details.component.html | 7 +++++
.../post-details/post-details.component.scss | 0
.../post-details.component.spec.ts | 25 +++++++++++++++++
.../post-details/post-details.component.ts | 28 +++++++++++++++++++
client/src/app/posts/post.module.ts | 4 ++-
.../src/controllers/postcontroller/index.ts | 4 +--
7 files changed, 68 insertions(+), 4 deletions(-)
create mode 100644 client/src/app/posts/post-details/post-details.component.html
create mode 100644 client/src/app/posts/post-details/post-details.component.scss
create mode 100644 client/src/app/posts/post-details/post-details.component.spec.ts
create mode 100644 client/src/app/posts/post-details/post-details.component.ts
diff --git a/client/src/app/app-routing.module.ts b/client/src/app/app-routing.module.ts
index 15fb2c5..ca2cc4b 100644
--- a/client/src/app/app-routing.module.ts
+++ b/client/src/app/app-routing.module.ts
@@ -1,9 +1,11 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
+import { PostDetailsComponent } from './posts/post-details/post-details.component';
import { PostFormComponent } from './posts/post-form/post-form.component';
const routes: Routes = [
- { path: 'annonse/ny', component: PostFormComponent }
+ { path: 'annonse/ny', component: PostFormComponent },
+ { path: 'annonse/:id', component: PostDetailsComponent }
];
@NgModule({
diff --git a/client/src/app/posts/post-details/post-details.component.html b/client/src/app/posts/post-details/post-details.component.html
new file mode 100644
index 0000000..80cbaaf
--- /dev/null
+++ b/client/src/app/posts/post-details/post-details.component.html
@@ -0,0 +1,7 @@
+<h3>{{post.getTitle}}</h3>
+
+<img [src]="post.getImageUrl">
+<p>{{post.getDescription}}</p>
+<br>
+<p>Publiseringstidspunkt: {{post.getTimestamp}}</p>
+<p>Eier: {{post.getOwner}}</p>
\ No newline at end of file
diff --git a/client/src/app/posts/post-details/post-details.component.scss b/client/src/app/posts/post-details/post-details.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/app/posts/post-details/post-details.component.spec.ts b/client/src/app/posts/post-details/post-details.component.spec.ts
new file mode 100644
index 0000000..90f92b9
--- /dev/null
+++ b/client/src/app/posts/post-details/post-details.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PostDetailsComponent } from './post-details.component';
+
+describe('PostDetailsComponent', () => {
+ let component: PostDetailsComponent;
+ let fixture: ComponentFixture<PostDetailsComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ PostDetailsComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(PostDetailsComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/client/src/app/posts/post-details/post-details.component.ts b/client/src/app/posts/post-details/post-details.component.ts
new file mode 100644
index 0000000..e9f5932
--- /dev/null
+++ b/client/src/app/posts/post-details/post-details.component.ts
@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+import { Post } from 'src/app/models/post.model';
+import { PostService } from '../post.service';
+import { ActivatedRoute } from '@angular/router'
+
+@Component({
+ selector: 'app-post-details',
+ templateUrl: './post-details.component.html',
+ styleUrls: ['./post-details.component.scss']
+})
+export class PostDetailsComponent implements OnInit {
+
+ post: Post = new Post();
+
+ constructor(private postService: PostService, private activatedRoute: ActivatedRoute) { }
+
+ ngOnInit(): void {
+ // Gets id parameter from URL
+ this.activatedRoute.params.subscribe(params => {
+ const id = params["id"];
+
+ // Gets Post with id from database
+ this.postService.getPost(id).then(post => {
+ this.post = post;
+ });
+ });
+ }
+}
diff --git a/client/src/app/posts/post.module.ts b/client/src/app/posts/post.module.ts
index 5599cc3..ed65b10 100644
--- a/client/src/app/posts/post.module.ts
+++ b/client/src/app/posts/post.module.ts
@@ -3,12 +3,14 @@ import { CommonModule } from '@angular/common';
import { PostFormComponent } from './post-form/post-form.component';
import { SharedModule } from '../shared/shared.module';
import { FormsModule } from '@angular/forms';
+import { PostDetailsComponent } from './post-details/post-details.component';
@NgModule({
declarations: [
- PostFormComponent
+ PostFormComponent,
+ PostDetailsComponent
],
imports: [
CommonModule,
diff --git a/server/src/controllers/postcontroller/index.ts b/server/src/controllers/postcontroller/index.ts
index 231d201..433d6e7 100644
--- a/server/src/controllers/postcontroller/index.ts
+++ b/server/src/controllers/postcontroller/index.ts
@@ -36,7 +36,7 @@ router.route('/').post(async (request: Request, response: Response) => {
router.route('/').get(async (_: Request, response: Response) => {
try {
//response.status(200).json(await query("SELECT * FROM post;",""));
- const input = `SELECT p.id, p.title, p.description, p.timestamp, p.owner, category.navn, p.imageUrl
+ const input = `SELECT p.id, p.title, p.description, p.timestamp, p.owner, category.name, p.imageUrl
FROM post as p
INNER JOIN category ON category.categoryid = p.categoryid;`
response.status(200).json(await query(input,""));
@@ -50,7 +50,7 @@ router.route('/:id').get(async (request: Request, response: Response) => {
const postId = request.params.id;
try {
//response.status(200).json(await query("SELECT * FROM post WHERE id=?;",[postId]));
- const input = `SELECT p.id, p.title, p.description, p.timestamp, p.owner, category.navn, p.imageUrl
+ const input = `SELECT p.id, p.title, p.description, p.timestamp, p.owner, category.name, p.imageUrl
FROM post as p
INNER JOIN category ON category.categoryid = p.categoryid WHERE p.id=?;`
response.status(200).json(await query(input,[postId]));
--
GitLab