Update data structure for academic years to include terms without courses

src/app/degree-planner/degree-planner.component.html

@@ -32,7 +32,12 @@
 						</mat-panel-title>
 					</mat-expansion-panel-header>
 					<div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutAlign="start stretch">
-						<app-term-container *ngFor="let term of termsByAcademicYear[year.key].terms" [term]="term" [courses]="getCoursesByTerm(term.termCode)" fxFlex="33%"></app-term-container>
+						<app-term-container 
+							*ngFor="let term of termsByAcademicYear[year.key].terms | keyvalue" 
+							[term]="termsByAcademicYear[year.key].terms[term.key]" 
+							[courses]="getCoursesByTerm(year.key + term.key)" 
+							fxFlex="33%"
+						></app-term-container>
 					</div>
 				</mat-expansion-panel>
 			</mat-accordion>

src/app/degree-planner/degree-planner.component.ts

@@ -33,18 +33,31 @@ export class DegreePlannerComponent {
 		this.dataService.getTerms()
 		.subscribe(terms => {
 			this.terms = terms;
+			// Create an empty object to store term data in
 			this.termsByAcademicYear = {};
+
+			// Loop through each term
 			this.terms.forEach(term => {
+				// Get the 3 digit year code and 1 digit term code
 				const year = term.termCode.substring(0, 3);
+				const termCode = term.termCode.substring(3);
 
-				if (this.termsByAcademicYear[year]) {
-					this.termsByAcademicYear[year].terms.push(term);
-				} else {
+				// If this year does not exsist in the "termsByAcademicYear" create a new year
+				// This year has placeholder data for each term in the year
+				if (!this.termsByAcademicYear[year]) {
 					this.termsByAcademicYear[year] = {
 						year: year,
-						terms: [term]
+						terms: {
+							2: { termCode: `${year}2`},
+							4: { termCode: `${year}4`},
+							6: { termCode: `${year}6`}
+						}
 					};
 				}
+
+				// Overwrite the default term with the current term
+				this.termsByAcademicYear[year].terms[termCode] = term;
+
 			});
 		});
 	}

src/app/degree-planner/shared/course-item/course-item.component.html

-<div class="course-item">
+<div class="course-item {{status}}" [ngClass]="{'disabled': course.pastTerm}">
   <div class="course-row course-info">
     <div class="icon-number-wrapper">
         <p class="course-number">
@@ -10,7 +10,6 @@
             <i *ngSwitchCase="'waitlist'" class="material-icons problem-icon">report_problem</i>
             <i *ngSwitchCase="'incomplete'" class="material-icons error-icon">error</i>
             <i *ngSwitchCase="'likely-offered'" class="material-icons help-icon">help</i>
-            <i *ngSwitchCase="'not-offered'" class="material-icons not-offered">remove</i>
             <i *ngSwitchCase="'favorite'" class="material-icons favorite-icon">favorite_border</i>
         </div>
     </div>

src/app/degree-planner/shared/course-item/course-item.component.scss

@@ -70,4 +70,13 @@
 .icon-number-wrapper {
     display: flex;
     align-items: center;
+}
+
+.not-offered {
+    .course-number,
+    .course-credits,
+    .course-title {
+        text-decoration: line-through;
+        opacity: .5;
+    }
 }
\ No newline at end of file

src/app/degree-planner/term-container/term-container.component.html

 <mat-card class="term-container">
     <div fxLayout="row" fxLayoutAlign="space-between stretch">
-        <h2>{{ term.termCode | getTermDescription }}</h2><p class="text-right semi-bold credits">Credits: 13</p>
+        <h2>{{ term.termCode | getTermDescription }}</h2><p class="text-right semi-bold credits">{{getTotalCredits()}} Credits</p>
     </div>
     <div cdkDropList>
         <app-course-item *ngFor="let course of courses" [course]="course" [status]="'complete'" cdkDrag></app-course-item>

src/app/degree-planner/term-container/term-container.component.ts

@@ -15,4 +15,15 @@ export class TermContainerComponent {
 	terms: any[];
 
 	constructor() {}
+
+	getTotalCredits() {
+		if (!this.courses) {
+			return '0';
+		}
+		let total = 0;
+		for (const course of this.courses) {
+			total += course.credits;
+		}
+		return total;
+	}
 }