18-Oct-2019

Author: VasionDev

package-lock.json

@@ -21,6 +21,7 @@
  "@angular/router": "~7.2.0",
  "core-js": "^2.5.4",
  "jquery": "^3.4.1",
+ "ng-circle-progress": "^1.5.1",
  "ngx-slick-carousel": "^0.4.6",
  "rxjs": "~6.3.3",
  "slick-carousel": "^1.8.1",

package.json

@@ -1,6 +1,7 @@
 import { BrowserModule } from "@angular/platform-browser";
 import { NgModule } from "@angular/core";
 import { HttpClientModule } from "@angular/common/http";
+import { NgCircleProgressModule } from 'ng-circle-progress';
 
 import { AppComponent } from "./app.component";
 import { HomeComponent } from "./home/home.component";
@@ -35,7 +36,8 @@ const routes: Routes = [
  HttpClientModule,
  BrowserAnimationsModule,
  SlickCarouselModule,
- RouterModule.forRoot(routes)
+ RouterModule.forRoot(routes),
+ NgCircleProgressModule.forRoot({})
  ],
  entryComponents: [
  HomeComponent,

src/app/app.module.ts

@@ -6,6 +6,24 @@
 </div>
 
 <div class="app-slider-content">
+
+ <h5 style="text-align: center;color:#fff;">
+ <circle-progress
+ [percent]="completePercent"
+ [radius]="70"
+ [unitsColor]="'#fff'"
+ [titleColor]="'#fff'"
+ [outerStrokeWidth]="10"
+ [innerStrokeWidth]="10"
+ [outerStrokeColor]="'#00c853'"
+ [innerStrokeColor]="'#fff'"
+ [animation]="true"
+ [showSubtitle] = "true"
+ subtitle = "complete"
+ subtitleColor = "#ffffff"
+ [animationDuration]="400"
+ ></circle-progress>
+ </h5>
  <div class="row app-slider">
  <ngx-slick-carousel class="carousel" 
  #slickModal="slick-carousel" 

src/app/home/home.component.html

@@ -16,6 +16,7 @@ export class HomeComponent implements OnInit, AfterContentChecked {
  posts: any;
  indexPost: any;
  indexSlide: any;
+ completePercent: any;
  userLoggedIn = false;
  isComplete = 0;
  redirectUrl: any;
@@ -40,6 +41,11 @@ export class HomeComponent implements OnInit, AfterContentChecked {
  this.loadSignInStatus();
  this.data.currentData.subscribe((data: any) => {
  this.posts = data;
+ let allLength = data.length;
+ let totalLesson = 0;
+ while (allLength > 0) {
+ totalLesson = totalLesson + data[--allLength].lesson.length;
+ }
  const tempIndex = JSON.parse(localStorage.getItem("LastLesson"));
  let mainIndex: number;
 
@@ -57,6 +63,7 @@ export class HomeComponent implements OnInit, AfterContentChecked {
 
  this.completedLesson = JSON.parse(localStorage.getItem("Lesson"));
  this.completedIndex = JSON.parse(localStorage.getItem("Index"));
+ this.completePercent = ((100 * this.completedLesson.length) / totalLesson).toFixed();
 
  this.allComplete();
  this.route.queryParamMap.subscribe(params => {

src/app/home/home.component.ts

@@ -164,8 +164,12 @@ export class LessonComponent implements OnInit {
  IndexArray = [];
  LessonArray = [];
  }
- IndexArray.push(completedIndex);
- LessonArray.push(completedLesson);
+
+ if ( !LessonArray.includes(completedLesson)) {
+ IndexArray.push(completedIndex);
+ LessonArray.push(completedLesson);
+ }
+
  localStorage.setItem("Lesson", JSON.stringify(LessonArray));
  localStorage.setItem("Index", JSON.stringify(IndexArray));
  const UserId = localStorage.getItem("UserID");