src/app/home/home.component.ts
selector | app-home |
styleUrls | ./home.component.scss |
templateUrl | ./home.component.html |
Properties |
Methods |
constructor(dataService: ApiService, questionService: QuestionService)
|
|||||||||
Defined in src/app/home/home.component.ts:32
|
|||||||||
Parameters :
|
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
|
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
}