Produkte der Rezepte auf Zettel anzeigen

app/adapters/application.js

@@ -3,7 +3,10 @@ import JSONAPIAdapter from '@ember-data/adapter/json-api';
 export default class ApplicationAdapter extends JSONAPIAdapter {
     namespace = 'api';
 
-  buildURL(...args) {
-    return `${super.buildURL(...args)}.json`;
+  buildURL(...args) {return `${super.buildURL(...args)}.json`;}
+
+  urlForUpdateRecord(id, modelName, snapshot) {
+    return `api/${modelName}s`;
   }  
 }
+

app/components/hinzufuegen.hbs

@@ -0,0 +1,23 @@
+<div class="kategorie">
+  <label>
+      <h3>Produkttitel</h3>
+      <Input class="light" @value={{this.titel}}/>
+    </label>
+    <label>
+      <h3>Kategorie</h3>
+      <Input class="light"  @value={{this.kategorie}}/>
+    </label>
+    <label>
+      <h3>Menge</h3>
+      <Input class="light"  @value={{this.menge}}/>
+    </label>
+    <label>
+      <h3>Einheit</h3>
+      <Input class="light"  @value={{this.einheit}}/>
+    </label>
+    <label>
+      <h3>Bild</h3>
+      <Input class="light" @value={{this.bild}}/>
+      <button class="button"  {{on "click" this.speichern}}>Produkt hinzufügen</button>
+    </label> 
+  </div>

app/components/hinzufuegen.js

@@ -0,0 +1,55 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+
+export default class HinzufuegenController extends Component {
+     
+    @tracked titel;
+    @tracked kategorie;
+    @tracked menge;
+    @tracked einheit;
+    @tracked bild;
+    @tracked id;
+    @tracked isselected;
+
+    @service store;
+
+    @action speichern() 
+    {
+        let produkt = this.store.createRecord('produkt', {
+            type: 'produkt',
+            id: this.titel.split(' ').join(''),
+            //attributes: {
+            titel: this.titel,
+            kategorie: this.kategorie,
+            menge: this.menge,
+            einheit: this.einheit,
+            bild: this.bild,
+            isselected: false
+            //}
+          })
+          
+          //produkt._promiseProxy = true;
+          produkt.save();
+
+          this.store.findAll('produkt').then(function (suchergebnis) {
+            suchergebnis.forEach(element => {
+              if (element.titel != undefined) {
+
+              }
+            });
+          });
+        
+
+          this.titel = null;
+          this.kategorie = null;
+          this.menge = null;
+          this.einheit = null;
+          this.bild = null;
+          this.id = null;
+
+          
+
+    }
+}

app/components/produkt.hbs

@@ -1,12 +1,7 @@
-<button type="button" class="produkt {{if this.isSelected "selected"}}" {{on "click" (fn this.toggleSelection @produkt.titel)}}>
+<button type="button" class="produkt {{if @produkt.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>
-            <!--<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

@@ -2,14 +2,11 @@ import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
+import ApplicationAdapter from '../adapters/application';
 
 export default class ProduktController extends Component {
     @tracked isLarge = false;
-    @tracked isSelected = false;
-    @tracked ex = false;
-    @tracked isSet = false;
-    @tracked prodn = "test";
-    @tracked count = 0;
+    @tracked isselected;
     
     @service store;
 
@@ -20,58 +17,47 @@ export default class ProduktController extends Component {
 
     @action toggleSelection(produktname)
     {
-        this.isSelected = !this.isSelected;
-        this.setStatus(produktname);
+        this.isselected = !this.isselected;
+        this.setStatus(produktname, this.isselected);
     }
 
     @action getStatus(produktname)
     {
-        this.prodn = produktname;
-
+        //sucht Produkt im Store
         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;                    
+                        this.isselected = element.isselected;                    
                     }                    
                 });
-
-                if(!this.exists)
-                {
-                    this.isSelected = false;
-                }
             });
     }
  
-    setStatus(produktname)
+    setStatus(produktname, selection)
     {
-        
-        //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)
+        function failure(reason) {
+            // handle the error
+            if(reason != null)
             {
-                this.prodn = produktname;
-                element.isSelected = this.isSelected;
-                this.isSet = !this.isSet;                  
+                ;
             }
+            }
+
+        //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._promiseProxy = true;
+                    element.save().catch(failure);
+                }                    
+            });
         });
     } 
 }

app/components/rezept.hbs

@@ -1,36 +1,12 @@
-{{#if this.isSelected}}  
-<button type="button" class="rezept selected" {{on "click" this.toggleSelection}}>
+<button type="button" class="rezept {{if @rezept.isselected "selected"}}" {{on "click" (fn this.toggleSelection @rezept.titel)}}>
     <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> 
+                                    {{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>
     </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}} Minuten</li>
-            </ul>
-        </div>
-    </span>
-</button>
-{{/if}}
-

app/components/rezept.js

@@ -1,18 +1,48 @@
 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.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._promiseProxy = true;
+                    element.save().catch(failure);
+                    
+                    function failure(reason) 
+                    {
+                        // handle the error
+                        if(reason != null)
+                        {
+                            ;
+                        }
+                    }
+                }                    
+            });
+        });
     }
 }

app/components/services/store.js

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

app/models/produkt.js

@@ -1,16 +1,10 @@
 import Model, { attr } from '@ember-data/model';
 
 export default class ProduktModel extends Model {
-    @attr titel;
-    @attr isSelected;
-    @attr kategorie;
-    @attr menge;
-    @attr einheit;
-    @attr bild;
-
-
-    get status()
-    {
-        return `${this.titel} ${this.IsSelected}`
-    }
+    @attr ('string') titel;
+    @attr ('boolean') isselected;
+    @attr ('string') kategorie;
+    @attr ('number') menge;
+    @attr ('string') einheit;
+    @attr ('string') bild;
 }

app/models/rezept.js

@@ -1,19 +1,14 @@
 import Model, { attr, hasMany } from '@ember-data/model';
 
 export default class RezeptModel extends Model {
-    @attr titel;
-    @attr isSelected;
+    @attr ('string') titel;
+    @attr ('boolean') isselected;
     @attr ('string') beschreibung;
-    @attr kategorie;
+    @attr ('string') kategorie;
     @attr produkte;
-    @attr gewuerze;
-    @attr ('number') personen;
     @attr ('number') dauer;
+    @attr ('number') personen;
     @attr ('string') bild;
-
-    get status()
-    {
-        return `${this.titel} ${this.IsSelected}`
-    }
+    @attr gewuerze;
 }
 

app/router.js

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

app/routes/produkte.js

@@ -1,13 +1,6 @@
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
 
-const PRODUKT_KATEGORIEN = [
-    'Pasta',
-    'Gemüse',
-    'Milchprodukte',
-    'Fleisch'
-  ];
-
 export default class ProduktRoute extends Route {
 
   @service store;
@@ -16,23 +9,3 @@ export default class ProduktRoute extends Route {
     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 };
-    });
-  }
-}*/

app/routes/rezepte.js

@@ -1,20 +1,6 @@
 import Route from '@ember/routing/route';
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 
-const REZEPT_KATEGORIEN = [
-    'Pasta',
-    'Schwein',
-    'Soße',
-    'Fleisch',
-    'Geflügel',
-    'Rind',
-    'Nachspeise',
-    'Backen'
-  ];
-
 export default class RezeptRoute extends Route{
     
   @service store;
@@ -23,24 +9,3 @@ export default class RezeptRoute extends Route{
     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 };
-    });
-  }
-}*/

app/routes/zettel.js

@@ -6,6 +6,9 @@ export default class ProduktRoute extends Route {
   @service store;
 
   async model() {
-    return this.store.findAll('produkt');
+    let produkte = this.store.findAll('produkt');
+    let rezepte = this.store.findAll('rezept');
+
+    return {produkte, rezepte};
   }
 }

app/styles/app.css

@@ -293,6 +293,7 @@ p {
 
 .rezept img {
   border-radius: 5px;
+  width: 100%;
 }
 
 .rezept .image {
@@ -562,6 +563,7 @@ p {
   align-content: space-around;
   text-align: center;
   align-items: center;
+  
 }
 
 .produkt h3 {
@@ -686,6 +688,7 @@ p {
   /**align-items: center;*/
   flex-wrap: wrap;
   align-items: flex-start;
+  width: 95%;
 }
 
 .kategorie .details {

app/templates/neues-produkt.hbs

@@ -0,0 +1,11 @@
+<Jumbo>
+  <h2>neues Produkte</h2>
+  <p>Hier kannst du ein neues Produkte hinzufügen!</p>
+  <LinkTo @route="produkte" class="button">Produkte anzeigen</LinkTo>
+</Jumbo>
+
+<Kategorie @titel={{"neues Produkt"}}>
+  <div class="resultsProdukt">
+    <Hinzufuegen class="resultsProdukt" @typ={{'neues Produkt'}}/>
+  </div>
+</Kategorie>

app/templates/produkte.hbs

@@ -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"}}>
@@ -33,7 +33,7 @@
     <ul class="resultsProdukt">
       {{#each @model as |produkt|}}
         {{#if (compare produkt.kategorie '===' 'Fleisch')}}
-          <span><Produkt @produkt={{produkt}} /></span>
+          <Produkt @produkt={{produkt}}/>
         {{/if}}
       {{/each}}
     </ul>

app/templates/rezepte.hbs

@@ -5,7 +5,7 @@
 </Jumbo>
 
 <Kategorie  @titel={{"Pasta"}}>
-  <div class="rentals">
+  <div class="rezepte">
     <ul class="resultsRezept">
       {{#each @model as |rezept|}}
         {{#if (compare rezept.kategorie '===' 'Pasta')}}

app/templates/zettel.hbs

@@ -6,10 +6,17 @@
 
 <Kategorie @titel={{"mein Zettel"}}>
   <div class="rentals">
-    <ul class="results">
-      {{#each @model as |produkt|}}
-        {{#if produkt.isSelected}}
-          <li><Rezept @zettel={{produkt}} /></li>
+    <ul class="resultsProdukt">
+      {{#each @model.produkte as |produkt|}}
+        {{#if produkt.isselected}}
+          <Produkt @produkt={{produkt}}/>
+        {{/if}}
+      {{/each}}
+      {{#each @model.rezepte as |rezept|}}
+        {{#if rezept.isselected}}
+          {{#each rezept.produkte as |produkt|}}
+              <Produkt @produkt={{produkt.attributes}}/>
+          {{/each}} 
         {{/if}}
       {{/each}}
     </ul>

jsconfig.json

@@ -1,6 +1,11 @@
 {
     "compilerOptions": {
         "experimentalDecorators": true,
-        "allowJs": true
+        "allowJs": true,
+        "strictBindCallApply": true,
+        "strict": false,
+        "alwaysStrict": false,
+        "resolveJsonModule": true,
+        "strictFunctionTypes": false
     }
 }

public/api/produkts.json

@@ -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",
+        "isselected": 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",
+        "isselected": 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",
+        "isselected": false
       }
     },
     {
@@ -41,9 +44,9 @@
         "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",
+        "isselected": false
       }
     } 
   ]
 }
-  

public/api/rezepts.json

@@ -6,6 +6,10 @@
         "attributes": {
           "titel": "Nudeln mit Garnelen und Zucchini",
           "kategorie": "Pasta",
+          "personen": 4,
+          "dauer": 60,
+          "bild": "https://kochkarussell.com/wp-content/uploads/2018/04/Nudeln-mit-Garnelen-und-Tomaten-Sahnesauce-3-500x500.jpg",
+          "isselected": 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": [
             {
@@ -68,7 +72,7 @@
                   "einheit": "Stück"
                  }
             }
-          ]},
+          ],
           "gewuerze":[
               {
                 "type": "gewuerz",
@@ -82,10 +86,8 @@
                 "type": "gewuerz",
                 "titel": "Chilischote"
               }
-          ],
-          "personen": 4,
-          "dauer": "20",
-          "bild": "https://www.pastaweb.de/wp-content/uploads/2016/02/spaghetti.jpg"
+          ]
+        }
       },
       {
           "type": "rezept",
@@ -93,6 +95,10 @@
           "attributes": {
               "titel": "Lasagne Bolognese",
               "kategorie": "Pasta",
+              "personen": 4,
+              "dauer": 80,
+              "bild": "https://images.lecker.de/,id=2e0930f7,b=lecker,w=610,cg=c.jpg",
+              "isselected": 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": [
                 {
@@ -135,7 +141,7 @@
                       "einheit": "EL"
                      }
                     }
-              ]},
+              ],
               "gewuerze":[
                   {
                     "type": "gewuerz",
@@ -145,10 +151,8 @@
                     "type": "gewuerz",
                     "titel": "Pfeffer"
                   }
-              ],
-              "personen": 4,
-              "dauer": "80",
-              "bild": "https://www.pastaweb.de/wp-content/uploads/2016/02/spaghetti.jpg"
+              ]
+            }
           }
         ]
   }

tests/acceptance/einkaufszettel-test.js

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

tests/integration/components/hinzufuegen-test.js

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | hinzufuegen', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<Hinzufuegen />`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      <Hinzufuegen>
+        template block text
+      </Hinzufuegen>
+    `);
+
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});