Issue: Basic form for post (#3)

Co-authored-by: Hanna Pelsholen Busterud <hannapb@ntnu.no>

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

@@ -8,22 +8,28 @@ export class Post implements Deserializable, Serializable {
     private timestamp: Date;
     private owner: string;
     private imageUrl: string;
+    private price: number;
+    private categoryid: number;
 
     constructor(input: any = null) {
         if (input) {
             this.id = input.id;
             this.title = input.title;
             this.description = input.description;
-            this.timestamp = new Date(input.timestamp);
+            this.timestamp = input.timestamp;
             this.owner = input.owner;
             this.imageUrl = input.imageUrl;
+            this.price = input.price;
+            this.categoryid = input.categoryid;
         } else {
             this.id = 0;
-            this.title = "";
-            this.description = "";
+            this.title = null;
+            this.description = null;
             this.timestamp = new Date();
-            this.owner = "";
-            this.imageUrl = "";
+            this.owner = null;
+            this.imageUrl = null;
+            this.price = null;
+            this.categoryid = null;
         }
     }
 
@@ -42,55 +48,73 @@ export class Post implements Deserializable, Serializable {
             description: this.description,
             timestamp: this.timestamp.valueOf(),
             owner: this.owner,
-            imageUrl: this.imageUrl
+            imageUrl: this.imageUrl,
+            price: this.price,
+            categoryid: this.categoryid
         };
     }
 
-    get getId () {
+    get getId() {
         return this.id;
     }
 
-    set setId (id: number) {
+    set setId(id: number) {
         this.id = id;
     }
 
-    get getTitle () {
+    get getTitle() {
         return this.title;
     }
 
-    set setTitle (title: string) {
+    set setTitle(title: string) {
         this.title = title;
     }
 
-    get getDescription () {
+    get getDescription() {
         return this.description;
     }
 
-    set setDescription (description: string) {
+    set setDescription(description: string) {
         this.description = description;
     }
 
-    get getTimestamp () {
+    get getTimestamp() {
         return this.timestamp;
     }
 
-    set setTimestamp (timestamp: Date) {
+    set setTimestamp(timestamp: Date) {
         this.timestamp = timestamp;
     }
 
-    get getOwner () {
+    get getOwner() {
         return this.owner;
     }
 
-    set setOwner (owner: string) {
+    set setOwner(owner: string) {
         this.owner = owner;
     }
 
-    get getImageUrl () {
+    get getImageUrl() {
         return this.imageUrl;
     }
 
-    set setImageUrl (imageUrl: string) {
+    set setImageUrl(imageUrl: string) {
         this.imageUrl = imageUrl;
     }
+
+    get getPrice() {
+        return this.price;
+    }
+
+    set setPrice(price: number) {
+        this.price = price;
+    }
+
+    get getCategory() {
+        return this.categoryid;
+    }
+
+    set setCategory(categoryid: number) {
+        this.categoryid = categoryid;
+    }
 }
\ No newline at end of file

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

-<p>Post from DB:</p>
+<h3>Lag annonse</h3>
 
-<p>Title: {{displayPost.getTitle}}</p>
-<p>Description: {{displayPost.getDescription}}</p>
-<p>Timestamp: {{displayPost.getTimestamp}}</p>
-<p>Owner: {{displayPost.getOwner}}</p>
+<label for="title">Title</label>
+<input id="title" [(ngModel)]="title">
 
-<app-text-input></app-text-input>
+<label for="description">Description</label>
\ No newline at end of file
+
+<input id="description" [(ngModel)]="description">
+
+<label for="price">Pris</label>
+<input id="price" [(ngModel)]="price">
+
+<label for="category">Kategori</label>
+<select id="category" [(ngModel)]="categoryid">
+    <option value="1">Antikviteter og Kunst</option>
+    <option value="2">Dyr og Utstyr</option>
+    <option value="3">Elektronikk og Hvitevarer</option>
+</select>
+
+<button (click)="publishPost()">Publiser</button>
\ No newline at end of file

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

@@ -9,30 +9,33 @@ import { PostService } from '../post.service';
 })
 export class PostFormComponent implements OnInit {
 
-  serializedPost: Object = {};
-  deserializedPost: Post = new Post();
-  displayPost: Post = new Post();
-  
+  title: string = "";
+  description: string = "";
+  price: number = 0;
+  categoryid: number;
+
   constructor(private postService: PostService) { }
 
   ngOnInit(): void {
-    let post = new Post({
-      id: 0,
-      title: "TestAnnonse",
-      description: "Beskrivelse",
-      timestamp: 1612952332000,
-      owner: "Admin",
-      imageUrl: "url"
-    });
 
-    this.serializedPost = post.serialize();
-    this.deserializedPost.deserialize(post.serialize());
+  }
 
-    this.postService.getPost(1)
-    .then((gettedPost: Post) => {
-      this.displayPost = gettedPost;
-    }).catch((err: any) => {
-      console.log(err);
+  publishPost() {
+    let newPost = new Post({
+      title: this.title,
+      description: this.description,
+      timestamp: new Date(),
+      owner: "admin",
+      imageUrl: "",
+      price: this.price,
+      categoryid: this.categoryid
+    });
+    console.log(newPost);
+    this.postService.addPost(newPost).then(status => {
+      // Flytte til annonsevisning
+      console.log("Post was added: " + status);
+    }).catch(error => {
+      console.log("Error adding post: " + error);
     });
   }
-}
+}
\ No newline at end of file

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

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { PostFormComponent } from './post-form/post-form.component';
 import { SharedModule } from '../shared/shared.module';
+import { FormsModule } from '@angular/forms';
 
 
 
@@ -11,7 +12,9 @@ import { SharedModule } from '../shared/shared.module';
   ],
   imports: [
     CommonModule,
-    SharedModule
+    SharedModule,
+    FormsModule
   ]
 })
+
 export class PostModule { }

client/src/app/posts/post.service.spec.ts

@@ -17,3 +17,4 @@ describe('PostService', () => {
     expect(service).toBeTruthy();
   });
 });
+

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

@@ -19,12 +19,16 @@ export class PostService {
             const post = new Post();
             post.deserialize(data.data[0]);
             if (post.getId == 0) {
-              reject("Could not find with Post with id: " + id);
+              reject("Could not find Post with id: " + id);
             }
             resolve(post);
           } catch (err: any) {
             reject(err);
           }
+        },
+        (err: any) => {
+          console.log(err.message);
+          reject(err);
         });
       }
     );
@@ -34,15 +38,20 @@ export class PostService {
     return this.http.get(this.postUrl + id);
   }
 
-  addPost(post: Post): Promise<boolean> {
-    return new Promise<boolean>(
+  addPost(post: Post): Promise<string> {
+    return new Promise<string>(
       (resolve, reject) => {
         this.add_post(post).subscribe((data: any) => {
           try {
+            console.log(data);
             resolve(data.status);
           } catch (err: any) {
             reject(err);
           }
+        },
+        (err: any) => {
+          console.log(err.message);
+          reject(err);
         });
       }
     );

client/src/app/shared/text-input/text-input.component.html

+<label for="textField">{{label}}</label>
 <input type="text" id="textField">
\ No newline at end of file

client/src/app/shared/text-input/text-input.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit, Output } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
 
 @Component({
   selector: 'app-text-input',
   templateUrl: './text-input.component.html',
   styleUrls: ['./text-input.component.scss']
 })
-export class TextInputComponent implements OnInit {
+export class TextInputComponent {
+  
+  @Input()
+  label: string = "";
 
   constructor() { }
 
-  ngOnInit(): void {
-  }
-
 }

client/tsconfig.json

@@ -5,7 +5,7 @@
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,
-    "strict": true,
+    "strict": false,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "sourceMap": true,

server/src/controllers/postController.ts

@@ -8,25 +8,25 @@ interface IPost {
 	description: string;
 	timestamp: number;
 	owner: string;
-	category: string;
+	categoryid: number;
 	imageUrl: string;
 }
 /* ============================= CREATE ============================= */
 // Create posts `/api/post/`
 //'{"title":"test3","description":"test3","timestamp":123123,"owner":"test3","category":"test3","imageUrl":"test3"}'
 router.route('/').post(async (request: Request, response: Response) => {
-	const {title, description, timestamp, owner, category, imageUrl} = request.body;
+	const {title, description, timestamp, owner, categoryid, imageUrl} = request.body;
 	try {
 		const post: IPost = {
 			"title": title,
 			"description": description,
 			"timestamp": timestamp,
 			"owner": owner,
-			"category": category,
+			"categoryid": categoryid,
 			"imageUrl": imageUrl
 		};
 		if (Object.values(post).filter(p => p == undefined).length > 0) return response.status(500).send("Error");
-		const input = (`INSERT INTO post(title, description, timestamp, owner, category, imageUrl) VALUES (?,?,?,?,?,?)`)
+		const input = (`INSERT INTO post(title, description, timestamp, owner, categoryid, imageUrl) VALUES (?,?,?,?,?,?)`)
 		return response.status(200).json(
 			await query(input,Object.values(post))
 		);