Froentend_V2: Move leaderboard precision value to edit leaderboard se…

…ction(Cloud-CV#3568) Co-authored-by: Rishabh Jain <[email protected]>
vahetag · Aug 17, 2021 · 4f5d3b2 · 4f5d3b2
1 parent 16cbc4b
commit 4f5d3b2
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 88 deletions.
diff --git a/..._v2/src/app/components/challenge/challengeleaderboard/challengeleaderboard.component.html b/..._v2/src/app/components/challenge/challengeleaderboard/challengeleaderboard.component.html
@@ -28,34 +28,6 @@ <h5 class="fw-light">Leaderboard</h5>
           >
           </app-selectphase>
         </div>
-        <div class="col-sm-6 col-xs-12 col-lg-6 col-lr-pad phase-select-box">
-          <div *ngIf="leaderboard.length > 0 && selectedPhaseSplit != null">
-            <div class="col-sm-12 col-xs-12 col-lr-pad" class="leaderboard-precison">
-              <span class="fw-semibold"> Leaderboard precision value:</span><br />
-              <span class="fw-light"
-                >Changing the precision value will show the results with that precision value to the participants.
-              </span>
-            </div>
-            <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>
-              &nbsp;<mat-chip class="btn">{{ leaderboardPrecisionValue }}</mat-chip
-              >&nbsp;
-              <button
-                [disabled]="plusDisabled"
-                class="btn-floating btn-pagination waves-effect waves-light"
-                (click)="updateLeaderboardDecimalPrecision(leaderboardPrecisionValue + 1)"
-              >
-                <i class="fa fa-plus"></i>
-              </button>
-            </div>
-          </div>
-        </div>
       </div>
     </div>
     <div class="ev-card-body exist-team-card">

diff --git a/..._v2/src/app/components/challenge/challengeleaderboard/challengeleaderboard.component.scss b/..._v2/src/app/components/challenge/challengeleaderboard/challengeleaderboard.component.scss
@@ -116,26 +116,6 @@
   display: inline-block;
 }
 
-.rangeslider {
-  width: 50%;
-  display: flex;
-  justify-content: space-around;
-}
-
-mat-slider {
-  width: 50%;
-  padding-right: 0px;
-}
-
-.rangeslider {
-  mat-chip {
-    background: #22857b !important;
-  }
-  .btn {
-    margin-right: 0px;
-  }
-}
-
 .ev-md-container {
   padding-bottom: 0px;
 }
@@ -176,12 +156,6 @@ mat-slider {
   padding-top: 0px;
 }
 
-@media only screen and (max-width: $screen-sm) {
-  mat-slider {
-    width: 100%;
-  }
-}
-
 @media only screen and (max-width: 485px) {
   .leaderboard-description-span {
     margin-top: 2%;

diff --git a/...nd_v2/src/app/components/challenge/challengeleaderboard/challengeleaderboard.component.ts b/...nd_v2/src/app/components/challenge/challengeleaderboard/challengeleaderboard.component.ts
@@ -189,16 +189,6 @@ export class ChallengeleaderboardComponent implements OnInit, AfterViewInit, OnD
    */
   pollingInterval: any;
 
-  /**
-   * If leaderboard precision value is equal to 0
-   */
-  minusDisabled = false;
-
-  /**
-   * If leaderboard precision value is equal to 5
-   */
-  plusDisabled = false;
-
   /**
    * Challenge phase visibility
    */
@@ -621,30 +611,6 @@ export class ChallengeleaderboardComponent implements OnInit, AfterViewInit, OnD
     SELF.openDialog(SELF.metaAttributesData);
   }
 
-  /**
-   * Update leaderboard decimal precision value
-   * @param updatedLeaderboardPrecisionValue new leaderboard precision value
-   */
-  updateLeaderboardDecimalPrecision(updatedLeaderboardPrecisionValue) {
-    const API_PATH = this.endpointsService.particularChallengePhaseSplitUrl(this.selectedPhaseSplit['id']);
-    const SELF = this;
-    SELF.leaderboardPrecisionValue = updatedLeaderboardPrecisionValue;
-    SELF.setLeaderboardPrecisionValue = '1.' + SELF.leaderboardPrecisionValue + '-' + SELF.leaderboardPrecisionValue;
-    const BODY = JSON.stringify({
-      leaderboard_decimal_precision: SELF.leaderboardPrecisionValue,
-    });
-    SELF.apiService.patchUrl(API_PATH, BODY).subscribe(
-      (data) => {
-        this.minusDisabled = SELF.leaderboardPrecisionValue === 0 ? true : false;
-        this.plusDisabled = SELF.leaderboardPrecisionValue === 20 ? true : false;
-      },
-      (err) => {
-        SELF.globalService.handleApiError(err, true);
-      },
-      () => this.logger.info('EDIT-LEADERBOARD-PRECISION-VALUE-FINISHED')
-    );
-  }
-
   /**
    *  Clear the polling interval
    */

diff --git a/frontend_v2/src/app/components/challenge/challengesettings/challengesettings.component.html b/frontend_v2/src/app/components/challenge/challengesettings/challengesettings.component.html
@@ -203,6 +203,32 @@ <h5 class="fw-light">Challenge Settings</h5>
                   </a>&nbsp;&nbsp;&nbsp;&nbsp;
                 </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>

diff --git a/frontend_v2/src/app/components/challenge/challengesettings/challengesettings.component.scss b/frontend_v2/src/app/components/challenge/challengesettings/challengesettings.component.scss
@@ -17,6 +17,31 @@
   }
 }
 
+.rangeslider {
+  width: 50%;
+  display: flex;
+  margin-top: 15px 5px 0px 0px;
+}
+
+.btn-floating {
+  margin-top: 4%;
+  margin-right: 8%;
+}
+
+.plus-btn {
+  margin-left: 8%;
+}
+
+.rangeslider {
+  mat-chip {
+    margin-top: 6%;
+    background: #252833 !important;
+  }
+  .btn {
+    margin-right: 0px;
+  }
+}
+
 .row .col {
   padding: 0px;
 }
@@ -62,6 +87,12 @@ input {
   .settings-section {
     padding: 25px !important;
   }
+  .rangeslider {
+    justify-content: space-evenly;
+  }
+  .btn-floating {
+    margin: 0%
+  }  
 }
 
 .example-chip-list {

diff --git a/frontend_v2/src/app/components/challenge/challengesettings/challengesettings.component.ts b/frontend_v2/src/app/components/challenge/challengesettings/challengesettings.component.ts
@@ -111,6 +111,26 @@ export class ChallengesettingsComponent implements OnInit, OnDestroy {
    * 3 -> public
    */
   isPhaseSplitLeaderboardPublic: number = 1;
+
+  /**
+   * Leaderboard precision value
+   */
+  leaderboardPrecisionValue = 2;
+
+   /**
+    * Set leaderboard precision value
+    */
+  setLeaderboardPrecisionValue = '1.2-2';
+
+  /**
+   * If leaderboard precision value is equal to 0
+   */
+  minusDisabled = false;
+
+   /**
+    * If leaderboard precision value is equal to 20
+    */
+  plusDisabled = false;
 
   /**
    * store worker logs
@@ -932,6 +952,17 @@ export class ChallengesettingsComponent implements OnInit, OnDestroy {
         SELF.leaderboardVisibility.state = 'Private';
         SELF.leaderboardVisibility.icon = 'fa fa fa-toggle-off grey-text text-darken-1';
       }
+      const API_PATH = SELF.endpointsService.particularChallengePhaseSplitUrl(this.selectedPhaseSplit['id']);
+      SELF.apiService.getUrl(API_PATH).subscribe(
+        (data) => {
+          SELF.leaderboardPrecisionValue = data.leaderboard_decimal_precision;
+          SELF.setLeaderboardPrecisionValue = `1.${ SELF.leaderboardPrecisionValue }-${ SELF.leaderboardPrecisionValue }`;
+        },
+        (err) => {
+          SELF.globalService.handleApiError(err);
+        },
+        () => {}
+      );
     }
   }
 
@@ -1000,6 +1031,30 @@ export class ChallengesettingsComponent implements OnInit, OnDestroy {
     }
   }
 
+  /**
+   * Update leaderboard decimal precision value
+   * @param updatedLeaderboardPrecisionValue new leaderboard precision value
+   */
+  updateLeaderboardDecimalPrecision(updatedLeaderboardPrecisionValue) {
+    const API_PATH = this.endpointsService.particularChallengePhaseSplitUrl(this.selectedPhaseSplit['id']);
+    const SELF = this;
+    SELF.leaderboardPrecisionValue = updatedLeaderboardPrecisionValue;
+    SELF.setLeaderboardPrecisionValue = '1.' + SELF.leaderboardPrecisionValue + '-' + SELF.leaderboardPrecisionValue;
+    const BODY = JSON.stringify({
+      leaderboard_decimal_precision: SELF.leaderboardPrecisionValue,
+    });
+    SELF.apiService.patchUrl(API_PATH, BODY).subscribe(
+      (data) => {
+        this.minusDisabled = SELF.leaderboardPrecisionValue === 0 ? true : false;
+        this.plusDisabled = SELF.leaderboardPrecisionValue === 20 ? true : false;
+      },
+      (err) => {
+        SELF.globalService.handleApiError(err, true);
+      },
+      () => this.logger.info('EDIT-LEADERBOARD-PRECISION-VALUE-FINISHED')
+    );
+  }
+
   // Edit Evaluation Script and Criteria ->
 
   /**