From 80f1a4d99eeba7f01362d1d982e286b02b824741 Mon Sep 17 00:00:00 2001
From: Tobias Eidelpes <e1527193@student.tuwien.ac.at>
Date: Mon, 3 May 2021 18:10:17 +0200
Subject: [PATCH] Show current icon on edit feed

---
 .../editieren/editieren.component.html        | 31 ++++++++++++-------
 .../editieren/editieren.component.ts          |  1 +
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/frontend/src/app/component/einstellungen/editieren/editieren.component.html b/frontend/src/app/component/einstellungen/editieren/editieren.component.html
index 9b71c23..e27ac06 100644
--- a/frontend/src/app/component/einstellungen/editieren/editieren.component.html
+++ b/frontend/src/app/component/einstellungen/editieren/editieren.component.html
@@ -14,21 +14,28 @@
         <mat-form-field appearance="standard" class="input">
           <mat-label>Gesuchte Stichworte</mat-label>
           <input matInput formControlName="keywords" placeholder="Spiel,Spaß,Schokolade" required>
-          <mat-error *ngIf="feedForm.get('keywords').hasError('invalidKeywords')">Maximal 3 Wörter und jedes Wort mindestens 3 Zeichen</mat-error>
+          <mat-error *ngIf="feedForm.get('keywords').hasError('invalidKeywords')">Maximal 3 Wörter und jedes Wort
+            mindestens 3 Zeichen
+          </mat-error>
         </mat-form-field>
         <mat-checkbox formControlName="match_all_keywords">Alle Stichworte müssen enthalten sein</mat-checkbox>
       </div>
-      <div class="input-row text-left">
-        <mat-form-field class="col">
-          <ngx-mat-file-input accept=".png,.svg" formControlName="icon" placeholder="Optionales Icon"
-          ></ngx-mat-file-input>
-          <mat-icon matSuffix>folder</mat-icon>
-          <mat-error *ngIf="feedForm.get('icon').hasError('maxContentSize')">
-            Die maximale Dateigröße ist {{feedForm.get('icon')?.getError('maxContentSize').maxSize | byteFormat}}
-            ({{feedForm.get('icon')?.getError('maxContentSize').actualSize
-            | byteFormat}})
-          </mat-error>
-        </mat-form-field>
+      <div class="row" style="padding: 10px 0">
+        <div class="col-auto" *ngIf="this.id">
+          <img class="feed-icon" src="{{this.icon}}" alt="Feed-Icon">
+        </div>
+        <div class="col">
+          <mat-form-field class="col">
+            <ngx-mat-file-input accept=".png,.svg" formControlName="icon" placeholder="Optionales Icon"
+            ></ngx-mat-file-input>
+            <mat-icon matSuffix>folder</mat-icon>
+            <mat-error *ngIf="feedForm.get('icon').hasError('maxContentSize')">
+              Die maximale Dateigröße ist {{feedForm.get('icon')?.getError('maxContentSize').maxSize | byteFormat}}
+              ({{feedForm.get('icon')?.getError('maxContentSize').actualSize
+              | byteFormat}})
+            </mat-error>
+          </mat-form-field>
+        </div>
       </div>
       <div class="input-row text-left">
         <mat-slide-toggle color="primary" formControlName="active">Feed als aktiv markieren</mat-slide-toggle>
diff --git a/frontend/src/app/component/einstellungen/editieren/editieren.component.ts b/frontend/src/app/component/einstellungen/editieren/editieren.component.ts
index fa70bc9..358064a 100644
--- a/frontend/src/app/component/einstellungen/editieren/editieren.component.ts
+++ b/frontend/src/app/component/einstellungen/editieren/editieren.component.ts
@@ -59,6 +59,7 @@ export class EditierenComponent implements OnInit {
       (data: any) => {
         this.url = data.url;
         this.active = data.active;
+        this.icon = data.icon;
         this.keywords = data.keywords;
         this.match_all_keywords = data.match_all_keywords;
         this.feedForm.patchValue({