frontend_v2/src/app/components/challenge/challengesettings/challengesettings.component.html
<div class="challenge-card">
<div class="row">
<div class="ev-pad">
<div class="ev-md-container ev-card-panel">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 content">
<div class="fs-16 fw-light"><strong>Note:</strong> By default, we allocate 0.25 vCPU and 0.5 GB memory
to each challenge evaluation worker. In case your evaluation requires additional resources,
please email us at <a href="mailto:admin@cloudcv.org" class="blue-text">admin@cloudcv.org</a>.</div>
</div>
</div>
</div>
</div>
<div class="bottom-card-container ev-card-panel">
<div class="row">
<div class="col-md-8 col-sm-8">
<h5 class="fw-light">Challenge Settings</h5>
</div>
</div>
<mat-tab-group animationDuration="0ms">
<mat-tab label="Challenge Details">
<ng-template matTabContent>
<!-- Edit Challenge details -->
<div class="row settings-section">
<div class="col-s12 challenge-detail">
<div class="col-lg-4 col-sm-4 upload-container">
<div class="image-container">
<img *ngIf="challenge['image'] != null" [src]="challenge['image']" width="100%" />
<img *ngIf="challenge['image'] == null" src="assets/images/404.png" width="80%" />
</div>
<div
class="btn btn-waves-effect waves-dark grad-btn grad-btn-dark fs-16 upload-button"
(click)="editChallengeImage()"
>
<i class="fa fa-file" aria-hidden="true"> </i>
<span> Upload New Image</span>
</div>
</div>
<div class="col-lg-6 col-md-12 col-sm-7 col-xs-12">
<span class="fs-20 fw-semibold challenge-title">
{{ challenge['title'] }}
</span>
<a
style="padding-right: 4px;"
class="pointer fs-16"
*ngIf="isChallengeHost"
(click)="editChallengeTitle()"
>
<i class="fa fa-pencil" aria-hidden="true"></i>
</a>
<a class="pointer fs-16" *ngIf="isChallengeHost" (click)="deleteChallenge()">
<i class="fa fa-trash red-text" aria-hidden="true"></i>
</a>
<br />
<div class="ev-action">
<div *ngIf="isChallengeHost" class="col-sm-1.5 col-xs-1.5 ev-upload-action">
<span class="fs-16 fw-light">
<strong class="text-light-black">Challenge Overview </strong>
</span>
<a class="pointer fs-16" (click)="editChallengeOverview()">
<i class="fa fa-pencil" aria-hidden="true"> </i>
</a>
<a class="pointer fs-16" (click) = "editChallengeOverviewUpload()">
<i class="fa fa-upload" aria-hidden="true"> </i>
</a>
</div>
</div>
<div class="ev-action">
<div *ngIf="isChallengeHost" class="col-sm-1.5 col-xs-1.5">
<span class="fs-16 fw-light">
<strong class="text-light-black">Terms and Conditions </strong>
</span>
<a class="pointer fs-16" (click)="editTermsAndConditions()">
<i class="fa fa-pencil" aria-hidden="true"> </i>
</a>
<a class="pointer fs-16" (click) = "editChallengeTermsAndConditionsUpload()">
<i class="fa fa-upload" aria-hidden="true"> </i>
</a>
</div>
</div>
<!-- Start date -->
<span class="fs-16 fw-light">
<strong class="text-light-black">Starts on:</strong>
{{ challenge['start_date'] | date: 'medium' }} {{ challenge['start_zone'] }}
</span>
<span *ngIf="isChallengeHost" class="fs-16 fw-light">
<a class="pointer fs-16" (click)="challengeDateDialog()">
<i class="fa fa-pencil" aria-hidden="true"></i>
</a>
</span>
<br />
<!-- End date -->
<span class="fs-16 fw-light">
<strong class="text-light-black">Ends on:</strong>
{{ challenge['end_date'] | date: 'medium' }} {{ challenge['end_zone'] }}
</span>
<span *ngIf="isChallengeHost" class="fs-16 fw-light">
<a class="pointer fs-16" (click)="challengeDateDialog()">
<i class="fa fa-pencil" aria-hidden="true"></i>
</a>
</span>
<br />
<span class="fs-16 fw-light" *ngIf="isChallengeHost">
<a class="pointer" (click)="togglePublishChallengeState()">
<strong class="text-light-black">{{ publishChallenge.state }} </strong>
<i class="{{ publishChallenge.icon }}" aria-hidden="true"></i>
</a>
</span>
<br />
<mat-checkbox
color="primary"
class="fw-semibold"
*ngIf="isChallengeHost"
[checked]="!challenge['is_registration_open']"
(click)="stopParticipation($event)"
><strong class="text-light-black fs-15">Close Participation</strong>
</mat-checkbox>
</div>
</div>
</div>
<!-- Banned Email Ids -->
<div class="row settings-section">
<div class="col-lg-3 col-md-4 col-sm-3 col-xs-3">
<span class="fw-light fs-18">Banned emails Ids:</span>
</div>
<div class="col-lg-7 col-md-7 col-sm-9 col-xs-9">
<mat-form-field class="example-chip-list">
<mat-chip-list #chipList>
<mat-chip
*ngFor="let email of bannedEmailIds"
[selectable]="selectable"
[removable]="removable"
(removed)="remove(email)"
>
{{ email }}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
<input
[matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="addOnBlur"
(matChipInputTokenEnd)="add($event)"
/>
</mat-chip-list>
</mat-form-field>
<div class="error-message" *ngIf="isValidationError">{{ message }}</div>
<div
class="btn btn-waves-effect waves-dark grad-btn grad-btn-dark fs-16"
[class.disabled]="isValidationError"
(click)="reflectChange()"
>
<span>Update</span>
</div>
</div>
</div>
</ng-template>
</mat-tab>
<!-- Edit Phase Details -->
<mat-tab label="Phase and Leaderboard Details">
<div class="row settings-section">
<div class="col-lg-3 col-md-4 col-sm-3 col-xs-3">
<span class="fw-light fs-18">Edit Phase</span>
</div>
<div class="ev-action">
<div class="col-sm-6 col-xs-12 col-lg-6 col-lr-pad phase-select-box" *ngIf="isChallengeHost">
<div class="row margin-bottom-cancel phase-card">
<app-selectphase
[phases]="filteredPhases"
[phaseSelectionListType]="phaseSelectionListType"
[phaseSelectionType]="phaseSelectionType"
[phaseSelected]="phaseSelected()"
#phaseselect
></app-selectphase>
</div>
<div class="row margin-bottom-cancel phase-card" *ngIf="selectedPhase">
<span class="fs-16 fw-light">
<strong class="text-light-black">Phase Details </strong>
</span>
<a class="pointer fs-16" (click)="editPhaseDetails()">
<i class="fa fa-pencil" aria-hidden="true"> </i>
</a>
<a class="pointer fs-16" (click) = "editPhaseDetailsUpload()">
<i class="fa fa-upload" aria-hidden="true"> </i></a
>
<span class="fs-16 fw-light">
<strong class="text-light-black">Is Public </strong>
</span>
<a class="pointer fs-20" (click)="togglePhaseVisibility()">
<i class="{{ phaseVisibility.icon }}" aria-hidden="true"> </i> </a
>
<span class="fs-16 fw-light">
<strong class="text-light-black">Submission Visibility </strong>
</span>
<a class="pointer fs-20" (click)="toggleSubmissionVisibility()">
<i class="{{ submissionVisibility.icon }}" aria-hidden="true"> </i>
</a>
<br /><br />
<span class="fs-16 fw-light">
<strong class="text-light-black">Test Annotations </strong>
</span>
<a class="pointer fs-15" (click)="editTestAnnotations()">
<i class="fa fa-upload" aria-hidden="true"> </i>
</a>
</div>
<div class="col-s12" *ngIf="selectedPhase">
<p class="fw-light">
<strong> Note: </strong> For test annotations > 100MB, please use
<a href=" https://cli.eval.ai/#challenge-annotations" target="_blank"
><strong class="blue-text"> evalai-cli </strong></a
>
to update the test annotations.
<a (click)="showCliInstructions()"><strong class="blue-text">View Instructions</strong></a>
</p>
</div>
</div>
</div>
</div>
<div class="row settings-section">
<div class="col-lg-3 col-md-4 col-sm-3 col-xs-3">
<span class="fw-light fs-18">Edit Leaderboard</span>
</div>
<div class="ev-action">
<div class="col-sm-6 col-xs-12 col-lg-6 col-lr-pad phase-select-box" *ngIf="isChallengeHost">
<div class="row margin-bottom-cancel phase-card">
<app-selectphase
[settingsPhaseSplits]="filteredPhaseSplits"
[phaseSelectionType]="phaseLeaderboardSelectionType"
[phaseSelectionListType]="phaseLeaderboardSelectionListType"
[phaseSplitSelected]="phaseSplitSelected()"
#phasesplitselect
>
</app-selectphase>
</div>
<div class="row margin-bottom-cancel phase-card" *ngIf="selectedPhaseSplit">
<div class="col s12">
<span class="fs-16 fw-light">
<strong class="text-light-black">Leaderboard Visibility </strong>
</span>
<a class="pointer fs-20" (click)="toggleLeaderboardVisibility()">
<i class="{{ leaderboardVisibility.icon }}" aria-hidden="true"> </i>
</a>
<span class="fs-16 fw-light">
<strong class="text-light-black">Leaderboard Schema </strong>
</span>
<a class="pointer fs-16" (click)="editLeaderboardSchema()">
<i class="fa fa-pencil" aria-hidden="true"></i>
</a>
</div>
</div>
<div class="row margin-bottom-cancel phase-card" *ngIf="selectedPhaseSplit">
<div class="col s12">
<span class="fs-16 fw-light">
<strong class="text-light-black">Leaderboard Precision Value </strong>
</span>
<br />
<span class="fw-light">
Changing the precision value will show the results with that precision value to the participants.
</span>
<div class="rangeslider fa-stack fa-2x">
<button
[disabled]="minusDisabled"
class="btn-floating btn-pagination waves-effect waves-light"
(click)="updateLeaderboardDecimalPrecision(leaderboardPrecisionValue - 1)"
>
<i class="fa fa-minus"></i>
</button>
<mat-chip class="btn">{{ leaderboardPrecisionValue }}</mat-chip>
<button
[disabled]="plusDisabled"
class="btn-floating plus-btn btn-pagination waves-effect waves-light"
(click)="updateLeaderboardDecimalPrecision(leaderboardPrecisionValue + 1)"
>
<i class="fa fa-plus"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</mat-tab>
<!-- Edit Evaluation Script and Criteria & Worker logs -->
<mat-tab label="Evaluation">
<ng-template matTabContent>
<div class="row settings-section">
<div class="margin-bottom-cancel">
<div class="col s12 worker-title">
<h5 class="w-300">Evaluation script</h5>
</div>
</div>
<div class="ev-action">
<div *ngIf="isChallengeHost" class="col-sm-1.5 col-xs-1.5 ev-upload-action">
<!-- Evaluations Criteria Description -->
<span class="fs-16 fw-light">
<strong class="text-light-black">Evaluation Criteria </strong>
</span>
<a class="pointer fs-16" (click)="editEvaluationCriteria()">
<i class="fa fa-pencil" aria-hidden="true"> </i>
</a>
<a class="pointer fs-16" (click) = "editEvaluationCriteriaUpload()">
<i class="fa fa-upload" aria-hidden="true"> </i>
</a>
<!-- Evaluation Script -->
<span class="fs-16 fw-light">
<strong class="text-light-black">Evaluation Script </strong>
</span>
<a class="pointer fs-15" (click)="editEvaluationScript()">
<i class="fa fa-file" aria-hidden="true"> </i>
</a>
</div>
</div>
</div>
<div class="row settings-section" *ngIf="!challenge['remote_evaluation']">
<div class="margin-bottom-cancel">
<div class="col s12 worker-title">
<h5 class="w-300">Submission worker actions</h5>
</div>
</div>
<div class="row margin-bottom-cancel">
<div class="col s12">
<button
class="btn ev-btn-dark waves-effect waves-dark grad-btn grad-btn-dark fs-12"
(click)="manageWorker('start')"
>
<i class="fa fa-play"></i> Start worker
</button>
<button
class="btn ev-btn-dark waves-effect waves-dark grad-btn grad-btn-dark fs-12"
(click)="manageWorker('stop')"
>
<i class="fa fa-stop"></i> Stop worker
</button>
<button
class="btn ev-btn-dark waves-effect waves-dark grad-btn grad-btn-dark fs-12"
(click)="manageWorker('restart')"
>
<i class="fa fa-refresh"></i> Restart worker
</button>
</div>
</div>
<div class="row margin-bottom-cancel">
<div class="col s12">
<h5 class="w-300">Submission worker logs</h5>
</div>
</div>
<div class="ev-logs-card">
<div *ngFor="let log of workerLogs; index as i" class="ev-logs">{{ log }}</div>
</div>
</div>
</ng-template>
</mat-tab>
</mat-tab-group>
</div>
</div>