questions added to arena

src/app/app-routing.module.ts

@@ -11,6 +11,7 @@ import {FileComponent} from './file/file.component';
 
 const routes: Routes = [
   {path: 'home', component: HomeComponent, canActivate: [AuthGuard]},
+  {path: 'arena/question/:title', component: ArenaComponent, canActivate: [AuthGuard]},
   {path: 'arena/problem/:id', component: ArenaComponent, canActivate: [AuthGuard]},
   {path: 'arena/file/:id', component: IdeComponent, canActivate: [AuthGuard]},
   {path: 'arena/file/new', component: IdeComponent, canActivate: [AuthGuard]},

src/app/arena/arena.component.html

 <div class="container">
-  <div [innerHTML]="problem.problem_statement" class="card" id="ps">
+  <div class="card" id="ps">
+    <h3 [innerHTML]="question.title"></h3>
+    <div [innerHTML]="question.statement"></div>
   </div>
   <div id="toggle-lang">C++</div>
   <div id="attempt">
@@ -11,4 +13,4 @@
   <textarea id="editor" name="editor"></textarea>
 </div>
 <app-input (valueEmit)="customInput = $event"></app-input>
-<app-submit-try-code [problem]="problem"></app-submit-try-code>
+<!-- <app-submit-try-code [problem]="problem"></app-submit-try-code> -->

src/app/arena/arena.component.ts

 import {Component, OnInit, ViewChild} from '@angular/core';
 import {Router} from '@angular/router';
-import {Problem} from '../problem';
-import {ProblemService} from '../problem.service';
+
+// import {Problem} from '../problem';
+// import {ProblemService} from '../problem.service';
+
 import {ApiService} from '../api.service';
 import {InputComponent} from '../input/input.component';
 import {SubmitTryCodeComponent} from '../submit-try-code/submit-try-code.component';
 import {RunCodeService} from '../run-code.service';
+import { Question } from '../question';
+import { QuestionService } from '../question.service';
 
 declare const CodeMirror: any;
 
@@ -16,8 +20,20 @@ declare const CodeMirror: any;
 })
 export class ArenaComponent implements OnInit {
 
-  id: number;
-  problem: Problem;
+  title: string;
+  question: Question;
+  code: string[] = [`#include <iostream>
+  using namespace std;
+  
+  int main() {
+    cout << "Hello World!\\n";
+    return 0;
+  }`, `print("Hello World!")`, `class HelloWorld {
+      public static void main(String[] args) {
+          System.out.println("Hello, World!");
+      }
+  }`];
+
   customInput = '';
   compilationError = false;
   isCompiling = false;
@@ -25,13 +41,16 @@ export class ArenaComponent implements OnInit {
   @ViewChild(InputComponent) inputField: InputComponent;
   @ViewChild(SubmitTryCodeComponent) submitField: SubmitTryCodeComponent;
 
-  constructor(public router: Router, private problemService: ProblemService, private apiService: ApiService,
-              private runCodeService: RunCodeService) {
+  constructor(public router: Router, private apiService: ApiService,
+              private runCodeService: RunCodeService,
+              private questionService: QuestionService) {
   }
 
   ngOnInit(): void {
-    this.id = parseInt(this.router.url.split('/')[3], 10);
-    this.getProblem();
+    
+    this.title = this.router.url.split('/')[3];
+    this.getQuestion();
+
     const editorArea = document.getElementById('editor');
     const editor = CodeMirror.fromTextArea(editorArea as HTMLTextAreaElement, {
       lineNumbers: true,
@@ -40,8 +59,9 @@ export class ArenaComponent implements OnInit {
       autoCloseBrackets: true,
       matchBrackets: true
     });
+
     editor.setSize('auto', '70vh');
-    editor.setValue(this.problem.code[0]);
+    editor.setValue(this.code[0]);
     Object.assign((document.getElementsByClassName('CodeMirror')[0] as HTMLTextAreaElement).style, {
       borderBottom: '1px solid #ddf',
       padding: '20px',
@@ -53,33 +73,44 @@ export class ArenaComponent implements OnInit {
     const extensions = ['.cpp', '.py', '.java'];
     const langsMime = ['text/x-c++src', 'text/x-python', 'text/x-java'];
 
-    const problem = this.problem;
+    const question = this.question;
+    const code: string[] = [`#include <iostream>
+  using namespace std;
+  
+  int main() {
+    cout << "Hello World!\\n";
+    return 0;
+  }`, `print("Hello World!")`, `class HelloWorld {
+      public static void main(String[] args) {
+          System.out.println("Hello, World!");
+      }
+  }`];
 
     document.getElementById('toggle-lang').onclick = function(): void {
       const th = this as HTMLDivElement;
       activeLang = (activeLang + 1) % 3;
       th.innerHTML = langs[activeLang];
-      editor.setValue(problem.code[activeLang]);
+      editor.setValue(code[activeLang]);
       editor.setOption('mode', langsMime[activeLang]);
     };
 
     editor.on('update', () => {
-      this.problem.code[activeLang] = editor.getValue();
+      this.code[activeLang] = editor.getValue();
     });
 
   }
 
-  getProblem(): void {
-    this.problemService.getProblems()
-      .subscribe(problems => {
-        this.problem = problems.find(i => i.id === this.id);
-      });
-  }
+  // getProblem(): void {
+  //   this.problemService.getProblems()
+  //     .subscribe(problems => {
+  //       this.problem = problems.find(i => i.id === this.id);
+  //     });
+  // }
 
   tryCode(c): void {
     if (document.getElementById('try').classList.contains('disabled')) {return; }
     this.isCompiling = true;
-    this.runCodeService.compileProblemFile(this.problem)
+    this.runCodeService.compileQuestionFile(this.question, this.code)
       .subscribe(data => {
         this.submitField.submitting = c;
         this.submitField.reset();
@@ -94,4 +125,11 @@ export class ArenaComponent implements OnInit {
       });
   }
 
+  getQuestion(): void {
+    this.questionService.getQues()
+      .subscribe(questions => {
+        this.question = questions.find(i => i.title === this.title)
+      });
+  }
+
 }

src/app/home/home.component.html

 <div class="head">
-  <div id="count">{{problems.length}} problems available!</div>
+  <div id="count">{{ques_final.length}} questions available right now!</div>
   <button (click) = "openForm()">Post a Problem</button>
 </div>
 
@@ -23,12 +23,18 @@
   </div>
 </div>
 
-<div *ngFor="let problem of problems" class="card">
-  <div class="title">{{problem.title}}</div>
-  <div class="details">{{problem.details}}</div>
-  <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
+<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>
+      yet</span></span> -->
 </div>

src/app/run-code.service.ts

 import {Injectable} from '@angular/core';
 import {Problem} from './problem';
+import {Question} from './question';
 import {File} from './file';
 import {Observable, of, throwError} from 'rxjs';
 import {HttpClient} from '@angular/common/http';
@@ -27,12 +28,17 @@ export class RunCodeService {
     });
   }
 
-  compileProblemFile(prob: Problem): Observable<any> {
-    if (Math.floor(Math.random() * 2) === 1) {return of('done'); }
-    else {return throwError('error'); }
-  }
+  // compileProblemFile(prob: Problem): Observable<any> {
+  //   if (Math.floor(Math.random() * 2) === 1) {return of('done'); }
+  //   else {return throwError('error'); }
+  // }
 
   tryTestcase(prob: Problem, index: number): Observable<boolean> {
     return of(Math.floor(Math.random() * 2) === 1);
   }
+
+  compileQuestionFile(ques: Question, code: string[]): Observable<any> {
+    if (Math.floor(Math.random() * 2) === 1) {return of('done'); }
+    else {return throwError('error'); }
+  }
 }