Datenanbindung und Kategorie Komponente implementiert.

app/components/kategorie.hbs

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

app/components/produkt.hbs

@@ -0,0 +1,11 @@
+<article class="kategorie">
+    <image src={{@produkt.bild}} alt="Ein Bild von {{@produkt.titel}}"/>
+    <div class="details">
+        <h3>{{@produkt.titel}}</h3>
+        <div class="detail owner">
+            <span>Menge:</span> {{@produkt.menge}}{{@produkt.einheit}}
+        </div>
+    </div>
+  
+    
+</article>

app/helpers/compare.js

@@ -0,0 +1,35 @@
+import Ember from 'ember';
+
+export function compare(params) {
+  if(params[3]){  //handle case insensitive conditions if 4 param is passed.
+    params[0]= params[0].toLowerCase();
+    params[2]= params[2].toLowerCase();
+  }
+  let v1 = params[0];
+  let operator = params[1];
+  let v2 = params[2];
+  switch (operator) {
+    case '==':
+      return (v1 == v2);
+    case '!=':
+      return (v1 != v2);
+    case '===':
+      return (v1 === v2);
+    case '<':
+      return (v1 < v2);
+    case '<=':
+      return (v1 <= v2);
+    case '>':
+      return (v1 > v2);
+    case '>=':
+      return (v1 >= v2);
+    case '&&':
+      return !!(v1 && v2);
+    case '||':
+      return !!(v1 || v2);
+    default:
+      return false;
+  }
+}
+
+export default Ember.Helper.helper(compare);

app/routes/produkte.js

@@ -0,0 +1,30 @@
+import Route from '@ember/routing/route';
+
+const PRODUKT_KATEGORIEN = [
+    'Pasta',
+    'Gemüse',
+    'Milchprodukte',
+    'Fleisch'
+  ];
+
+export default class IndexRoute extends Route {
+  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/styles/app.css

@@ -119,7 +119,7 @@ p {
   bottom: 5px;
 }
 
-.zettel label span {
+.kategorie label span {
   font-size: 140%;
   margin: 50px auto 20px;
   display: block;
@@ -127,7 +127,7 @@ p {
   font-style: italic;
 }
 
-.zettel input {
+.kategorie input {
   padding: 11px;
   font-size: 18px;
   width: 500px;
@@ -220,10 +220,10 @@ p {
 }
 
 /**
- * Individual zettel Listing
+ * Individual kategorie Listing
  */
 
-.zettel {
+.kategorie {
   margin-top: 15px;
   background-color: #f6f6f6;
   padding: 20px 25px;
@@ -233,22 +233,22 @@ p {
   flex-wrap: wrap;
 }
 
-.zettel:hover {
+.kategorie:hover {
   background-color: #f3f3f3;
 }
 
-.zettel img {
+.kategorie img {
   border-radius: 5px;
 }
 
-.zettel .image {
+.kategorie .image {
   flex-grow: 0;
   flex-basis: 150px;
   margin: 20px 25px;
   text-align: center;
 }
 
-.zettel button.image {
+.kategorie button.image {
   position: relative;
   cursor: pointer;
   border: none;
@@ -256,11 +256,11 @@ p {
   z-index: 1;
 }
 
-.zettel button.image:focus {
+.kategorie button.image:focus {
   outline: none;
 }
 
-.zettel button.image:after {
+.kategorie button.image:after {
   content: "";
   position: absolute;
   top: 0;
@@ -276,20 +276,20 @@ p {
   transition: opacity 0.25s ease-in-out;
 }
 
-.zettel button.image:focus:after, .zettel button.image:hover:after {
+.kategorie button.image:focus:after, .kategorie button.image:hover:after {
   opacity: 0.1;
 }
 
-.zettel .image img {
+.kategorie .image img {
   max-width: 100%;
 }
 
-.zettel .image.large {
+.kategorie .image.large {
   margin: 30px 25px 50px 25px;
   flex-basis: 100%;
 }
 
-.zettel .image small {
+.kategorie .image small {
   display: block;
   margin-top: 5px;
   margin-bottom: -15px;
@@ -300,13 +300,13 @@ p {
   position: relative;
 }
 
-.zettel .image.large small {
+.kategorie .image.large small {
   margin-top: 10px;
   margin-bottom: 0px;
   font-size: 110%;
 }
 
-.zettel .details {
+.kategorie .details {
   flex-basis: 50%;
   flex-grow: 2;
   display: flex;
@@ -317,108 +317,108 @@ p {
   align-content: space-around;
 }
 
-.zettel h3 {
+.kategorie h3 {
   flex-basis: 100%;
 }
 
-.zettel h3 a {
+.kategorie h3 a {
   display: inline;
 }
 
-.zettel .detail {
+.kategorie .detail {
   flex-basis: 50%;
   font-weight: 300;
   font-style: italic;
   white-space: nowrap;
 }
 
-.zettel .detail span {
+.kategorie .detail span {
   font-weight: 400;
   font-style: normal;
 }
 
-.zettel .map {
+.kategorie .map {
   flex-grow: 0;
   flex-basis: 150px;
   font-size: 0;
   margin: 0px 25px;
 }
 
-.zettel .map img {
+.kategorie .map img {
   width: 150px;
   height: 150px;
 }
 
-.zettel.detailed {
+.kategorie.detailed {
   background: none;
   align-items: flex-start;
 }
 
-.zettel.detailed .image {
+.kategorie.detailed .image {
   flex-basis: 320px;
 }
 
-.zettel.detailed .image.large {
+.kategorie.detailed .image.large {
   margin: 30px 25px 50px 25px;
   flex-basis: 100%;
 }
 
-.zettel.detailed .details {
+.kategorie.detailed .details {
   height: auto;
 }
 
-.zettel.detailed h3 {
+.kategorie.detailed h3 {
   font-size: 200%;
   margin-bottom: 10px;
 }
 
-.zettel.detailed .detail {
+.kategorie.detailed .detail {
   margin: 5px 0px;
   flex-basis: 100%;
   flex-shrink: 2;
 }
 
-.zettel.detailed .description {
+.kategorie.detailed .description {
   white-space: normal;
   flex-basis: 100%;
   flex-shrink: 1;
 }
 
-.zettel.detailed .map {
+.kategorie.detailed .map {
   flex-basis: 100%;
   margin: 50px 25px 25px 25px;
 }
 
-.zettel.detailed .map img {
+.kategorie.detailed .map img {
   width: 100%;
   height: auto;
 }
 
 @media only screen and (max-width: 919px) {
-  .zettel.detailed .image, .zettel.detailed .image.large {
+  .kategorie.detailed .image, .kategorie.detailed .image.large {
     margin: 30px 25px 25px 25px;
     flex-basis: 100%;
     cursor: default;
   }
 
-  .zettel.detailed .image:hover {
+  .kategorie.detailed .image:hover {
     flex-basis: 100%;
     cursor: default;
   }
 
-  .zettel.detailed .image small {
+  .kategorie.detailed .image small {
     display: none;
   }
 
-  .zettel.detailed button.image:hover:after {
+  .kategorie.detailed button.image:hover:after {
     opacity: 0;
   }
 
-  .zettel.detailed button.image:focus:after {
+  .kategorie.detailed button.image:focus:after {
     opacity: 0.1;
   }
 
-  .zettel.detailed .map {
+  .kategorie.detailed .map {
     margin-top: 25px;
   }
 }

app/templates/produkte.hbs

@@ -1,9 +1,19 @@
 <Jumbo>
-  <h2>Produkte</h2>
+  <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>
 </Jumbo>
 
-<div class="zettel">
-    {{yield}}
-</div>
+<Kategorie @titel={{"Gemüse"}}>
+  <div class="rentals">
+    <ul class="results">
+      {{#each @model as |produkt|}}
+        {{#if (compare produkt.titel '===' 'Gemüse')}}
+          <li><Produkt @produkt={{produkt}} /></li>
+        {{/if}}
+        <li><Produkt @produkt={{produkt}} /></li>
+      {{/each}}
+    </ul>
+  </div>
+
+</Kategorie>

app/templates/rezepte.hbs

@@ -1,10 +1,41 @@
 <Jumbo>
-  <h2>Rezepte</h2>
+  <h2>deine Rezepte</h2>
   <p>Hier kannst du aus deinen Rezepten wählen oder neue Rezepte hinzufügen!</p>
   <LinkTo @route="rezepte" class="button">Rezepte bearbeiten</LinkTo>
 </Jumbo>
 
-<div class="zettel">
+<div class="kategorie">
+  <h2>Pasta</h2>
+    {{yield}}
+</div>
+
+<div class="kategorie">
+  <h2>Gemüse</h2>
+    {{yield}}
+</div>
+
+<div class="kategorie">
+  <h2>Geflügel</h2>
+    {{yield}}
+</div>
+
+<div class="kategorie">
+  <h2>Rind</h2>
+    {{yield}}
+</div>
+
+<div class="kategorie">
+  <h2>Schwein</h2>
+    {{yield}}
+</div>
+
+<div class="kategorie">
+  <h2>Nachspeise</h2>
+    {{yield}}
+</div>
+
+<div class="kategorie">
+  <h2>Backen</h2>
     {{yield}}
 </div>