upload error

app/adapters/application.js

@@ -3,7 +3,17 @@ 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`;
+  }
+
+  createRecord(store, type, snapshot) {
+    let data = this.serialize(snapshot, { includeId: true });
+    //let url = `/${type.modelName}`;
+
+    // ...
   }
 }
+

app/components/produkt.hbs

@@ -1,13 +1,7 @@
-<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>
+<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">
-        <li class="detail"><h4>Menge:</h4> {{@menge}}{{@einheit}}</li>
+        <li class="detail"><h4>Menge:</h4> {{@produkt.menge}}{{@produkt.einheit}}</li>
     </ul> 
-</button>
-
-
-
-            <!--<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>-->
+</button>

app/components/produkt.js

@@ -2,6 +2,7 @@ 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;
@@ -42,6 +43,14 @@ export default class ProduktController extends Component {
  
     setStatus(produktname, selection)
     {
+        function failure(reason) {
+            // handle the error
+            if(reason != null)
+            {
+                ;
+            }
+            }
+
         //schreibt den aktuellen Zustand in den Store
         this.store.findAll('produkt')
             .then(function(suchergebnis)
@@ -50,8 +59,7 @@ export default class ProduktController extends Component {
                 if(element.titel==produktname)
                 {
                     element.isSelected = selection;
-                    element.save(); 
-                    this.store.updateRelationships();               
+                    element.save().catch(failure);    
                 }                    
             });
         });

app/components/rezept.hbs

@@ -1,30 +1,12 @@
-{{#if @isSelected}}  
-<button type="button" class="rezept selected" {{on "click" (fn this.toggleSelection @titel)}}>
-    <span><img src={{@bild}} alt="Ein Bild von {{@titel}}"/></span>
+<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>{{@titel}}</h3>
+        <h3>{{@rezept.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>
+            <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>   
+    </span> 
 </button>
-{{else}} 
-<button type="button"  class="rezept" {{on "click" (fn this.toggleSelection @titel)}}>
-    <span><img src={{@bild}} alt="Ein Bild von {{@titel}}"/></span>
-    <span>
-        <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}}
-

app/components/rezept.js

@@ -30,7 +30,16 @@ export default class RezeptController extends Component {
                 if(element.titel==rezeptname)
                 {
                     element.isSelected = selection;
-                    element.save();         
+                    element.save().catch(failure);
+                    
+                    function failure(reason) 
+                    {
+                        // handle the error
+                        if(reason != null)
+                        {
+                            ;
+                        }
+                    }
                 }                    
             });
         });

app/models/produkt.js

@@ -1,12 +1,12 @@
 import Model, { attr } from '@ember-data/model';
 
 export default class ProduktModel extends Model {
-    @attr titel;
+    @attr ('string') titel;
     @attr ('boolean') isSelected;
-    @attr kategorie;
-    @attr menge;
-    @attr einheit;
-    @attr bild;
+    @attr ('string') kategorie;
+    @attr ('number') menge;
+    @attr ('string') einheit;
+    @attr ('string') bild;
 
     get status()
     {

app/models/rezept.js

@@ -1,15 +1,16 @@
 import Model, { attr, hasMany } from '@ember-data/model';
 
 export default class RezeptModel extends Model {
-    @attr titel;
+    @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;
+    @attr gewuerze;
+    
 
     get status()
     {

app/styles/app.css

@@ -293,6 +293,7 @@ p {
 
 .rezept img {
   border-radius: 5px;
+  width: 100%;
 }
 
 .rezept .image {

app/templates/produkte.hbs

@@ -9,7 +9,7 @@
     <ul class="resultsProdukt">
       {{#each @model as |produkt|}}
         {{#if (compare produkt.kategorie '===' 'Gemüse')}}
-          <Produkt @titel={{produkt.titel}} @isSelected={{produkt.isSelected}} @menge={{produkt.menge}} @einheit={{produkt.einheit}} @bild={{produkt.bild}}/>
+          <Produkt @produkt={{produkt}}/>
         {{/if}}
       {{/each}}
     </ul>
@@ -21,7 +21,7 @@
     <ul class="resultsProdukt">
       {{#each @model as |produkt|}}
         {{#if (compare produkt.kategorie '===' 'Milchprodukte')}}
-          <Produkt @titel={{produkt.titel}} @isSelected={{produkt.isSelected}} @menge={{produkt.menge}} @einheit={{produkt.einheit}} @bild={{produkt.bild}}/>
+          <Produkt @produkt={{produkt}}/>
         {{/if}}
       {{/each}}
     </ul>
@@ -33,7 +33,7 @@
     <ul class="resultsProdukt">
       {{#each @model as |produkt|}}
         {{#if (compare produkt.kategorie '===' 'Fleisch')}}
-          <Produkt @titel={{produkt.titel}} @isSelected={{produkt.isSelected}} @menge={{produkt.menge}} @einheit={{produkt.einheit}} @bild={{produkt.bild}}/>
+          <Produkt @produkt={{produkt}}/>
         {{/if}}
       {{/each}}
     </ul>
@@ -45,7 +45,7 @@
     <ul class="resultsProdukt">
       {{#each @model as |produkt|}}
         {{#if (compare produkt.kategorie '===' 'Pasta')}}
-          <Produkt @titel={{produkt.titel}} @isSelected={{produkt.isSelected}} @menge={{produkt.menge}} @einheit={{produkt.einheit}} @bild={{produkt.bild}}/>
+          <Produkt @produkt={{produkt}}/>
         {{/if}}
       {{/each}}
     </ul>

app/templates/rezepte.hbs

@@ -9,7 +9,7 @@
     <ul class="resultsRezept">
       {{#each @model as |rezept|}}
         {{#if (compare rezept.kategorie '===' 'Pasta')}}
-          <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>
+          <li><Rezept @rezept={{rezept}}/></li>
         {{/if}}
       {{/each}}
     </ul>

app/templates/zettel.hbs

@@ -6,10 +6,10 @@
 
 <Kategorie @titel={{"mein Zettel"}}>
   <div class="rentals">
-    <ul class="results">
+    <ul class="resultsProdukt">
       {{#each @model as |produkt|}}
         {{#if produkt.isSelected}}
-          <Produkt @titel={{produkt.titel}} @isSelected={{produkt.isSelected}} @menge={{produkt.menge}} @einheit={{produkt.einheit}} @bild={{produkt.bild}}/>
+          <Produkt @produkt={{produkt}}/>
         {{/if}}
       {{/each}}
     </ul>

public/api/rezepts.json

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