Added generic modal windows for both stats and settings.

angular.json

@@ -28,6 +28,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.scss"
             ],
             "scripts": []
@@ -93,6 +94,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.scss"
             ],
             "scripts": []
@@ -124,6 +126,7 @@
           }
         }
       }
-    }},
+    }
+  },
   "defaultProject": "TaskFocus"
 }

package.json

@@ -12,10 +12,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "~8.2.2",
+    "@angular/cdk": "~8.2.3",
     "@angular/common": "~8.2.2",
     "@angular/compiler": "~8.2.2",
     "@angular/core": "~8.2.2",
     "@angular/forms": "~8.2.2",
+    "@angular/material": "^8.2.3",
     "@angular/platform-browser": "~8.2.2",
     "@angular/platform-browser-dynamic": "~8.2.2",
     "@angular/router": "~8.2.2",

src/app/app.component.html

@@ -7,9 +7,9 @@
             <h1 class="app-title">TaskFocus</h1>
         </div>
         <div class="nav-buttons">
-            <a href="" class="nav-button"> Settings </a>
-            <a href="" class="nav-button"> Statistics </a>
-            <a href="" class="nav-button"> Login </a>
+            <a [routerLink]="" class="nav-button" (click)="openSettingsModal()"> Settings </a>
+            <a [routerLink]="" class="nav-button" (click)="openStatisticsModal()"> Statistics </a>
+            <a [routerLink]="" class="nav-button"> Login </a>
         </div>
     </div>
 

src/app/app.component.ts

@@ -1,4 +1,7 @@
 import { Component } from '@angular/core';
+import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
+import { StatsModalComponent } from './stats-modal/stats-modal.component';
+import { SettingsModalComponent } from './settings-modal/settings-modal.component';
 import { Title } from '@angular/platform-browser';
 @Component({
     selector: 'app-root',
@@ -23,11 +26,29 @@ export class AppComponent {
     timeLeft: number = this.focusLength * 60;
     interval;
 
-    public constructor(private titleService: Title ) { }
+    public constructor(private titleService: Title, public matDialog: MatDialog) { }
 
-    public setTitle(newTitle: string) {
+    openStatisticsModal() {
+        var dialogConfig = this.initDialogConfig(350, 600);
+        this.matDialog.open(StatsModalComponent, dialogConfig);
+    }
+    openSettingsModal() {
+        var dialogConfig = this.initDialogConfig(350, 600);
+        this.matDialog.open(SettingsModalComponent, dialogConfig);
+    }
 
-      this.titleService.setTitle( newTitle );
+    initDialogConfig(height: Number, width: Number): MatDialogConfig {
+        const dialogConfig = new MatDialogConfig();
+        dialogConfig.disableClose = true; // The user can't close the dialog by clicking outside its body
+        dialogConfig.id = "modal-component";
+        dialogConfig.height = height.toString() + "px";
+        dialogConfig.width = width.toString() + "px";
+        return dialogConfig;
+    }
+
+
+    public setTitle(newTitle: string) {
+        this.titleService.setTitle( newTitle );
     }
     focusSelected() {
         this.focus = true;

src/app/app.module.ts

@@ -3,16 +3,28 @@ import { NgModule } from '@angular/core';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
+import { SettingsModalComponent } from './settings-modal/settings-modal.component';
+import { StatsModalComponent } from './stats-modal/stats-modal.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    SettingsModalComponent,
+    StatsModalComponent
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    BrowserAnimationsModule,
+    MatButtonModule,
+    MatDialogModule
   ],
   providers: [],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
+  entryComponents: [StatsModalComponent, SettingsModalComponent]
 })
 export class AppModule { }

src/app/settings-modal/settings-modal.component.html

@@ -0,0 +1,12 @@
+<div id="modal-content-wrapper">
+    <header id="modal-header">
+        <h1 id="modal-title">HEADER TEXT!</h1>
+    </header>
+    <section id="modal-body">
+        <p>BODY SECTION TEXT</p>
+    </section>
+    <footer id="modal-footer">
+        <button mat-raised-button id="modal-action-button" (click)="actionFunction()">BUTTON 1</button>
+        <button mat-raised-button id="modal-cancel-button" (click)="closeModal()">BUTTON 2</button>
+    </footer>
+</div>

src/app/settings-modal/settings-modal.component.scss

@@ -0,0 +1,47 @@
+html,
+body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  font-family: Arial, Helvetica, sans-serif;
+  display: grid;
+  justify-items: center;
+  align-items: center;
+  background-color: #3a3a3a;
+}
+
+/* Overwrite the styles of the mat-dialog-container element globally, but only for those
+that have an id of `modal-component` */
+/* https://stackoverflow.com/a/48689004/9263761 */
+mat-dialog-container#modal-component {
+  border: 3px solid #262626;
+  border-radius: 11px;
+  background-color: #1a1a1a;
+}
+
+#modal-content-wrapper {
+  width: 100%;
+  height: 100%;
+  display: grid;
+  grid-template-rows: repeat(1fr, 3);
+}
+
+#modal-title {
+  font-size: 22px;
+}
+
+#modal-footer {
+  justify-self: right;
+  align-self: center;
+}
+
+#modal-action-button {
+  margin-right: 30px;
+  background-color: #3b3b3b;
+}
+
+#modal-cancel-button {
+  background-color: #4e4e4e;
+}

src/app/settings-modal/settings-modal.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SettingsModalComponent } from './settings-modal.component';
+
+describe('SettingsModalComponent', () => {
+  let component: SettingsModalComponent;
+  let fixture: ComponentFixture<SettingsModalComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SettingsModalComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SettingsModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/settings-modal/settings-modal.component.ts

@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core';
+
+import { MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-settings-modal',
+  templateUrl: './settings-modal.component.html',
+  styleUrls: ['./settings-modal.component.scss']
+})
+
+export class SettingsModalComponent implements OnInit {
+
+  constructor(public dialogRef: MatDialogRef<SettingsModalComponent>) { }
+
+  ngOnInit() {
+  }
+  // When the user clicks the action button a.k.a. the logout button in the\
+  // modal, show an alert and followed by the closing of the modal
+  actionFunction() {
+    alert("You have logged out.");
+    this.closeModal();
+  }
+
+  // If the user clicks the cancel button a.k.a. the go back button, then\
+  // just close the modal
+  closeModal() {
+    this.dialogRef.close();
+  }
+
+}

src/app/stats-modal/stats-modal.component.html

@@ -0,0 +1,12 @@
+<div id="modal-content-wrapper">
+    <header id="modal-header">
+        <h1 id="modal-title">HEADER TEXT!</h1>
+    </header>
+    <section id="modal-body">
+        <p>BODY SECTION TEXT</p>
+    </section>
+    <footer id="modal-footer">
+        <button mat-raised-button id="modal-action-button" (click)="actionFunction()">BUTTON 1</button>
+        <button mat-raised-button id="modal-cancel-button" (click)="closeModal()">BUTTON 2</button>
+    </footer>
+</div>

src/app/stats-modal/stats-modal.component.scss

@@ -0,0 +1,47 @@
+html,
+body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  font-family: Arial, Helvetica, sans-serif;
+  display: grid;
+  justify-items: center;
+  align-items: center;
+  background-color: #3a3a3a;
+}
+
+/* Overwrite the styles of the mat-dialog-container element globally, but only for those
+that have an id of `modal-component` */
+/* https://stackoverflow.com/a/48689004/9263761 */
+mat-dialog-container#modal-component {
+  border: 3px solid #262626;
+  border-radius: 11px;
+  background-color: #1a1a1a;
+}
+
+#modal-content-wrapper {
+  width: 100%;
+  height: 100%;
+  display: grid;
+  grid-template-rows: repeat(1fr, 3);
+}
+
+#modal-title {
+  font-size: 22px;
+}
+
+#modal-footer {
+  justify-self: right;
+  align-self: center;
+}
+
+#modal-action-button {
+  margin-right: 30px;
+  background-color: #3b3b3b;
+}
+
+#modal-cancel-button {
+  background-color: #4e4e4e;
+}

src/app/stats-modal/stats-modal.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StatsModalComponent } from './stats-modal.component';
+
+describe('StatsModalComponent', () => {
+  let component: StatsModalComponent;
+  let fixture: ComponentFixture<StatsModalComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ StatsModalComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StatsModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/stats-modal/stats-modal.component.ts

@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-stats-modal',
+  templateUrl: './stats-modal.component.html',
+  styleUrls: ['./stats-modal.component.scss']
+})
+export class StatsModalComponent implements OnInit {
+
+  constructor(public dialogRef: MatDialogRef<StatsModalComponent>) { }
+
+  ngOnInit() {
+  }
+
+  // When the user clicks the action button a.k.a. the logout button in the\
+  // modal, show an alert and followed by the closing of the modal
+  actionFunction() {
+    alert("You have logged out.");
+    this.closeModal();
+  }
+
+  // If the user clicks the cancel button a.k.a. the go back button, then\
+  // just close the modal
+  closeModal() {
+    this.dialogRef.close();
+  }
+}