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

src/app/components/blog-create/blog-create.component.html

@@ -1,70 +1,73 @@
 <app-blog-entry *ngFor="let entry of entries" [entry]="entry"></app-blog-entry>
 <h2>Neuen Einkaufszettel Eintrag anlegen:</h2>
 <div>
-  <form  (ngSubmit)="saveTask(form.value)" #form="ngForm">
+  <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="title" #einkaufsort ngModel required/>
+        <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 class="form-group">
-      <div><label for="menge">Menge* </label></div>
-      <div>
-        <input type="text" class="form-control" name="title" id="menge" #menge 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>
+          <input type="text" class="form-control" name="title" id="menge" #menge ngModel required/>
+        </div>
+      </div>
 
-    <div class="form-group">
-      <div><label for="kommentar">Kommentar: </label></div>
-      <textarea id="kommentar" #kommentar cols="20" rows="3" #text>
+      <div class="form-group">
+        <div><label for="kommentar">Kommentar: </label></div>
+        <textarea id="kommentar" #kommentar cols="20" rows="3" #text>
     </textarea>
-    </div>
+      </div>
 
-    <div class="form-group">
-      <button (click)="createBlogEntry(einkaufsort.value,menge.value, kommentar.value)">
-        Eintrag anlegen
-      </button>
-    </div>
+      <div class="form-group">
+        <button
+          (click)="createBlogEntry(einkaufsort.value, kategorie.value, menge.value, kommentar.value, position.value)">
+          Eintrag anlegen
+        </button>
+      </div>
 
-    <div>
-      <button (click)="deleteAllEntries()">
-        Alle Einträge löschen
-      </button>
-    </div>
-    <div>
-      <button (click)="deleteLastEntry()">
-        Letzten Eintrag Löschen
-      </button>
-    </div>
+      <div class="form-group">
+        <div>
+          <button (click)="deleteAllEntries()">
+            Alle Einträge löschen
+          </button>
+        </div>
+        <div>
+          <button (click)="deleteLastEntry()">
+            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>

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;
+        })
+      }
+
+
+
 
-      this.entries.push(entry);
     }
   }
 
@@ -100,25 +108,17 @@ 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
-    });
-  }
-
-  /*########### Template Driven Form ###########*/
-  onSubmit() {
-    this.isSubmitted = true;
-    if (!this.registrationForm.valid) {
-      return false;
-    } else {
-      alert(JSON.stringify(this.registrationForm.value));
-    }
+  deleteEntry(str: string)
+  {
+    const index = Number(str) - 1;
+    this.entries.splice(index,1)
 
+    this.entries.forEach(function(part,index,theArray) {
+      theArray[index].position = index;
+    })
   }
 
+
   ngOnInit(): void {
   }
 

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>

src/app/components/blog-entry/blog-entry.ts

@@ -4,4 +4,5 @@ export class BlogEntry {
   kategorie: string;
   menge: string;
   kommentar: string;
+  position: number;
 }

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
   }
 ];