diff --git a/src/app/components/blog-create/blog-create.component.html b/src/app/components/blog-create/blog-create.component.html index 2a86a28..e01fcd9 100644 --- a/src/app/components/blog-create/blog-create.component.html +++ b/src/app/components/blog-create/blog-create.component.html @@ -1,70 +1,73 @@

Neuen Einkaufszettel Eintrag anlegen:

-
+
-
+
- -
- -
- -
-
-
- +
+
+
+
+ +
-
-
- -
+
-
- -
+
+ +
-
- -
-
- -
+
+
+ +
+
+ +
+
+
+
+
+ +
+
+ +
+
+ +
+
-
-
-
- -
-
-
-
- - -
- *Bitte geben sie eine Kategorie ein! -
-
-
-
- - -
-
-
-
diff --git a/src/app/components/blog-create/blog-create.component.ts b/src/app/components/blog-create/blog-create.component.ts index 497307e..874c83d 100644 --- 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; + }) + } + + + - this.entries.push(entry); } } @@ -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 { } diff --git a/src/app/components/blog-entry/blog-entry.component.html b/src/app/components/blog-entry/blog-entry.component.html index 91469e8..594bb8a 100644 --- a/src/app/components/blog-entry/blog-entry.component.html +++ b/src/app/components/blog-entry/blog-entry.component.html @@ -3,9 +3,10 @@
+

{{entry.position + 1}}. Eintrag

{{entry.einkaufsort}}

{{entry.kategorie}}

-

{{entry.menge}}

+

Menge: {{entry.menge}}

{{entry.kommentar}}

diff --git a/src/app/components/blog-entry/blog-entry.ts b/src/app/components/blog-entry/blog-entry.ts index d209b8d..dff215f 100644 --- 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; } diff --git a/src/app/components/blog-entry/initialEntries.ts b/src/app/components/blog-entry/initialEntries.ts index 5260c1e..92eed73 100644 --- 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 } ];