File

src/app/home/home.component.ts

Implements

OnInit

Metadata

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

Index

Properties
Methods

Constructor

constructor(dataService: ApiService, questionService: QuestionService)
Parameters :
Name Type Optional
dataService ApiService No
questionService QuestionService No

Methods

closeForm
closeForm()
Returns : void
ngOnInit
ngOnInit()
Returns : void
openForm
openForm()
Returns : void
organizeQues
organizeQues()
Returns : void
resetForm
resetForm()
Returns : void
submitForm
submitForm()
Returns : void

Properties

errorMessage
Type : any
ques_final
Type : Question[]
Default value : []
questions
Type : Question[]
questiontoPost
Type : Question
Default value : { title: "", username: "", statement: "", tc1: "", out1: "", tc2: "", out2: "", stime: "", etime: "" }
user
Type : User
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 ""