Implement Feed creation

frontend/src/app/app.module.ts

@@ -27,29 +27,31 @@ import { NavigationComponent } from './component/navigation/navigation.component
 import {MatSnackBarModule} from '@angular/material/snack-bar';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 import { EditierenComponent } from './component/einstellungen/editieren/editieren.component';
+import {MaterialFileInputModule} from 'ngx-material-file-input';
 
 @NgModule({
   declarations: [LandingComponent, LoginComponent, NavigationComponent,
     TweetsComponent, EinstellungenComponent, EditierenComponent],
-  imports: [
-    ReactiveFormsModule,
-    BrowserModule,
-    BrowserAnimationsModule,
-    AppRoutingModule,
-    LoggerModule.forRoot({level: environment.log_level, serverLogLevel: NgxLoggerLevel.ERROR}),
-    HttpClientModule,
-    MatFormFieldModule,
-    FormsModule,
-    MatButtonModule,
-    MatInputModule,
-    MatSlideToggleModule,
-    MatSliderModule,
-    MatToolbarModule,
-    MatIconModule,
-    MatMenuModule,
-    MatSnackBarModule,
-    MatCheckboxModule
-  ],
+    imports: [
+        ReactiveFormsModule,
+        BrowserModule,
+        BrowserAnimationsModule,
+        AppRoutingModule,
+        LoggerModule.forRoot({level: environment.log_level, serverLogLevel: NgxLoggerLevel.ERROR}),
+        HttpClientModule,
+        MatFormFieldModule,
+        FormsModule,
+        MatButtonModule,
+        MatInputModule,
+        MatSlideToggleModule,
+        MatSliderModule,
+        MatToolbarModule,
+        MatIconModule,
+        MatMenuModule,
+        MatSnackBarModule,
+        MatCheckboxModule,
+        MaterialFileInputModule
+    ],
   // enables injecting
   providers: [
     AuthService,

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

@@ -2,34 +2,42 @@
 <div class="content">
   <div class="text-center">
     <p class="font-weight-bold">RSS-Feed erstellen</p>
-    <div class="input-row">
-      <mat-form-field appearance="standard" class="input">
-        <mat-label>Vollständige URL des RSS-Feeds:</mat-label>
-        <input matInput placeholder="https://rss.orf.at/news.xml">
-      </mat-form-field>
-    </div>
-    <div class="input-row text-left">
-      <mat-form-field appearance="standard" class="input">
-        <mat-label>Folgende Stichwörter im Feed suchen:</mat-label>
-        <input matInput placeholder="Spiel, Spaß, Schokolade">
-      </mat-form-field>
-      <mat-checkbox>Alle Stichworte müssen enthalten sein</mat-checkbox>
-    </div>
-    <div class="input-row text-left">
-      <span>Optionales Icon:</span>
-      <br>
-      <img (click)="iconChooser()" class="feed-icon" src="{{icon}}" alt="Feed-Icon">
-      <input hidden type="file"
-             (change)="fileChangeEvent($event)"
-             id="feed-icon-picker" name="icon"
-             accept="image/png, image/svg+xml">
-    </div>
-    <div class="input-row text-left">
-      <mat-slide-toggle color="primary">Slide me!</mat-slide-toggle>
-    </div>
-    <div class="input-row margin-auto einstellungen_buttons_wrapper">
-      <button routerLink="/einstellungen" mat-raised-button>Abbrechen</button>
-      <button mat-raised-button><mat-icon>save</mat-icon> Speichern</button>
-    </div>
+    <form [formGroup]="feedForm" enctype="multipart/form-data">
+      <div class=" input-row">
+        <mat-form-field appearance="standard" class="input">
+          <mat-label>Vollständige URL des RSS-Feeds</mat-label>
+          <input matInput formControlName="url" placeholder="https://rss.orf.at/news.xml">
+        </mat-form-field>
+      </div>
+      <div class="input-row text-left">
+        <mat-form-field appearance="standard" class="input">
+          <mat-label>Gesuchte Stichwörter</mat-label>
+          <input matInput formControlName="keywords" placeholder="Spiel,Spaß,Schokolade">
+        </mat-form-field>
+        <mat-checkbox>Alle Stichworte müssen enthalten sein</mat-checkbox>
+      </div>
+      <div class="input-row text-left">
+        <mat-form-field class="col">
+          <ngx-mat-file-input 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 class="input-row text-left">
+        <mat-slide-toggle color="primary" formControlName="active">Slide me!</mat-slide-toggle>
+      </div>
+      <div class="input-row margin-auto einstellungen_buttons_wrapper">
+        <button routerLink="/einstellungen" mat-raised-button>Abbrechen</button>
+        <button mat-raised-button (click)="saveFeed(feedForm.value)">
+          <mat-icon>save</mat-icon>
+          Speichern
+        </button>
+      </div>
+    </form>
   </div>
 </div>

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

@@ -1,5 +1,13 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
+import {FormGroup, FormBuilder, FormControl} from '@angular/forms';
+import {FileInput, FileValidator} from 'ngx-material-file-input';
+import {HttpClient} from '@angular/common/http';
+import {environment} from '../../../../environments/environment';
+import {throwError} from 'rxjs';
+import {NGXLogger} from 'ngx-logger';
+import {MatSnackBar} from '@angular/material/snack-bar';
+import {isElementScrolledOutsideView} from '@angular/cdk/overlay/position/scroll-clip';
 
 @Component({
   selector: 'app-editieren',
@@ -7,14 +15,23 @@ import {ActivatedRoute} from '@angular/router';
   styleUrls: ['./editieren.component.css']
 })
 export class EditierenComponent implements OnInit {
-
-  icon;
-
   id;
 
-  constructor(private route: ActivatedRoute) {
-    this.icon = 'assets/logo.svg';
-    this.route.paramMap.subscribe( paramMap => {
+  feedForm: FormGroup;
+  url: String;
+  active = true;
+  icon: File;
+  keywords: String;
+
+  readonly maxSize = 10240;
+  private currentLocation = environment.location;
+
+  constructor(private route: ActivatedRoute,
+              private formBuilder: FormBuilder,
+              private http: HttpClient,
+              private _snackbar: MatSnackBar,
+              private _logger: NGXLogger) {
+    this.route.paramMap.subscribe(paramMap => {
       this.id = paramMap.get('id');
       if (this.id) {
         this.loadFeed(this.id);
@@ -23,6 +40,12 @@ export class EditierenComponent implements OnInit {
   }
 
   ngOnInit(): void {
+    this.feedForm = this.formBuilder.group({
+      url: this.url,
+      active: this.active,
+      icon: [undefined, [FileValidator.maxContentSize(this.maxSize)]],
+      keywords: this.keywords
+    });
   }
 
   loadFeed(id) {
@@ -33,22 +56,24 @@ export class EditierenComponent implements OnInit {
 
   // TODO: bei Input-Words die Leerzeichen vor- und nach dem letzten Zeichen entfernen: " Formel 1 " wird zu "Formel 1"
 
-  iconChooser() {
-    document.getElementById('feed-icon-picker').click();
-  }
-
-  fileChangeEvent(event) {
-    if (event && event.target) {
-      const files = event.target.files;
-      if (files && files[0]) {
-        const reader = new FileReader();
-        reader.onload = () => {
-          if (reader.result) {
-            this.icon = reader.result;
-          }
-        };
-        reader.readAsDataURL(files[0]);
-      }
+  saveFeed(feedData) {
+    const form: FormData = new FormData();
+    form.append('url', feedData.url);
+    form.append('active', feedData.active);
+    if (feedData.keywords != null) {
+      form.append('keywords', feedData.keywords);
     }
+    if (feedData.icon != null) {
+      form.append('icon', feedData.icon._files['0']);
+    }
+    this.http.post('http://127.0.0.1:8000/feeds/', form).subscribe(
+      () => {
+        this._snackbar.open('Feed erfolgreich gespeichert!', 'Schließen', {duration: 3000});
+      },
+      err => {
+        this._logger.error(err);
+        return throwError(err);
+      }
+    );
   }
 }