diff --git a/client/src/app/app-routing.module.ts b/client/src/app/app-routing.module.ts index 15fb2c5826cf6db2157224957e954c5df0894cfe..ca2cc4b8c503a261d1ca4b9729d73f328f1be816 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 0000000000000000000000000000000000000000..80cbaafa38b63a46748f082d6d204f900f989aa2 --- /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 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 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 0000000000000000000000000000000000000000..90f92b94c0e46f064508801e1d57403a5fb1c26d --- /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 0000000000000000000000000000000000000000..e9f59326f75b47df7045c5dd0574f5b74e5c100c --- /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 5599cc30a3eb472c97bfcc9d6212aacfda387cb6..ed65b10758caec753a7ef2ff70c97e27bd5d1fae 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 231d20114cca10c6e01b669b1c515afc82b53b24..433d6e7563b4315111ac37320443c47552644502 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]));