frontend_v2/src/app/components/challenge/challengesubmit/challengesubmit.component.html
<div class="challenge-card">
<div class="ev-card-panel ev-md-container card-bt-margin">
<p *ngIf="!isActive"><strong class="fw-light">Sorry, the challenge is not active.</strong></p>
<div *ngIf="isActive" class="row row-lr-margin">
<div class="col-md-11 col-sm-11 col-xs-10 col-lr-pad">
<h5 class="fw-light">Submission Guidelines</h5>
<div *ngIf="isChallengeHost">
<div class="fw-light">
<p class="fs-16">
<strong>Note: </strong>Your submissions won't be visible on leaderboard for
<strong class="blue-text"> Public Challenge Phases </strong> since you are a challenge host for this
challenge.This feature is only for your testing purposes.
</p>
</div>
</div>
<div [innerHTML]="submissionGuidelines" class="submission-guidelines fw-light fs-16"></div>
</div>
</div>
</div>
<div *ngIf="challenge.is_docker_based" class="ev-md-container ev-card-panel card-bt-margin">
<div class="row row-lr-margin">
<div class="col-lg-12 col-md-12 col-sm-12 col-lr-pad">
<span class="fs-20 fw-light">
Submission instructions for docker image using evalai-cli
</span>
<ol>
<li class="content fs-16 fw-light">
Install evalai-cli<br />
<code #install_evalai>$ pip install evalai{{ cliVersion }}</code>
<button
class="btn ev-btn-dark btn-waves-effect waves-dark grad-btn code-btn"
value="pip install "evalai{{ cliVersion }}""
(click)="copyTextToClipboard(install_evalai)"
>
<i
class="fa fa-clipboard"
aria-hidden="true"
alt="Copy to
clipboard."
></i>
</button>
</li>
<li class="content fs-16 fw-light">
Add your EvalAI account token to evalai-cli<br />
<code #configure_token>$ evalai set_token {{ authToken }}</code>
<button
class="btn ev-btn-dark btn-waves-effect waves-dark grad-btn code-btn"
value="evalai set_token {{ authToken }}"
(click)="copyTextToClipboard(configure_token)"
>
<i
class="fa fa-clipboard"
aria-hidden="true"
alt="Copy to
clipboard."
></i>
</button>
</li>
<li class="content fs-16 fw-light">
Push docker image to EvalAI docker registry<br />
<code #evalai_push>$ evalai push <image>:<tag> --phase <phase_name></code>
<button
class="btn ev-btn-dark btn-waves-effect waves-dark grad-btn code-btn"
value="evalai push <image>:<tag> --phase <phase_name>"
(click)="copyTextToClipboard(evalai_push)"
>
<i class="fa fa-clipboard" aria-hidden="true" alt="Copy to clipboard."> </i>
</button>
</li>
<li class="content fs-16 fw-light">
For more commands, please refer to
<a class="text-highlight" href="https://cli.eval.ai/" target="_blank"
>evalai-cli documentation.</a
>
</li>
</ol>
</div>
</div>
</div>
<!-- If challenge is docker based -->
<div *ngIf="challenge.is_docker_based" class="ev-md-container ev-card-panel">
<span class="fs-20 fw-light"> Submission limits </span><br /><br />
<span class="fs-16 fw-light">
<strong class="content">Team name:</strong>
{{ phaseRemainingSubmissions.participant_team }}
</span>
<table align="center" class="centered responsive-table fs-16 fw-light">
<thead>
<tr>
<th class="content">Phase details</th>
<th class="content">Remaining submissions</th>
<th class="content">Submission command</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let key of phaseRemainingSubmissions.phases">
<td class="content">
{{ key.name }}
<br />
<strong class="text-med-black fw-light">Start date: </strong>{{ key.start_date | date: 'medium' }}
<br />
<strong class="text-med-black fw-light">End date: </strong>{{ key.end_date | date: 'medium' }}
</td>
<td *ngIf="phaseRemainingSubmissionsFlags[key.id] === 'showSubmissionDetails'" class="content">
<strong class="fw-semibold">
Today:
</strong>
{{ key.limits.remaining_submissions_today_count }}<br />
<strong class="fw-semibold">
This month:
</strong>
{{ key.limits.remaining_submissions_this_month_count }}<br />
<strong class="fw-semibold">
Total:
</strong>
{{ key.limits.remaining_submissions_count }}
</td>
<td *ngIf="phaseRemainingSubmissionsFlags[key.id] === 'showClock'" class="content">
<strong class="fw-light">{{ key.limits.message }}</strong
><br />
Next submission will be available in<br />
<div>
<span *ngIf="days != 0">{{ phaseRemainingSubmissionsCountdown[key.id].days }} Days, </span
>{{ phaseRemainingSubmissionsCountdown[key.id].hours }} hours :
{{ phaseRemainingSubmissionsCountdown[key.id].minutes }}
minutes :
{{ phaseRemainingSubmissionsCountdown[key.id].seconds }} seconds
</div>
</td>
<td *ngIf="phaseRemainingSubmissionsFlags[key.id] === 'maxExceeded'" class="content">
<strong>{{ key.limits.message }}</strong
><br />
<strong>
{{ key.limits.maxExceededMessage }}
</strong>
</td>
<td>
<code #submission_command>$ evalai push <image>:<tag> --phase {{ key.slug }}</code>
<button
class="btn ev-btn-dark btn-waves-effect waves-dark grad-btn code-btn"
value="evalai push <image>:<tag> --phase {{ key.slug }}"
(click)="copyTextToClipboard(submission_command)"
>
<i class="fa fa-clipboard" aria-hidden="true" alt="Copy to clipboard."></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- If challenge is not docker based -->
<div *ngIf="!challenge.is_docker_based && isActive" class="ev-md-container ev-card-panel z-depth-5 ev-challenge-view ">
<div class="card-bt-margin ev-panel-title">
<div class="row row-lr-margin">
<div class="col s12">
<h5 class="fw-light">Make Submission</h5>
</div>
</div>
</div>
<div class="row margin-bottom-cancel">
<div class="col-md-7 col-sm-7 col-xs-10">
<div class="exist-team-card">
<ul>
<p class="content fs-18">Select phase:</p>
<app-selectphase
[phases]="filteredPhases"
[phaseSelectionListType]="phaseSelectionListType"
[phaseSelectionType]="phaseSelectionType"
[phaseSelected]="phaseSelected()"
(click)="isPhaseSelected = true"
class="fw-light"
></app-selectphase>
<div [hidden]="!isPhaseSelected" class="row">
<div id="submission_option_style">
<p class="content fs-18">Submission Options:</p>
<span class="submission-option">
<input
type="radio"
name="submissionOptions"
class="with-gap selectPhase"
id="useCli"
(click)="isSubmissionUsingUrl = false;
showForm = false; isSubmissionUsingCli=true;"
/>
<label for="useCli" class="radio-button-text pointer">
<div id="radio_button_url" class="show-member-title pointer">
<strong class="text-med-black fw-light fs-16"> Use CLI (for file size > 400MB) </strong>
</div>
</label>
</span>
<span class="submission-option">
<input type="radio" name="submissionOptions" class="with-gap selectPhase" id="fileUpload"
(click)="isSubmissionUsingUrl = false; showForm = true;" />
<label for="fileUpload" class="radio-button-text pointer">
<div id="radio_button_file" class="show-member-title pointer">
<strong class="text-med-black fw-light fs-16">Upload file </strong>
</div>
</label>
</span>
</div>
</div>
</ul>
</div>
</div>
<div *ngIf="selectedPhaseSubmissions.showSubmissionDetails" class="col-md-5 col-sm-5 col-xs-12">
<div class="ev-card-body exist-team-card ev-remaining-submission remaining-submission-clock">
<div class="row row-lr-margin">
<span class="text-med-black fw-semibold fs-16">Today's remaining Submissions:</span>
<span class="color-black">
<strong class="fw-light fs-16">
{{ selectedPhaseSubmissions.remainingSubmissions.remaining_submissions_today_count }}
</strong>
</span>
</div>
<div class="row row-lr-margin">
<span class="text-med-black fw-semibold fs-16">
Monthly remaining submissions:
</span>
<span class="color-black">
<strong class="fw-light fs-16">
{{ selectedPhaseSubmissions.remainingSubmissions.remaining_submissions_this_month_count }}
</strong>
</span>
</div>
<div class="row row-lr-margin">
<span class="text-med-black fw-semibold fs-16">
Total remaining submissions:
</span>
<span class="color-black">
<strong class="fw-light fs-16">
{{ selectedPhaseSubmissions.remainingSubmissions.remaining_submissions_count }}
</strong>
</span>
</div>
</div>
</div>
<!-- cli instructions-->
<div class="col-md-11 col-sm-11 col-xs-10 col-lr-pad cli-card-container">
<div *ngIf="isSubmissionUsingCli && !showForm">
<p class="content fs-18">Submission instructions</p>
<ol class="numbered-list">
<li class="content fw-light fs-16"> Install evalai-cli<br />
<code #install_evalai>$ pip install evalai{{ cliVersion }}</code>
<button class="btn ev-btn-dark btn-waves-effect waves-dark grad-btn code-btn"
value="pip install "evalai{{ cliVersion }}""
(click)="copyTextToClipboard(install_evalai)">
<i class="fa fa-clipboard" aria-hidden="true" alt="Copy to
clipboard."></i>
</button>
</li>
<li class="cli-code content fw-light fs-16"> Add your EvalAI account token to evalai-cli<br />
<code #set_token> $ evalai set_token {{authToken}}</code>
<button class="btn ev-btn-dark btn-waves-effect waves-dark grad-btn code-btn"
value="evalai set_token {{ authToken }}" (click)="copyTextToClipboard(set_token)">
<i class="fa fa-clipboard" aria-hidden="true" alt="Copy to
clipboard."></i>
</button>
</li>
<li class="content fw-light fs-16"> Make Submission<br />
<code
#make_submission>$ evalai challenge {{challenge.id}} phase {{selectedPhase.id}} submit --file <submission_file_path> --large</code>
<button class="btn ev-btn-dark btn-waves-effect waves-dark grad-btn code-btn"
value="evalai challenge {{challengeId}} phase {{phaseId}} submit --file <submission_file_path> --large"
(click)="copyTextToClipboard(make_submission)">
<i class="fa fa-clipboard" aria-hidden="true" alt="Copy to
clipboard."></i>
</button>
</li>
<li class="content fw-light fs-16">
<div class="center-content">Use <code> --private </code> or <code> --public </code> flag in the submission
command to make the submission private or public respectively.<br />
</div>
</li>
<li class="content fw-light fs-16"> For more commands, please refer to <a class="highlight-link"
href="https://cli.eval.ai/" target="_blank"><strong>evalai-cli documentation.</strong></a>
</li>
</ol>
</div>
</div>
<!--Submission form-->
<div [hidden]="!showForm" class="form col-md-7 col-sm-7 col-xs-10 cli-card-container">
<div class="row row-lr-margin">
<div class="col-md-10 col-sm-10 col-lr-pad submit-upload-file">
<div [hidden]="isSubmissionUsingUrl">
<app-input
(input)="validateInput($event.target.value)"
[label]="'input_file'"
[accept]="'.json, .zip, .txt, .tsv, .gz, .csv, .h5, .npy'"
[placeholder]="''"
[type]="'file'"
[value]="''"
[message]="inputErrorMessage"
#formsubmit
></app-input>
<div class="input-message" #textValue [class.hidden]="validFileUrl">{{ inputErrorMessage }}</div>
</div>
<div [hidden]="!isSubmissionUsingUrl">
<app-input
(input)="validateInput($event.target.value)"
[label]="'file_url'"
[placeholder]="'Submission file URL'"
[type]="'URL'"
[icon]="''"
[value]="''"
[message]="inputErrorMessage"
#formsubmit
></app-input>
</div>
</div>
</div>
<div class="row row-lr-margin" *ngIf="selectedPhase['leaderboard_public']">
<div class="align-left col-sm-10 col-lr-pad">
<p class="fs-14 w-400">Select submission visibility:</p>
<input
type="radio"
name="submissionVisibility"
class="with-gap selectPhase"
id="isPublicSubmission"
(change)="isPublicSubmission = true"
/>
<label for="isPublicSubmission" class="radio-button-text pointer">
<div
class="show-member-title pointer">
<strong class="text-med-black fs-16">Public</strong>
</div>
</label>
<div class="clearfix"></div>
<input type="radio"
name="submissionVisibility"
class="with-gap selectPhase"
id="isPrivateSubmission"
(change)="isPublicSubmission = false"
/>
<label for="isPrivateSubmission" class="radio-button-text pointer">
<div
class="show-member-title pointer">
<strong class="text-med-black fs-16">Private</strong>
</div>
</label>
<div class="clearfix"></div>
</div>
</div>
<div class="row row-lr-margin" *ngIf="isAttributeVisible('method_name')">
<div class="align-left col-sm-10 col-lr-pad">
<div class="input-field align-left">
<app-input
[label]="'method_name'"
[placeholder]="'Method name (Optional)'"
[type]="'text'"
[icon]="''"
[value]="''"
#formsubmit
></app-input>
</div>
</div>
</div>
<div class="row row-lr-margin" *ngIf="isAttributeVisible('method_description')">
<div class="align-left col-sm-10 col-lr-pad">
<app-input
[label]="'method_description'"
[type]="'textarea'"
[placeholder]="'Method description (Optional)'"
#formsubmit
></app-input
><br />
</div>
</div>
<div class="row row-lr-margin" *ngIf="isAttributeVisible('project_url')">
<div class="align-left col-sm-10 col-lr-pad">
<app-input
[label]="'project_url'"
[type]="'URL'"
[placeholder]="'Project URL (Optional)'"
[message]="' '"
#formsubmit
></app-input>
</div>
</div>
<div class="row row-lr-margin" *ngIf="isAttributeVisible('publication_url')">
<div class="align-left col-sm-10 col-lr-pad">
<app-input
[label]="'publication_url'"
[type]="'URL'"
[placeholder]="'Publication URL (Optional)'"
[message]="' '"
#formsubmit
></app-input>
</div>
</div>
<div class="dynamicform" *ngIf="metaAttributesforCurrentSubmission != null">
<div *ngFor="let attribute of metaAttributesforCurrentSubmission">
<div class="row row-lr-margin">
<div *ngIf="attribute.type == 'text'">
<div class="align-left col-sm-10 col-lr-pad">
<app-input
[label]="attribute.name"
[type]="'textattribute'"
[attributeName]="attribute.name"
[attributeDescription]="attribute.description"
[attributeRequired]="attribute.required"
[message]="' '"
#formsubmit
></app-input>
</div>
</div>
<div *ngIf="attribute.type == 'radio'">
<div class="row row-lr-margin">
<div class="align-left col-sm-10 col-lr-pad">
<label for="{{attribute.name}}" class="mat-label-radio" for="{{attribute.name}}">{{attribute.name}} ({{attribute.description}}) </label><span ng-if="attribute.required === true" class="color-orange">*</span>
<br>
<br>
<!-- <div class="input-field"> -->
<mat-radio-group [(ngModel)]="attribute.value" id="{{ attribute.name }}" name="{{ attribute.name }}">
<div *ngFor="let option of attribute.options">
<mat-radio-button class="element" [value]="option">
<label class="fs-16 element">{{ option }}</label>
</mat-radio-button>
<br/>
</div>
</mat-radio-group>
<!-- </div> -->
</div>
</div>
</div>
<div *ngIf="attribute.type == 'checkbox'">
<div class="row row-lr-margin">
<div class="align-left col-sm-10 col-lr-pad">
<label for="{{attribute.name}}" class="mat-label-radio" for="{{attribute.name}}">{{attribute.name}} ({{attribute.description}}) </label><span ng-if="attribute.required === true" class="color-orange">*</span>
<br>
<br>
<div *ngFor="let option of attribute.options">
<mat-checkbox
(change)="toggleSelection(attribute, option)"
id="{{ option }}"
[value]="option"
>
<label class="fs-16 element" for="{{ option }}">{{ option }}</label>
</mat-checkbox>
<br/>
</div>
</div>
</div>
</div>
<div *ngIf="attribute.type == 'boolean'">
<div class="row row-lr-margin">
<div class="align-left col-sm-10 col-lr-pad">
<label for="{{attribute.name}}" class="mat-label-radio" for="{{attribute.name}}">{{attribute.name}} ({{attribute.description}}) </label><span ng-if="attribute.required === true" class="color-orange">*</span>
<br>
<br>
<mat-radio-group [(ngModel)]="attribute.value" name="{{ attribute.name }}">
<mat-radio-button class="element" [value]="'True'"
><label class="fs-16">True</label></mat-radio-button
>
<br />
<mat-radio-button class="element" [value]="'False'"
><label class="fs-16">False</label></mat-radio-button
>
</mat-radio-group>
</div>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="submissionError" class="red-text col-lr-pad">
<strong class="fw-semibold">{{ submissionError }}</strong
><br /><br />
</div>
<div class="pagination">
<div class="row rm-gut row-lr-margin">
<div class="col-sm-12 col-md-12 col-lr-pad">
<div class="align-left">
<button
class="btn btn-waves-effect grad-btn waves-dark ev-btn-dark grad-btn-dark fw-light fs-14"
(click)="formValidate()"
>
Submit
</button>
</div>
<br /><br />
</div>
</div>
</div>
</div>
<div *ngIf="selectedPhaseSubmissions.maxExceeded" class="col-md-5 col-sm-4 col-xs-12">
<div class="ev-submission-card-body exist-team-card ev-remaining-submission remaining-submission-clock">
<div class="row row-lr-margin">
<span class="color-black">
<strong class="fw-light fs-16 red-text">
{{ selectedPhaseSubmissions.maxExceededMessage }}
</strong>
</span>
</div>
</div>
</div>
<div *ngIf="selectedPhaseSubmissions.showClock" class="col-md-5 col-sm-12 col-xs-12">
<div class="ev-card-body exist-team-card ev-remaining-submission remaining-submission-clock">
<div class="row row-lr-margin">
<strong class="fw-regular text-med-black">
Message:
</strong>
{{ selectedPhaseSubmissions.clockMessage.message }}
</div>
<div class="fw-regular">
Next set of submissions will be available after:
</div>
<div>
<span *ngIf="days != 0">{{ days }} Days, </span>{{ hours }} hours : {{ minutes }} minutes :
{{ seconds }} seconds
</div>
</div>
</div>
</div>
</div>
</div>