Leaderboard decimal precision

src/app/app.module.ts

@@ -1,6 +1,7 @@
-import { BrowserModule } from '@angular/platform-browser';
+import { BrowserModule, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { GestureConfig } from '@angular/material';
 import { HttpClientModule } from '@angular/common/http';
 import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';
 
@@ -24,6 +25,7 @@ import { TermsAndConditionsModalComponent } from './components/challenge/challen
 // import module
 import { SharedModule } from './shared/shared.module';
 
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -47,7 +49,8 @@ import { SharedModule } from './shared/shared.module';
     ApiService,
     GlobalService,
     ChallengeService,
-    EndpointsService
+    EndpointsService,
+    {provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig}
   ],
   schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
   bootstrap: [AppComponent],

src/app/components/challenge/challenge.module.ts

@@ -7,7 +7,8 @@ import {
   MatSelectModule,
   MatIconModule,
   MatDividerModule,
-  MatCheckboxModule } from '@angular/material';
+  MatCheckboxModule,
+  MatSliderModule} from '@angular/material';
 
 // import components
 import { ChallengeevaluationComponent } from './challengeevaluation/challengeevaluation.component';
@@ -52,7 +53,8 @@ import { ChallengelistModule } from '../publiclists/challengelist/challengelist.
     MatTableModule,
     MatCheckboxModule,
     MatDividerModule,
-    MatMenuModule
+    MatMenuModule,
+    MatSliderModule
   ],
   exports: [
     ChallengeComponent,

src/app/components/challenge/challengeleaderboard/challengeleaderboard.component.html

@@ -30,6 +30,26 @@
       </div>
     </div>
 
+    <div class="row settings-section">
+      <div class="ev-md-container ev-panel-title" *ngIf="leaderboard.length>0 && selectedPhaseSplit!=null">
+        <div class="row row-lr-margin">
+          <div class="col-sm-12 col-xs-12 col-lr-pad">
+            <span class="fw-regular"> Leaderboard precision value:</span>
+          </div>
+      </div>
+      <div class="rangeslider fa-stack fa-2x">
+        <mat-slider thumbLabel min="0" max="20"  step="1" thumbLabel placeholder="leaderboardPrecisionValue" [(ngModel)]="leaderboardPrecisionValue"
+                      (change)="updateLeaderboardDecimalPrecision($event)">
+        </mat-slider>
+          <i class="fa fa-circle circle-icon" *ngIf="leaderboardPrecisionValue"></i>
+          <span class="fa-stack-2x value">
+            <span class="val">
+              {{ leaderboardPrecisionValue }}
+            </span>
+          </span>
+      </div>
+    </div>
+
     <div class="ev-card-body exist-team-card">
       <div class="row row-lr-margin">
         <div class="horizontal-scroll">
@@ -58,9 +78,9 @@
                       <a (click)="sortNonMetricsColumn('rank')">
                         <span class="fw-regular fs-18">Rank </span>
                         <span class="fa-stack fa-1x">
-                          <i class="fa fa-sort-asc fa-stack-1x" [ngClass]="reverseSort && 
+                          <i class="fa fa-sort-asc fa-stack-1x" [ngClass]="reverseSort &&
                             sortColumn == 'rank' ? 'text-med-black' : 'text-light-black fw-semibold'"></i>
-                          <i class="fa fa-sort-desc fa-stack-1x" [ngClass]="!reverseSort && 
+                          <i class="fa fa-sort-desc fa-stack-1x" [ngClass]="!reverseSort &&
                             sortColumn == 'rank' ? 'text-med-black' : 'text-light-black fw-semibold'"></i>
                         </span>
                       </a>
@@ -69,9 +89,9 @@
                       <a (click)="sortNonMetricsColumn('string')">
                         <span class="fw-regular fs-18">Participant Team</span>
                         <span class="fa-stack fa-1x">
-                          <i class="fa fa-sort-asc fa-stack-1x" [ngClass]="reverseSort && 
+                          <i class="fa fa-sort-asc fa-stack-1x" [ngClass]="reverseSort &&
                             sortColumn == 'string'? 'text-med-black' : 'text-light-black fw-semibold'"></i>
-                          <i class="fa fa-sort-desc fa-stack-1x" [ngClass]="reverseSort && 
+                          <i class="fa fa-sort-desc fa-stack-1x" [ngClass]="reverseSort &&
                             sortColumn == 'string'? 'text-med-black' : 'text-light-black fw-semibold'"></i>
                         </span>
                       </a>
@@ -81,9 +101,9 @@
                         <a (click)="sortMetricsColumn(i)">
                           <span class="fw-regular fs-18">{{key}}</span>
                           <span class="fa-stack fa-1x">
-                            <i class="fa fa-sort-asc fa-stack-1x" [ngClass]="reverseSort && 
+                            <i class="fa fa-sort-asc fa-stack-1x" [ngClass]="reverseSort &&
                               sortColumn == 'number'? 'text-med-black' : 'text-light-black fw-semibold'"></i>
-                            <i class="fa fa-sort-desc fa-stack-1x" [ngClass]="!reverseSort && 
+                            <i class="fa fa-sort-desc fa-stack-1x" [ngClass]="!reverseSort &&
                               sortColumn == 'number'? 'text-med-black' : 'text-light-black fw-semibold'"></i>
                           </span>
                         </a>
@@ -92,9 +112,9 @@
                       <a (click)="sortNonMetricsColumn('date')">
                         <span class="fs-18 fw-regular">Last submission at</span>
                         <span class="fa-stack fa-1x">
-                          <i class="fa fa-sort-asc fa-stack-1x" [ngClass]="reverseSort && 
+                          <i class="fa fa-sort-asc fa-stack-1x" [ngClass]="reverseSort &&
                             sortColumn == 'date'? 'text-med-black' : 'text-light-black w-500'"></i>
-                          <i class="fa fa-sort-desc fa-stack-1x" [ngClass]="!reverseSort && 
+                          <i class="fa fa-sort-desc fa-stack-1x" [ngClass]="!reverseSort &&
                             sortColumn == 'date'? 'text-med-black' : 'text-light-black w-500'"></i>
                         </span>
                       </a>
@@ -111,7 +131,7 @@
                         </mat-chip-list>
                       </span>
                     </td>
-                    <td *ngFor="let score of key.result">{{score | number : '1.2-2'}}</td>
+                    <td *ngFor="let score of key.result">{{score | number : '1.' + leaderboardPrecisionValue + '-' + leaderboardPrecisionValue }}</td>
                     <td><div>{{ key.submission__submitted_at_formatted }}</div></td>
                   </tr>
                 </tbody>

src/app/components/challenge/challengeleaderboard/challengeleaderboard.component.scss

@@ -92,7 +92,7 @@
   background-color: rgb(167, 163, 163);
   border: 2px solid rgb(167, 163, 163);
   border-radius: 40px;
-  
+
   .btn-switch-circle {
       position: absolute;
       top: 0;
@@ -108,7 +108,7 @@
 .btn-switch--on {
   background-color: #ffaf4b;
   border: 2px solid #ffaf4b;;
-  
+
   .btn-switch-circle--on {
       left: auto;
       right: 0;
@@ -119,3 +119,39 @@
 	vertical-align: middle;
 	display: inline-block;
 }
+
+.rangeslider{
+  width: 50%;
+  margin: 10px;
+}
+
+mat-slider {
+  width: 60%;
+}
+
+.rangeslider .fa-circle{
+  margin-left: 120px;
+}
+
+.value{
+  margin-left: 189px;
+  color:white;
+}
+
+.val{
+  font-size: $fs-16;
+  display:block;
+}
+
+.circle-icon {
+  font-size: 40px;
+  padding-top: 10px;
+}
+
+/*media queries*/
+
+@media only screen and (max-width: $screen-sm-md) {
+  .circle-icon {
+      display: none;
+  }
+}

src/app/components/challenge/challengeleaderboard/challengeleaderboard.component.ts

@@ -6,7 +6,7 @@ import { ChallengeService } from '../../../services/challenge.service';
 import { EndpointsService } from '../../../services/endpoints.service';
 import { Router, ActivatedRoute } from '@angular/router';
 import { SelectphaseComponent } from '../../utility/selectphase/selectphase.component';
-
+import { MatSliderChange } from '@angular/material';
 /**
  * Component Class
  */
@@ -23,6 +23,16 @@ export class ChallengeleaderboardComponent implements OnInit, AfterViewInit {
   @ViewChildren('phasesplitselect')
   components: QueryList<SelectphaseComponent>;
 
+  /**
+   * Leaderboard precision value
+   */
+  leaderboardPrecisionValue = 2;
+
+  /**
+   * Challenge phase split ID
+   */
+  challengePhaseSplitId;
+
   /**
    * Is user logged in
    */
@@ -379,6 +389,7 @@ export class ChallengeleaderboardComponent implements OnInit, AfterViewInit {
     SELF.showLeaderboardUpdate = false;
     this.apiService.getUrl(API_PATH).subscribe(
       data => {
+        this.challengePhaseSplitId = data.results[0].challenge_phase_split;
         SELF.updateLeaderboardResults(data['results'], SELF);
         SELF.startLeaderboard(phaseSplitId);
       },
@@ -454,4 +465,29 @@ export class ChallengeleaderboardComponent implements OnInit, AfterViewInit {
       () => {}
     );
   }
+
+   // Update leaderboard decimal precision value
+   updateLeaderboardDecimalPrecision(event: MatSliderChange) {
+    const API_PATH = this.endpointsService.particularChallengePhaseSplitUrl(this.selectedPhaseSplit['id']);
+    const SELF = this;
+    SELF.leaderboardPrecisionValue = event.value;
+    const BODY = JSON.stringify({
+      'leaderboard_decimal_precision': SELF.leaderboardPrecisionValue
+    });
+    SELF.apiService.patchUrl(
+      API_PATH,
+      BODY
+    ).subscribe(
+        data => {
+          SELF.refreshLeaderboard();
+          SELF.globalService.showToast('success', 'The leaderboard decimal precision value is successfully updated!', 5);
+        },
+        err => {
+          SELF.globalService.handleApiError(err, true);
+          SELF.globalService.showToast('error', err);
+        },
+        () => console.log('EDIT-LEADERBOARD-PRECISION-VALUE-FINISHED')
+      );
+
+  }
 }