contest page working

Author: iamsaquib8

codecamp-front/src/app/app-routing.module.ts

@@ -14,6 +14,8 @@ import { ContestComponent } from './components/contest/contest.component';
 import { AboutComponent } from './components/about/about.component';
 import { IdeComponent } from './components/ide/ide.component';
 import { ProblemsComponent } from './components/problems/problems.component';
+import { AddContestComponent } from './components/add-contest/add-contest.component';
+import { EditContestComponent } from './components/edit-contest/edit-contest.component';
 
 
 
@@ -27,7 +29,9 @@ const appRoutes: Routes = [
     {path: 'discuss' , component: DiscussComponent},
     {path: 'profile' , component: ProfileComponent},
     {path: 'ide', component: IdeComponent},
-    {path: 'problems/:problem', component: ProblemsComponent}
+    {path: 'problems/:problem', component: ProblemsComponent},
+    {path: 'contest/add-contest', component: AddContestComponent},
+    {path: 'contest/edit-contest', component: EditContestComponent}
 ];
 
 @NgModule({

codecamp-front/src/app/app.module.ts

@@ -20,6 +20,11 @@ import { AuthService } from './services/auth.service';
 import { HttpModule } from '@angular/http';
 import { IdeComponent } from './components/ide/ide.component';
 import { ProblemsComponent } from './components/problems/problems.component';
+import { AddContestComponent } from './components/add-contest/add-contest.component';
+import { EditContestComponent } from './components/edit-contest/edit-contest.component';
+import { SubmissionComponent } from './components/submission/submission.component';
+import { RanklistComponent } from './components/ranklist/ranklist.component';
+import { SolutionComponent } from './components/solution/solution.component';
 
 
 @NgModule({
@@ -35,7 +40,12 @@ import { ProblemsComponent } from './components/problems/problems.component';
     ContestComponent,
     AboutComponent,
     IdeComponent,
-    ProblemsComponent
+    ProblemsComponent,
+    AddContestComponent,
+    EditContestComponent,
+    SubmissionComponent,
+    RanklistComponent,
+    SolutionComponent
   ],
   imports: [
     BrowserModule,

codecamp-front/src/app/components/add-contest/add-contest.component.css

@@ -0,0 +1,69 @@
+<div class="container">
+  <div class="row">
+    <div class="col-md-12">
+    <div class="display-4">Add Contest</div>
+    <form [formGroup]="form" (submit)="onAddContestSubmit()">
+      <div class="form-group">  
+        <label for="name">Contest Name</label>
+        <input type="text" 
+        name="name" 
+        formControlName="name" 
+        class="form-control" 
+        placeholder="Enter Name" 
+        autocomplete="off"
+        [ngClass]="{'is-invalid': (form.controls.name.errors && form.controls.name.dirty) , 'is-valid': !form.controls.name.errors}">
+      </div>
+  
+      <div class="form-group">
+        <label for="id">Contest ID</label>
+        <input type="text"
+         name="id" 
+         formControlName="id" 
+         class="form-control" 
+         placeholder="Enter contest ID" 
+         autocomplete="off"
+         [ngClass]="{'is-invalid': (form.controls.id.errors && form.controls.id.dirty) , 'is-valid': !form.controls.id.errors}">
+      </div>
+      <div class="row">
+        <div class="col-md-6">
+          <div class="form-group">
+            <label for="startDate">Start Time</label>
+            <input type="datetime-local" 
+            name="startdate" 
+            formControlName="startdate" 
+            class="form-control" 
+            placeholder="Start Time" 
+            autocomplete="off"
+            [ngClass]="{'is-invalid': (form.controls.startdate.errors && form.controls.startdate.dirty) , 'is-valid': !form.controls.startdate.errors}">
+          </div>
+          </div>
+          <div class="col-md-6">
+          <div class="form-group">
+              <label for="EndDate">End Time</label>
+              <input type="datetime-local" 
+              name="enddate" 
+              formControlName="enddate" 
+              class="form-control" 
+              placeholder="End Time" 
+              autocomplete="off"
+              [ngClass]="{'is-invalid': (form.controls.enddate.errors && form.controls.enddate.dirty) , 'is-valid': !form.controls.enddate.errors}">
+            </div>
+          </div>
+        </div>
+      
+      <div class="form-group">
+        <label for="city">Description</label>
+        <textarea 
+        name="description" 
+        formControlName="description" 
+        class="form-control" placeholder="Enter Description" autocomplete="off" rows="10"> 
+        </textarea>
+      </div>
+      
+      <input 
+      [disabled]="!form.valid "
+      type="submit" class="btn btn-primary" value="Add Contest">
+    </form>
+  </div>
+  </div>
+</div>

codecamp-front/src/app/components/add-contest/add-contest.component.html

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddContestComponent } from './add-contest.component';
+
+describe('AddContestComponent', () => {
+  let component: AddContestComponent;
+  let fixture: ComponentFixture<AddContestComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AddContestComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddContestComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

codecamp-front/src/app/components/add-contest/add-contest.component.spec.ts

@@ -0,0 +1,37 @@
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { AuthService } from '../../services/auth.service';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-add-contest',
+  templateUrl: './add-contest.component.html',
+  styleUrls: ['./add-contest.component.css']
+})
+export class AddContestComponent implements OnInit {
+
+  form: FormGroup;
+
+  constructor(
+    private authService: AuthService,
+    private router: Router,
+    private formBuilder: FormBuilder
+  ) { }
+
+  ngOnInit() {
+    this.createForm();
+  }
+  createForm() {
+    this.form = this.formBuilder.group({
+      name: ['', Validators.required],
+      id: ['', Validators.required],
+      startdate: ['', Validators.required],
+      enddate: ['', Validators.required],
+      description: ['', Validators.required]
+    });
+  }
+
+  onAddContestSubmit() {
+    
+  }
+}

codecamp-front/src/app/components/add-contest/add-contest.component.ts

@@ -1,7 +1,8 @@
-<div class="container">
+<div class="container" *ngIf="authService.checkisAdmin() === true" >
   <div class="row">
     <div class="col-md-12">
-      <button class="btn btn-warning" *ngIf="authService.checkisAdmin() === true">Add Contest</button>
+      <button class="btn btn-warning" (click)="onAddContest()">Add Contest</button>
+      <button class="btn btn-info" (click)="onEditContest()">Edit Contest</button>
     </div>
   </div>
 </div>

codecamp-front/src/app/components/contest/contest.component.html

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { AuthService } from '../../services/auth.service';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-contest',
@@ -8,11 +9,20 @@ import { AuthService } from '../../services/auth.service';
 })
 export class ContestComponent implements OnInit {
 
+
   constructor(
-    private authService: AuthService
+    public authService: AuthService,
+    private router: Router
   ) { }
 
   ngOnInit() {
+
   }
 
+  onAddContest() {
+    this.router.navigate(['/contest/add-contest']);
+  }
+  onEditContest() {
+    this.router.navigate(['/contest/edit-contest']);
+  }
 }