greifch67520/MDT5_Angular
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

Browse Source
This commit is contained in:
Christian Greif 2020-06-13 15:08:17 +02:00
parent 5c84624ba3
commit fe3a0a53f0
5 changed files with 115 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
src/app/components/blog-create/blog-create.component.html
View File

@ -1,70 +1,73 @@
<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 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>
<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>
<div><label for="kommentar">Kommentar: </label></div> <div class="form-group">
<textarea id="kommentar" #kommentar cols="20" rows="3" #text> <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>
</textarea> </textarea>
</div> </div>
<div class="form-group"> <div class="form-group">
<button (click)="createBlogEntry(einkaufsort.value,menge.value, kommentar.value)"> <button
Eintrag anlegen (click)="createBlogEntry(einkaufsort.value, kategorie.value, menge.value, kommentar.value, position.value)">
</button> Eintrag anlegen
</div> </button>
</div>
<div> <div class="form-group">
<button (click)="deleteAllEntries()"> <div>
Alle Einträge löschen <button (click)="deleteAllEntries()">
</button> Alle Einträge löschen
</div> </button>
<div> </div>
<button (click)="deleteLastEntry()"> <div>
Letzten Eintrag Löschen <button (click)="deleteLastEntry()">
</button> Letzten Eintrag Löschen
</div> </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>

60
src/app/components/blog-create/blog-create.component.ts
View File

@ -11,28 +11,18 @@ import {initialEntries} from "../blog-entry/initialEntries";
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;
@ -76,11 +66,29 @@ export class BlogCreateComponent implements OnInit {
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);
} }
} }
@ -100,24 +108,16 @@ export class BlogCreateComponent implements OnInit {
} }
} }
// Kategorie mit Drop Down Menu wählen deleteEntry(str: string)
changeKategorie(e) { {
console.log(e.value); const index = Number(str) - 1;
this.kategorieName.setValue(e.target.value, { this.entries.splice(index,1)
onlySelf: true
}); 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 { ngOnInit(): void {
} }

3
src/app/components/blog-entry/blog-entry.component.html
View File

@ -3,9 +3,10 @@
<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>

1
src/app/components/blog-entry/blog-entry.ts
View File

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

36
src/app/components/blog-entry/initialEntries.ts
View File

@ -4,14 +4,16 @@ export const initialEntries = [
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
}, },
{ {
@ -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', 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
} }
]; ];