Load feeds from backend

frontend/src/app/component/einstellungen/einstellungen.component.html

@@ -1,21 +1,21 @@
 <app-navigation [activeLink]="'settings'"></app-navigation>
 <div class="content">
   <div class="text-center">
-    <div class="container" *ngFor="let number of [1]">
+    <div class="container" *ngFor="let feed of feeds">
       <div class="row feed-list-row">
         <div class="col-2 text-center padding-0 margin-auto">
-          <img class="feed-icon" src="assets/logo.svg" alt="Feed-Icon">
+          <img class="feed-icon" src="{{feed.icon}}" alt="Feed-Icon">
         </div>
         <div class="col-8 padding-0 text-left margin-auto">
-          <span class="overflow-break">https://rss.orf.at/news.xml</span>
+          <span class="overflow-break">{{feed.url}}</span>
         </div>
         <div class="col-1 padding-0 margin-auto">
-          <button mat-icon-button routerLink="/einstellungen/editieren/{{number}}">
+          <button mat-icon-button routerLink="/einstellungen/editieren/{{feed.id}}">
             <mat-icon>edit</mat-icon>
           </button>
         </div>
         <div class="col-1 padding-0 margin-auto">
-          <button mat-icon-button>
+          <button mat-icon-button (click)="deleteFeed(feed.id)">
             <mat-icon>delete</mat-icon>
           </button>
         </div>

frontend/src/app/component/einstellungen/einstellungen.component.ts

@@ -1,4 +1,11 @@
 import {Component, OnInit} from '@angular/core';
+import {HttpClient} from '@angular/common/http';
+import {Observable, throwError} from 'rxjs';
+import {MatSnackBar} from '@angular/material/snack-bar';
+import {NGXLogger} from 'ngx-logger';
+import {IFeed} from '../../interfaces/feed.interface';
+import {FeedService} from '../../services/feed.service';
+import {ActivatedRoute, Router} from '@angular/router';
 
 @Component({
   selector: 'app-einstellungen',
@@ -9,10 +16,36 @@ export class EinstellungenComponent implements OnInit {
 
   icon;
 
-  constructor() {
+  feeds: Observable<IFeed[]>;
+
+  constructor(private http: HttpClient,
+              private _snackbar: MatSnackBar,
+              private _logger: NGXLogger,
+              private _feedService: FeedService,
+              private _route: ActivatedRoute,
+              private _router: Router) {
     this.icon = 'assets/logo.svg';
+    this._feedService.getFeeds().subscribe(
+      (data: any) => {
+        this.feeds = data;
+      }
+    );
   }
 
   ngOnInit(): void {
   }
+
+  deleteFeed(id: number) {
+    console.log('Got number for deletion: ' + id);
+    this.http.delete('http://127.0.0.1:8000/feeds/' + id + '/').subscribe(
+      () => {
+        this._snackbar.open('Feed erfolgreich gelöscht!', 'Schließen', {duration: 3000});
+      },
+      err => {
+        this._logger.error(err);
+        return throwError(err);
+      }
+    );
+    this._router.navigate([this._router.url]);
+  }
 }

frontend/src/app/interfaces/feed.interface.ts

@@ -0,0 +1,8 @@
+export interface IFeed {
+  id: number;
+  url: string;
+  active: boolean;
+  icon: File;
+  keywords: string;
+  match_all_keywords: string;
+}

frontend/src/app/services/feed.service.ts

@@ -0,0 +1,19 @@
+import {Injectable} from '@angular/core';
+import {HttpClient} from '@angular/common/http';
+import {Observable} from 'rxjs';
+import {IFeed} from '../interfaces/feed.interface';
+import {delay} from 'rxjs/operators';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class FeedService {
+  private url = 'http://localhost:8000/feeds/';
+
+  constructor(private http: HttpClient) {}
+
+  getFeeds(): Observable<IFeed[]> {
+    console.log('FeedService called');
+    return this.http.get<IFeed[]>(this.url).pipe(delay(200));
+  }
+}