diemarfe64635
/
einkaufszettel
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

saving data to ember store

master
Felix Diemar 3 years ago
parent
e75e22316e
commit
c41cecebd6
17 changed files with 109 additions and 129 deletions
Split View Show Diff Stats
  1. 6
    8
      app/components/produkt.hbs
  2. 18
    14
      app/components/produkt.js
  3. 21
    27
      app/components/rezept.hbs
  4. 22
    2
      app/components/rezept.js
  5. 0
    4
      app/components/services/store.js
  6. 1
    1
      app/models/produkt.js
  7. 1
    1
      app/models/rezept.js
  8. 1
    0
      app/router.js
  9. 1
    24
      app/routes/produkte.js
  10. 1
    22
      app/routes/rezepte.js
  11. 5
    0
      app/templates/neues-produkt.hbs
  12. 9
    9
      app/templates/produkte.hbs
  13. 1
    1
      app/templates/rezepte.hbs
  14. 2
    2
      app/templates/zettel.hbs
  15. 8
    4
      public/api/produkts.json
  16. 10
    8
      public/api/rezepts.json
  17. 2
    2
      tests/acceptance/einkaufszettel-test.js

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



+ 18
- 14
app/components/produkt.js View File

@@ -5,7 +5,7 @@ import { inject as service } from '@ember/service';

export default class ProduktController extends Component {
@tracked isLarge = false;
@tracked isSelected = false;
@tracked isSelected;
@service store;

@@ -17,18 +17,19 @@ export default class ProduktController extends Component {
@action toggleSelection(produktname)
{
this.isSelected = !this.isSelected;
this.setStatus(produktname);
this.setStatus(produktname, this.isSelected);
}

@action getStatus(produktname)
{
//sucht Produkt im Store
this.store.findAll('produkt')
.then(function(suchergebnis)
{
suchergebnis.forEach(element => {
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
let suchergebnis = this.store.query('produkt', {
filter:
{
titel: produktname
}}).then(function(element)
{
element.isSelected = this.isSelected;
});;
//schreibt den aktuellen Zustand in den Store
this.store.findAll('produkt')
.then(function(suchergebnis)
{
suchergebnis.forEach(element => {
if(element.titel==produktname)
{
element.isSelected = selection;
element.save();
this.store.updateRelationships();
}
});
});
}
}

+ 21
- 27
app/components/rezept.hbs View File

@@ -1,35 +1,29 @@
{{#if this.isSelected}}
<button type="button" class="rezept selected" {{on "click" this.toggleSelection}}>
<span><img src={{@rezept.bild}} alt="Ein Bild von {{@rezept.titel}}"/></span>
{{#if @isSelected}}
<button type="button" class="rezept selected" {{on "click" (fn this.toggleSelection @titel)}}>
<span><img src={{@bild}} alt="Ein Bild von {{@titel}}"/></span>
<span>

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

<div class="detail">
<h3>{{@rezept.titel}}</h3>
<ul class="details">
<li class="detail"><h4>Zutaten:</h4>{{#each @rezept.produkte as |produkt|}}
{{produkt.attributes.titel}},
{{/each}}Gewürze</li>
<li class="detail"><h4>Personen:</h4>{{@rezept.personen}} </li>
<li class="detail"><h4>Dauer:</h4>{{@rezept.dauer}} Minuten</li>
</ul>
</div>
<h3>{{@titel}}</h3>
<ul class="details">
<li class="detail"><h4>Zutaten:</h4>{{#each @produkte as |produkt|}}
{{produkt.attributes.titel}},
{{/each}}Gewürze</li>
<li class="detail"><h4>Personen:</h4>{{@personen}} </li>
<li class="detail"><h4>Dauer:</h4>{{@dauer}} Minuten</li>
</ul>
</span>
</button>
{{/if}}

+ 22
- 2
app/components/rezept.js View File

@@ -1,18 +1,38 @@
import Component from '@glimmer/component';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';
import { inject as service } from '@ember/service';

export default class RezeptController extends Component {
@tracked isLarge = false;
@tracked isSelected = false;
@tracked isSelected;

@service store;

@action toggleSize()
{
this.isLarge = !this.isLarge;
}

@action toggleSelection()
@action toggleSelection(rezeptname)
{
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();
}
});
});
}
}

+ 0
- 4
app/components/services/store.js View File

@@ -1,4 +0,0 @@
import DS from 'ember-data';

export default DS.Store.extend({
});

+ 1
- 1
app/models/produkt.js View File

@@ -2,7 +2,7 @@ import Model, { attr } from '@ember-data/model';

export default class ProduktModel extends Model {
@attr titel;
@attr isSelected;
@attr ('boolean') isSelected;
@attr kategorie;
@attr menge;
@attr einheit;

+ 1
- 1
app/models/rezept.js View File

@@ -2,7 +2,7 @@ import Model, { attr, hasMany } from '@ember-data/model';

export default class RezeptModel extends Model {
@attr titel;
@attr isSelected;
@attr ('boolean') isSelected;
@attr ('string') beschreibung;
@attr kategorie;
@attr produkte;

+ 1
- 0
app/router.js View File

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

+ 1
- 24
app/routes/produkte.js View File

@@ -8,27 +8,4 @@ export default class ProduktRoute extends Route {
async model() {
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 };
});
}
}*/
}

+ 1
- 22
app/routes/rezepte.js View File

@@ -22,25 +22,4 @@ export default class RezeptRoute extends Route{
async model() {
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
- 0
app/templates/neues-produkt.hbs 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>

+ 9
- 9
app/templates/produkte.hbs View File

@@ -1,7 +1,7 @@
<Jumbo>
<h2>deine Produkte</h2>
<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>

<Kategorie @titel={{"Gemüse"}}>
@@ -9,7 +9,7 @@
<ul class="resultsProdukt">
{{#each @model as |produkt|}}
{{#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}}
{{/each}}
</ul>
@@ -21,31 +21,31 @@
<ul class="resultsProdukt">
{{#each @model as |produkt|}}
{{#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}}
{{/each}}
</ul>
</div>
</Kategorie>
</Kategorie>

<Kategorie @titel={{"Fleisch"}}>
<Kategorie @titel={{"Fleisch"}}>
<div class="rentals">
<ul class="resultsProdukt">
{{#each @model as |produkt|}}
{{#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}}
{{/each}}
</ul>
</div>
</Kategorie>
</Kategorie>

<Kategorie @titel={{"Pasta"}}>
<Kategorie @titel={{"Pasta"}}>
<div class="rentals">
<ul class="resultsProdukt">
{{#each @model as |produkt|}}
{{#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}}
{{/each}}
</ul>

+ 1
- 1
app/templates/rezepte.hbs View File

@@ -9,7 +9,7 @@
<ul class="resultsRezept">
{{#each @model as |rezept|}}
{{#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}}
{{/each}}
</ul>

+ 2
- 2
app/templates/zettel.hbs View File

@@ -9,9 +9,9 @@
<ul class="results">
{{#each @model as |produkt|}}
{{#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}}
{{/each}}
</ul>
</div>
</Kategorie>
</Kategorie>

+ 8
- 4
public/api/produkts.json View File

@@ -8,7 +8,8 @@
"kategorie": "Pasta",
"menge": 500,
"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",
"menge": 1,
"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",
"menge": 1,
"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",
"menge": 200,
"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
}
}
]

+ 10
- 8
public/api/rezepts.json View File

@@ -6,6 +6,10 @@
"attributes": {
"titel": "Nudeln mit Garnelen und Zucchini",
"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.",
"produkte": [
{
@@ -82,10 +86,7 @@
"type": "gewuerz",
"titel": "Chilischote"
}
],
"personen": 4,
"dauer": "20",
"bild": "https://www.pastaweb.de/wp-content/uploads/2016/02/spaghetti.jpg"
]
},
{
"type": "rezept",
@@ -93,6 +94,10 @@
"attributes": {
"titel": "Lasagne Bolognese",
"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. ",
"produkte": [
{
@@ -145,10 +150,7 @@
"type": "gewuerz",
"titel": "Pfeffer"
}
],
"personen": 4,
"dauer": "80",
"bild": "https://www.pastaweb.de/wp-content/uploads/2016/02/spaghetti.jpg"
]
}
]
}

+ 2
- 2
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('.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');

assert.equal(currentURL(), '/produkte');
assert.equal(currentURL(), '/neues-produkt');
});

test('visiting /rezepte', async function(assert) {

Write Preview
Loading…
Cancel
Save