<app-blog-entry *ngFor="let entry of entries" [entry]="entry"></app-blog-entry> | <app-blog-entry *ngFor="let entry of entries" [entry]="entry"></app-blog-entry> | ||||
<h2>Neuen Einkaufszettel Eintrag anlegen:</h2> | <h2>Neuen Einkaufszettel Eintrag anlegen:</h2> | ||||
<div> | <div> | ||||
<form (ngSubmit)="saveTask(form.value)" #form="ngForm"> | |||||
<form (ngSubmit)="saveTask(form.value)" #form="ngForm"> | |||||
<div class="form-group"> | <div class="form-group"> | ||||
<div><label >Einkaufsort* </label></div> | |||||
<div><label>Position </label></div> | |||||
<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> | </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> | |||||
<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> | </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> | </form> | ||||
</div> | </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> |
export class BlogCreateComponent implements OnInit { | export class BlogCreateComponent implements OnInit { | ||||
title = 'Einkaufszettel'; | title = 'Einkaufszettel'; | ||||
entries: BlogEntry[] = []; | entries: BlogEntry[] = []; | ||||
isSubmitted = false; | |||||
Kategorien: any = ['Lebensmittel', 'Spielwaren', 'Technik', 'Sonstiges']; | |||||
constructor(public fb: FormBuilder) { | constructor(public fb: FormBuilder) { | ||||
this.entries = []; | this.entries = []; | ||||
this.entries = initialEntries; | 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){ | saveTask(value: any){ | ||||
console.log(value); | console.log(value); | ||||
} | } | ||||
createBlogEntry(einkaufsort: string, menge: string, kommentar: string, ) { | |||||
createBlogEntry(einkaufsort: string, kategorie: string, menge: string, kommentar: string, position: string) { | |||||
if (einkaufsort && kommentar) { | if (einkaufsort && kommentar) { | ||||
const entry = new BlogEntry(); | const entry = new BlogEntry(); | ||||
entry.einkaufsort = einkaufsort; | entry.einkaufsort = einkaufsort; | ||||
else if (einkaufsort == 'Hornbach') { | 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.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';} | 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.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); | |||||
} | } | ||||
} | } | ||||
} | } | ||||
} | } | ||||
// 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 { | ngOnInit(): void { | ||||
} | } | ||||
<img [src]="entry.image" [alt]="entry.einkaufsort"/> | <img [src]="entry.image" [alt]="entry.einkaufsort"/> | ||||
</div> | </div> | ||||
<div class="blog-summary"> | <div class="blog-summary"> | ||||
<p> {{entry.position + 1}}. Eintrag</p> | |||||
<span class="einkaufsort">{{entry.einkaufsort}}</span> | <span class="einkaufsort">{{entry.einkaufsort}}</span> | ||||
<p> {{entry.kategorie}}</p> | <p> {{entry.kategorie}}</p> | ||||
<p> {{entry.menge}}</p> | |||||
<p> Menge: {{entry.menge}}</p> | |||||
<p> {{entry.kommentar}}</p> | <p> {{entry.kommentar}}</p> | ||||
</div> | </div> | ||||
</div> | </div> |
kategorie: string; | kategorie: string; | ||||
menge: string; | menge: string; | ||||
kommentar: string; | kommentar: string; | ||||
position: number; | |||||
} | } |
image: 'https://www.horizont.net/news/media/20/Logo-Aldi-Sd-2017-198042-detailnp.jpeg', | image: 'https://www.horizont.net/news/media/20/Logo-Aldi-Sd-2017-198042-detailnp.jpeg', | ||||
kategorie: 'Lebensmittel', | kategorie: 'Lebensmittel', | ||||
menge: '1', | 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', | einkaufsort: 'Edeka', | ||||
image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Logo_Edeka.svg/1200px-Logo_Edeka.svg.png', | image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Logo_Edeka.svg/1200px-Logo_Edeka.svg.png', | ||||
kategorie: 'Lebensmittel', | kategorie: 'Lebensmittel', | ||||
menge: '1', | menge: '1', | ||||
kommentar: 'Hier könnten ihre benötigten Einkäufe stehen' | |||||
kommentar: 'Hier könnten ihre benötigten Einkäufe stehen', | |||||
position: 1 | |||||
}, | }, | ||||
{ | { | ||||
image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/Lidl-Logo.svg/1200px-Lidl-Logo.svg.png', | image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/Lidl-Logo.svg/1200px-Lidl-Logo.svg.png', | ||||
kategorie: 'Lebensmittel', | kategorie: 'Lebensmittel', | ||||
menge: '1', | 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', | einkaufsort: 'Rewe', | ||||
image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Logo_REWE.svg/1200px-Logo_REWE.svg.png', | image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Logo_REWE.svg/1200px-Logo_REWE.svg.png', | ||||
kategorie: 'Lebensmittel', | kategorie: 'Lebensmittel', | ||||
menge: '1', | 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', | einkaufsort: 'Netto', | ||||
image: 'https://www.netto-online.de/images/favicons/logo_netto.png', | image: 'https://www.netto-online.de/images/favicons/logo_netto.png', | ||||
kategorie: 'Lebensmittel', | kategorie: 'Lebensmittel', | ||||
menge: '1', | 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', | einkaufsort: 'Penny', | ||||
image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Penny-Markt.svg/1200px-Penny-Markt.svg.png', | image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Penny-Markt.svg/1200px-Penny-Markt.svg.png', | ||||
kategorie: 'Lebensmittel', | kategorie: 'Lebensmittel', | ||||
menge: '1', | 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', | einkaufsort: 'DM', | ||||
image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Dm_Logo.svg/1200px-Dm_Logo.svg.png', | image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Dm_Logo.svg/1200px-Dm_Logo.svg.png', | ||||
kategorie: 'Drogerie', | kategorie: 'Drogerie', | ||||
menge: '1', | 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', | einkaufsort: 'Rossmann', | ||||
image: 'https://www.einkaufsbahnhof.de/wp-content/uploads/2018/03/rossmann_logo_schreibschrift.png', | image: 'https://www.einkaufsbahnhof.de/wp-content/uploads/2018/03/rossmann_logo_schreibschrift.png', | ||||
kategorie: 'Drogerie', | kategorie: 'Drogerie', | ||||
menge: '1', | 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', | einkaufsort: 'Müller', | ||||
image: 'https://www.e-einz.de/wp-content/uploads/2017/02/Mueller.png', | image: 'https://www.e-einz.de/wp-content/uploads/2017/02/Mueller.png', | ||||
kategorie: 'Drogerie', | kategorie: 'Drogerie', | ||||
menge: '1', | 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', | einkaufsort: 'OBI', | ||||
image: 'https://media.aubi-plus.com/files/premiumprofil/logo/35d8961-obi.jpg', | image: 'https://media.aubi-plus.com/files/premiumprofil/logo/35d8961-obi.jpg', | ||||
kategorie: 'Baumarkt', | kategorie: 'Baumarkt', | ||||
menge: '1', | 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', | einkaufsort: 'Dehner', | ||||
image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Dehner.svg/1200px-Dehner.svg.png', | image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Dehner.svg/1200px-Dehner.svg.png', | ||||
kategorie: 'Garten-Center', | kategorie: 'Garten-Center', | ||||
menge: '1', | 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', | 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', | 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', | kategorie: 'Baumarkt', | ||||
menge: '1', | menge: '1', | ||||
kommentar: 'Hier könnten ihre benötigten Einkäufe stehen' | |||||
kommentar: 'Hier könnten ihre benötigten Einkäufe stehen', | |||||
position: 11 | |||||
} | } | ||||
]; | ]; |