add products

app/adapters/application.js

 
   urlForUpdateRecord(id, modelName, snapshot) {
     return `api/${modelName}s`;
-  }
-
-  createRecord(store, type, snapshot) {
-    let data = this.serialize(snapshot, { includeId: true });
-    //let url = `/${type.modelName}`;
-
-    // ...
-  }
+  }  
 }
 

app/components/hinzufuegen.hbs

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

+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() 
+    {
+        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
+            }
+          }).save();
+
+          this.titel = null;
+          this.kategorie = null;
+          this.menge = null;
+          this.einheit = null;
+          this.bild = null;
+          this.id = null;
+    }
+}

app/components/produkt.hbs

-<button type="button" class="produkt {{if @produkt.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}}"/>
     <h3>{{@produkt.titel}}</h3>
     <ul class="details">

app/components/produkt.js

 
 export default class ProduktController extends Component {
     @tracked isLarge = false;
-    @tracked isSelected;
+    @tracked isselected;
     
     @service store;
 
 
     @action toggleSelection(produktname)
     {
-        this.isSelected = !this.isSelected;
-        this.setStatus(produktname, this.isSelected);
+        this.isselected = !this.isselected;
+        this.setStatus(produktname, this.isselected);
     }
 
     @action getStatus(produktname)
                 suchergebnis.forEach(element => {
                     if(element.titel==produktname)
                     {
-                        this.isSelected = element.isSelected;                    
+                        this.isselected = element.isselected;                    
                     }                    
                 });
-
-                if(!this.exists)
-                {
-                    this.isSelected = false;
-                }
             });
     }
  
             suchergebnis.forEach(element => {
                 if(element.titel==produktname)
                 {
-                    element.isSelected = selection;
-                    element.save().catch(failure);    
+                    element.isselected = selection;
+                    element.save().catch(failure);
                 }                    
             });
         });

app/components/rezept.hbs

-<button type="button" class="rezept {{if @rezept.isSelected "selected"}}" {{on "click" (fn this.toggleSelection @rezept.titel)}}>
+<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>
         <h3>{{@rezept.titel}}</h3>

app/components/rezept.js

 
 export default class RezeptController extends Component {
     @tracked isLarge = false;
-    @tracked isSelected;
+    @tracked isselected;
 
     @service store;
 
 
     @action toggleSelection(rezeptname)
     {
-        this.isSelected = !this.isSelected;
-        this.setStatus(rezeptname, this.isSelected);
+        this.isselected = !this.isselected;
+        this.setStatus(rezeptname, this.isselected);
     }
 
     setStatus(rezeptname, selection)
             suchergebnis.forEach(element => {
                 if(element.titel==rezeptname)
                 {
-                    element.isSelected = selection;
+                    element.isselected = selection;
                     element.save().catch(failure);
                     
                     function failure(reason) 

app/models/produkt.js

 
 export default class ProduktModel extends Model {
     @attr ('string') titel;
-    @attr ('boolean') isSelected;
+    @attr ('boolean') isselected;
     @attr ('string') kategorie;
     @attr ('number') menge;
     @attr ('string') einheit;
 
     get status()
     {
-        return `${this.titel} ${this.IsSelected}`
+        return `${this.titel} ${this.isselected}`
     }
 }

app/models/rezept.js

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

app/routes/rezepte.js

 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;

app/styles/app.css

   align-content: space-around;
   text-align: center;
   align-items: center;
+  
 }
 
 .produkt h3 {
   /**align-items: center;*/
   flex-wrap: wrap;
   align-items: flex-start;
+  width: 95%;
 }
 
 .kategorie .details {

app/templates/neues-produkt.hbs

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

public/api/produkts.json

 {
-    "data": [
-      {
-        "type": "produkt",
-        "id": "spaghetti",
-        "attributes": {
-          "titel": "Spaghetti",
-          "kategorie": "Pasta",
-          "menge": 500,
-          "einheit": "Gramm",
-          "bild": "https://www.pastaweb.de/wp-content/uploads/2016/02/spaghetti.jpg",
-          "is-selected": false
-        }
-      },
-      {
-        "type": "produkt",
-        "id": "salat",
-        "attributes": {
-          "titel": "Salat",
-          "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",
-          "is-selected": false
-        }
-      },
-      {
-        "type": "produkt",
-        "id": "milch",
-        "attributes": {
-          "titel": "Milch",
-          "kategorie": "Milchprodukte",
-          "menge": 1,
-          "einheit": "Liter",
-          "bild": "https://lebensmittel-warenkunde.de/assets/images/milch-milchprodukte.jpg",
-          "is-selected": false
-        }
-      },
-      {
-        "type": "produkt",
-        "id": "kaese",
-        "attributes": {
-          "titel": "Käse",
-          "kategorie": "Milchprodukte",
-          "menge": 200,
-          "einheit": "Gramm",
-          "bild": "https://www.der-bank-blog.de/wp-content/uploads/2016/04/banking-schweizer-kaese.jpg",
-          "is-selected": false
-        }
-      } 
-    ]
-  }
-  
+  "data": []
+}

public/api/rezepts.json

           "personen": 4,
           "dauer": 60,
           "bild": "https://kochkarussell.com/wp-content/uploads/2018/04/Nudeln-mit-Garnelen-und-Tomaten-Sahnesauce-3-500x500.jpg",
-          "is-selected": false,
+          "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": [
             {
               "personen": 4,
               "dauer": 80,
               "bild": "https://images.lecker.de/,id=2e0930f7,b=lecker,w=610,cg=c.jpg",
-              "is-selected": false,
+              "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": [
                 {

tests/integration/components/hinzufuegen-test.js

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