add on click events for items

This commit is contained in:
Gary Wang 2020-07-13 16:39:24 +08:00
parent 23f14a1e09
commit 9a2e88d016
9 changed files with 141 additions and 29 deletions

View File

@ -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>

View File

@ -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);
}
}

View File

@ -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]

View File

@ -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);
};
}
}

View File

@ -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;
}

View File

@ -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>

View File

@ -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);
}
}

View File

@ -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>

View File

@ -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);
}
}