last_upd: 26.05.2019

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

@@ -1,4 +1,9 @@
-<div style="text-align: center">
+<div
+      infiniteScroll
+      [infiniteScrollDistance]="0.01"
+      [infiniteScrollThrottle]="1000"
+      (scrolled)="commonService.onScroll()"
+      style="text-align: center; overflow-y: auto; margin-bottom: 100px">
   <table style="margin: 0 auto" *ngFor="let song of commonService.songArray" class="mat-elevation-z8">
 
     <tr>
@@ -14,3 +19,15 @@
 
   </table>
 </div>
+<div *ngIf="commonService.flagSpinner" class="spinner">
+  <div class="lds-roller">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>

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

@@ -2,4 +2,110 @@ table {
   border: 1px solid black;
 }
 
+// SPINNER
+.lds-roller {
+  margin: 0 auto;
+  width: 64px;
+  height: 64px;
+}
+
+.lds-roller div {
+  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  transform-origin: 32px 32px;
+}
+
+.lds-roller div:after {
+  content: " ";
+  display: block;
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  background: #000000;
+  margin: -3px 0 0 -3px;
+}
+
+.lds-roller div:nth-child(1) {
+  animation-delay: -0.036s;
+}
+
+.lds-roller div:nth-child(1):after {
+  top: 50px;
+  left: 50px;
+}
+
+.lds-roller div:nth-child(2) {
+  animation-delay: -0.072s;
+}
+
+.lds-roller div:nth-child(2):after {
+  top: 54px;
+  left: 45px;
+}
+
+.lds-roller div:nth-child(3) {
+  animation-delay: -0.108s;
+}
+
+.lds-roller div:nth-child(3):after {
+  top: 57px;
+  left: 39px;
+}
+
+.lds-roller div:nth-child(4) {
+  animation-delay: -0.144s;
+}
+
+.lds-roller div:nth-child(4):after {
+  top: 58px;
+  left: 32px;
+}
+
+.lds-roller div:nth-child(5) {
+  animation-delay: -0.18s;
+}
+
+.lds-roller div:nth-child(5):after {
+  top: 57px;
+  left: 25px;
+}
+
+.lds-roller div:nth-child(6) {
+  animation-delay: -0.216s;
+}
+
+.lds-roller div:nth-child(6):after {
+  top: 54px;
+  left: 19px;
+}
+
+.lds-roller div:nth-child(7) {
+  animation-delay: -0.252s;
+}
+
+.lds-roller div:nth-child(7):after {
+  top: 50px;
+  left: 14px;
+}
+
+.lds-roller div:nth-child(8) {
+  animation-delay: -0.288s;
+}
+
+.lds-roller div:nth-child(8):after {
+  top: 45px;
+  left: 10px;
+}
+
+@keyframes lds-roller {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 

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

@@ -1,8 +1,5 @@
 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',
@@ -12,22 +9,11 @@ import {ModelSongs} from '../../models/song.models';
 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)
-    })
+    this.commonService.getSong()
   }
 
 }

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

@@ -4,11 +4,13 @@ import { RouterModule } from '@angular/router';
 import {routesSong} from './song.route';
 import {SongComponent} from './song.component';
 import {MaterialModule} from '../material/material.module';
+import {InfiniteScrollModule} from 'ngx-infinite-scroll';
 
 @NgModule({
   imports: [
     CommonModule,
     MaterialModule,
+    InfiniteScrollModule,
     RouterModule.forChild(routesSong),
   ],
   declarations: [