Further modified wireframes and removed old components

2021-04-29 22:30:29 +02:00
parent df192617a2
commit 7dd3232139
18 changed files with 174 additions and 175 deletions
@@ -0,0 +1,27 @@
+.input {
+  width: 100%;
+}
+
+.input-row {
+  display: block;
+  padding: 10px 0;
+}
+
+.einstellungen_buttons_wrapper {
+  width: fit-content;
+  display: grid;
+  grid-auto-flow: column;
+  grid-column-gap: 10px;
+}
+
+.feed-icon {
+  width: 75%;
+  max-width: 5em;
+}
+
+.feed-list-row {
+  padding: 10px 0;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 800px;
+}
@@ -0,0 +1,35 @@
+<app-navigation [activeLink]="'settings'"></app-navigation>
+<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>
+  </div>
+</div>
@@ -0,0 +1,54 @@
+import { Component, OnInit } from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+
+@Component({
+  selector: 'app-editieren',
+  templateUrl: './editieren.component.html',
+  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 => {
+      this.id = paramMap.get('id');
+      if (this.id) {
+        this.loadFeed(this.id);
+      }
+    });
+  }
+
+  ngOnInit(): void {
+  }
+
+  loadFeed(id) {
+    // TODO: direkt vor laden alle inputs deaktivieren (od hiden) und erst nach fertigem laden wieder entsperren
+    // TODO: load feed from backend and fill
+    console.log('TODO: Load feed settings with id ' + id);
+  }
+
+  // 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]);
+      }
+    }
+  }
+}
@@ -1,33 +1,5 @@
 <app-navigation [activeLink]="'settings'"></app-navigation>
 <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>
-      HIER ICON-PICKER EINFÜGEN!
-    </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 mat-raised-button>Abbrechen</button>
-      <button mat-raised-button><mat-icon>save</mat-icon> Speichern</button>
-    </div>
-  </div>
  <div class="text-center">
    <div class="container" *ngFor="let number of [1, 2, 3]">
      <div class="row feed-list-row">
@@ -38,7 +10,7 @@
          <span class="overflow-break">https://rss.orf.at/news.xml</span>
        </div>
        <div class="col-1 padding-0 margin-auto">
-          <button mat-icon-button>
+          <button mat-icon-button routerLink="/einstellungen/editieren/{{number}}">
            <mat-icon>edit</mat-icon>
          </button>
        </div>
@@ -50,7 +22,9 @@
      </div>
    </div>
    <div class="input-row margin-auto einstellungen_buttons_wrapper">
-      <button mat-raised-button><mat-icon>add</mat-icon> RSS-Feed hinzufügen</button>
+      <button routerLink="/einstellungen/editieren" mat-raised-button>
+        <mat-icon>add</mat-icon> RSS-Feed hinzufügen
+      </button>
    </div>
  </div>
 </div>
@@ -7,11 +7,12 @@ import { Component, OnInit } from '@angular/core';
 })
 export class EinstellungenComponent implements OnInit {

-  constructor() { }
+  icon;
+
+  constructor() {
+    this.icon = 'assets/logo.svg';
+  }

  ngOnInit(): void {
  }
-
-  // TODO: bei Input-Words die Leerzeichen vor- und nach dem letzten Zeichen entfernen: " Formel 1 " wird zu "Formel 1"
-
 }