andrewevans0102

import { Component } from '@angular/core';
import { MorseOutput } from '../models/morse-output';

@Component({
  selector: 'app-morse-sound',
  templateUrl: './morse-sound.component.html',
  styleUrls: ['./morse-sound.component.css']
})
export class MorseSoundComponent {

andrewevans0102

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [

andrewevans0102

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { environment } from '../environments/environment';

@NgModule({

andrewevans0102

<div class="container">
  <div class="row add-item" *ngIf="afAuth.user | async as user; else showLogin">
    <div class="container">
      <div class="row">
        <div class="col-sm welcome-display">
          <h1>Welcome {{userEmail}}!</h1>
          <button type="button" class="btn btn-danger logout-button" (click)="logoutUser()">Logout</button>
        </div>
      </div>
    </div>

andrewevans0102

import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { AngularFireAuth } from '@angular/fire/auth';

@Component({
  selector: 'app-groceries',
  templateUrl: './groceries.component.html',
  styleUrls: ['./groceries.component.css']
})
export class GroceriesComponent {

andrewevans0102

.add-item{
    padding-top: 1em;
    padding-bottom: 1em;
    font-size: 2em;
}

.grocery-title{
    padding-top: 1em;
}

andrewevans0102

  // create doc of type Item that represents the individual GroceryItems nested collection
  groceryItemsDoc: AngularFirestoreDocument<any>;
  groceryItems: Observable<any>;

  constructor(public afAuth: AngularFireAuth, public afs: AngularFirestore) {
    this.afAuth.auth.onAuthStateChanged(user => {
      if (user) {
        // when logged in show user email here
        this.userEmail = user.email;
      }

andrewevans0102

    selectItems() {
        this.groceryItemsDoc = this.afs.doc<any>('user/' + this.afAuth.auth.currentUser.uid);
        this.groceryItems = this.groceryItemsDoc.collection<any>('GroceryItems').valueChanges();
        // turn on logging if you want to see how the requests are sent
        // this.groceryItemsDoc.collection<GroceryItem>('GroceryItems').auditTrail().subscribe(console.log);
    }    

    // async is not necessary here, but using it to control event loop
    async addItem() {
      const id = this.afs.createId();

andrewevans0102

<div class="container">
  <div class="row add-item" *ngIf="afAuth.user | async as user; else showLogin">
    <div class="container">
      <div class="row">
        <div class="col-sm welcome-display">
          <h1>Welcome {{userEmail}}!</h1>
        </div>
      </div>
      <div class="row" class="create-form">
        <div class="col-sm">

andrewevans0102

  onSubmit() {
    if (this.audioContext === undefined) {
      // Chrome requires audio context after gesture
      // https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio
      this.createContext();
    }

    this.generateMorse(this.audioContext.currentTime, this.morseText);
  }