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

<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> </button>





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



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;


@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;
} }
}); });


}); });
} }
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

{{#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> <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> </span>
</button> </button>
{{else}} {{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> <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> </span>
</button> </button>
{{/if}} {{/if}}

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

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();
}
});
});
} }
} }

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

import DS from 'ember-data';

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

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



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;

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



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
- 0
app/router.js View File

this.route('rezepte'); this.route('rezepte');
this.route('zettel'); this.route('zettel');
this.route('produkte'); this.route('produkte');
this.route('neues-produkt');
}); });

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

async model() { async model() {
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 };
});
}
}*/
}

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

async model() { async model() {
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
- 0
app/templates/neues-produkt.hbs View File

<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

<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"}}>
<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>
<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>

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

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

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

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

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

"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
} }
}, },
{ {
"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
} }
}, },
{ {
"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
} }
}, },
{ {
"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
} }
} }
] ]

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

"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": [
{ {
"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",
"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": [
{ {
"type": "gewuerz", "type": "gewuerz",
"titel": "Pfeffer" "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

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) {

Write Preview
Loading…
Cancel
Save