Added grid animation; Added config api;

.gitignore

@@ -1,2 +1,6 @@
 config.json
+RadioWatch.sln
+global.json
+.vs/**
+.gitattributes
 

src/RadioWatch/ClientApp/app/actions/app-config-actions.ts

@@ -0,0 +1,35 @@
+import { Injectable } from '@angular/core';
+import { IAppState } from '../store';
+import { NgRedux } from 'ng2-redux';
+import { List } from 'immutable';
+import { ApiService } from '../services'
+import { Observable, Subscription, Subject } from 'rxjs';
+
+export const APP_CONFIG_ACTIONS = {
+ YOUTUBE_TOKEN_RECEIVED: "YOUTUBE_TOKEN_RECEIVED",
+ YOUTUBE_TOKEN_NOT_RECEIVED: "YOUTUBE_TOKEN_NOT_RECEIVED"
+}
+
+@Injectable()
+export class AppConfigActions {
+ constructor(private ngRedux: NgRedux<IAppState>, private api: ApiService) {
+ }
+
+ getYoutubeApiToken() {
+ this.api.get('/api/config/youtube')
+ .do(data => {
+ this.ngRedux.dispatch({
+ type: APP_CONFIG_ACTIONS.YOUTUBE_TOKEN_RECEIVED,
+ payload: {
+ token: data.token
+ }
+ });
+ })
+ .catch((err) => {
+ console.log(err);
+ return this.ngRedux.dispatch({
+ type: APP_CONFIG_ACTIONS.YOUTUBE_TOKEN_NOT_RECEIVED
+ });
+ }).subscribe();
+ }
+}

src/RadioWatch/ClientApp/app/actions/index.ts

@@ -17,4 +17,7 @@ export {
  YoutubeWindowActions,
  IYoutubeSearchResponse,
  IYoutubeSearch
-} from './youtube-window-actions';
+} from './youtube-window-actions';
+export {
+ AppConfigActions
+} from './app-config-actions'

src/RadioWatch/ClientApp/app/actions/phalanxremotegrid.actions.ts

@@ -121,7 +121,6 @@ export class PhxRmtGridActions {
  atIndexInsert: rowInfo.index + 1,
  }
  });
- console.log(rowInfo);
  }
 
  collapseRow(rowInfo: any) {
@@ -131,7 +130,6 @@ export class PhxRmtGridActions {
  key: rowInfo.row.key,
  }
  });
- console.log(rowInfo);
  }
 
  private phxGridApplyPagingOnData(data?: any, state?: any): any {
@@ -150,8 +148,6 @@ export class PhxRmtGridActions {
  const sort = state.phxRmtGrid.sort;
  const by = state.phxRmtGrid.by;
  const sortedData = data.sort((a, b) => {
- console.log(a);
- console.log(b);
  if (a.data[sort] > b.data[sort]) {
  return 1 * by;
  }

src/RadioWatch/ClientApp/app/actions/youtube-window-actions.ts

@@ -16,15 +16,14 @@ export const YOUTUBE_WINDOW_ACTIONS = {
  PLAYER_LOADED: "PLAYER_LOADED",
  PLAYER_STATE_CHANGE: "PLAYER_STATE_CHANGE",
  VIDEO_CHANGED: "VIDEO_CHANGED",
- VIDEO_CHANGED_ERROR: "VIDEO_CHANGED_ERROR"
+ VIDEO_CHANGED_ERROR: "VIDEO_CHANGED_ERROR",
 }
 
 export const YOUTUBE_WINDOWS_ACTIONS = {
  ADD_WINDOW: "ADD_WINDOW",
  REMOVE_WINDOW: "REMOVE_WINDOW"
 }
 
-
 @Injectable()
 export class YoutubeWindowActions {
  constructor(private ngRedux: NgRedux<IAppState>, private api: ApiService, private ytService: YoutubeService) {
@@ -67,10 +66,13 @@ export class YoutubeWindowActions {
  apiResponse: videoData.apiResponse,
  }
  });
- }).catch(() =>
- this.ngRedux.dispatch({
+ }).catch((err) => {
+ console.log(err);
+ return this.ngRedux.dispatch({
  type: YOUTUBE_WINDOW_ACTIONS.SEARCHING_FAILED
- })).subscribe();
+ })
+ }).subscribe();
+
  }
 
  initYoutubeWindow(playerId: string) {

src/RadioWatch/ClientApp/app/app.providers.ts

@@ -1,13 +1,14 @@
 import * as services from './services';
 import { YoutubeService } from './services';
-import { PhxGridActions, PhxRmtGridActions, YoutubeWindowActions } from './actions';
+import { PhxGridActions, PhxRmtGridActions, YoutubeWindowActions, AppConfigActions } from './actions';
 import { DevToolsExtension } from 'ng2-redux';
 
 const mapValuesToArray = (obj) => Object.keys(obj).map(key => obj[key]);
 export const providers = [
  PhxGridActions,
  PhxRmtGridActions,
  YoutubeWindowActions,
+ AppConfigActions,
  DevToolsExtension,
  YoutubeService,
  ...mapValuesToArray(services)

src/RadioWatch/ClientApp/app/components/app/app.component.ts

@@ -1,19 +1,21 @@
-import { Component, AfterViewInit} from '@angular/core';
+import { Component, AfterViewInit, OnInit } from '@angular/core';
 import { YoutubeService } from "../../services";
 import { NgRedux, DevToolsExtension } from 'ng2-redux';
 import { IAppState, rootReducer, enhancers } from '../../store';
+import { AppConfigActions } from '../../actions'
 
 @Component({
  selector: 'app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
 })
-export class AppComponent {
- constructor(public ytService: YoutubeService, ngRedux: NgRedux<IAppState>, devTool: DevToolsExtension) {
+export class AppComponent implements AfterViewInit {
+ constructor(private ytService: YoutubeService, private appConfigActions: AppConfigActions,  ngRedux: NgRedux<IAppState>, devTool: DevToolsExtension) {
  //add middleware and enhancers
  ngRedux.configureStore(rootReducer, {}, [], [...enhancers, devTool.isEnabled() ? devTool.enhancer() : f => f] );
+ appConfigActions.getYoutubeApiToken();
  }
-
+ 
  ngAfterViewInit(): void {
  this.ytService.pullScripts();
  }

src/RadioWatch/ClientApp/app/components/display/test-display.html

@@ -1,9 +1,5 @@
- <h1>Video</h1>
-<div class="flex-container">
- <div class="flex-column">
- <div class="flex-center">
- <youtube-adapter>
- </youtube-adapter>
- </div>
- </div>
-</div>
+<h1>Video</h1>
+<div [@gridExpansionAnimationState]>
+ <youtube-adapter-scroll>
+ </youtube-adapter-scroll>
+</div>

src/RadioWatch/ClientApp/app/components/display/test-display.ts

@@ -1,12 +1,43 @@
-import { Component, OnInit } from '@angular/core';
+import {
+ Component,
+ OnInit,
+ AfterViewInit,
+ Input,
+ trigger,
+ state,
+ style,
+ transition,
+ animate
+} from '@angular/core';
 
 @Component({
  selector: 'test-display',
  templateUrl: './test-display.html',
- styleUrls: ['./test-display.css']
+ styleUrls: ['./test-display.css'],
+ animations: [
+ trigger('gridExpansionAnimationState', [
+ state('in', style({ height: '*', opacity: 1 })),
+ transition('* => void', [
+ style({ height: '*', opacity: 1 }),
+ animate(300, style({ height: 0 })),
+ animate(300, style({ opacity: 0 })),
+ ]),
+ transition('void => *', [
+ style({ height: 0, opacity: 0 }),
+ animate(300, style({ height: '*' })),
+ animate(300, style({ opacity: 1 }))
+ ]),
+ ])
+ ]
+
 })
 export class TestDisplayComponent implements OnInit {
  constructor() { }
-
+ state = 'inactive';
  ngOnInit() { }
+
+ changeState() {
+ // 'gridExpansionAnimationState'
+ this.state = this.state == 'inactive' ? 'active' : 'inactive';
+ }
 }

src/RadioWatch/ClientApp/app/components/grid-remote/phalanx-remote-grid-expansion.ts

@@ -3,13 +3,13 @@ import { Component, OnInit, Input } from '@angular/core';
 @Component({
  selector: 'phx-rmt-grid-expansion',
  templateUrl: './phalanx-remote-grid-expansion.html',
- styleUrls: ['./phalanx-remote-grid-expansion.css']
+ styleUrls: ['./phalanx-remote-grid-expansion.css'],
 })
 export class PhalanxRemoteGridExpansionComponent implements OnInit {
  constructor() { }
  @Input() rowData: any;
  searchTerm: string;
- ngOnInit() { 
- this.searchTerm = this.rowData.data.artistName + " " + this.rowData.data.trackName; 
+ ngOnInit() {
+ this.searchTerm = this.rowData.data.artistName + " " + this.rowData.data.trackName;
  }
 }

src/RadioWatch/ClientApp/app/components/grid-remote/phalanx-remote-grid-ui.html

@@ -1,7 +1,7 @@
 <table class="table">
  <thead>
  <tr>
- <th *ngFor="let col of setting.columns" [hidden]="!col.visible" [ngStyle]="{'width': '30%'}">
+ <th *ngFor="let col of setting.columns" [hidden]="!col.visible" [ngStyle]="{'width': gridBlockWidthPercent }">
  {{col.colName}}
 
  <a [hidden]="by==-1 || !setting.allowSorting" (click)="sort(col.dataName,-1)">
@@ -17,27 +17,24 @@
  </thead>
 </table>
 
-
-
-
-
-<table *ngFor="let c of displayData; let i = index;" class="table">
- <tr *ngIf="c.data.isExpansionRowPhxRmtGrid">
- <phx-rmt-grid-expansion [rowData]="displayData.get(i-1)" ></phx-rmt-grid-expansion>
- </tr>
- <td *ngIf="!c.data.isExpansionRowPhxRmtGrid">
- <a (click)="expandOrCollapseRow(c,i)"> <i class="glyphicon glyphicon-resize-vertical"></i></a>
- </td>
- <td *ngFor="let col of setting.columns" [hidden]="!col.visible && !c.data.isExpansionRowPhxRmtGrid" [ngStyle]="{'width': '30%'}">
- <phx-remote-grid-block [value]="c.data[col.dataName]"></phx-remote-grid-block>
- </td>
- <td *ngIf="!c.data.isExpansionRowPhxRmtGrid" [hidden]="!setting.allowDelete">
- <a (click)="deleteRow(c)">
- <i class="glyphicon glyphicon-trash"></i>
- </a>
- </td>
-</table>
-
+<div *ngFor="let c of displayData; let i = index;" [@rollHeightAndFade]="c.data.isExpansionRowPhxRmtGrid ? 'expansion' : ''">
+ <div *ngIf="c.data.isExpansionRowPhxRmtGrid">
+ <phx-rmt-grid-expansion [rowData]="displayData.get(i-1)"></phx-rmt-grid-expansion>
+ </div>
+ <table class="table" *ngIf="!c.data.isExpansionRowPhxRmtGrid" [@fadeIn]="whenGridPopulating">
+ <td>
+ <a (click)="expandOrCollapseRow(c,i)"> <i class="glyphicon glyphicon-resize-vertical"></i></a>
+ </td>
+ <td *ngFor="let col of setting.columns" [hidden]="!col.visible" [ngStyle]="{'width': gridBlockWidthPercent}">
+ <phx-remote-grid-block [value]="c.data[col.dataName]"></phx-remote-grid-block>
+ </td>
+ <td [hidden]="!setting.allowDelete">
+ <a (click)="deleteRow(c)">
+ <i class="glyphicon glyphicon-trash"></i>
+ </a>
+ </td>
+ </table>
+</div>
 
 
 <div class="btn-group" style="margin: 0px auto;" [ngStyle]="{'width': paginationWidth}">

src/RadioWatch/ClientApp/app/components/grid-remote/phalanx-remote-grid-ui.ts

@@ -1,15 +1,56 @@
-import { Component, Input, Output, ChangeDetectionStrategy, EventEmitter } from '@angular/core';
+import {
+ Component, Input, Output, ChangeDetectionStrategy, EventEmitter, AfterViewInit,
+ trigger,
+ state,
+ style,
+ transition,
+ animate
+} from '@angular/core';
 import { IPhxRmtGridSettingState, IPhxRmtGridItemState, IPhxRmtGridPaginationState, IPhxRmtGridColumnState } from '../../store';
 import { List, Iterable } from 'immutable';
+import { Observable } from 'rxjs';
 
 @Component({
  selector: 'phx-remote-grid-ui',
  templateUrl: './phalanx-remote-grid-ui.html',
- changeDetection: ChangeDetectionStrategy.Default
+ changeDetection: ChangeDetectionStrategy.Default,
+ animations: [
+ trigger('rollHeightAndFade', [
+ state('expansion', style({ height: '*', opacity: 1 })),
+ transition('void => expansion', [
+ style({ height: 0, opacity: 0 }),
+ animate(300, style({ height: '*' })),
+ animate(300, style({ opacity: 1 }))
+ ]),
+ transition('expansion => void', [
+ style({ height: '*',opacity: 1 }),
+ animate(300, style({ opacity: 0 })),
+ animate(300, style({ height: 0 }))
+ ])
+ ]),
+ trigger('fadeIn',[
+ transition('void => PLS_FADE', [
+ style({ opacity: 0 }),
+ animate(300, style({ opacity: 1 }))
+ ]),
+ ])
+ ]
 })
-export class PhalanxRemoteGridUiComponent {
+export class PhalanxRemoteGridUiComponent implements AfterViewInit {
  constructor() { }
 
+ //constants? Maybe create a file in each component folder?
+ PLS_FADE = 'PLS_FADE';
+ NO_FADE = 'NO_FADE';
+ DROP_ALL_ANIMATIONS = 'DROP_ALL_ANIMATIONS';
+
+ //Since expansion..have to line up grid blocks. 
+ //todo: This should be calculated from what user wishes to be displayed i.e `${count*10}%`
+ gridBlockWidthPercent = '30%'
+
+ //Expansion rewrites the grid..
+ whenGridPopulating = this.PLS_FADE;
+
  @Input() displayData: List<IPhxRmtGridItemState>
  @Input() setting: IPhxRmtGridSettingState
  @Input() paginationButtonColors: List<IPhxRmtGridPaginationState>
@@ -24,7 +65,9 @@ export class PhalanxRemoteGridUiComponent {
  @Output() collapseRowEvent = new EventEmitter();
 
  changePage(page) {
+ this.whenGridPopulating = this.PLS_FADE;
  this.changePageEvent.emit(page)
+ this.setNoFade();
  }
  sort(sort, by) {
  this.sortEvent.emit({ sort: sort, by: by })
@@ -35,6 +78,17 @@ export class PhalanxRemoteGridUiComponent {
  else
  this.expandRowEvent.emit({ row: row, index: i });
  }
- deleteRow(row) {
+
+ //todo: implement
+ deleteRow(row) {}
+
+ ngAfterViewInit() {
+ this.setNoFade();
+ }
+
+ setNoFade() {
+ //less than ideal..counting on no computation to perform as it does on localhost..
+ let obs = Observable.timer(400).take(1);
+ obs.subscribe(() => this.whenGridPopulating = this.NO_FADE);
  }
 }

src/RadioWatch/ClientApp/app/components/grid/phalanx-grid-expansion.html

@@ -1,4 +1,4 @@
-<div class="" [id]="expansionId">
+<div [id]="expansionId">
  <youtube-adapter-scroll>
  </youtube-adapter-scroll>
 </div>