zenon/web-application-engineering
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Implement Feed creation

Browse Source
This commit is contained in:
Tobias Eidelpes
2021-05-02 17:49:42 +02:00
parent b96a8d35c5
commit e648a03166
13 changed files with 186 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/component/einstellungen/editieren/editieren.component.html
+37 -29
View File
@@ -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
+48 -23
View File
@@ -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);
}
);
}
}