add on click events for items

src/app/app.component.html

@@ -3,19 +3,19 @@
     <mat-toolbar color="primary">
       <span>Folders</span>
     </mat-toolbar>
-    <app-foldernav [playlists]="playlists"></app-foldernav>
+    <app-foldernav [playlists]="playlists" (requestPlaylistEvent)="onRequestPlaylistEvent($event)"></app-foldernav>
   </mat-sidenav>
   <mat-sidenav-content>
     <mat-toolbar color="primary">
       <button mat-icon-button class="example-icon" (click)="sidenav.toggle()" aria-label="Toggle folder nav">
         <mat-icon>menu</mat-icon>
       </button>
-      <span>PCM</span>
+      <span>Private Cloud Music</span>
       <span class="example-spacer"></span>
       <button mat-icon-button class="example-icon favorite-icon">
         <mat-icon>favorite</mat-icon>
       </button>
     </mat-toolbar>
-    <app-playlist [filelist]="filelists"></app-playlist>
+    <app-playlist [filelist]="filelists" (requestPlaylistEvent)="onRequestPlaylistEvent($event)" (requestPlaybackEvent)="onRequestPlaybackEvent($event)"></app-playlist>
   </mat-sidenav-content>
 </mat-sidenav-container>

src/app/app.component.ts

@@ -10,21 +10,36 @@ import { FileList, MusicItem } from './filelist';
 export class AppComponent {
   title = 'Private Cloud Music';
   playlists: string[] = [];
+  currentPlaylist: string;
   filelists: FileList;
   
   constructor(public provider : DataproviderService) {}
   
   ngOnInit() : void {
-    this.fetchPlaylists();
+    this.fetchDefaultPlaylists();
   }
 
-  fetchPlaylists() : void {
-    this.provider.getFileList("/")
+  fetchDefaultPlaylists() : void {
+    this.provider.getFileList("")
       .subscribe(filelist => {
         this.playlists = filelist.subFolderList;
-        let firstFolder = this.playlists[0];
-        this.provider.getFileList(firstFolder)
-          .subscribe(filelist => this.filelists = filelist)
+        console.log(this.playlists);
+        this.fetchPlaylist(this.playlists[0]);
       });
   }
+
+  fetchPlaylist(playlistName : string) : void {
+    this.currentPlaylist = playlistName;
+    console.log(playlistName);
+    this.provider.getFileList(playlistName)
+      .subscribe(filelist => this.filelists = filelist)
+  }
+
+  onRequestPlaylistEvent(playlistName : string) : void {
+    this.fetchPlaylist(playlistName);
+  }
+
+  onRequestPlaybackEvent(musicItemName : string) : void {
+    console.log('baseurl/' + this.currentPlaylist + '/' + musicItemName);
+  }
 }

src/app/app.module.ts

@@ -1,13 +1,14 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
-import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MatSidenavModule } from '@angular/material/sidenav'
 import { MatListModule } from '@angular/material/list'
 import { MatToolbarModule } from '@angular/material/toolbar'
 import { MatIconModule } from '@angular/material/icon'
 import { MatButtonModule } from '@angular/material/button';
+import { HttpClientModule } from '@angular/common/http'
+import { AppComponent } from './app.component';
 import { FoldernavComponent } from './foldernav/foldernav.component';
 import { PlaylistComponent } from './playlist/playlist.component';
 
@@ -24,7 +25,8 @@ import { PlaylistComponent } from './playlist/playlist.component';
     MatIconModule,
     MatButtonModule,
     BrowserModule,
-    BrowserAnimationsModule
+    BrowserAnimationsModule,
+    HttpClientModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/dataprovider.service.ts

@@ -1,14 +1,31 @@
 import { Injectable } from '@angular/core';
-import { FileList } from  './filelist'
+import { FileList, FileListResponse } from  './filelist'
 import { Observable, of } from 'rxjs';
+import { catchError, map, tap } from 'rxjs/operators';
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
 
 @Injectable({
   providedIn: 'root'
 })
 export class DataproviderService {
 
-  constructor() { 
-    this.mock_FILELIST = {
+  private apiUrl = "http://127.0.0.1:616/api.php";
+
+  constructor(
+    private http: HttpClient
+  ) {
+    this.mock_EMPTYFILELIST = {
+      subFolderList: [],
+      musicList: [
+        {
+          fileName: "",
+          fileSize: 0,
+          modifiedTime: 0
+        }
+      ]
+    }
+
+    this.mock_BASEFILELIST = {
       subFolderList: ["AAAA", "BBBB"],
       musicList: [
         {
@@ -18,11 +35,63 @@ export class DataproviderService {
         }
       ]
     }
+
+    this.mock_FILELISTAAAA = {
+      subFolderList: ["DDDD", "EEEE"],
+      musicList: [
+        {
+          fileName: "EEEEE.mp3",
+          fileSize: 9951652,
+          modifiedTime: 1556423252
+        }
+      ]
     }
 
-  mock_FILELIST : FileList;
+    this.mock_FILELISTBBBB = {
+      subFolderList: ["FFFF", "GGGG"],
+      musicList: [
+        {
+          fileName: "FFFFF.mp3",
+          fileSize: 9951652,
+          modifiedTime: 1556423252
+        }
+      ]
+    }
+  }
+
+  mock_EMPTYFILELIST : FileList;
+  mock_BASEFILELIST : FileList;
+  mock_FILELISTAAAA : FileList;
+  mock_FILELISTBBBB : FileList;
   
   getFileList(path : string) : Observable<FileList> {
-    return of(this.mock_FILELIST);
+    switch (path) {
+      case "AAAA":
+        return of(this.mock_FILELISTAAAA);
+      case "BBBB":
+        return of(this.mock_FILELISTBBBB);
+      default:
+        return of(this.mock_BASEFILELIST);
+    }
+  }
+
+  getFileListReal(path : string) : Observable<FileList> {
+    const body = new HttpParams()
+      .set('do', 'getfilelist')
+      .set('folder', path);
+    return this.http.post<FileListResponse>(this.apiUrl, body.toString(), {
+      headers: new HttpHeaders()
+        .set('Content-Type', 'application/x-www-form-urlencoded')
+    }).pipe(
+      map(h => h.result.data),
+      catchError(this.handleError<FileList>(this.mock_EMPTYFILELIST))
+    );
+  }
+
+  private handleError<T>(result?: T) {
+    return (error: any): Observable<T> => {
+      console.error(error); // log to console instead
+      return of(result as T);
+    };
   }
 }

src/app/filelist.ts

@@ -1,10 +1,21 @@
 export interface MusicItem {
-    fileName : string;
-    fileSize : number;
-    modifiedTime : number;
+    fileName: string;
+    fileSize: number;
+    modifiedTime: number;
 }
 
 export interface FileList {
-    subFolderList : string[];
-    musicList : MusicItem[];
+    subFolderList: string[];
+    musicList: MusicItem[];
+}
+
+export interface FileListResult {
+    type: string;
+    data: FileList;
+}
+
+export interface FileListResponse {
+    status: number;
+    message: string;
+    result: FileListResult;
 }

src/app/foldernav/foldernav.component.html

@@ -1,3 +1,3 @@
 <mat-nav-list>
-  <a *ngFor="let playlist of playlists" mat-list-item href="#">{{ playlist }}</a>
+  <a *ngFor="let playlist of playlists" mat-list-item (click)="requestPlaylist(playlist)">{{ playlist }}</a>
 </mat-nav-list>

src/app/foldernav/foldernav.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
   selector: 'app-foldernav',
@@ -8,9 +8,14 @@ import { Component, OnInit, Input } from '@angular/core';
 export class FoldernavComponent implements OnInit {
 
   @Input() playlists : string[] = [];
+  @Output() requestPlaylistEvent = new EventEmitter<string>();
 
   constructor() { }
 
   ngOnInit(): void {
   }
+
+  requestPlaylist(playlistName : string): void {
+    this.requestPlaylistEvent.emit(playlistName);
+  }
 }

src/app/playlist/playlist.component.html

@@ -1,10 +1,10 @@
 <mat-nav-list>
-  <mat-list-item *ngFor="let folderItem of filelist.subFolderList">
+  <mat-list-item *ngFor="let folderItem of filelist.subFolderList" (click)="requestPlaylist(folderItem)">
     <mat-icon matListIcon>folder</mat-icon>
-    <a href="#">{{ folderItem }}</a>
+    <a>{{ folderItem }}</a>
   </mat-list-item>
-  <mat-list-item *ngFor="let musicItem of filelist.musicList">
+  <mat-list-item *ngFor="let musicItem of filelist.musicList" (click)="requestPlayback(musicItem)">
     <mat-icon matListIcon>audiotrack</mat-icon>
-    <a href="#">{{ musicItem.fileName }}</a>
+    <a>{{ musicItem.fileName }}</a>
   </mat-list-item>
 </mat-nav-list>

src/app/playlist/playlist.component.ts

@@ -1,5 +1,5 @@
-import { Component, OnInit, Input } from '@angular/core';
-import { FileList } from '../filelist'
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { FileList, MusicItem } from '../filelist'
 
 @Component({
   selector: 'app-playlist',
@@ -9,9 +9,19 @@ import { FileList } from '../filelist'
 export class PlaylistComponent implements OnInit {
 
   @Input() filelist : FileList;
+  @Output() requestPlaylistEvent = new EventEmitter<string>();
+  @Output() requestPlaybackEvent = new EventEmitter<string>();
 
   constructor() { }
 
   ngOnInit(): void {
   }
+
+  requestPlaylist(playlistName : string): void {
+    this.requestPlaylistEvent.emit(playlistName);
+  }
+
+  requestPlayback(musicItem : MusicItem): void {
+    this.requestPlaybackEvent.emit(musicItem.fileName);
+  }
 }