wtf

src/app/modules/material/material.module.ts

@@ -0,0 +1,82 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  MatBadgeModule,
+  MatProgressSpinnerModule,
+  MatCheckboxModule,
+  MatAutocompleteModule,
+  MatFormFieldModule,
+  MatButtonModule,
+  MatButtonToggleModule,
+  MatCardModule,
+  MatChipsModule,
+  MatDatepickerModule,
+  MatDialogModule,
+  MatExpansionModule,
+  MatGridListModule,
+  MatIconModule,
+  MatInputModule,
+  MatListModule,
+  MatMenuModule,
+  MatNativeDateModule,
+  MatPaginatorModule,
+  MatProgressBarModule,
+  MatRadioModule,
+  MatRippleModule,
+  MatSelectModule,
+  MatSidenavModule,
+  MatSliderModule,
+  MatSlideToggleModule,
+  MatSnackBarModule,
+  MatSortModule,
+  MatTableModule,
+  MatTabsModule,
+  MatToolbarModule,
+  MatTooltipModule,
+} from '@angular/material';
+
+const material = [
+    MatBadgeModule,
+    MatProgressSpinnerModule,
+    MatCheckboxModule,
+    MatAutocompleteModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatChipsModule,
+    MatFormFieldModule,
+    MatDatepickerModule,
+    MatDialogModule,
+    MatExpansionModule,
+    MatGridListModule,
+    MatIconModule,
+    MatInputModule,
+    MatListModule,
+    MatMenuModule,
+    MatNativeDateModule,
+    MatPaginatorModule,
+    MatProgressBarModule,
+    MatRadioModule,
+    MatRippleModule,
+    MatSelectModule,
+    MatSidenavModule,
+    MatSliderModule,
+    MatSlideToggleModule,
+    MatSnackBarModule,
+    MatSortModule,
+    MatTableModule,
+    MatTabsModule,
+    MatToolbarModule,
+    MatTooltipModule,
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    ...material
+  ],
+  exports: material,
+  declarations: []
+})
+export class MaterialModule { }

src/app/modules/song/song.component.html

@@ -0,0 +1,16 @@
+<div style="text-align: center">
+  <table style="margin: 0 auto" *ngFor="let song of commonService.songArray" class="mat-elevation-z8">
+
+    <tr>
+      <th>No.</th>
+      <th>Name</th>
+      <th>Time</th>
+    </tr>
+      <tr>
+        <td> {{song.id}} </td>
+        <td style="width: 500px; text-align: center"> {{song.songName}} </td>
+        <td> {{song.time}} </td>
+      </tr>
+
+  </table>
+</div>

src/app/modules/song/song.component.scss

@@ -0,0 +1,5 @@
+table {
+  border: 1px solid black;
+}
+
+

src/app/modules/song/song.component.spec.ts

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

src/app/modules/song/song.component.ts

@@ -0,0 +1,33 @@
+import { Component, OnInit } from '@angular/core';
+import {RestService} from '../../services/rest.services';
+import {Urls} from '../../models/urls.models';
+import {CommonService} from '../../services/common.service';
+import {ModelSongs} from '../../models/song.models';
+
+@Component({
+  selector: 'app-song',
+  templateUrl: './song.component.html',
+  styleUrls: ['./song.component.scss']
+})
+export class SongComponent implements OnInit {
+
+  constructor(
+    private restService: RestService,
+    public commonService: CommonService,
+  ) { }
+
+  ngOnInit() {
+    this.restService.get(Urls.song).subscribe((response) => {
+      this.commonService.songArray = response.map(song => {
+        let result = new ModelSongs();
+        result.songName = song.filename;
+        result.id = song.id;
+        result.md5 = song.md5;
+        result.time = song.time;
+        return result
+      })
+      console.log(this.commonService.songArray)
+    })
+  }
+
+}

src/app/modules/song/song.module.ts

@@ -0,0 +1,23 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import {routesSong} from './song.route';
+import {SongComponent} from './song.component';
+import {MaterialModule} from '../material/material.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MaterialModule,
+    RouterModule.forChild(routesSong),
+  ],
+  declarations: [
+    SongComponent
+  ],
+  exports: [
+    SongComponent
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  providers: [],
+})
+export class SongModule { }

src/app/modules/song/song.route.ts

@@ -0,0 +1,11 @@
+import { Routes } from "@angular/router"
+import {SongComponent} from './song.component';
+
+
+export const routesSong: Routes = [
+  {
+    path: '',
+    component: SongComponent,
+    children: []
+  }
+];