Modified challenge create page

src/app/components/challenge-create/challenge-create.component.html

@@ -1,27 +1,56 @@
-<app-header-static>
-</app-header-static>
-<div class="container-top">
-  <div class="create-challenge-container">
-    <div class="create-challenge-title">
-    	Create Challenge
-    </div>
-     <app-forcelogin [path]="'/challenge-create'" *ngIf="!authServicePublic.isLoggedIn()"></app-forcelogin>
-    <div class="card card-light" *ngIf="authServicePublic.isLoggedIn()">
-
-    <div class="create-form">
-        <div class="title">Please upload zip file to create a challenge!</div>
-    	<app-input [isRequired]="true" [label]="'zip_configuration'" [placeholder]="'Upload File *'" [type]="'file'" [theme]="'dark'"  #formcreate></app-input>
-    	<div class="submit-btn-div">
-          <span class="btn btn-filter selected" (click)="formValidate('formcreate')">Submit</span>
+<app-side-bar *ngIf="authService.isAuth"></app-side-bar>
+<app-header-static></app-header-static>
+<div class="web-container" [style.center]="!authService.isAuth">
+  <div class="challenge-create-flex">
+    <div class="challenge-create-content">
+
+      <section class="ev-md-container text-center ">
+        <div class="row">
+          <div class="col s12 m9 offset-m3">
+            <div class="zip-file-title">Please upload zip file to create a challenge!</div>
+            <div class="file-field input-field col s6">
+              <form name="ChallengeCreateForm" #ChallengeCreateForm="ngForm" (ngSubmit)="challengeCreate()" novalidate>
+                <div class="waves-effect waves-dark btn ev-btn-dark w-300 fs-14">
+                  <span>Upload File</span>
+                  <input name="input_file" (change)="handleUpload($event)" accept=".json, .zip, .txt" type="file" class="text-dark-black dark-autofill w-400" [(ngModel)]="ChallengeCreateForm['input_file']">
+                </div>
+
+                <div class="file-path-wrapper">
+                  <input disabled class="file-path validate" name="file_path" type="text">
+                </div>
+
+                <div class="align-left reg-control">
+                  <button class="btn ev-btn-dark waves-effect waves-dark grad-btn grad-btn-dark fs-14" type="submit" value="Submit">Submit</button>
+                </div>
+
+                <div *ngIf="isFormError" class="wrn-msg text-highlight align-right"> Please Upload File </div>
+
+              </form>
+            </div>
+          </div>
         </div>
-    </div>
-    <div>
-          	<i class="fas fa-info-circle"></i>
+        <div class="row">
+          <div class="col s12 m9 offset-m3">
+            <i class="fa fa-info-circle"></i>
             To know how to create a challenge using zip file configuration, please see our documentation
             <a href="https://evalai.readthedocs.io/en/latest/challenge_creation.html#challenge-creation-using-zip-configuration" class="highlight-link" target="_blank">here.</a>.
           </div>
+        </div>
+        <div *ngIf="isSyntaxErrorInYamlFile" class="row">
+          <hr class="hr-line">
+          <div class="col s12 m9 offset-m3">
+            <div class="syntax-wrn-msg text-highlight">
+              The YAML file in the challenge configuration contains the following error - <br>
+              {{syntaxErrorInYamlFile}}
+            </div>
+          </div>
+        </div>
+      </section>
 
     </div>
+    <app-footer [isDash]="true" *ngIf="authService.isAuth"></app-footer>
   </div>
 </div>
-<app-footer></app-footer>
+<div class="clearfix"></div>
+
+<app-footer *ngIf="!authService.isAuth"></app-footer>

src/app/components/challenge-create/challenge-create.component.scss

@@ -1,38 +1,72 @@
-@import './variables.scss';
-@import './mixins.scss';
-
-.create-challenge-container {
-  @include box-shadow(0px, 0px, 5px, 0px, $overlay-light);
-  width:90%;
-  margin: 0 auto;
-  background:$gray-lighter;
-  color:$gray-darker;
-  border-radius:10px;
-  margin-top:50px;
-  margin-bottom:100px;
-  padding:20px;
-  text-align:center;
-  .create-challenge-title {
-    font-size:$fs-24;
-  }
-  .card {
-  	display:inline-block;
-  	padding:30px;
-  	text-align:center;
-    max-width:500px;
+@import "styles/variables";
+
+.challenge-create-flex {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.challenge-create-content {
+  flex: 1;
+  min-height: 100vh;
+}
+
+.web-container {
+  width: calc(100vw - 223px);
+  float: right;
+  padding-top: 70px;
+  overflow-x: hidden;
+  &.center {
+    float: none;
+    margin: 0 auto;
+    text-align: left;
+    overflow: hidden;
   }
-  .create-form {
-  	text-align:left;
-  	display:inline-block;
-  	margin:30px;
-    .title {
-      margin-bottom:10px;
-    }
+}
+
+.zip-file-title {
+  margin-bottom: 20px;
+  margin-left: 11px;
+}
+
+.syntax-wrn-msg {
+  font-size: 1em;
+}
+
+.hr-line {
+  line-height: 1em;
+  position: relative;
+  outline: 0;
+  border: 0;
+  color: black;
+  text-align: center;
+  height: 1.5em;
+  opacity: .5;
+  &:before {
+    content: '';
+    background: linear-gradient(to right, transparent, #818078, transparent);
+    position: absolute;
+    left: 0;
+    top: 50%;
+    width: 100%;
+    height: 1px;
   }
-  .submit-btn-div {
-    .btn {
-      margin-left:0;
-    }
+  &:after {
+    content: '';
+    position: relative;
+    display: inline-block;
+    color: black;
+    padding: 0 .5em;
+    line-height: 1.5em;
+    color: #818078;
+    background-color: #fcfcfa;
   }
+}
 
-}
+/*media queries*/
+
+@media only screen and (max-width: $med-screen) {
+  .web-container {
+    width: 100%;
+  }
+}

src/app/components/challenge-create/challenge-create.component.spec.ts

@@ -13,6 +13,7 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { HttpClientModule } from '@angular/common/http';
 import {Router, Routes} from '@angular/router';
 import {NotFoundComponent} from '../not-found/not-found.component';
+import {FormsModule} from '@angular/forms';
 
 const routes: Routes = [
   {
@@ -39,7 +40,7 @@ describe('ChallengecreateComponent', () => {
     TestBed.configureTestingModule({
       declarations: [ ChallengeCreateComponent, HeaderStaticComponent, FooterComponent, NotFoundComponent ],
       schemas: [ NO_ERRORS_SCHEMA ],
-      imports: [ RouterTestingModule.withRoutes(routes), HttpClientModule ],
+      imports: [ RouterTestingModule.withRoutes(routes), HttpClientModule, FormsModule],
       providers: [ GlobalService, AuthService, ApiService, ChallengeService, EndpointsService ]
     })
     .compileComponents();

src/app/components/challenge-create/challenge-create.component.ts

@@ -1,9 +1,10 @@
-import { Component, OnInit, ViewChildren, QueryList } from '@angular/core';
+import {Component, OnInit, ViewChildren, QueryList, Inject} from '@angular/core';
 import { AuthService } from '../../services/auth.service';
 import { ApiService } from '../../services/api.service';
 import { GlobalService } from '../../services/global.service';
 import { ChallengeService } from '../../services/challenge.service';
 import { Router, ActivatedRoute } from '@angular/router';
+import {DOCUMENT} from '@angular/common';
 
 /**
  * Component Class
@@ -15,6 +16,14 @@ import { Router, ActivatedRoute } from '@angular/router';
 })
 export class ChallengeCreateComponent implements OnInit {
 
+  isFormError = false;
+  isSyntaxErrorInYamlFile = false;
+  ChallengeCreateForm = {
+    input_file: null,
+    file_path: null
+  };
+  syntaxErrorInYamlFile = {};
+
   /**
    * Auth Service public instance
    */
@@ -31,32 +40,33 @@ export class ChallengeCreateComponent implements OnInit {
   routerPublic = null;
 
   /**
-   * Form fields name
+   * Selected Host team object
    */
-  submitForm = 'formcreate';
+  hostTeam: any = null;
 
   /**
-   * Selected Host team object
+   * Route for hosted challenges
    */
-  hostTeam: any = null;
+  hostedChallengesRoute = '/challenges/me';
 
   /**
-   * Component Class
+   * Route path for host teams
    */
-  @ViewChildren('formcreate')
-  components: QueryList<ChallengeCreateComponent>;
+  hostTeamsRoute = '/teams/hosts';
 
   /**
    * Constructor.
    * @param route  ActivatedRoute Injection.
    * @param router  Router Injection.
    * @param authService  AuthService Injection.
+   * @param document
    * @param globalService  GlobalService Injection.
    * @param apiService  ApiService Injection.
    * @param challengeService  ChallengeService Injection.
    */
-  constructor(private authService: AuthService, private router: Router, private route: ActivatedRoute,
-              private challengeService: ChallengeService, private globalService: GlobalService, private apiService: ApiService) { }
+  constructor(public authService: AuthService, private router: Router, private route: ActivatedRoute,
+              private challengeService: ChallengeService, @Inject(DOCUMENT) private document,
+              private globalService: GlobalService, private apiService: ApiService) { }
 
   /**
    * Component on initialized.
@@ -73,33 +83,51 @@ export class ChallengeCreateComponent implements OnInit {
         setTimeout(() => {
           this.globalService.showToast('info', 'Please select a host team');
         }, 1000);
-        this.router.navigate(['/teams/hosts']);
+        this.router.navigate([this.hostTeamsRoute]);
       }
     });
   }
 
-  /**
-   * Form Validate function.
-   */
-  formValidate(formname) {
-    this.globalService.formValidate(this.components, this.formSubmit, this);
+  challengeCreate() {
+    if (this.ChallengeCreateForm['input_file'] !== null) {
+      const FORM_DATA: FormData = new FormData();
+      FORM_DATA.append('status', 'submitting');
+      FORM_DATA.append('zip_configuration', this.ChallengeCreateForm['input_file']);
+      this.globalService.startLoader('Creating Challenge');
+      this.challengeService.challengeCreate(
+        this.hostTeam['id'],
+        FORM_DATA,
+      ).subscribe(
+        data => {
+          this.globalService.stopLoader();
+          this.globalService.showToast('success', 'Successfuly sent to EvalAI admin for approval.');
+          this.router.navigate([this.hostedChallengesRoute]);
+        },
+        err => {
+          this.globalService.stopLoader();
+          this.globalService.showToast('error', err.error.error);
+          this.isSyntaxErrorInYamlFile = true;
+          this.syntaxErrorInYamlFile = err.error.error;
+        },
+        () => {}
+        );
+    } else {
+      this.isFormError = true;
+      this.globalService.showToast('error', 'Please Upload File');
+    }
   }
 
-  /**
-   * Form Submit function (Called after validation).
-   */
-  formSubmit(self) {
-    const FORM_DATA: FormData = new FormData();
-    FORM_DATA.append('status', 'submitting');
-    FORM_DATA.append('zip_configuration', self.globalService.formItemForLabel(self.components, 'zip_configuration').fileSelected);
-    const SUCCESS_CALLBACK = () => {
-      self.router.navigate(['/challenges/me']);
-    };
-    self.challengeService.challengeCreate(
-      self.hostTeam['id'],
-      FORM_DATA,
-      SUCCESS_CALLBACK
-    );
+  handleUpload(event) {
+    const files = event.target.files;
+
+    if (files.length >= 1) {
+      this.isFormError = false;
+      this.ChallengeCreateForm['input_file'] = event.target.files[0];
+      this.ChallengeCreateForm['file_path'] = event.target.files[0]['name'];
+      this.document.getElementsByClassName('file-path')[0].value = event.target.files[0]['name'];
+    } else {
+      this.isFormError = true;
+    }
   }
 
 }

src/app/services/challenge.service.ts

@@ -352,18 +352,7 @@ export class ChallengeService {
    */
   challengeCreate(hostTeam, formData, callback = () => {}) {
     const API_PATH = this.endpointsService.challengeCreateURL(hostTeam);
-    const SELF = this;
-    this.apiService.postFileUrl(API_PATH, formData).subscribe(
-      data => {
-        SELF.globalService.showToast('success', 'Successfuly sent to EvalAI admin for approval.');
-        callback();
-      },
-      err => {
-        SELF.globalService.showToast('error', err.error);
-      },
-      () => {
-        console.log('Challenge Creation Zip Uploaded');
-    });
+    return  this.apiService.postFileUrl(API_PATH, formData);
   }