V0.1m Neues Feature: Eintrag an bestimmter Position einfügen oder löschen

2020-06-13 15:08:17 +02:00 · 2020-06-13 15:08:17 +02:00 · fe3a0a53f0
commit fe3a0a53f0
parent 5c84624ba3
5 changed files with 115 additions and 98 deletions
--- a/src/app/components/blog-create/blog-create.component.html
+++ b/src/app/components/blog-create/blog-create.component.html
@ -3,13 +3,24 @@
 <div>
  <form (ngSubmit)="saveTask(form.value)" #form="ngForm">
    <div class="form-group">
-      <div><label >Einkaufsort* </label></div>
+      <div><label>Position </label></div>
+      <div>
+        <input type="text" class="form-control" name="title" id="position" #position ngModel required/>
+      </div>
+    </div>
+      <div class="form-group">
+        <div><label>Einkaufsort* </label></div>
        <div>
          <input type="text" class="form-control" name="title" id="title" #einkaufsort ngModel required/>
        </div>

      </div>
-
+      <div class="form-group">
+        <div><label for="kategorie">Kategorie </label></div>
+        <div>
+          <input type="text" class="form-control" name="title" id="kategorie" #kategorie ngModel required/>
+        </div>
+      </div>
      <div class="form-group">
        <div><label for="menge">Menge* </label></div>
        <div>
@ -24,11 +35,13 @@
      </div>

      <div class="form-group">
-      <button (click)="createBlogEntry(einkaufsort.value,menge.value, kommentar.value)">
+        <button
+          (click)="createBlogEntry(einkaufsort.value, kategorie.value, menge.value, kommentar.value, position.value)">
          Eintrag anlegen
        </button>
      </div>

+      <div class="form-group">
        <div>
          <button (click)="deleteAllEntries()">
            Alle Einträge löschen
@ -39,32 +52,22 @@
            Letzten Eintrag Löschen
          </button>
        </div>
+      </div>
+      <div class="form-group">
+        <div><label for="menge">Eintrag auswählen: </label></div>
+        <div>
+          <input type="text" class="form-control" name="title" id="index" #index ng-model required min="0" max=99/>
+        </div>
+      </div>
+
+      <div>
+        <div>
+          <button (click)="deleteEntry(index.value)">
+            Eintrag löschen
+          </button>
+        </div>
+      </div>

  </form>
 </div>

-<div class="container">
-  <div class="row custom-wrapper">
-    <div class="col-md-12">
-      <!-- Form starts -->
-      <form [formGroup]="registrationForm" (ngSubmit)="onSubmit()">
-        <div class="group-gap">
-          <div class="d-block my-3">
-            <div class="mb-3">
-              <select class="custom-select" (change)="changeKategorie($event)" formControlName="kategorieName">
-                <option value="">Wählen sie eine Kategorie</option>
-                <option *ngFor="let kategorie of Kategorien" [ngValue]="kategorie">{{kategorie}}</option>
-              </select>
-              <!-- error block -->
-              <div class="invalid-feedback" *ngIf="isSubmitted && kategorieName.errors?.required">
-                <sup>*</sup>Bitte geben sie eine Kategorie ein!
-              </div>
-            </div>
-          </div>
-        </div>
-        <!-- Submit Button -->
-        <button type="submit" class="btn btn-danger btn-lg btn-block">Speichern</button>
-      </form><!-- Form ends -->
-    </div>
-  </div>
-</div>
--- a/src/app/components/blog-create/blog-create.component.ts
+++ b/src/app/components/blog-create/blog-create.component.ts
@ -11,28 +11,18 @@ import {initialEntries} from "../blog-entry/initialEntries";
 export class BlogCreateComponent implements OnInit {
  title = 'Einkaufszettel';
  entries: BlogEntry[] = [];
-  isSubmitted = false;
-  Kategorien: any = ['Lebensmittel', 'Spielwaren', 'Technik', 'Sonstiges'];

  constructor(public fb: FormBuilder) {
    this.entries = [];
    this.entries = initialEntries;
  }

-  // Getter method to access formcontrols
-  get kategorieName() {
-    return this.registrationForm.get('kategorieName');
-  }

-  /*########### Form ###########*/
-  registrationForm = this.fb.group({
-    kategorieName: ['', [Validators.required]]
-  });
  saveTask(value: any){
    console.log(value);
  }

-  createBlogEntry(einkaufsort: string, menge: string, kommentar: string, ) {
+  createBlogEntry(einkaufsort: string, kategorie: string, menge: string, kommentar: string, position: string) {
    if (einkaufsort && kommentar) {
      const entry = new BlogEntry();
      entry.einkaufsort = einkaufsort;
@ -76,11 +66,29 @@ export class BlogCreateComponent implements OnInit {
      else if (einkaufsort == 'Hornbach') {
        entry.image = 'https://www.luvshopping.de/-/media/images/b2c/germany/lubeck/logo-stores/hornbach.jpg?h=442&la=de-DE&mw=650&w=650&hash=C6C36C2C1536745108FF620D3B9CD7E4864A9308';
        entry.kategorie = 'Baumarkt';}
-      else if (einkaufsort == 'Anderer') {
+      else {
        entry.image = 'https://previews.123rf.com/images/krisdog/krisdog1312/krisdog131200065/24639132-ein-beispiel-f%C3%BCr-ein-einkaufswagen-oder-einkaufswagen-symbol.jpg';
-        entry.kategorie = 'Unbekannt';};
-
+        if(kategorie === '')
+        entry.kategorie = 'Unbekannt';
+        else {
+          entry.kategorie = kategorie;
+        }
+      };
+      if (position == '' || Number(position) >= this.entries.length){
+        entry.position = this.entries.length;
        this.entries.push(entry);
+      }
+      else {
+        entry.position = Number(position)-1;
+        this.entries.splice(Number(position)-1, 0, entry);
+        this.entries.forEach(function(part,index,theArray) {
+          theArray[index].position = index;
+        })
+      }
+
+
+
+
    }
  }

@ -100,24 +108,16 @@ export class BlogCreateComponent implements OnInit {
    }
  }

-  // Kategorie mit Drop Down Menu wählen
-  changeKategorie(e) {
-    console.log(e.value);
-    this.kategorieName.setValue(e.target.value, {
-      onlySelf: true
-    });
+  deleteEntry(str: string)
+  {
+    const index = Number(str) - 1;
+    this.entries.splice(index,1)
+
+    this.entries.forEach(function(part,index,theArray) {
+      theArray[index].position = index;
+    })
  }

-  /*########### Template Driven Form ###########*/
-  onSubmit() {
-    this.isSubmitted = true;
-    if (!this.registrationForm.valid) {
-      return false;
-    } else {
-      alert(JSON.stringify(this.registrationForm.value));
-    }
-
-  }

  ngOnInit(): void {
  }
--- a/src/app/components/blog-entry/blog-entry.component.html
+++ b/src/app/components/blog-entry/blog-entry.component.html
@ -3,9 +3,10 @@
        <img [src]="entry.image" [alt]="entry.einkaufsort"/>
    </div>
    <div class="blog-summary">
+      <p> {{entry.position + 1}}. Eintrag</p>
        <span class="einkaufsort">{{entry.einkaufsort}}</span>
      <p> {{entry.kategorie}}</p>
-      <p> {{entry.menge}}</p>
+      <p> Menge: {{entry.menge}}</p>
      <p> {{entry.kommentar}}</p>
    </div>
 </div>
--- a/src/app/components/blog-entry/blog-entry.ts
+++ b/src/app/components/blog-entry/blog-entry.ts
@ -4,4 +4,5 @@ export class BlogEntry {
  kategorie: string;
  menge: string;
  kommentar: string;
+  position: number;
 }
--- a/src/app/components/blog-entry/initialEntries.ts
+++ b/src/app/components/blog-entry/initialEntries.ts
@ -4,14 +4,16 @@ export const initialEntries = [
    image: 'https://www.horizont.net/news/media/20/Logo-Aldi-Sd-2017-198042-detailnp.jpeg',
    kategorie: 'Lebensmittel',
    menge: '1',
-    kommentar: 'Hier könnten ihre benötigten Einkäufe stehen'
+    kommentar: 'Hier könnten ihre benötigten Einkäufe stehen',
+    position: 0
  },
  {
    einkaufsort: 'Edeka',
    image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Logo_Edeka.svg/1200px-Logo_Edeka.svg.png',
    kategorie: 'Lebensmittel',
    menge: '1',
-    kommentar: 'Hier könnten ihre benötigten Einkäufe stehen'
+    kommentar: 'Hier könnten ihre benötigten Einkäufe stehen',
+    position: 1
  },

  {
@ -19,69 +21,79 @@ export const initialEntries = [
    image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/Lidl-Logo.svg/1200px-Lidl-Logo.svg.png',
    kategorie: 'Lebensmittel',
    menge: '1',
-    kommentar: 'Hier könnten ihre benötigten Einkäufe stehen'
+    kommentar: 'Hier könnten ihre benötigten Einkäufe stehen',
+    position: 2
  },
  {
    einkaufsort: 'Rewe',
    image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Logo_REWE.svg/1200px-Logo_REWE.svg.png',
    kategorie: 'Lebensmittel',
    menge: '1',
-    kommentar: 'Hier könnten ihre benötigten Einkäufe stehen'
+    kommentar: 'Hier könnten ihre benötigten Einkäufe stehen',
+    position: 3
  },
  {
    einkaufsort: 'Netto',
    image: 'https://www.netto-online.de/images/favicons/logo_netto.png',
    kategorie: 'Lebensmittel',
    menge: '1',
-    kommentar: 'Hier könnten ihre benötigten Einkäufe stehen'
+    kommentar: 'Hier könnten ihre benötigten Einkäufe stehen',
+    position: 4
  },
  {
    einkaufsort: 'Penny',
    image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Penny-Markt.svg/1200px-Penny-Markt.svg.png',
    kategorie: 'Lebensmittel',
    menge: '1',
-    kommentar: 'Hier könnten ihre benötigten Einkäufe stehen'
+    kommentar: 'Hier könnten ihre benötigten Einkäufe stehen',
+    position: 5
  },
  {
    einkaufsort: 'DM',
    image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Dm_Logo.svg/1200px-Dm_Logo.svg.png',
    kategorie: 'Drogerie',
    menge: '1',
-    kommentar: 'Hier könnten ihre benötigten Einkäufe stehen'
+    kommentar: 'Hier könnten ihre benötigten Einkäufe stehen',
+    position: 6
  },
  {
    einkaufsort: 'Rossmann',
    image: 'https://www.einkaufsbahnhof.de/wp-content/uploads/2018/03/rossmann_logo_schreibschrift.png',
    kategorie: 'Drogerie',
    menge: '1',
-    kommentar: 'Hier könnten ihre benötigten Einkäufe stehen'
+    kommentar: 'Hier könnten ihre benötigten Einkäufe stehen',
+    position: 7
  },
  {
    einkaufsort: 'Müller',
    image: 'https://www.e-einz.de/wp-content/uploads/2017/02/Mueller.png',
    kategorie: 'Drogerie',
    menge: '1',
-    kommentar: 'Hier könnten ihre benötigten Einkäufe stehen'
+    kommentar: 'Hier könnten ihre benötigten Einkäufe stehen',
+    position: 8
  },
  {
    einkaufsort: 'OBI',
    image: 'https://media.aubi-plus.com/files/premiumprofil/logo/35d8961-obi.jpg',
    kategorie: 'Baumarkt',
    menge: '1',
-    kommentar: 'Hier könnten ihre benötigten Einkäufe stehen'
+    kommentar: 'Hier könnten ihre benötigten Einkäufe stehen',
+    position: 9
  },
  {
    einkaufsort: 'Dehner',
    image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Dehner.svg/1200px-Dehner.svg.png',
    kategorie: 'Garten-Center',
    menge: '1',
-    kommentar: 'Hier könnten ihre benötigten Einkäufe stehen'
+    kommentar: 'Hier könnten ihre benötigten Einkäufe stehen',
+    position: 10
  },
  {
    einkaufsort: 'Hornbach',
    image: 'https://www.luvshopping.de/-/media/images/b2c/germany/lubeck/logo-stores/hornbach.jpg?h=442&la=de-DE&mw=650&w=650&hash=C6C36C2C1536745108FF620D3B9CD7E4864A9308',
    kategorie: 'Baumarkt',
    menge: '1',
-    kommentar: 'Hier könnten ihre benötigten Einkäufe stehen'
+    kommentar: 'Hier könnten ihre benötigten Einkäufe stehen',
+    position: 11
  }
 ];