dashboard.component.ts

import { Component, OnInit } from '@angular/core';
import { FlashMessagesService } from 'angular2-flash-messages';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { AfterViewInit, ElementRef, Renderer } from '@angular/core';
import { FormGroup, FormBuilder, Validators, FormsModule  } from '@angular/forms';

import { Recipe } from '../../models/recipe';
import { Diary } from '../../models/diary';
import { GetRecipesService } from '../../services/get-recipes.service';
import { MorgningRecipes } from './../../models/morning-recipes';
import { SaveDiaryService } from '../../services/save-diary.service';


@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css'],
  providers:[GetRecipesService, SaveDiaryService]
})
export class DashboardComponent implements OnInit {
  public recipes = [];
  save_diary_form = {
    'name': '',
    'date_from': '',
    'date_to': '',
    'morning_recipes': [],
    'lunch_recipes': [],
    'dinner_recipes': [],
    'supper_recipes': [],
  }

  private url: string = 'http://188.166.100.169:8080/api/v1/diaries/create/';

  form: FormGroup;

  constructor(
    private http: HttpClient,
    private frmBuilder: FormBuilder, 
    private _getRecipe: GetRecipesService,
    private _elRef: ElementRef,
    public elref: ElementRef, 
    public renderer: Renderer,
    public saveDiaryService: SaveDiaryService
  ) { }

  ngOnInit() {
    this._getRecipe.getRecipes()
      .subscribe(
        data => this.recipes = data
      );
  }
 

  // Add to Diary Item
  onSelectRecipe(event, type) {
    const form = document.getElementById('create-diary-form');
    const saveBtn = document.getElementById('save-btn');

    if (event.target.parentElement.classList.contains('sportmenu-plus')) {

      // Get Name of Recipe
      let attrName = event.target.getAttribute('data-name');
      let attrId = event.target.getAttribute('data-id');
      console.log(type)
      switch (type) {
        case "morning":{
          this.save_diary_form.morning_recipes.push(attrId);
          break;
        }
        case "lunch":{
          this.save_diary_form.lunch_recipes.push(attrId);
          break;
        }
        case "dinner":{
          this.save_diary_form.dinner_recipes.push(attrId);
          break;
        }
        case "supper":{
          this.save_diary_form.supper_recipes.push(attrId);
          break;
        }
      }

      const formGroup = document.createElement('div');
      const icon = document.createElement('i');

      formGroup.innerHTML += `${attrName}`

      // Div
      formGroup.classList.add('form-group','d-flex', 'align-items-center');

      // I
      icon.classList.add('fa','fa-minus-circle');
    
      // Insert input and icon to .form-group
      formGroup.innerHTML += `<i class="fa fa-minus-circle delete-btn" aria-hidden="true"></i>`;
      formGroup.innerHTML += `<i class="fa fa-minus-circle delete-btn" aria-hidden="true"></i>`;

      // Insert .form-group to <form>
      form.insertBefore(formGroup, saveBtn);

      // Remove item from Diary
      let children = document.getElementsByClassName("delete-btn");
      for(let i =0; i< children.length; i++) {
        children[i].addEventListener('click', (event) => {
          event.currentTarget.parentElement.remove();
        });
      }

    }
  }

   // Save Diary
   saveDiary(e) {
     this.http.post(this.url, this.save_diary_form).subscribe(
      data => function (data) {
        this.token.handle(data.token);
        this.router.navigate(['/dashboard']);
      }
    );
  }
}