Browse Source

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

master
Christian Greif 4 years ago
parent
commit
fe3a0a53f0

+ 56
- 53
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>
<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>

+ 30
- 30
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 {
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 {
}


+ 2
- 1
src/app/components/blog-entry/blog-entry.component.html View File

@@ -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>

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

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

+ 24
- 12
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',
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
}
];

Loading…
Cancel
Save