Tweet icons on frontend

frontend/src/app/component/tweets/tweets.component.html

@@ -10,22 +10,22 @@
     <br>
     <span>Schau später noch einmal vorbei!</span>
   </div>
-  <div *ngIf="feeds.length !== 0">
-  <div>
-    <div style="padding-bottom: 10px" class="container" *ngFor="let tweet of tweets">
-      <mat-card style="background-color: #f5f5f5">
-      <div class="row">
-        <div class="col-2 text-center padding-0 margin-auto">
-          <img class="feed-icon" src="{{tweet.icon}}" alt="Feed-Icon">
-        </div>
-        <div class="col-10">
-          <p class="overflow-break">{{tweet.text}}
-            <span class="white-space-no-wrap"> - {{tweet.created_date}}</span><br>
-          <a href="{{tweet.url}}" style="cursor: pointer">{{tweet.url}}</a></p>
-        </div>
+  <div *ngIf="tweets.length !== 0">
+    <div>
+      <div style="padding-bottom: 10px" class="container" *ngFor="let tweet of tweets">
+        <mat-card style="background-color: #f5f5f5">
+          <div class="row">
+            <div class="col-2 text-center padding-0 margin-auto">
+              <img class="feed-icon" src="{{tweet.icon}}" alt="Feed-Icon">
+            </div>
+            <div class="col-10">
+              <p class="overflow-break">{{tweet.text}}
+                <span class="white-space-no-wrap"> - {{tweet.created_date}}</span><br>
+                <a href="{{tweet.url}}" target='_blank' style="cursor: pointer">{{tweet.url}}</a></p>
+            </div>
+          </div>
+        </mat-card>
       </div>
-      </mat-card>
-    </div>
     </div>
     <div class="text-center">
       <button (click)="loadMore()" mat-button color="primary">Mehr laden</button>

frontend/src/app/component/tweets/tweets.component.ts

@@ -3,9 +3,12 @@ import {AuthService} from '../../services/auth.service';
 import {HttpClient, HttpHeaders} from '@angular/common/http';
 import {FeedService} from '../../services/feed.service';
 import {IFeed} from '../../interfaces/feed.interface';
-import {Observable} from 'rxjs';
+import {Observable, throwError} from 'rxjs';
 import {Tweet} from "../../interfaces/interface";
 import {SnackbarService} from "../../services/snackbar.service";
+import {DialogComponent} from "../dialog/dialog.component";
+import {MatDialog} from "@angular/material/dialog";
+import {NGXLogger} from "ngx-logger";
 
 
 @Component({
@@ -16,26 +19,32 @@ import {SnackbarService} from "../../services/snackbar.service";
 export class TweetsComponent implements OnInit {
 
   tweets: Tweet[] = [];
-  feeds: Observable<IFeed>[] = [];
+  feeds: IFeed[] = [];
 
   constructor(private http: HttpClient,
               private authService: AuthService,
               private _feedService: FeedService,
-              private _snackbarService: SnackbarService) {
+              private _snackbarService: SnackbarService,
+              private _dialog: MatDialog,
+              private _logger: NGXLogger) {
     this._feedService.getFeeds().subscribe(
       (data: any) => {
         this.feeds = data;
+      },
+      err => {
+        this.errorDialog();
+        this._logger.error(err);
+        return throwError(err);
       }
     );
 
 
-
   }
 
   ngOnInit(): void {
 
-    this.fillTweets()
-    console.log(this.tweets)
+    this.fillTweets();
+    console.log(this.tweets);
 
   }
 
@@ -43,36 +52,59 @@ export class TweetsComponent implements OnInit {
 
     console.log(this.tweets);
 
-    this.http.get<Tweet[]>('http://127.0.0.1:8000/getMoreTweets/'+this.tweets[this.tweets.length-1].tweet_id+'/').subscribe(data => {
+    this.http.get<Tweet[]>('http://127.0.0.1:8000/getMoreTweets/' + this.tweets[this.tweets.length - 1].tweet_id + '/').subscribe(data => {
         console.log(data)
 
-        if(data.length == 0){
-          this._snackbarService.show("Keine weiteren Tweets vorhanden","Schließen");
+        if (data.length == 0) {
+          this._snackbarService.show("Keine weiteren Tweets vorhanden", "Schließen");
         }
 
 
-        for(let tweet of data){
+        for (let tweet of data) {
           let position = tweet.text.search(": http");
-          tweet.text = tweet.text.substring(0,position);
+          tweet.text = tweet.text.substring(0, position);
           this.tweets.push(tweet);
         }
+      },
+      err => {
+        this.errorDialog();
+        this._logger.error(err);
+        return throwError(err);
       }
     );
 
   }
 
-  fillTweets(){
+  fillTweets() {
 
     this.http.get<Tweet[]>('http://127.0.0.1:8000/getSixTweets/').subscribe(data => {
-          console.log(data)
-          for(let tweet of data){
-            let position = tweet.text.search(": http");
-            tweet.text = tweet.text.substring(0,position);
-            this.tweets.push(tweet);
-          }
+        console.log(data)
+        for (let tweet of data) {
+          let position = tweet.text.search(": http");
+          tweet.text = tweet.text.substring(0, position);
+          this.tweets.push(tweet);
+        }
+      },
+      err => {
+        this.errorDialog();
+        this._logger.error(err);
+        return throwError(err);
       }
     );
 
-    }
+  }
+
+
+  public errorDialog() {
+    const dialogRef = this._dialog.open(DialogComponent, {
+      data: {
+        title: 'Serverfehler',
+        body: 'Fehler bei der Kommunikation mit Twitter").',
+        abort: 'Abbrechen',
+        confirm: 'OK',
+        hideAbort: true
+      }
+    });
+  }
 
 }