Basic add to Firebase document

angular/src/app/app-routing.module.ts

@@ -8,6 +8,7 @@ import {AuthComponent} from './navpages/auth/auth.component';
 import {InfoComponent} from './navpages/info/info.component';
 import {SvgComponent} from './navpages/svg/svg.component';
 import {NotificationComponent} from './navpages/notification/notification.component';
+import {PomodoroComponent} from './navpages/pomodoro/pomodoro.component';
 
 
 
@@ -19,6 +20,7 @@ const routes: Routes = [
   {path: 'page1', component: Page1Component},
   {path: 'info', component: InfoComponent},
   {path: 'notification', component: NotificationComponent},
+  {path: 'pomodoro', component: PomodoroComponent},
   {path: 'svg', component: SvgComponent},
   {path: 'auth', component: AuthComponent},
 

angular/src/app/app.module.ts

@@ -20,6 +20,7 @@ import { InfoComponent } from './navpages/info/info.component';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { NotificationComponent } from './navpages/notification/notification.component';
 import {HttpClientModule} from '@angular/common/http';
+import { PomodoroComponent, DialogComponent } from './navpages/pomodoro/pomodoro.component';
 
 
 @NgModule({
@@ -34,7 +35,8 @@ import {HttpClientModule} from '@angular/common/http';
     DataComponent,
     SvgComponent,
     InfoComponent,
-    NotificationComponent
+    NotificationComponent,
+    PomodoroComponent, DialogComponent
   ],
   imports: [
     BrowserModule,

angular/src/app/navbars/navbar/navbar.component.html

@@ -21,6 +21,7 @@
   <button mat-menu-item (click)="navigateMenu('Page0')">Page0</button>
   <button mat-menu-item (click)="navigateMenu('Page1')">Page1</button>
   <button mat-menu-item (click)="navigateMenu('Notification')">Notification</button>
+  <button mat-menu-item (click)="navigateMenu('Pomodoro')">Pomodoro</button>
   <button mat-menu-item (click)="navigateMenu('Info')">Info</button>
   <button mat-menu-item (click)="navigateMenu('SVG')">SVG</button>
   <button mat-menu-item (click)="navigateMenu('Auth')">Auth</button>

angular/src/app/navbars/navbar/navbar.component.ts

@@ -39,6 +39,9 @@ export class NavbarComponent implements OnInit {
     if (tag === 'Notification'){
       this.router.navigate(['/notification']);
     }
+    if (tag === 'Pomodoro'){
+      this.router.navigate(['/pomodoro']);
+    }
   }
 
   onNavigate(): void{

angular/src/app/navpages/pomodoro/dialog-dialog.html

@@ -0,0 +1,14 @@
+<h1 mat-dialog-title>{{data.name}}</h1>
+<div mat-dialog-content>
+
+  <mat-form-field>
+    <mat-label>Task Minutes</mat-label>
+    <input matInput [(ngModel)]="data.minutes">
+  </mat-form-field>
+</div>
+
+<div mat-dialog-actions>
+  <p>Ready to execute task?</p>
+  <button mat-button (click)="onNoClick()">Cancel</button>
+  <button mat-button [mat-dialog-close]="data.minutes" cdkFocusInitial>Execute</button>
+</div>

angular/src/app/navpages/pomodoro/pomodoro.component.html

@@ -0,0 +1,36 @@
+<p>pomodoro works!</p>
+
+
+<mat-card style="background-color: #edf3f6;">
+
+  <div *ngIf="fba.user | async as user; else showLogin">
+    <h2>Hello {{ user.displayName }}!</h2>
+    <button (click)="logout()">Logout</button>
+  </div>
+  <ng-template #showLogin>
+    <p>Please login.</p>
+    <button (click)="login()">Login with Google</button>
+  </ng-template>
+
+</mat-card>
+
+
+
+
+<div>
+<mat-form-field>
+  <mat-label>Task name?</mat-label>
+  <input matInput [(ngModel)]="name">
+</mat-form-field>
+</div>
+
+<div>
+<mat-form-field>
+  <mat-label>Time in minutes</mat-label>
+  <input matInput [(ngModel)]="minutes">
+</mat-form-field>
+</div>
+
+<div>
+<button mat-raised-button (click)="openDialog()">Set</button>
+</div>

angular/src/app/navpages/pomodoro/pomodoro.component.spec.ts

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

angular/src/app/navpages/pomodoro/pomodoro.component.ts

@@ -0,0 +1,82 @@
+import {Component, Inject, OnInit} from '@angular/core';
+import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
+import {DataService, Data} from '../../service/firebase/pomodoro/data.service';
+import {AngularFireAuth} from '@angular/fire/auth';
+import {auth} from 'firebase';
+
+export interface DialogData {
+  minutes: string;
+  name: string;
+}
+
+
+@Component({
+  selector: 'app-pomodoro',
+  templateUrl: './pomodoro.component.html',
+  styleUrls: ['./pomodoro.component.css']
+})
+export class PomodoroComponent implements OnInit {
+  name: string;
+  minutes: string;
+  data: Data = {date: '', id: 0, minutes: 0, name: '', timeStamp: undefined};
+
+  constructor(public dialog: MatDialog,
+              public dataService: DataService,
+              public fba: AngularFireAuth) {
+
+  }
+  login(): void {
+    // Make sure domain is white listed on Firebase
+    this.fba.signInWithPopup(new auth.GoogleAuthProvider());
+
+  }
+
+  logout(): void {
+    this.fba.signOut();
+  }
+
+  openDialog(): void {
+    const dialogRef = this.dialog.open(DialogComponent, {
+      width: '250px',
+      data: {name: this.name, minutes: this.minutes}
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      console.log('The dialog was closed');
+      this.minutes = result;
+      this.updateFirebase();
+    });
+  }
+
+  updateFirebase(): void {
+
+    const timeStamp = new Date();
+    this.data.name = this.name;
+    this.data.minutes = parseInt(this.minutes, 10);
+    this.data.timeStamp = timeStamp;
+    this.data.date = timeStamp.toDateString();
+    this.dataService.addData(this.data);
+
+  }
+
+
+  ngOnInit(): void {
+  }
+
+}
+
+@Component({
+  selector: 'app-dialog',
+  templateUrl: './dialog-dialog.html',
+})
+export class DialogComponent {
+
+  constructor(
+    public dialogRef: MatDialogRef<DialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: DialogData) {}
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+}

angular/src/app/service/firebase/pomodoro/data.service.spec.ts

@@ -0,0 +1,16 @@
+// import { TestBed } from '@angular/core/testing';
+//
+// import { DataService } from './data.service';
+//
+// describe('DataService', () => {
+//   let service: DataService;
+//
+//   beforeEach(() => {
+//     TestBed.configureTestingModule({});
+//     service = TestBed.inject(DataService);
+//   });
+//
+//   it('should be created', () => {
+//     expect(service).toBeTruthy();
+//   });
+// });

angular/src/app/service/firebase/pomodoro/data.service.ts

@@ -0,0 +1,44 @@
+import { Injectable } from '@angular/core';
+import {AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument} from '@angular/fire/firestore';
+import {Observable} from 'rxjs';
+import {Gmail} from '../../../firebase/data/data.component';
+
+
+export interface Data {
+  name: string;
+  minutes: number;
+  timeStamp: Date;
+  id: number;
+  date?: string;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DataService {
+  data: Observable<Data>;
+  now: Date;
+
+  // private collection: AngularFirestoreCollection<Data>;
+  private dataDoc: AngularFirestoreDocument<Data>;
+
+
+  constructor(private afs: AngularFirestore) {
+    // this.collection = afs.collection<Data>('pomodoro/mchirico/tasks')
+    // this.data = this.collection.valueChanges();
+    // this.now = new Date();
+
+    this.dataDoc = afs.doc<Data>('pomodoro/mchirico/tasks/0');
+    this.data = this.dataDoc.valueChanges();
+
+
+
+  }
+  addData(data: Data): void {
+
+    this.dataDoc.set(data).catch(e => {
+      console.log(e);
+    });
+
+  }
+}