Download animation for topic + Softcoded chapters

src/app/app-routing.module.ts

@@ -21,7 +21,7 @@ const routes: Routes = [
     { component: ChapterNotesComponent, path: 'chapter-notes/:heading' },
     { component: VideoChapterComponent, path: 'video-chapter/:heading' },
     { component: VideoNotesComponent, path: 'video-notes/:heading' },
-    { component: QuizComponent, path: 'quiz' },
+    { component: QuizComponent, path: 'quiz/:heading' },
     { component: CalendarComponent, path: 'calendar' },
     { component: AttendanceComponent, path: 'attendance'},
     { component: ForumPageComponent, path: 'forum'},

src/app/reusable-components/confirmation-popup/confirmation-popup.component.html

@@ -10,7 +10,7 @@
         <strong> Note: </strong> You can always download it back if you would like to.
     </p>
     <div class="action-buttons">
-        <button (click)="closePopup()"> Cancel </button>
-        <button class="confirmation-button" (click)="closePopup()"> Delete </button>
+        <button (click)="closePopup('false')"> Cancel </button>
+        <button class="confirmation-button" (click)="closePopup('true')"> Delete </button>
     </div>
 </section>

src/app/reusable-components/confirmation-popup/confirmation-popup.component.ts

@@ -13,8 +13,8 @@ export class ConfirmationPopupComponent implements OnInit {
 	ngOnInit(): void {
 	}
 
-    closePopup() {
-        this.popupTerminator.emit(true);
+    closePopup(param: string) {
+        this.popupTerminator.emit(param);
     }
 
 }

src/app/tabs/courses/chapter-notes/chapter-notes.component.html

@@ -4,7 +4,7 @@
             <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
         </button>
         <h5>
-            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/play-button.svg"></svg-icon>
+            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/newspaper.svg"></svg-icon>
             <span> {{ heading }} </span>
         </h5>
     </header>
@@ -24,7 +24,7 @@
         <figure>
             <img src="https://www.educationworld.in/wp-content/uploads/2018/12/notebook-near-math-supplies_23-2147847773.jpg" alt="">
         </figure>
-        
+
         <p>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam dolore doloremque necessitatibus ut quae ipsum, voluptas fuga perferendis incidunt labore voluptatibus iusto ullam ab repudiandae commodi alias excepturi nulla! Vero?
             Lorem ipsum dolor sit amet, <a href="#">Lorem ipsum</a> consectetur adipisicing elit. Saepe et cupiditate at nam earum mollitia commodi cum quidem dolore aliquid nostrum architecto voluptatem eius recusandae, enim explicabo deserunt expedita similique.

src/app/tabs/courses/course-details/course-details.component.html

@@ -15,7 +15,7 @@
 
     <header class="segment-header">
         <button (click)="selectedSegment='home'"
-        [ngClass]="{'active': selectedSegment === 'home' }"> Home </button>
+        [ngClass]="{'active': selectedSegment === 'home' }"> Chapters </button>
         <button (click)="selectedSegment='resources'"
         [ngClass]="{'active': selectedSegment === 'resources' }"> Resources </button>
         <button (click)="selectedSegment='grades'"
@@ -25,130 +25,56 @@
     </header>
 
     <div class="segments-holder">
-
         <ul class="chapter-list" *ngIf="selectedSegment === 'home'">
             <section class="test-prompt">
                 <section class="prompt">
                     <p>
                         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem ab vel reiciendis. Repudiandae nobis pariatur laboriosam, natus quidem quos architecto provident similique officiis vero at cum excepturi eius, eligendi aperiam.
                     </p>
-                    <button [routerLink]="['/quiz']"> Take the test now! </button>
+                    <button> Take the test now! </button>
                 </section>
             </section>
 
-            <li class="chapter completed" [ngClass]="{'active' : selectedChapter === 1}">
-                <div class="container" (click)="selectedChapter === 1? selectedChapter = null : selectedChapter = 1">
-                    <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
-                    <div class="chapter-heading">
-                        <label> Chapter 1 </label>
-                        <p> 5 Topics </p>
-                    </div>
-                    <svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
-                </div>
-                <ul class="topic-list">
-                    <li class="topic completed">
-                        <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
-                        <div class="topic-container">
-                            <p [routerLink]="['/video-chapter/', 'Topic-1']">
-                                <span class="type"> <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/play-button.svg"></svg-icon> Video: </span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
-                            </p>
-                            <button class="action-button" (click)="showDeletePopup = true">
-                                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/delete.svg"></svg-icon>
-                            </button>
-                        </div>
-                    </li>
-
-                    <li class="topic completed">
-                        <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
-                        <div class="topic-container">
-                            <p [routerLink]="['/chapter-notes/', 'Topic-2']">
-                                <span class="type">  <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/newspaper.svg"></svg-icon> Notes: </span> Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
-                            </p>
-                            <button class="action-button" (click)="showDeletePopup = true">
-                                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/delete.svg"></svg-icon>
-                            </button>
-                        </div>
-                    </li>
-
-                    <li class="topic completed">
-                        <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
-                        <div class="topic-container">
-                            <p [routerLink]="['/video-chapter/', 'Topic-3']">
-                                <span class="type"> <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/play-button.svg"></svg-icon> Video: </span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
-                            </p>
-                            <button class="action-button">
-                                <svg-icon [applyClass]="true" class="icon download" src="assets/custom-icons/download.svg"></svg-icon>
-                            </button>
-                        </div>
-                    </li>
-
-                    <li class="topic">
-                        <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
-                        <div class="topic-container">
-                            <p [routerLink]="['/chapter-notes/', 'Topic-4']">
-                                <span class="type"> <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/newspaper.svg"></svg-icon> Notes: </span> Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
-                            </p>
-                            <button class="action-button">
-                                <svg-icon [applyClass]="true" class="icon download" src="assets/custom-icons/download.svg"></svg-icon>
-                            </button>
-                        </div>
-                    </li>
-                </ul>
-            </li>
-            <li class="chapter" [ngClass]="{'active' : selectedChapter === 2}">
-                <div class="container" (click)="selectedChapter === 2 ? selectedChapter = null : selectedChapter = 2">
+            <li *ngFor="let chapter of chapterList; let i = index" class="chapter" [ngClass]="{'active' : selectedChapter === i, 'completed' : chapter.isCompleted}">
+                <div class="container" (click)="selectedChapter === i? selectedChapter = null : selectedChapter = i">
                     <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
                     <div class="chapter-heading">
-                        <label> Chapter 2 </label>
-                        <p> 5 Topics </p>
+                        <label> {{ chapter.heading }} </label>
+                        <p> {{ chapter.topics.length }} Topics </p>
                     </div>
                     <svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
                 </div>
                 <ul class="topic-list">
-                    <li class="topic completed">
+                    <li class="topic" *ngFor="let topic of chapter.topics; let j = index" [ngClass]="{'completed' : topic.isCompleted }">
                         <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
                         <div class="topic-container">
-                            <p [routerLink]="['/video-chapter/', 'Topic-1']">
-                                <span class="type"> <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/play-button.svg"></svg-icon> Video: </span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
+                            <p [routerLink]="[topic.url, topic.param]">
+                                <span class="type" *ngIf="topic.type === 'video'">
+                                    <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/play-button.svg"></svg-icon> Video:
+                                </span>
+                                <span class="type" *ngIf="topic.type === 'notes'">
+                                    <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/newspaper.svg"></svg-icon> Notes:
+                                </span>
+                                <span class="type" *ngIf="topic.type === 'quiz'">
+                                    <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/question-mark.svg"></svg-icon> Notes:
+                                </span>
+                                <strong> {{ topic.heading }} - </strong> {{ topic.description }}
                             </p>
-                            <button class="action-button" (click)="showDeletePopup = true">
-                                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/delete.svg"></svg-icon>
+                            <button class="action-button" (click)="selectedTopic = j; showDeletePopup = true" *ngIf="topic.mediaState === 'downloaded'">
+                                <svg-icon [applyClass]="true" class="icon delete" src="assets/custom-icons/delete.svg"></svg-icon>
                             </button>
-                        </div>
-                    </li>
-
-                    <li class="topic completed">
-                        <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
-                        <div class="topic-container">
-                            <p [routerLink]="['/chapter-notes/', 'Topic-2']">
-                                <span class="type">  <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/newspaper.svg"></svg-icon> Notes: </span> Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
-                            </p>
-                            <button class="action-button" (click)="showDeletePopup = true">
-                                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/delete.svg"></svg-icon>
-                            </button>
-                        </div>
-                    </li>
-
-                    <li class="topic">
-                        <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
-                        <div class="topic-container">
-                            <p [routerLink]="['/video-chapter/', 'Topic-3']">
-                                <span class="type"> <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/play-button.svg"></svg-icon> Video: </span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
-                            </p>
-                            <button class="action-button">
+                            <button class="action-button" (click)="selectedTopic = j; downloadMedia()" *ngIf="topic.mediaState === 'none'">
                                 <svg-icon [applyClass]="true" class="icon download" src="assets/custom-icons/download.svg"></svg-icon>
                             </button>
-                        </div>
-                    </li>
-
-                    <li class="topic">
-                        <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
-                        <div class="topic-container">
-                            <p [routerLink]="['/chapter-notes/', 'Topic-4']">
-                                <span class="type"> <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/newspaper.svg"></svg-icon> Notes: </span> Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
-                            </p>
-                            <button class="action-button">
-                                <svg-icon [applyClass]="true" class="icon download" src="assets/custom-icons/download.svg"></svg-icon>
+                            <button class="action-button progress-button" (click)="topic.mediaState = 'none'" *ngIf="topic.mediaState === 'downloading'">
+                                <svg width="40" height="40" viewBox="0 0 40 40">
+                                    <circle cx="20" cy="20" r="18.5" fill="none" stroke="#cecece" stroke-width="4" />
+                                    <circle cx="20" cy="20" r="18.5" fill="none" stroke-width="4"
+                                    stroke-dasharray="116.8" stroke-dashoffset="46.72" id="progress" />
+                                </svg>
+                                <!-- stroke-dasharray = 2 pi r -->
+                                <!-- r = w/2 - stroke-width/2 -->
+                                <!-- stroke-dashoffset = (stroke-dasharray) * (1 - 0.6) -->
                             </button>
                         </div>
                     </li>
@@ -156,7 +82,7 @@
             </li>
 
             <div class="confirmation-popup" [ngClass]="{'active' : showDeletePopup }">
-                <app-confirmation-popup (popupTerminator)="getPopupDecision($event)"></app-confirmation-popup>
+                <app-confirmation-popup (popupTerminator)="getPopupDeleteDecision($event)"></app-confirmation-popup>
             </div>
         </ul>
 

src/app/tabs/courses/course-details/course-details.component.scss

@@ -267,6 +267,7 @@
         align-self: flex-start;
         position: relative;
         z-index: 2;
+        overflow: visible;
 
         &.checkmark {
             align-self: center;
@@ -274,9 +275,56 @@
             border-radius: 50%;
         }
 
+        &.delete {
+            fill: var(--danger-dark);
+        }
+
         &.download {
             fill: var(--teal-green);
         }
+
+        &.downloading {
+            fill: var(--teal-green);
+            overflow: visible;
+
+            #download-arrow {
+                animation: verticalMovement 1s infinite;
+                fill: var(--light-grey);
+            }
+        }
+    }
+
+    .progress-button {
+        transform: scale(0.6)translateX(17px);
+    }
+
+    #progress {
+        stroke: var(--green);
+        animation: fill 2s forwards;
+    }
+
+    @keyframes fill {
+        0% {
+            stroke-dashoffset: calc(116.8 * (1 - 0.2));
+        }
+        50% {
+            stroke-dashoffset: calc(116.8 * (1 - 0.5));
+        }
+        100% {
+            stroke-dashoffset: calc(116.8 * (1 - 0.999999));
+        }
+    }
+}
+
+@keyframes verticalMovement {
+    0% {
+        transform: translateY(0px);
+    }
+    50% {
+        transform: translateY(20px);
+    }
+    0% {
+        transform: translateY(0px);
     }
 }
 

src/app/tabs/courses/course-details/course-details.component.ts

@@ -12,9 +12,60 @@ export class CourseDetailsComponent implements OnInit {
     selectedSegment: string = 'home';
     heading: string;
     routeSubscription: Subscription;
-    selectedChapter: number = 1;
+    selectedChapter: number = 0;
     showDeletePopup: boolean = false;
     isSubSegment: boolean = true;
+    selectedTopic: number;
+
+    chapterList = [{
+        heading: 'Chapter 1',
+        isCompleted: false,
+        topics: [{
+            heading: 'Living Things',
+            description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+            mediaState: 'downloaded',
+            isCompleted: true,
+            type: 'video',
+            url: '/video-chapter',
+            param: 'Living Things'
+        }, {
+            heading: 'Living Things-1',
+            description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+            mediaState: 'none',
+            isCompleted: true,
+            type: 'notes',
+            url: '/chapter-notes',
+            param: 'Living Things-1'
+        }, {
+            heading: 'Living Things-2',
+            description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+            mediaState: 'none',
+            isCompleted: false,
+            type: 'quiz',
+            url: '/quiz',
+            param: 'Living Things-2'
+        }]
+    }, {
+        heading: 'Chapter 2',
+        isCompleted: true,
+        topics: [{
+            heading: 'Earth',
+            description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+            mediaState: 'none',
+            isCompleted: true,
+            type: 'video',
+            url: '/video-chapter',
+            param: 'Earth'
+        }, {
+            heading: 'Earth-2',
+            description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+            mediaState: 'none',
+            isCompleted: true,
+            type: 'quiz',
+            url: '/quiz-chapter',
+            param: 'Earth-2'
+        }]
+    }];
 
     constructor(
         private route: ActivatedRoute,
@@ -35,10 +86,23 @@ export class CourseDetailsComponent implements OnInit {
         this.location.back();
     }
 
-    getPopupDecision(e : boolean) {
-        if (e) {
+    getPopupDeleteDecision(e : string) {
+        if (e === 'false') {
+            this.showDeletePopup = false;
+        }
+
+        if (e === 'true') {
+            this.chapterList[this.selectedChapter].topics[this.selectedTopic].mediaState = 'none';
             this.showDeletePopup = false;
         }
     }
 
+    downloadMedia() {
+        this.chapterList[this.selectedChapter].topics[this.selectedTopic].mediaState = 'downloading';
+
+        setTimeout(() => {
+            this.chapterList[this.selectedChapter].topics[this.selectedTopic].mediaState = 'downloaded';
+        }, 1500);
+    }
+
 }

src/assets/custom-icons/download.svg

@@ -9,7 +9,7 @@
 		c0-11,9-19.9,20-19.9c11,0,20,8.9,20,19.9v7.1c1-0.1,1.7-0.1,2.4-0.1c5.3,0,10.5,2.1,14.2,5.799c3.8,3.801,6,8.801,6,14.101
 		c0,1.101-0.101,2.101-0.3,3.101c5.6-0.9,17.399-5.101,17.399-23.301c0-9.7-6-18.2-14.399-21.7c-0.2-24.3-20-43.9-44.301-43.9
 		c-16.6,0-31,9.1-38.6,22.6c-16.3,2.8-28.6,17.7-27.7,35C0.846,76.519,11.246,88.418,24.846,92.219z"/>
-	<path d="M65.446,54.319c-4.9,0-9,4-9,8.9v27.199l-7-6.6c-1.7-1.699-3.5-2.6-5.9-2.6s-4.5,0.9-6.2,2.6c-1.7,1.7-2.6,3.9-2.6,6.301
+	<path id="download-arrow" d="M65.446,54.319c-4.9,0-9,4-9,8.9v27.199l-7-6.6c-1.7-1.699-3.5-2.6-5.9-2.6s-4.5,0.9-6.2,2.6c-1.7,1.7-2.6,3.9-2.6,6.301
 		c0,0.699,0.1,1.399,0.2,2c0.4,1.6,1.2,3.1,2.4,4.299c22,22,22,22,22,22c1.8,1.701,4.2,2.5,6.7,2.4c2.2-0.199,4.3-1.199,6-2.9
 		c0.2-0.199,21.5-21.5,21.5-21.5c1.2-1.199,2-2.6,2.3-4.199c0.2-0.7,0.301-1.4,0.301-2.1c0-2.4-1-4.601-2.601-6.301
 		c-1.7-1.699-4-2.6-6.3-2.6c-2.4,0-5,0.9-6.6,2.6l-6.2,6.6V63.219C74.446,58.319,70.346,54.319,65.446,54.319z"/>