Adding new components

angular/src/app/concert/concert.component.html

@@ -0,0 +1,3 @@
+<p>
+  concert works!
+</p>

angular/src/app/concert/concert.component.spec.ts

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

angular/src/app/concert/concert.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-concert',
+  templateUrl: './concert.component.html',
+  styleUrls: ['./concert.component.css']
+})
+export class ConcertComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

angular/src/app/genretrain/genretrain.component.css

@@ -0,0 +1,25 @@
+.genres-list {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-row-gap: 10px;
+  justify-items: center;
+}
+
+.genre-circle {
+  width: 170px;
+  height: 170px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /*
+  background: #314755;  
+  background: -webkit-linear-gradient(to right, #26a0da, #314755);  
+  background: linear-gradient(to right, #26a0da, #314755); 
+  */
+}
+
+.selected {
+  filter: contrast(200%);
+}

angular/src/app/genretrain/genretrain.component.html

@@ -0,0 +1,7 @@
+<ul class="genres-list">
+  <li *ngFor="let genre of genres$ | async" class="genre-circle" [style.background]="genre.color" [class.selected]="genre?.selected==true" (click)="toggleSelected(genre)">
+    {{genre.name}}
+  </li>
+</ul>
+
+<button mat-mini-fab color="accent">Accent</button>

angular/src/app/genretrain/genretrain.component.spec.ts

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

angular/src/app/genretrain/genretrain.component.ts

@@ -0,0 +1,77 @@
+import { Component, OnInit } from '@angular/core';
+
+import { of, Observable } from 'rxjs';
+
+import { MusicService } from '../services/music.service';
+
+@Component({
+  selector: 'app-genretrain',
+  templateUrl: './genretrain.component.html',
+  styleUrls: ['./genretrain.component.css']
+})
+export class GenretrainComponent implements OnInit {
+
+  offlineTesting: boolean = false;
+  genres$: Observable<Object>;
+  hexValues = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e"];
+
+  constructor(private musicService: MusicService) { }
+
+  ngOnInit() {
+    if (this.offlineTesting) {
+      this.genres$ = this.sampleGenresResponse();
+      console.log(this.genres$);
+    } else {
+      this.musicService.genres().subscribe((response: Object[]) => {
+        for (let genre of response) {
+          genre["color"] = this.getRandomGradient();
+        }
+        this.genres$ = of(response);
+        console.log(response);
+      });
+    }
+  }
+
+  toggleSelected(genre) {
+    genre["selected"] = !genre["selected"];
+    console.log(genre);
+  }
+
+  getRandomGradient() {
+    const newColor1 = this.getRandomColor('#');
+    const newColor2 = this.getRandomColor('#');
+    const angle = 45;
+
+    return "linear-gradient(" + angle + "deg, " + newColor1 + ", " + newColor2 + ")";
+  }
+
+  getRandomColor(a) {
+    for (var i = 0; i < 6; i++) {
+      var x = Math.round(Math.random() * 14);
+      var y = this.hexValues[x];
+      a += y;
+    }
+    return a;
+  }
+
+  sampleGenresResponse(): Observable<Object> {
+    const response = `[
+      {
+        "gcount": 100,
+        "genreID": 1,
+        "name": "Rock"
+      },
+      {
+        "gcount": 54,
+        "genreID": 2,
+        "name": "Alternative"
+      },
+      {
+        "gcount": 20,
+        "genreID": 3,
+        "name": "Electronic"
+      }
+    ]`;
+    return of(<Object>JSON.parse(response));
+  }
+}

angular/src/app/login/login.component.html

@@ -0,0 +1,12 @@
+<section>
+  <mat-form-field>
+    <mat-label>Login With User</mat-label>
+    <mat-select [(value)]="selected">
+      <mat-option *ngFor="let user of users" [value]="user">
+        {{user.name}}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+</section>
+
+<button mat-raised-button color="accent" (click)="setLoggedInUser(selected)" routerLink="/genretrain">Login with {{selected.name}}</button>

angular/src/app/login/login.component.spec.ts

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

angular/src/app/login/login.component.ts

@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+import { environment } from '../../environments/environment';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.css']
+})
+export class LoginComponent implements OnInit {
+  lsLoginKey: string = 'loggedInUser';
+  users: Object[] = [
+    { name: 'Beth', id: 1 },
+    { name: 'Marianela', id: 2 },
+    { name: 'Daniel', id: 3 }
+  ];
+
+  selected: Object = { name: 'Beth', id: 1 };
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  setLoggedInUser(selected) {
+    localStorage.setItem(environment.lsLoginKey, JSON.stringify(selected));
+    console.log(selected);
+  }
+
+}