diemarfe64635/einkaufszettel
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

saving data to ember store

Browse Source
This commit is contained in:
Felix Diemar 2020-06-26 18:16:35 +02:00
parent e75e22316e
commit c41cecebd6
17 changed files with 127 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/components/produkt.hbs
View File

@ -1,11 +1,9 @@
<button type="button" class="produkt {{if this.isSelected "selected"}}" {{on "click" (fn this.toggleSelection @produkt.titel)}}> <button type="button" class="produkt {{if @isSelected "selected"}}" {{on "click" (fn this.toggleSelection @titel)}}>
<img src={{@produkt.bild}} alt="Ein Bild von {{@produkt.titel}}"/> <img src={{@bild}} alt="Ein Bild von {{@titel}}"/>
<div class="detail"> <h3>{{@titel}}</h3>
<h3>{{@produkt.titel}}</h3>
<ul class="details"> <ul class="details">
<li class="detail"><h4>Menge:</h4> {{@produkt.menge}}{{@produkt.einheit}}</li> <li class="detail"><h4>Menge:</h4> {{@menge}}{{@einheit}}</li>
</ul> </ul>
</div>
</button> </button>

28
app/components/produkt.js
View File

@ -5,7 +5,7 @@ import { inject as service } from '@ember/service';
export default class ProduktController extends Component { export default class ProduktController extends Component {
@tracked isLarge = false; @tracked isLarge = false;
@tracked isSelected = false; @tracked isSelected;
@service store; @service store;
@ -17,18 +17,19 @@ export default class ProduktController extends Component {
@action toggleSelection(produktname) @action toggleSelection(produktname)
{ {
this.isSelected = !this.isSelected; this.isSelected = !this.isSelected;
this.setStatus(produktname); this.setStatus(produktname, this.isSelected);
} }
@action getStatus(produktname) @action getStatus(produktname)
{ {
//sucht Produkt im Store
this.store.findAll('produkt') this.store.findAll('produkt')
.then(function(suchergebnis) .then(function(suchergebnis)
{ {
suchergebnis.forEach(element => { suchergebnis.forEach(element => {
if(element.titel==produktname) if(element.titel==produktname)
{ {
this.isSelected = element.getStatus().isSelected; this.isSelected = element.isSelected;
} }
}); });
@ -39,17 +40,20 @@ export default class ProduktController extends Component {
}); });
} }
setStatus(produktname) setStatus(produktname, selection)
{ {
//schreibt den aktuellen Zustand in den Store
//schreibt den aktuellen Zustand in den store this.store.findAll('produkt')
let suchergebnis = this.store.query('produkt', { .then(function(suchergebnis)
filter:
{ {
titel: produktname suchergebnis.forEach(element => {
}}).then(function(element) if(element.titel==produktname)
{ {
element.isSelected = this.isSelected; element.isSelected = selection;
});; element.save();
this.store.updateRelationships();
}
});
});
} }
} }

32
app/components/rezept.hbs
View File

@ -1,35 +1,29 @@
{{#if this.isSelected}} {{#if @isSelected}}
<button type="button" class="rezept selected" {{on "click" this.toggleSelection}}> <button type="button" class="rezept selected" {{on "click" (fn this.toggleSelection @titel)}}>
<span><img src={{@rezept.bild}} alt="Ein Bild von {{@rezept.titel}}"/></span> <span><img src={{@bild}} alt="Ein Bild von {{@titel}}"/></span>
<span> <span>
<h3>{{@titel}}</h3>
<div class="detail">
<h3>{{@rezept.titel}}</h3>
<ul class="details"> <ul class="details">
<li class="detail"><h4>Zutaten:</h4>{{#each @rezept.produkte as |produkt|}} <li class="detail"><h4>Zutaten:</h4>{{#each @produkte as |produkt|}}
{{produkt.attributes.titel}}, {{produkt.attributes.titel}},
{{/each}}Gewürze</li> {{/each}}Gewürze</li>
<li class="detail"><h4>Personen:</h4>{{@rezept.personen}}</li> <li class="detail"><h4>Personen:</h4>{{@personen}}</li>
<li class="detail"><h4>Dauer:</h4>{{@rezept.dauer}} Minuten</li> <li class="detail"><h4>Dauer:</h4>{{@dauer}} Minuten</li>
</ul> </ul>
</div>
</span> </span>
</button> </button>
{{else}} {{else}}
<button type="button" class="rezept" {{on "click" this.toggleSelection}}> <button type="button" class="rezept" {{on "click" (fn this.toggleSelection @titel)}}>
<span><img src={{@rezept.bild}} alt="Ein Bild von {{@rezept.titel}}"/></span> <span><img src={{@bild}} alt="Ein Bild von {{@titel}}"/></span>
<span> <span>
<h3>{{@titel}}</h3>
<div class="detail">
<h3>{{@rezept.titel}}</h3>
<ul class="details"> <ul class="details">
<li class="detail"><h4>Zutaten:</h4>{{#each @rezept.produkte as |produkt|}} <li class="detail"><h4>Zutaten:</h4>{{#each @produkte as |produkt|}}
{{produkt.attributes.titel}}, {{produkt.attributes.titel}},
{{/each}}Gewürze</li> {{/each}}Gewürze</li>
<li class="detail"><h4>Personen:</h4>{{@rezept.personen}} </li> <li class="detail"><h4>Personen:</h4>{{@personen}} </li>
<li class="detail"><h4>Dauer:</h4>{{@rezept.dauer}} Minuten</li> <li class="detail"><h4>Dauer:</h4>{{@dauer}} Minuten</li>
</ul> </ul>
</div>
</span> </span>
</button> </button>
{{/if}} {{/if}}

24
app/components/rezept.js
View File

@ -1,18 +1,38 @@
import Component from '@glimmer/component'; import Component from '@glimmer/component';
import { action } from '@ember/object'; import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking'; import { tracked } from '@glimmer/tracking';
import { inject as service } from '@ember/service';
export default class RezeptController extends Component { export default class RezeptController extends Component {
@tracked isLarge = false; @tracked isLarge = false;
@tracked isSelected = false; @tracked isSelected;
@service store;
@action toggleSize() @action toggleSize()
{ {
this.isLarge = !this.isLarge; this.isLarge = !this.isLarge;
} }
@action toggleSelection() @action toggleSelection(rezeptname)
{ {
this.isSelected = !this.isSelected; this.isSelected = !this.isSelected;
this.setStatus(rezeptname, this.isSelected);
}
setStatus(rezeptname, selection)
{
//schreibt den aktuellen Zustand in den Store
this.store.findAll('rezept')
.then(function(suchergebnis)
{
suchergebnis.forEach(element => {
if(element.titel==rezeptname)
{
element.isSelected = selection;
element.save();
}
});
});
} }
} }

4
app/components/services/store.js
View File

@ -1,4 +0,0 @@
import DS from 'ember-data';
export default DS.Store.extend({
});

2
app/models/produkt.js
View File

@ -2,7 +2,7 @@ import Model, { attr } from '@ember-data/model';
export default class ProduktModel extends Model { export default class ProduktModel extends Model {
@attr titel; @attr titel;
@attr isSelected; @attr ('boolean') isSelected;
@attr kategorie; @attr kategorie;
@attr menge; @attr menge;
@attr einheit; @attr einheit;

2
app/models/rezept.js
View File

@ -2,7 +2,7 @@ import Model, { attr, hasMany } from '@ember-data/model';
export default class RezeptModel extends Model { export default class RezeptModel extends Model {
@attr titel; @attr titel;
@attr isSelected; @attr ('boolean') isSelected;
@attr ('string') beschreibung; @attr ('string') beschreibung;
@attr kategorie; @attr kategorie;
@attr produkte; @attr produkte;

1
app/router.js
View File

@ -10,4 +10,5 @@ Router.map(function() {
this.route('rezepte'); this.route('rezepte');
this.route('zettel'); this.route('zettel');
this.route('produkte'); this.route('produkte');
this.route('neues-produkt');
}); });

23
app/routes/produkte.js
View File

@ -9,26 +9,3 @@ export default class ProduktRoute extends Route {
return this.store.findAll('produkt'); return this.store.findAll('produkt');
} }
} }
/*async model() {
let response = await fetch('/api/produkte.json');
let { data } = await response.json();
return data.map(model => {
let { attributes } = model;
let kategorie;
if (PRODUKT_KATEGORIEN.includes(attributes.kategorie)) {
kategorie = attributes.kategorie;
}
else
{
kategorie = 'Sonstiges';
}
return { kategorie, ...attributes };
});
}
}*/

21
app/routes/rezepte.js
View File

@ -23,24 +23,3 @@ export default class RezeptRoute extends Route{
return this.store.findAll('rezept'); return this.store.findAll('rezept');
} }
} }
/*async model() {
let response = await fetch('/api/rezepte.json');
let { data } = await response.json();
return data.map(model => {
let { attributes } = model;
let kategorie;
if (REZEPT_KATEGORIEN.includes(attributes.kategorie)) {
kategorie = attributes.kategorie;
}
else
{
kategorie = 'Sonstiges';
}
return { kategorie, ...attributes };
});
}
}*/

5
app/templates/neues-produkt.hbs Normal file
View File

@ -0,0 +1,5 @@
<Jumbo>
<h2>neues Produkte</h2>
<p>Hier kannst du ein neues Produkte hinzufügen!</p>
<LinkTo @route="produkte" class="button">Produkte anzeigen</LinkTo>
</Jumbo>

54
app/templates/produkte.hbs
View File

@ -1,7 +1,7 @@
<Jumbo> <Jumbo>
<h2>deine Produkte</h2> <h2>deine Produkte</h2>
<p>Hier kannst du aus deinen Produkten wählen oder neue Produkte hinzufügen!</p> <p>Hier kannst du aus deinen Produkten wählen oder neue Produkte hinzufügen!</p>
<LinkTo @route="produkte" class="button">Produkte bearbeiten</LinkTo> <LinkTo @route="neues-produkt" class="button">Produkt hinzufügen</LinkTo>
</Jumbo> </Jumbo>
<Kategorie @titel={{"Gemüse"}}> <Kategorie @titel={{"Gemüse"}}>
@ -9,7 +9,7 @@
<ul class="resultsProdukt"> <ul class="resultsProdukt">
{{#each @model as |produkt|}} {{#each @model as |produkt|}}
{{#if (compare produkt.kategorie '===' 'Gemüse')}} {{#if (compare produkt.kategorie '===' 'Gemüse')}}
<Produkt @produkt={{produkt}} /> <Produkt @titel={{produkt.titel}} @isSelected={{produkt.isSelected}} @menge={{produkt.menge}} @einheit={{produkt.einheit}} @bild={{produkt.bild}}/>
{{/if}} {{/if}}
{{/each}} {{/each}}
</ul> </ul>
@ -21,31 +21,31 @@
<ul class="resultsProdukt"> <ul class="resultsProdukt">
{{#each @model as |produkt|}} {{#each @model as |produkt|}}
{{#if (compare produkt.kategorie '===' 'Milchprodukte')}} {{#if (compare produkt.kategorie '===' 'Milchprodukte')}}
<Produkt @produkt={{produkt}} /> <Produkt @titel={{produkt.titel}} @isSelected={{produkt.isSelected}} @menge={{produkt.menge}} @einheit={{produkt.einheit}} @bild={{produkt.bild}}/>
{{/if}} {{/if}}
{{/each}} {{/each}}
</ul> </ul>
</div> </div>
</Kategorie> </Kategorie>
<Kategorie @titel={{"Fleisch"}}> <Kategorie @titel={{"Fleisch"}}>
<div class="rentals"> <div class="rentals">
<ul class="resultsProdukt"> <ul class="resultsProdukt">
{{#each @model as |produkt|}} {{#each @model as |produkt|}}
{{#if (compare produkt.kategorie '===' 'Fleisch')}} {{#if (compare produkt.kategorie '===' 'Fleisch')}}
<span><Produkt @produkt={{produkt}} /></span> <Produkt @titel={{produkt.titel}} @isSelected={{produkt.isSelected}} @menge={{produkt.menge}} @einheit={{produkt.einheit}} @bild={{produkt.bild}}/>
{{/if}} {{/if}}
{{/each}} {{/each}}
</ul> </ul>
</div> </div>
</Kategorie> </Kategorie>
<Kategorie @titel={{"Pasta"}}> <Kategorie @titel={{"Pasta"}}>
<div class="rentals"> <div class="rentals">
<ul class="resultsProdukt"> <ul class="resultsProdukt">
{{#each @model as |produkt|}} {{#each @model as |produkt|}}
{{#if (compare produkt.kategorie '===' 'Pasta')}} {{#if (compare produkt.kategorie '===' 'Pasta')}}
<Produkt @produkt={{produkt}} /> <Produkt @titel={{produkt.titel}} @isSelected={{produkt.isSelected}} @menge={{produkt.menge}} @einheit={{produkt.einheit}} @bild={{produkt.bild}}/>
{{/if}} {{/if}}
{{/each}} {{/each}}
</ul> </ul>

2
app/templates/rezepte.hbs
View File

@ -9,7 +9,7 @@
<ul class="resultsRezept"> <ul class="resultsRezept">
{{#each @model as |rezept|}} {{#each @model as |rezept|}}
{{#if (compare rezept.kategorie '===' 'Pasta')}} {{#if (compare rezept.kategorie '===' 'Pasta')}}
<li><Rezept @rezept={{rezept}} /></li> <li><Rezept @titel={{rezept.titel}} @beschreibung={{rezept.beschreibung}} @kategorie={{rezept.kategorie}} @produkte={{rezept.produkte}} @gewuerze={{rezept.gewuerze}} @personen={{rezept.attributes.personen}} @dauer={{rezept.dauer}} @isSelected={{rezept.isSelected}}/></li>
{{/if}} {{/if}}
{{/each}} {{/each}}
</ul> </ul>

4
app/templates/zettel.hbs
View File

@ -9,9 +9,9 @@
<ul class="results"> <ul class="results">
{{#each @model as |produkt|}} {{#each @model as |produkt|}}
{{#if produkt.isSelected}} {{#if produkt.isSelected}}
<li><Rezept @zettel={{produkt}} /></li> <Produkt @titel={{produkt.titel}} @isSelected={{produkt.isSelected}} @menge={{produkt.menge}} @einheit={{produkt.einheit}} @bild={{produkt.bild}}/>
{{/if}} {{/if}}
{{/each}} {{/each}}
</ul> </ul>
</div> </div>
</Kategorie> </Kategorie>

12
public/api/produkts.json
View File

@ -8,7 +8,8 @@
"kategorie": "Pasta", "kategorie": "Pasta",
"menge": 500, "menge": 500,
"einheit": "Gramm", "einheit": "Gramm",
"bild": "https://www.pastaweb.de/wp-content/uploads/2016/02/spaghetti.jpg" "bild": "https://www.pastaweb.de/wp-content/uploads/2016/02/spaghetti.jpg",
"is-selected": false
} }
}, },
{ {
@ -19,7 +20,8 @@
"kategorie": "Gemüse", "kategorie": "Gemüse",
"menge": 1, "menge": 1,
"einheit": "Kopf", "einheit": "Kopf",
"bild": "https://napolipizza-spiez.ch/WebRoot/Store2/Shops/178389/5BD1/5BA4/85F2/ACB6/97E9/D91A/30FA/F35F/gruener-salat-2464087.jpg" "bild": "https://napolipizza-spiez.ch/WebRoot/Store2/Shops/178389/5BD1/5BA4/85F2/ACB6/97E9/D91A/30FA/F35F/gruener-salat-2464087.jpg",
"is-selected": false
} }
}, },
{ {
@ -30,7 +32,8 @@
"kategorie": "Milchprodukte", "kategorie": "Milchprodukte",
"menge": 1, "menge": 1,
"einheit": "Liter", "einheit": "Liter",
"bild": "https://lebensmittel-warenkunde.de/assets/images/milch-milchprodukte.jpg" "bild": "https://lebensmittel-warenkunde.de/assets/images/milch-milchprodukte.jpg",
"is-selected": false
} }
}, },
{ {
@ -41,7 +44,8 @@
"kategorie": "Milchprodukte", "kategorie": "Milchprodukte",
"menge": 200, "menge": 200,
"einheit": "Gramm", "einheit": "Gramm",
"bild": "https://www.der-bank-blog.de/wp-content/uploads/2016/04/banking-schweizer-kaese.jpg" "bild": "https://www.der-bank-blog.de/wp-content/uploads/2016/04/banking-schweizer-kaese.jpg",
"is-selected": false
} }
} }
] ]

18
public/api/rezepts.json
View File

@ -6,6 +6,10 @@
"attributes": { "attributes": {
"titel": "Nudeln mit Garnelen und Zucchini", "titel": "Nudeln mit Garnelen und Zucchini",
"kategorie": "Pasta", "kategorie": "Pasta",
"personen": 4,
"dauer": 20,
"bild": "https://www.pastaweb.de/wp-content/uploads/2016/02/spaghetti.jpg",
"is-selected": false,
"beschreibung": "(1) Die Garnelen kalt überbrausen, in wenig Salzwasser kurz aufkochen, abgießen, das Wasser aufbewahren. (2) In einer Pfanne in der heißen Butter die Lauchzwiebeln und den Knoblauch anschwitzen, die Zucchiniwürfel und evtl. die Chilischoten zugeben, mit Salz und Pfeffer abwürzen. Zugedeckt 5 Minuten dünsten. Die Garnelen mit etwas Garnelenwasser unterischen, noch einmal erhitzen. Über die angerichteten Nudeln geben.", "beschreibung": "(1) Die Garnelen kalt überbrausen, in wenig Salzwasser kurz aufkochen, abgießen, das Wasser aufbewahren. (2) In einer Pfanne in der heißen Butter die Lauchzwiebeln und den Knoblauch anschwitzen, die Zucchiniwürfel und evtl. die Chilischoten zugeben, mit Salz und Pfeffer abwürzen. Zugedeckt 5 Minuten dünsten. Die Garnelen mit etwas Garnelenwasser unterischen, noch einmal erhitzen. Über die angerichteten Nudeln geben.",
"produkte": [ "produkte": [
{ {
@ -82,10 +86,7 @@
"type": "gewuerz", "type": "gewuerz",
"titel": "Chilischote" "titel": "Chilischote"
} }
], ]
"personen": 4,
"dauer": "20",
"bild": "https://www.pastaweb.de/wp-content/uploads/2016/02/spaghetti.jpg"
}, },
{ {
"type": "rezept", "type": "rezept",
@ -93,6 +94,10 @@
"attributes": { "attributes": {
"titel": "Lasagne Bolognese", "titel": "Lasagne Bolognese",
"kategorie": "Pasta", "kategorie": "Pasta",
"personen": 4,
"dauer": 80,
"bild": "https://www.pastaweb.de/wp-content/uploads/2016/02/spaghetti.jpg",
"is-selected": false,
"beschreibung": "(1) Die Bologneser Sauce und die Bechamelsauce zubereiten. (2) Den Boden einer Auflaufform mit etwas Bechamelsauce bedecken, mit Lasagneblättern auslegen. Einige Löffel Bologneser Sauce darüfergeben, darauf einige Löffel Bechamelsauceverstreichen und mit Parmesan bestreuen. Diesen Vorgang wiederholen, bis alle Zutaten aufgebraucht sind. Die letzte Schicht sind Lasagneblätter, Bechamelsauce und Parmesan. (3) Die Form auf dem Rost in den kalten Backofen schieben und etwa 40 Minuten bei 220°C goldgelb backen. ", "beschreibung": "(1) Die Bologneser Sauce und die Bechamelsauce zubereiten. (2) Den Boden einer Auflaufform mit etwas Bechamelsauce bedecken, mit Lasagneblättern auslegen. Einige Löffel Bologneser Sauce darüfergeben, darauf einige Löffel Bechamelsauceverstreichen und mit Parmesan bestreuen. Diesen Vorgang wiederholen, bis alle Zutaten aufgebraucht sind. Die letzte Schicht sind Lasagneblätter, Bechamelsauce und Parmesan. (3) Die Form auf dem Rost in den kalten Backofen schieben und etwa 40 Minuten bei 220°C goldgelb backen. ",
"produkte": [ "produkte": [
{ {
@ -145,10 +150,7 @@
"type": "gewuerz", "type": "gewuerz",
"titel": "Pfeffer" "titel": "Pfeffer"
} }
], ]
"personen": 4,
"dauer": "80",
"bild": "https://www.pastaweb.de/wp-content/uploads/2016/02/spaghetti.jpg"
} }
] ]
} }

4
tests/acceptance/einkaufszettel-test.js
View File

@ -65,10 +65,10 @@ module('Acceptance | einkaufszettel', function(hooks) {
assert.dom('nav a.menu-rezepte').hasText('Rezepte'); assert.dom('nav a.menu-rezepte').hasText('Rezepte');
assert.dom('.jumbo h2').hasText('deine Produkte'); assert.dom('.jumbo h2').hasText('deine Produkte');
assert.dom('.jumbo a.button').hasText('Produkte bearbeiten'); assert.dom('.jumbo a.button').hasText('Produkt hinzufügen');
await click('.jumbo a.button'); await click('.jumbo a.button');
assert.equal(currentURL(), '/produkte'); assert.equal(currentURL(), '/neues-produkt');
}); });
test('visiting /rezepte', async function(assert) { test('visiting /rezepte', async function(assert) {