files list

src/app/home/home.component.html

-<div id="count">{{problems.length}} problems available!</div>
+<div class="head">
+  <div id="count">{{problems.length}} problems available!</div>
+  <button (click) = "openForm()">Post a Problem</button>
+</div>
+
+<div class="loginPopup">
+  <div class="formPopup" id="popupForm">
+    <form class="formContainer" (ngSubmit) = "submitForm()">
+
+      <input type="text" id="title" placeholder="Problem Title" name="title" [(ngModel)]="questiontoPost.title" required>
+      <textarea id="statement" placeholder="Problem Statement" rows="8" cols="80" required></textarea>
+      <textarea id="tc1_i" cols="30" rows="8" placeholder="Testcase1 Input" style="margin-right: 20px;"></textarea>
+      <textarea id="tc2_i" cols="30" rows="8" placeholder="Testcase2 Input" style="margin-left: 20px;"></textarea>
+      <textarea id="tc1_o" cols="30" rows="4" placeholder="Testcase1 Output" style="margin-right: 20px;"></textarea>
+      <textarea id="tc2_o" cols="30" rows="4" placeholder="Testcase2 Output" style="margin-left: 20px;"></textarea>
+
+      <input type="datetime-local" id="start_time">
+      <input type="datetime-local" id="end_time">
+      
+      <button type="submit" class="btn" (click) = "submitForm()">Submit</button>
+      <button type="button" class="btn cancel" (click) ="closeForm()">Close</button>
+    </form>
+  </div>
+</div>
 
 <div *ngFor="let problem of problems" class="card">
   <div class="title">{{problem.title}}</div>

src/app/home/home.component.scss

@@ -23,3 +23,68 @@
   margin: 20px;
   font-size: 1.5em;
 }
+
+.head {
+  display: block;
+  text-align: center;
+  justify-content: space-around;
+
+  button {
+    font-size: 1.2rem;
+  }
+}
+
+.loginPopup {
+  position: relative;
+  text-align: center;
+  width: 100%;
+}
+
+.formPopup {
+  display: none;
+  position: fixed;
+  left: 50%;
+  top: 5%;
+  transform: translate(-50%, 5%);
+  z-index: 9;
+  background-color: var(--gc2);
+}
+
+.formContainer {
+  max-width: 800px;
+  padding: 20px;
+  text-align: center;
+
+  textarea {
+    display: inline-block;
+    border: none;
+    border-radius: 20px;
+    margin: 5px 0 20px 0;
+    padding: 5px 20px 5px 20px;
+  }
+}
+
+.formContainer input {
+  display: inline-block;
+  width: 80%;
+  height: 25px;
+  background-color: aliceblue;
+  border: none;
+  border-radius: 20px;
+  margin: 5px 0 20px 0;
+  padding: 5px 20px 5px 20px;
+}
+
+.formContainer .btn {
+  padding: 12px 20px;
+  border: none;
+  cursor: pointer;
+  width: 100%;
+  margin-bottom: 15px;
+  opacity: 0.8;
+}
+
+.formContainer .btn:hover,
+.openButton:hover {
+  opacity: 1
+}

src/app/home/home.component.ts

@@ -3,6 +3,8 @@ import {ProblemService} from '../problem.service';
 import { ApiService } from '../api.service';
 import {Problem} from '../problem';
 import { User } from '../user';
+import { Question } from '../question';
+import { QuestionService } from '../question.service';
 
 @Component({
   selector: 'app-home',
@@ -13,14 +15,26 @@ export class HomeComponent implements OnInit {
 
   user: User;
   problems: Problem[];
+  questiontoPost: Question = {
+    title: "",
+    username: "",
+    statement: "",
+    tc1_inp: "",
+    tc1_out: "",
+    tc2_inp: "",
+    tc2_out: "",
+    start_time: "",
+    end_time: ""
+  };
 
   constructor(private dataService: ApiService,
-    private problemService: ProblemService) {
+    private problemService: ProblemService,
+    private questionService: QuestionService) {
   }
 
   ngOnInit(): void {
     this.user = JSON.parse(this.dataService.getToken());
-    console.log(this.user);
+    this.questiontoPost.username = this.user.username;
     this.getProblems();
   }
 
@@ -29,4 +43,32 @@ export class HomeComponent implements OnInit {
       .subscribe(problems => this.problems = problems);
   }
 
+  openForm(): void {
+    document.getElementById("popupForm").style.display = "block";
+  }
+  
+  closeForm(): void {
+    document.getElementById("popupForm").style.display = "none";
+  }
+
+  resetForm(): void {
+    this.questiontoPost = {
+      title: "",
+      username: this.user.username,
+      statement: "",
+      tc1_inp: "",
+      tc1_out: "",
+      tc2_inp: "",
+      tc2_out: "",
+      start_time: "",
+      end_time: ""
+    };
+  }
+
+  submitForm(): void {
+
+    this.questionService.uploadQues(this.questiontoPost);
+    this.resetForm();
+    this.closeForm();
+  }
 }

src/app/question.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { QuestionService } from './question.service';
+
+describe('QuestionService', () => {
+  let service: QuestionService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(QuestionService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/question.service.ts

+import {EventEmitter, Injectable, Output} from '@angular/core';
+import {map} from 'rxjs/operators';
+import {HttpClient} from '@angular/common/http';
+import {Observable} from 'rxjs';
+import { Question } from './question';
+
+@Injectable({
+  providedIn: 'root'
+})
+
+export class QuestionService {
+
+  uploadUrl = "http://localhost/sfcode/backend/questions/question_save.php/";
+  getUrl = "http://localhost/sfcode/backend/questions/get_questions.php/";
+
+  constructor(private http: HttpClient) { }
+
+  uploadQues(ques: Question): void {
+    this.http.post(this.uploadUrl, ques);
+  }
+
+  getQues(): Observable<Question[]> {
+    return this.http.get<Question[]>(this.getUrl);
+  }
+
+}

src/app/question.ts

+export interface Question {
+    title: string;
+    username: string;
+    statement: string;
+    tc1_inp: string;
+    tc1_out: string;
+    tc2_inp: string;
+    tc2_out: string;
+    start_time: string;
+    end_time: string;
+}
\ No newline at end of file