presentation version

app/components/bild.hbs

@@ -0,0 +1,3 @@
+<button type="button">
+  <img ...attributes>
+</button>

app/components/bild.js

@@ -0,0 +1,18 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class BildComponent extends Component {
+     
+    @tracked isLarge = false;
+    @tracked selected = false;
+
+    @action toggleSize() {
+      this.isLarge = !this.isLarge;
+    }
+
+    @action select()
+    {
+        this.selected = !this.selected
+    }
+}

app/components/kategorie.hbs

@@ -1,6 +1,4 @@
-<h1 class="kategorie">{{@titel}}</h1>
 <div class="kategorie">
+    <h1 class="kategorie">{{@titel}}</h1>
     {{yield}}
-</div>
-
-
+</div>

app/components/produkt.hbs

@@ -1,11 +1,12 @@
-<article class="kategorie">
-    <image src={{@produkt.bild}} alt="Ein Bild von {{@produkt.titel}}"/>
-    <div class="details">
+<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>
-        <div class="detail owner">
-            <span>Menge:</span> {{@produkt.menge}}{{@produkt.einheit}}
-        </div>
-    </div>
-  
-    
-</article>
+        <ul class="details">
+            <li class="detail"><h4>Menge:</h4> {{@produkt.menge}}{{@produkt.einheit}}</li>
+            <!--<li class="detail"><h4>this.ex:</h4> {{this.ex}}</li>
+            <li class="detail"><h4>this.prodn:</h4> {{this.prodn}}</li>
+            <li class="detail"><h4>produkt count:</h4> {{this.count}}</li>-->
+        </ul>
+    </div>    
+</button>

app/components/produkt.js

@@ -0,0 +1,77 @@
+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 ProduktController extends Component {
+    @tracked isLarge = false;
+    @tracked isSelected = false;
+    @tracked ex = false;
+    @tracked isSet = false;
+    @tracked prodn = "test";
+    @tracked count = 0;
+    
+    @service store;
+
+    @action toggleSize()
+    {
+        this.isLarge = !this.isLarge;
+    }
+
+    @action toggleSelection(produktname)
+    {
+        this.isSelected = !this.isSelected;
+        this.setStatus(produktname);
+    }
+
+    @action getStatus(produktname)
+    {
+        this.prodn = produktname;
+
+        this.store.findAll('produkt')
+            .then(function(suchergebnis) 
+            {
+
+                suchergebnis.forEach(element => {
+                    if(element.titel==produktname)
+                    {
+                        this.exists = true;
+                        this.isSelected = element.getStatus().isSelected;   
+                        this.ex = true;                    
+                    }                    
+                });
+
+                if(!this.exists)
+                {
+                    this.isSelected = false;
+                }
+            });
+    }
+ 
+    setStatus(produktname)
+    {
+        
+        //schreibt den aktuellen Zustand in den store
+        let suchergebnis = this.get('store').query('produkt', {
+            filter: {
+              titel: produktname
+            }});
+
+        this.prodn = suchergebnis.titel;
+
+
+        count = suchergebnisse.titel;
+        this.prodn = element.titel;
+        suchergebnisse.forEach(element => {
+            this.prodn = element.titel;
+            count++;
+            
+            if(element.titel === produktname)
+            {
+                this.prodn = produktname;
+                element.isSelected = this.isSelected;
+                this.isSet = !this.isSet;                  
+            }                    
+        });
+    } 
+}

app/components/rezept.hbs

@@ -0,0 +1,36 @@
+{{#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>
+    <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}}</li>
+            </ul>
+        </div>
+    </span>
+</button>
+{{else}} 
+<button type="button"  class="rezept" {{on "click" this.toggleSelection}}>
+    <span><img src={{@rezept.bild}} alt="Ein Bild von {{@rezept.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}}</li>
+            </ul>
+        </div>
+    </span>
+</button>
+{{/if}}
+

app/components/rezept.js

@@ -0,0 +1,18 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+export default class RezeptController extends Component {
+    @tracked isLarge = false;
+    @tracked isSelected = false;
+
+    @action toggleSize()
+    {
+        this.isLarge = !this.isLarge;
+    }
+
+    @action toggleSelection()
+    {
+        this.isSelected = !this.isSelected;
+    }
+}

app/components/services/store.js

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