diff --git a/app/components/kategorie.hbs b/app/components/kategorie.hbs new file mode 100644 index 0000000..93f8bba --- /dev/null +++ b/app/components/kategorie.hbs @@ -0,0 +1,6 @@ +

{{@titel}}

+
+ {{yield}} +
+ + diff --git a/app/components/produkt.hbs b/app/components/produkt.hbs new file mode 100644 index 0000000..1d70894 --- /dev/null +++ b/app/components/produkt.hbs @@ -0,0 +1,11 @@ +
+ Ein Bild von {{@produkt.titel}} +
+

{{@produkt.titel}}

+
+ Menge: {{@produkt.menge}}{{@produkt.einheit}} +
+
+ + +
\ No newline at end of file diff --git a/app/helpers/compare.js b/app/helpers/compare.js new file mode 100644 index 0000000..660100e --- /dev/null +++ b/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); \ No newline at end of file diff --git a/app/routes/produkte.js b/app/routes/produkte.js new file mode 100644 index 0000000..3df04b6 --- /dev/null +++ b/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 }; + }); + } +} \ No newline at end of file diff --git a/app/styles/app.css b/app/styles/app.css index 6975c04..d40e934 100644 --- a/app/styles/app.css +++ b/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; } } diff --git a/app/templates/produkte.hbs b/app/templates/produkte.hbs index 1e7e9e1..8a2e98d 100644 --- a/app/templates/produkte.hbs +++ b/app/templates/produkte.hbs @@ -1,9 +1,19 @@ -

Produkte

+

deine Produkte

Hier kannst du aus deinen Produkten wählen oder neue Produkte hinzufügen!

Produkte bearbeiten
-
- {{yield}} -
\ No newline at end of file + +
+ +
+ +
diff --git a/app/templates/rezepte.hbs b/app/templates/rezepte.hbs index 836b3c6..51c013d 100644 --- a/app/templates/rezepte.hbs +++ b/app/templates/rezepte.hbs @@ -1,10 +1,41 @@ -

Rezepte

+

deine Rezepte

Hier kannst du aus deinen Rezepten wählen oder neue Rezepte hinzufügen!

Rezepte bearbeiten
-
+
+

Pasta

+ {{yield}} +
+ +
+

Gemüse

+ {{yield}} +
+ +
+

Geflügel

+ {{yield}} +
+ +
+

Rind

+ {{yield}} +
+ +
+

Schwein

+ {{yield}} +
+ +
+

Nachspeise

+ {{yield}} +
+ +
+

Backen

{{yield}}
\ No newline at end of file diff --git a/public/api/produkte.json b/public/api/produkte.json new file mode 100644 index 0000000..fcc50ab --- /dev/null +++ b/public/api/produkte.json @@ -0,0 +1,49 @@ +{ + "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" + } + }, + { + "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" + } + }, + { + "type": "produkt", + "id": "milch", + "attributes": { + "titel": "Milch", + "kategorie": "Milchprodukte", + "menge": 1, + "einheit": "Liter", + "bild": "https://lebensmittel-warenkunde.de/assets/images/milch-milchprodukte.jpg" + } + }, + { + "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" + } + } + ] + } + \ No newline at end of file diff --git a/public/api/rezepte.json b/public/api/rezepte.json new file mode 100644 index 0000000..e69de29 diff --git a/public/api/zettel.json b/public/api/zettel.json new file mode 100644 index 0000000..e69de29 diff --git a/tests/acceptance/einkaufszettel-test.js b/tests/acceptance/einkaufszettel-test.js index f7e2a52..0062d9d 100644 --- a/tests/acceptance/einkaufszettel-test.js +++ b/tests/acceptance/einkaufszettel-test.js @@ -48,11 +48,45 @@ module('Acceptance | einkaufszettel', function(hooks) { assert.dom('nav a.menu-produkte').hasText('Produkte'); assert.dom('nav a.menu-rezepte').hasText('Rezepte'); - assert.dom('.jumbo a.h2').hasText('deine Zettel'); + assert.dom('.jumbo h2').hasText('deine Zettel'); assert.dom('.jumbo a.button').hasText('Zettel aktualisieren'); await click('.jumbo a.button'); assert.equal(currentURL(), '/zettel'); }); + test('visiting /produkte', async function(assert) { + await visit('/produkte'); + + assert.dom('nav').exists(); + assert.dom('nav a.menu-index').hasText('EinkaufsZettel') + assert.dom('nav a.menu-zettel').hasText('Zettel'); + assert.dom('nav a.menu-produkte').hasText('Produkte'); + assert.dom('nav a.menu-rezepte').hasText('Rezepte'); + + assert.dom('.jumbo h2').hasText('deine Produkte'); + assert.dom('.jumbo a.button').hasText('Produkte bearbeiten'); + await click('.jumbo a.button'); + + assert.equal(currentURL(), '/produkte'); + }); + + test('visiting /rezepte', async function(assert) { + await visit('/rezepte'); + + assert.dom('nav').exists(); + assert.dom('nav a.menu-index').hasText('EinkaufsZettel') + assert.dom('nav a.menu-zettel').hasText('Zettel'); + assert.dom('nav a.menu-produkte').hasText('Produkte'); + assert.dom('nav a.menu-rezepte').hasText('Rezepte'); + + assert.dom('.jumbo h2').hasText('deine Rezepte'); + assert.dom('.jumbo a.button').hasText('Rezepte bearbeiten'); + await click('.jumbo a.button'); + + assert.equal(currentURL(), '/rezepte'); + }); + + + }); diff --git a/tests/integration/components/produkte-test.js b/tests/integration/components/kategorie-test.js similarity index 81% rename from tests/integration/components/produkte-test.js rename to tests/integration/components/kategorie-test.js index 7a6135a..403ca21 100644 --- a/tests/integration/components/produkte-test.js +++ b/tests/integration/components/kategorie-test.js @@ -3,22 +3,22 @@ import { setupRenderingTest } from 'ember-qunit'; import { render } from '@ember/test-helpers'; import { hbs } from 'ember-cli-htmlbars'; -module('Integration | Component | produkte', function(hooks) { +module('Integration | Component | kategorie', 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``); + await render(hbs``); assert.equal(this.element.textContent.trim(), ''); // Template block usage: await render(hbs` - + template block text - + `); assert.equal(this.element.textContent.trim(), 'template block text'); diff --git a/tests/integration/components/rezepte-test.js b/tests/integration/components/produkt-test.js similarity index 82% rename from tests/integration/components/rezepte-test.js rename to tests/integration/components/produkt-test.js index 3f11eed..e20010d 100644 --- a/tests/integration/components/rezepte-test.js +++ b/tests/integration/components/produkt-test.js @@ -3,22 +3,22 @@ import { setupRenderingTest } from 'ember-qunit'; import { render } from '@ember/test-helpers'; import { hbs } from 'ember-cli-htmlbars'; -module('Integration | Component | rezepte', function(hooks) { +module('Integration | Component | produkt', 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``); + await render(hbs``); assert.equal(this.element.textContent.trim(), ''); // Template block usage: await render(hbs` - + template block text - + `); assert.equal(this.element.textContent.trim(), 'template block text'); diff --git a/tests/integration/components/zettel-test.js b/tests/integration/components/zettel-test.js deleted file mode 100644 index 677c2f1..0000000 --- a/tests/integration/components/zettel-test.js +++ /dev/null @@ -1,26 +0,0 @@ -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 | zettel', 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``); - - assert.equal(this.element.textContent.trim(), ''); - - // Template block usage: - await render(hbs` - - template block text - - `); - - assert.equal(this.element.textContent.trim(), 'template block text'); - }); -});