Merge branch '1-frontend-annonser-model' into 'master'

Issue: Annonser/post model (#1)

Closes #1

See merge request !1

client/src/app/app-routing.module.ts

 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { PostFormComponent } from './posts/post-form/post-form.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  { path: 'postForm', component: PostFormComponent }
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

client/src/app/app.component.spec.ts

@@ -25,11 +25,4 @@ describe('AppComponent', () => {
     const app = fixture.componentInstance;
     expect(app.title).toEqual('client');
   });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement;
-    expect(compiled.querySelector('.content span').textContent).toContain('client app is running!');
-  });
 });

client/src/app/app.component.ts

-import { Component } from '@angular/core';
+import { Component
+ } from '@angular/core';
 
 @Component({
   selector: 'app-root',

client/src/app/app.module.ts

@@ -3,14 +3,16 @@ import { BrowserModule } from '@angular/platform-browser';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { PostModule } from './posts/post.module';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    PostModule
   ],
   providers: [],
   bootstrap: [AppComponent]

client/src/app/models/deserializable.model.ts

+export interface Deserializable {
+    deserialize(input: string): this;
+}
\ No newline at end of file

client/src/app/models/post.model.ts

+import { Deserializable } from "./deserializable.model";
+import { Serializable } from "./serializable.model";
+
+export class Post implements Deserializable, Serializable {
+    private title: string;
+    private description: string;
+    private timestamp: Date;
+    private user: string;
+
+    constructor(input: any = null) {
+        if (input) {
+            this.title = input.title;
+            this.description = input.description;
+            this.timestamp = new Date(input.timestamp);
+            this.user = input.user;
+        } else {
+            this.title = "";
+            this.description = "";
+            this.timestamp = new Date();
+            this.user = "";
+        }
+    }
+
+    deserialize(input: string): this {
+        const obj = JSON.parse(input);
+        Object.assign(this, obj);
+
+        this.timestamp = new Date(this.timestamp);
+
+        return this;
+    }
+
+    serialize(): string {
+        return JSON.stringify({
+            title: this.title,
+            description: this.description,
+            timestamp: this.timestamp.valueOf(),
+            user: this.user
+        });
+    }
+
+    get getTitle () {
+        return this.title;
+    }
+
+    set setTitle (title: string) {
+        this.title = title;
+    }
+
+    get getDescription () {
+        return this.description;
+    }
+
+    set setDescription (description: string) {
+        this.description = description;
+    }
+
+    get getTimestamp () {
+        return this.timestamp;
+    }
+
+    set setTimestamp (timestamp: Date) {
+        this.timestamp = timestamp;
+    }
+
+    get getUser () {
+        return this.user;
+    }
+
+    set setUser (user: string) {
+        this.user = user;
+    }
+}
\ No newline at end of file

client/src/app/models/serializable.model.ts

+export interface Serializable {
+    serialize(): string;
+}
\ No newline at end of file

client/src/app/posts/post-form/post-form.component.html

+<p>Post form!</p>
+
+<p>Title: {{deserializedPost.getTitle}}</p>
+<p>Description: {{deserializedPost.getDescription}}</p>

client/src/app/posts/post-form/post-form.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PostFormComponent } from './post-form.component';
+
+describe('PostFormComponent', () => {
+  let component: PostFormComponent;
+  let fixture: ComponentFixture<PostFormComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PostFormComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PostFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should serialize Post', () => {
+    expect(component.serializedPost == "").toBeFalse();
+
+    try{
+      const obj = JSON.parse(component.serializedPost);
+    }catch{
+      fail("Could not serialize");
+    }
+  })
+
+  it('should deserialize Post', () => {
+    expect(component.deserializedPost.getUser).toEqual("Admin");
+  })
+});

client/src/app/posts/post-form/post-form.component.ts

+import { Component, OnInit } from '@angular/core';
+import { Post } from 'src/app/models/post.model';
+
+@Component({
+  selector: 'app-post-form',
+  templateUrl: './post-form.component.html',
+  styleUrls: ['./post-form.component.scss']
+})
+export class PostFormComponent implements OnInit {
+
+  serializedPost: string = "";
+  deserializedPost: Post = new Post();
+  
+  constructor() { }
+
+  ngOnInit(): void {
+    let post = new Post({
+      title: "TestAnnonse",
+      description: "Beskrivelse",
+      timestamp: 1612952332000,
+      user: "Admin"
+    });
+
+    this.serializedPost = post.serialize();
+    this.deserializedPost.deserialize(post.serialize());
+  }
+}

client/src/app/posts/post.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PostFormComponent } from './post-form/post-form.component';
+
+
+
+@NgModule({
+  declarations: [
+    PostFormComponent
+  ],
+  imports: [
+    CommonModule
+  ]
+})
+export class PostModule { }