Azure Functions Part - Write Up Service

backend.service.ts

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';

import {Http, Headers, Response} from '@angular/http';
import 'rxjs/add/operator/toPromise';

import {HttpClient} from '@angular/common/http';

import { environment } from 'environments/environment';
import { Injectable } from '@angular/core';
import { Wardrobe } from './Wardrobe';

@Injectable()
export class BackendService {

  constructor(private http: HttpClient) { }

  getWardrobe(series: String) : Promise<Wardrobe> { 
    var url = "URL_TO_AZURE_FUNCTION";   
    return this.http.get<Wardrobe>(url)
      .toPromise();
  }

}

home.component.html

<style>
  h1 {
    font-family: 'Lobster', cursive;
    color: #fa8072;
  }

  .smallheader {
    font-size: 24px;
  }

  .shirtSelector {
    z-index: 100;
  }

  .pantSelector {
    z-index: 1;
  }

  .shoeSelector {
    z-index: 1;
  }

  #bill {
    height: 300px;
    width: 250px;
  }

  #shoes {
    height: 50px;
    width: 250px;
    background-color: pink;
  }


  .oval {
    width: 100px;
    height: 30px;
    background: #fa8072;
    -moz-border-radius: 100px / 30px;
    -webkit-border-radius: 100px / 30px;
    border-radius: 100px / 30px;
    opacity: 0.3;
  }

  .ovalgray {
    width: 100px;
    height: 30px;
    background: #AAAAAA;
    -moz-border-radius: 100px / 30px;
    -webkit-border-radius: 100px / 30px;
    border-radius: 100px / 30px;
    opacity: 0.1;
  }

  .ovalbig {
    width: 300px;
    height: 80px;
    background: #fa8072;
    -moz-border-radius: 300px / 80px;
    -webkit-border-radius: 300px / 80px;
    border-radius: 300px / 80px;
    opacity: 0.3;
  }
</style>

<div class="container-fluid">

  <div class="row">

    <div class="col-sm-4">
      <img id="bill" src="{{outputUrl}}" />
      <div class="ovalbig"></div>
    </div>

    <div class="col-sm-8">

      <div class="container-fluid">

        <div class="row">
          <div class="col-xs-8">
            <h1 class="smallheader">Shirt</h1>
          </div>
        </div>

        <div class="row">
          <div *ngFor="let s of shirts()" class="col-sm-3">
            <img height="100px" width="100px" (click)="selectShirt(s.Id)" 
              class="shirtSelector" src="{{s.ImageUrl}}" />
            <div [class]="shirt == s.Id ? 'oval': 'ovalgray'">
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-xs-8">
            {{shirtDescription}}
            <a target="_blank" href="{{shirtLink}}">buy</a>
          </div>
        </div>


        <div class="row">
          <div class="col-xs-8">
            <h1 class="smallheader">Pants</h1>
          </div>
        </div>

        <div class="row">
          <div *ngFor="let p of pants()" class="col-sm-3">
            <img height="100px" width="100px" (click)="selectPants(p.Id)" 
              class="pantSelector" src="{{p.ImageUrl}}" />
            <div [class]="pant == p.Id ? 'oval': 'ovalgray'">
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-xs-8">
            {{pantDescription}}
            <a target="_blank" href="{{pantLink}}">buy</a>
          </div>
        </div>

        <div class="row">
          <div class="col-xs-8">
            <h1 class="smallheader">Shoes</h1>
          </div>
        </div>

        <div class="row">
          <div class="col-sm-3">
            <img height="100px" width="100px" src="{{shoeURL}}" />
            <div class="oval">
            </div>
          </div>
        </div>

        <div class="row">

          <div class="col-xs-8">
            {{shoeDescription}}
            <a target="_blank" href="{{shoeLink}}">buy</a>
          </div>

        </div>

      </div>

    </div>

  </div>

  <div class="row">
    <hr />
  </div>

  <div class="row">
    <div class="col-sm-12">
      <p>
        I am Chad Michel 
        
        <a href="https://twitter.com/chadmichel?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">@chadmichel</a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

        , an engineer without any fashion sense. Bill is an engineer with fashion sense. We had a common blog post
        request on our board at DPL called "Whatever Bill Has...". After seeing the blog post linger for week after week,
        I decided to do a blog post called "Whatever Bill Has". To do the blog post I had to create something, so I created
        an Angular web application, hosted on Azure Functions, reads / writes data from Cosmos DB. The application is giving
        Bill, remember the engineer with fashion sense, a chance to show off his fasion sense.
      </p>
    </div>
  </div>

</div>

home.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Wardrobe } from '../Wardrobe';
import { BackendService } from '../backend.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor(
    private backendService: BackendService,
    private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.params.subscribe(params => {
      var w = params.id; 
      this.backendService.getWardrobe(w).then(
        wardrobe => {
          this.wardrobe = wardrobe;
          this.calcOutfit();
        });
    });

  }

  public wardrobe: Wardrobe;

  public shirt = 0;
  public pant = 0;
  public outfit = 0;
  public outfitDescription = "";

  public shirtDescription = "";
  public shirtLink = "";
  public pantDescription = "";
  public pantLink = "";
  public shoeDescription = "";
  public shoeLink = "";
  public shoeURL = "";

  public outputUrl = "https://whateverbillhasstorage.blob.core.windows.net/whateverbillhasstatic/outfit_1.png";

  private calcOutfit() {

    this.outfit = this.pant * 4 + this.shirt + 0;

    if (this.wardrobe != null && this.wardrobe.Outfits != null) {

      let o = this.wardrobe.Outfits[this.outfit];
      this.outputUrl = o.ImageUrl;
      this.outfitDescription = o.id;

      var s = this.wardrobe.Shirts[this.shirt];
      this.shirtDescription = s.Description;
      this.shirtLink = s.Link;

      var p = this.wardrobe.Pants[this.pant];
      this.pantDescription = p.Description;
      this.pantLink = p.Link;

      var s = this.wardrobe.Shoes[o.Shoe];
      this.shoeDescription = s.Description;
      this.shoeLink = s.Link;
      this.shoeURL = s.ImageUrl;
    }
  }

  public selectShirt(num) {
    this.shirt = num;
    this.calcOutfit();
  }

  public selectPants(num) {
    this.pant = num;
    this.calcOutfit();
  }

  public shirts() {
    if (this.wardrobe == null) {
      return [];
    }
    return this.wardrobe.Shirts;
  }

  public pants() {
    if (this.wardrobe == null) {
      return [];
    }
    return this.wardrobe.Pants;
  }
}