### File

`src/app/home/home.component.ts`

### Implements

`OnInit`

### Metadata

selector | `app-home`
styleUrls | `./home.component.scss`
templateUrl | `./home.component.html`

### Index

###### Properties

- errorMessage
- ques_final
- questions
- questiontoPost
- user

###### Methods

- closeForm
- ngOnInit
- openForm
- organizeQues
- resetForm
- submitForm

### Constructor

`constructor(dataService: ApiService, questionService: QuestionService)`
Defined in src/app/home/home.component.ts:32

Parameters :

Name | Type | Optional
dataService | `ApiService` | No
questionService | `QuestionService` | No

### Methods

closeForm
`closeForm()`
Defined in src/app/home/home.component.ts:75
Returns : `void`

ngOnInit
`ngOnInit()`
Defined in src/app/home/home.component.ts:38
Returns : `void`

openForm
`openForm()`
Defined in src/app/home/home.component.ts:71
Returns : `void`

organizeQues
`organizeQues()`
Defined in src/app/home/home.component.ts:53
Returns : `void`

resetForm
`resetForm()`
Defined in src/app/home/home.component.ts:79
Returns : `void`

submitForm
`submitForm()`
Defined in src/app/home/home.component.ts:93
Returns : `void`

### Properties

errorMessage
Type : `any`
Defined in src/app/home/home.component.ts:32

ques_final
Type : `Question[]`
Default value : `[]`
Defined in src/app/home/home.component.ts:31

questions
Type : `Question[]`
Defined in src/app/home/home.component.ts:30

questiontoPost
Type : `Question`
Default value : `{ title: "", username: "", statement: "", tc1: "", out1: "", tc2: "", out2: "", stime: "", etime: "" }`
Defined in src/app/home/home.component.ts:18

user
Type : `User`
Defined in src/app/home/home.component.ts:16

    import {Component, OnInit} from '@angular/core';
    // 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',
      templateUrl: './home.component.html',
      styleUrls: ['./home.component.scss']
    })
    export class HomeComponent implements OnInit {

      user: User;
      // problems: Problem[];
      questiontoPost: Question = {
        title: "",
        username: "",
        statement: "",
        tc1: "",
        out1: "",
        tc2: "",
        out2: "",
        stime: "",
        etime: ""
      };

      questions: Question[];
      ques_final: Question[] = [];
      errorMessage: any;

      constructor(private dataService: ApiService,
        private questionService: QuestionService) {
      }

      ngOnInit(): void {
        this.user = JSON.parse(this.dataService.getToken());
        this.questiontoPost.username = this.user.username;
        // this.getProblems();

        this.questionService.getQues()
          .subscribe(data => {
            this.questions = data;
            // console.log(this.questions);
            this.organizeQues();
          },
          error => this.errorMessage = <any>error
        );
      }

      organizeQues(): void {
        this.questions.forEach(element => {
          let d = new Date();
          let s = new Date(element.stime);
          let e = new Date(element.etime);
          if(s < d && e > d) {
            this.ques_final.push(element);
          }
        });

        // console.log(this.ques_final);
      }

      // getProblems(): void {
      //   this.problemService.getProblems()
      //     .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: "",
          out1: "",
          tc2: "",
          out2: "",
          stime: "",
          etime: ""
        };
      }

      submitForm() {
        this.questiontoPost.stime = this.questiontoPost.stime.split('T').join(' ');
        this.questiontoPost.etime = this.questiontoPost.etime.split('T').join(' ');
        this.questionService.uploadQues(this.questiontoPost).subscribe(
          (event: any) => {
            if (typeof (event) === 'object') {
              this.questiontoPost = null;
              (document.getElementById('quesform') as HTMLInputElement).value = '';
            }
            let s = new Date(this.questiontoPost.stime);
            let d = new Date();
            console.log(d);
            let e = new Date(this.questiontoPost.etime);
            if(s < d && d < e) {
              this.ques_final.push(this.questiontoPost);
            }
            this.resetForm();
            this.closeForm();
          },
          (err) => {
            alert("Question Already exists!");
          }
        );

      }
    }

    <div class="head">
      <div id="count">{{ques_final.length}} questions available right now!</div>
      <button (click) = "openForm()">Post a Problem</button>
    </div>

    <div class="loginPopup">
      <div class="formPopup" id="popupForm">
        <form class="formContainer" id="quesform" (ngSubmit) = "submitForm()">

          <input type="text" id="title" placeholder="Problem Title" name="title" [(ngModel)]="questiontoPost.title" required>
          <textarea id="statement" placeholder="Problem Statement" name="statement" rows="8" cols="80" [(ngModel)]="questiontoPost.statement" required></textarea>
          <textarea id="tc1_i" cols="30" rows="8" name="tc1" placeholder="Testcase1 Input" style="margin-right: 20px;" [(ngModel)]="questiontoPost.tc1"></textarea>
          <textarea id="tc2_i" cols="30" rows="8" name="tc2" placeholder="Testcase2 Input" style="margin-left: 20px;" [(ngModel)]="questiontoPost.tc2"></textarea>
          <textarea id="tc1_o" cols="30" rows="4" name="out1" placeholder="Testcase1 Output" style="margin-right: 20px;" [(ngModel)]="questiontoPost.out1"></textarea>
          <textarea id="tc2_o" cols="30" rows="4" name="out2" placeholder="Testcase2 Output" style="margin-left: 20px;" [(ngModel)]="questiontoPost.out2"></textarea>

          <input type="datetime-local" name="stime" id="start_time" [(ngModel)]="questiontoPost.stime">
          <input type="datetime-local" name="etime" id="end_time" [(ngModel)]="questiontoPost.etime">

          <button type="submit" class="btn" (click) = "submitForm()">Submit</button>
          <button type="button" class="btn cancel" (click) ="closeForm()">Close</button>
        </form>
      </div>
    </div>

    <div style="padding-bottom: 20px;" *ngFor="let question of ques_final" class="card">
      <div class="title">{{question.title}}</div>
      <div style="float: right; padding-bottom: 20px;">Author: {{ question.username }}</div>
      <br>
      <div class="details">{{question.statement | slice:0:300 }} ...</div>
      <div style="float: right;" class="details">Available During: {{question.stime}} - {{question.etime}}</div>

      <button [routerLink]="['/arena/question', question.title]" class="attempt">Attempt</button>

      <!-- <button [routerLink]="['/arena/problem', problem.id]" class="attempt">Attempt</button>  -->
      <!-- <span class="stats"><span *ngIf="problem.n_attempts != 0">{{problem.n_correct}} accepted out of
        {{problem.n_attempts}}
        ({{problem.n_correct / problem.n_attempts * 100}}%)</span><span *ngIf="problem.n_attempts === 0">No attempt
          yet</span></span> -->
    </div>

`./home.component.scss`

    .card {
      margin: 20px 20px;
      border-bottom: 1px solid var(--color);
      padding: 15px;
      background: var(--dark);

      .title {
        padding: 10px 10px;
        font-size: 1.2em;
      }

      .details, .attempt {
        margin: 10px;
      }

      .stats {
        display: inline-block;
        opacity: 0.9;
      }
    }

    #count {
      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
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""