Skip to content

Commit

Permalink
Frontend_V2: Move edit test annotations to phase section (Cloud-CV#3584)
Browse files Browse the repository at this point in the history 
* move test annotations outside the modal

* change font light and remove line break

* fix modal width
  • Loading branch information
@gautamjajoo
gautamjajoo authored Sep 16, 2021
1 parent 1c37549 commit 94f74f9
Show file tree
Hide file tree
Showing 7 changed files with 323 additions and 134 deletions.
178 changes: 82 additions & 96 deletions ...src/app/components/challenge/challengephases/editphasemodal/editphasemodal.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,113 +77,99 @@
</div>

<div class="row row-lr-margin">
<div class="col-lg-4 col-md-4 col-sm-12 col-lr-pad">
<div class="input-field align-left">
<span class="text-med-black fw-regular fs-16">Submissions/day</span>
<app-input
class="mt-20"
[editPhaseDetails]="editPhaseDetails"
[name]="'max_submissions_per_day'"
[isRequired]="true"
[label]="'max_submissions_per_day'"
[placeholder]="''"
[type]="'number'"
[value]="maxSubmissionsPerDay"
#formmodal
></app-input>
<div class="editor-validation-message fs-12" *ngIf="isPerDaySubmissionFieldMessage">
{{ perDaySubmisionValidationMessage }}
<div class="col-lg-4 col-md-4 col-sm-12 col-lr-pad">
<div class="input-field align-left">
<span class="text-med-black fw-regular fs-16">Submissions/day</span>
<app-input
class="mt-20"
[editPhaseDetails]="editPhaseDetails"
[name]="'max_submissions_per_day'"
[isRequired]="true"
[label]="'max_submissions_per_day'"
[placeholder]="''"
[type]="'number'"
[value]="maxSubmissionsPerDay"
#formmodal
></app-input>
<div class="editor-validation-message fs-12" *ngIf="isPerDaySubmissionFieldMessage">
{{ perDaySubmisionValidationMessage }}
</div>
</div>
</div>
</div>

<div class="col-lg-4 col-md-4 col-sm-12 col-lr-pad">
<div class="input-field align-left">
<span class="text-med-black fw-regular fs-16">Submissions/month</span>
<app-input
class="mt-20"
min="challenge_phase.max_submissions_per_day"
[editPhaseDetails]="editPhaseDetails"
[name]="'max_submissions'"
[isRequired]="true"
[label]="'max_submissions_per_month'"
[placeholder]="''"
[type]="'number'"
[value]="maxSubmissionsPerMonth"
#formmodal
></app-input>
<div class="editor-validation-message fs-12" *ngIf="isPerMonthSubmissionFieldMessage">
{{ PerMonthSubmissionValidationMessage }}
<div class="col-lg-4 col-md-4 col-sm-12 col-lr-pad">
<div class="input-field align-left">
<span class="text-med-black fw-regular fs-16">Submissions/month</span>
<app-input
class="mt-20"
min="challenge_phase.max_submissions_per_day"
[editPhaseDetails]="editPhaseDetails"
[name]="'max_submissions'"
[isRequired]="true"
[label]="'max_submissions_per_month'"
[placeholder]="''"
[type]="'number'"
[value]="maxSubmissionsPerMonth"
#formmodal
></app-input>
<div class="editor-validation-message fs-12" *ngIf="isPerMonthSubmissionFieldMessage">
{{ PerMonthSubmissionValidationMessage }}
</div>
</div>
</div>
</div>

<div class="col-lg-4 col-md-4 col-sm-12 col-lr-pad">
<div class="input-field align-left">
<span class="text-med-black fw-regular fs-16">Total submissions</span>
<app-input
class="mt-20"
min="challenge_phase.max_submissions_per_month"
[editPhaseDetails]="editPhaseDetails"
[name]="'max_submissions'"
[isRequired]="true"
[label]="'max_submissions'"
[placeholder]="''"
[type]="'number'"
[value]="maxSubmissions"
#formmodal
></app-input>
<div class="col-lg-4 col-md-4 col-sm-12 col-lr-pad">
<div class="input-field align-left">
<span class="text-med-black fw-regular fs-16">Total submissions</span>
<app-input
class="mt-20"
min="challenge_phase.max_submissions_per_month"
[editPhaseDetails]="editPhaseDetails"
[name]="'max_submissions'"
[isRequired]="true"
[label]="'max_submissions'"
[placeholder]="''"
[type]="'number'"
[value]="maxSubmissions"
#formmodal
></app-input>
</div>
</div>
</div>
</div>

<div class="row row-lr-margin">
<div class="col-lg-5 col-md-6 col-sm-6 col-lr-pad">
<div class="input-field align-left">
<span class="text-med-black fw-regular fs-16">Max Concurrent Submissions Allowed</span>
<app-input
class="mt-20"
[editPhaseDetails]="editPhaseDetails"
[name]="'max_concurrent_submissions_allowed'"
[isRequired]="true"
[label]="'max_concurrent_submissions_allowed'"
[placeholder]="''"
[type]="'number'"
[value]="maxConcurrentSubmissionsAllowed"
#formmodal
></app-input>
</div>
</div>

<div class="col-lg-6 col-md-6 col-sm-6 col-lr-pad">
<div class="input-field align-left">
<div class="fs-16 fw-regular text-med-black">Allowed Submission File Types</div>
<app-input
class="mt-20"
[isRequired]="true"
[editPhaseDetails]="editPhaseDetails"
[label]="'allowed_submission_file_types'"
[placeholder]="''"
[type]="'text'"
[icon]=""
[value]="allowedSubmissionFileTypes"
#formmodal
></app-input>
<div class="row row-lr-margin">
<div class="col-lg-5 col-md-6 col-sm-6 col-lr-pad">
<div class="input-field align-left">
<span class="text-med-black fw-regular fs-16">Max Concurrent Submissions Allowed</span>
<app-input
class="mt-20"
[editPhaseDetails]="editPhaseDetails"
[name]="'max_concurrent_submissions_allowed'"
[isRequired]="true"
[label]="'max_concurrent_submissions_allowed'"
[placeholder]="''"
[type]="'number'"
[value]="maxConcurrentSubmissionsAllowed"
#formmodal
></app-input>
</div>
</div>
</div>
</div>

<div class="row row-lr-margin">
<div class="col-lg-6 col-md-6 col-sm-12 col-lr-pad">
<app-input
[name]="'test_annotation_file'"
[label]="'test_annotation'"
[editPhaseDetails]="editPhaseDetails"
[placeholder]="''"
[type]="'file'"
[value]="''"
#formmodal
></app-input>
<div class="col-lg-6 col-md-6 col-sm-6 col-lr-pad">
<div class="input-field align-left">
<div class="fs-16 fw-regular text-med-black">Allowed Submission File Types</div>
<app-input
class="mt-20"
[isRequired]="true"
[editPhaseDetails]="editPhaseDetails"
[label]="'allowed_submission_file_types'"
[placeholder]="''"
[type]="'text'"
[icon]=""
[value]="allowedSubmissionFileTypes"
#formmodal
></app-input>
</div>
</div>
</div>

Expand Down
79 changes: 50 additions & 29 deletions frontend_v2/src/app/components/challenge/challengesettings/challengesettings.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,18 +17,23 @@ <h5 class="fw-light">Challenge Settings</h5>
<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()"
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>
<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()">
<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()">
Expand All @@ -44,7 +49,7 @@ <h5 class="fw-light">Challenge Settings</h5>
<i class="fa fa-pencil" aria-hidden="true"> </i>
</a>
</div>
</div>
</div>
<div class="ev-action">
<div *ngIf="isChallengeHost" class="col-sm-1.5 col-xs-1.5">
<span class="fs-16 fw-light">
Expand Down Expand Up @@ -78,10 +83,10 @@ <h5 class="fw-light">Challenge Settings</h5>
</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>
<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
Expand All @@ -94,8 +99,8 @@ <h5 class="fw-light">Challenge Settings</h5>
</mat-checkbox>
</div>
</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">
Expand Down Expand Up @@ -135,7 +140,7 @@ <h5 class="fw-light">Challenge Settings</h5>
</mat-tab>

<!-- Edit Phase Details -->
<mat-tab label="Phase and Leaderboard 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>
Expand All @@ -151,29 +156,45 @@ <h5 class="fw-light">Challenge Settings</h5>
#phaseselect
></app-selectphase>
</div>
<div class="row margin-bottom-cancel phase-card " *ngIf="selectedPhase">

<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>&nbsp;&nbsp;&nbsp;&nbsp;
<i class="fa fa-pencil" aria-hidden="true"> </i> </a
>&nbsp;&nbsp;&nbsp;&nbsp;
<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>&nbsp;&nbsp;&nbsp;&nbsp;
<i class="{{ phaseVisibility.icon }}" aria-hidden="true"> </i> </a
>&nbsp;&nbsp;&nbsp;&nbsp;
<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>
<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>

Expand All @@ -199,8 +220,8 @@ <h5 class="fw-light">Challenge Settings</h5>
<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>&nbsp;&nbsp;&nbsp;&nbsp;
<i class="{{ leaderboardVisibility.icon }}" aria-hidden="true"> </i> </a
>&nbsp;&nbsp;&nbsp;&nbsp;
</div>
</div>
<div class="row margin-bottom-cancel phase-card" *ngIf="selectedPhaseSplit">
Expand All @@ -216,14 +237,16 @@ <h5 class="fw-light">Challenge Settings</h5>
<button
[disabled]="minusDisabled"
class="btn-floating btn-pagination waves-effect waves-light"
(click)="updateLeaderboardDecimalPrecision(leaderboardPrecisionValue - 1)">
(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)">
(click)="updateLeaderboardDecimalPrecision(leaderboardPrecisionValue + 1)"
>
<i class="fa fa-plus"></i>
</button>
</div>
Expand All @@ -232,11 +255,10 @@ <h5 class="fw-light">Challenge Settings</h5>
</div>
</div>
</div>

</mat-tab>

<!-- Edit Evaluation Script and Criteria & Worker logs -->
<mat-tab label="Evaluation">
<mat-tab label="Evaluation">
<ng-template matTabContent>
<div class="row settings-section">
<div class="margin-bottom-cancel">
Expand All @@ -251,8 +273,8 @@ <h5 class="w-300">Evaluation script</h5>
<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>&nbsp;&nbsp;
<i class="fa fa-pencil" aria-hidden="true"> </i> </a
>&nbsp;&nbsp;
<!-- Evaluation Script -->
<span class="fs-16 fw-light">
<strong class="text-light-black">Evaluation Script </strong>
Expand Down Expand Up @@ -303,7 +325,6 @@ <h5 class="w-300">Submission worker logs</h5>
</div>
</ng-template>
</mat-tab>

</mat-tab-group>
</div>
</div>
Loading

0 comments on commit 94f74f9

Please sign in to comment.