Generated model for dashboard feed and also added mock up data for feed model

mocks/feed.mock.ts

@@ -0,0 +1,81 @@
+import { FeedCard } from 'src/app/core/models/feed-card.model';
+import { FeedBook } from 'src/app/core/models/feed-book.model';
+import { FeedEvent } from 'src/app/core/models/feed-event.model';
+import { FeedNews } from 'src/app/core/models/feed-news.model';
+import { FeedRecommandation } from 'src/app/core/models/feed-recommandation.model';
+
+export const feedMock: FeedCard[] = <FeedCard[]> [
+    <FeedCard> {
+        id: 1,
+        cardTitle: 'BESTSELLER',
+        type: 'BOOK',
+        books: <FeedBook> {
+            id: 1,
+            firstBookAuthor: 'Michelle Obama',
+            firstBookTitle: 'Becoming Meine Geschichte',
+            firstBookType: 'B',
+            firstBookLanguage: 'Englisch',
+            firstBookPrice: '26,00 €',
+            firstBookIcon: 'Book1.png',
+            secondBookAuthor: 'Dörte Hansen',
+            secondBookTitle: 'Mittagsstunde',
+            secondBookType: 'B',
+            secondBookLanguage: 'Deutsch',
+            secondBookPrice: '22,00 €',
+            secondBookIcon: 'Book2.png',
+        }
+    },
+    <FeedCard> {
+        id: 2,
+        cardTitle: 'EVENT',
+        type: 'EVENT',
+        event: <FeedEvent> {
+            id: 1,
+            title: 'Lesung Manfred Bomm',
+            // tslint:disable-next-line:max-line-length
+            content: 'Möchten Sie an der Lesung des Krimiautors Manfred Bomm „Himmelsfelsen“ teilnehmen? Die Lesung findet am Dienstag, den 11.12.18 in der Filliale am Stachus in unserem große…'
+        }
+    },
+    <FeedCard> {
+        id: 3,
+        cardTitle: 'NEWS',
+        type: 'NEWS',
+        news: <FeedNews> {
+            id: 1,
+            title: 'Neueröffnung am Stachus in München',
+            // tslint:disable-next-line:max-line-length
+            content: 'Sie sind das erste Mal nach der Neueröffnung in unserem Store? Entdecken Sie unsere neue Lesewelten, sowie neue interessante Veranstaltungen b…'
+        }
+    },
+    <FeedCard> {
+        id: 4,
+        cardTitle: 'EMPFEHLUNG',
+        type: 'REC',
+        recommandation: <FeedRecommandation> {
+            id: 1,
+            title: 'Hugendubel Geschenkkarte',
+            // tslint:disable-next-line:max-line-length
+            content: 'Sie haben noch kein Weihnachtsgeschenk und Ihre Lieben lesen gerne? Mit der Hugendubel Geschenkkarte machen Sie Groß und Klein glücklich.'
+        }
+    },
+    <FeedCard> {
+        id: 5,
+        cardTitle: 'BESTSELLER',
+        type: 'BOOK',
+        books: <FeedBook> {
+            id: 1,
+            firstBookAuthor: 'Joanne K. Rowling',
+            firstBookTitle: 'Grindelwalds verbrechen',
+            firstBookType: 'B',
+            firstBookLanguage: 'Deutsch',
+            firstBookPrice: '19,99 €',
+            firstBookIcon: 'Book3.png',
+            secondBookAuthor: 'Michael Ende',
+            secondBookTitle: 'MOMO',
+            secondBookType: 'B',
+            secondBookLanguage: 'Deutsch',
+            secondBookPrice: '15,00 €',
+            secondBookIcon: 'Book4.png',
+        }
+    }
+];

src/app/app.module.ts

@@ -7,10 +7,12 @@ import { ComponentsModule } from './modules/components.module';
 import { processReducer } from './core/reducers/process.reducer';
 import { StoreModule } from '@ngrx/store';
 import { breadcrumbReducer } from './core/reducers/breadcrumb.reducer';
+import { feedReducer } from './core/reducers/feed.reducer';
 
 const rootReducer = {
   processes: processReducer,
-  breadcrumbs: breadcrumbReducer
+  breadcrumbs: breadcrumbReducer,
+  feed: feedReducer
 };
 
 @NgModule({

src/app/app.state.ts

@@ -1,7 +1,9 @@
 import { Process } from './core/models/process.model';
 import { Breadcrumb } from './core/models/breadcrumb.model';
+import { FeedCard } from './core/models/feed-card.model';
 
 export class AppState {
     readonly processes: Process[];
     readonly breadcrumbs: Breadcrumb[];
+    readonly feed: FeedCard[];
 }

src/app/core/models/feed-book.model.ts

@@ -0,0 +1,15 @@
+export interface FeedBook {
+    id: number;
+    firstBookAuthor: string;
+    firstBookTitle: string;
+    firstBookType: string;
+    firstBookLanguage: string;
+    firstBookPrice: string;
+    firstBookIcon: string;
+    secondBookAuthor: string;
+    secondBookTitle: string;
+    secondBookType: string;
+    secondBookLanguage: string;
+    secondBookPrice: string;
+    secondBookIcon: string;
+}

src/app/core/models/feed-card.model.ts

@@ -0,0 +1,14 @@
+import { FeedBook } from './feed-book.model';
+import { FeedEvent } from './feed-event.model';
+import { FeedNews } from './feed-news.model';
+import { FeedRecommandation } from './feed-recommandation.model';
+
+export interface FeedCard {
+    id: number;
+    cardTitle: string;
+    type: string;
+    books: FeedBook;
+    event: FeedEvent;
+    news: FeedNews;
+    recommandation: FeedRecommandation;
+}

src/app/core/models/feed-event.model.ts

@@ -0,0 +1,5 @@
+export interface FeedEvent {
+    id: number;
+    title: string;
+    content: string;
+}

src/app/core/models/feed-news.model.ts

@@ -0,0 +1,6 @@
+export interface FeedNews {
+    id: number;
+    title: string;
+    content: string;
+    icon: string;
+}

src/app/core/models/feed-recommandation.model.ts

@@ -0,0 +1,5 @@
+export interface FeedRecommandation {
+    id: number;
+    title: string;
+    content: string;
+}

src/app/core/reducers/feed.reducer.ts

@@ -0,0 +1,6 @@
+import { FeedCard } from '../models/feed-card.model';
+import { feedMock } from 'mocks/feed.mock';
+
+export function feedReducer(feed: FeedCard[] = feedMock, action: any) {
+    return feed;
+}

src/assets/images/Empfehlungen_Icon.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="17px" viewBox="0 0 24 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
+    <title>Empfehlungen_Icon</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="UC1_02_01_Hugendubel_Instoreapp_Kunden_Info_#1" transform="translate(-41.000000, -680.000000)" fill="#EFF6FD" fill-rule="nonzero">
+            <path d="M57.6875824,680.006269 C57.6190893,680.014238 57.5519146,680.031038 57.4877309,680.05625 L49.6185866,683.205044 L43.1317469,683.205044 C41.9645868,683.205044 41,684.169979 41,685.337561 L41,689.602609 C41,690.770178 41.9645868,691.735108 43.1317469,691.735108 L43.6646839,691.735108 L43.6646839,694.933896 C43.6646839,695.315788 43.7804792,695.724773 44.0727135,696.041785 C44.3649479,696.358824 44.8187585,696.533276 45.2634941,696.533276 L46.3293677,696.533276 C46.7741034,696.533276 47.2279139,696.358824 47.520148,696.041785 C47.8123824,695.724773 47.928178,695.315788 47.928178,694.933896 L47.928178,691.735108 L49.6435681,691.735108 L57.4877309,694.875576 C57.7341537,694.975252 58.013984,694.945895 58.2343737,694.797245 C58.4547633,694.648596 58.5868897,694.400093 58.5869131,694.134192 L58.5869131,687.470076 L58.5869131,680.805962 C58.5886955,680.575367 58.490893,680.355224 58.3186007,680.20202 C58.1463084,680.048816 57.9162961,679.977463 57.6875824,680.006269 Z M64.1078047,680.797634 C63.9830366,680.811245 63.8632245,680.854051 63.7580649,680.922586 L59.494571,683.588232 C59.2516183,683.73979 59.1080699,684.009604 59.1180979,684.295852 C59.1281259,684.582099 59.2902034,684.841199 59.543166,684.975371 C59.7961285,685.109544 60.1014614,685.098361 60.3439388,684.946043 L64.6074329,682.280399 C64.9324497,682.088092 65.0786442,681.694519 64.958027,681.336559 C64.8374098,680.978599 64.482875,680.753872 64.1078047,680.797634 Z M56.9881029,681.988843 L56.9881029,687.470076 L56.9881029,692.94297 L50.5928616,690.385619 L50.5928616,684.546196 L56.9881029,681.988843 Z M43.1317469,684.804432 L46.3293677,684.804432 L46.3293677,690.135727 L44.3808174,690.135727 L43.1317469,690.135727 C42.8226732,690.135727 42.5988103,689.911781 42.5988103,689.602609 L42.5988103,685.337561 C42.5988103,685.028376 42.8226732,684.804432 43.1317469,684.804432 Z M47.928178,684.804432 L48.9940513,684.804432 L48.9940513,690.135727 L47.928178,690.135727 L47.928178,684.804432 Z M59.8359836,686.670383 C59.5503805,686.685263 59.2944081,686.851436 59.1644887,687.106305 C59.0345692,687.361173 59.0504407,687.666018 59.2061244,687.906007 C59.3618081,688.145996 59.633652,688.284668 59.9192551,688.269787 L64.1827489,688.269787 C64.4708951,688.273635 64.7388145,688.12206 64.8840095,687.87305 C65.0292044,687.624039 65.0292044,687.316131 64.8840095,687.06712 C64.7388145,686.81811 64.4708951,686.666535 64.1827489,686.670383 L59.9192551,686.670383 C59.8915168,686.668936 59.8637219,686.668936 59.8359836,686.670383 Z M59.8859464,689.860821 C59.5320777,689.871455 59.2273387,690.113636 59.1369571,690.456056 C59.0465755,690.798477 59.1920768,691.159585 59.494571,691.343589 L63.7580649,694.009233 C64.0005484,694.161789 64.3060334,694.173119 64.5591437,694.038943 C64.812254,693.904768 64.9744153,693.645535 64.9843821,693.359153 C64.994349,693.072771 64.8506024,692.802884 64.6074329,692.651424 L60.3439388,689.985781 C60.2074429,689.898702 60.0477366,689.855127 59.8859464,689.860821 Z M45.2634941,691.735108 L46.3293677,691.735108 L46.3293677,694.933896 L45.2634941,694.933896 L45.2634941,691.735108 Z" id="Empfehlungen_Icon"></path>
+        </g>
+    </g>
+</svg>

src/assets/images/Icon_Book.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="19px" viewBox="0 0 14 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
+    <title>Icon_Book</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="UC1_02_01_Hugendubel_Instoreapp_Kunden_Info_#1" transform="translate(-111.000000, -268.000000)" fill="#000000" fill-rule="nonzero" stroke="#000000" stroke-width="0.9">
+            <path d="M123.706697,282.055883 C123.868684,282.055883 124,281.924567 124,281.762581 L124,269.293303 C124,269.131316 123.868684,269 123.706697,269 L113.192771,269 C112.531549,269.003232 111.997841,269.541315 112.000007,270.202541 L112.000007,282.980765 C112.001084,283.815089 112.677169,284.491174 113.511493,284.492252 L114.731633,284.492252 L114.731633,285.900105 C114.731066,286.014162 114.796673,286.118204 114.899837,286.16685 C115.003001,286.215497 115.125011,286.199924 115.212649,286.126926 L116.061272,285.424954 L116.907939,286.123015 C116.995578,286.196014 117.117588,286.211586 117.220752,286.162939 C117.323916,286.114293 117.389523,286.010251 117.388956,285.896194 L117.388956,284.488341 L123.706697,284.488341 C123.868684,284.488341 124,284.357025 124,284.195038 C124,284.033051 123.868684,283.901735 123.706697,283.901735 C123.220265,283.870055 122.841925,283.466272 122.841925,282.978809 C122.841925,282.491347 123.220265,282.087564 123.706697,282.055883 Z M116.80235,285.272437 L116.24703,284.812929 C116.138626,284.723429 115.981963,284.723429 115.873558,284.812929 L115.318238,285.272437 L115.318238,283.274067 L116.80235,283.274067 L116.80235,285.272437 Z M122.513933,283.903691 L117.388956,283.903691 L117.388956,282.980765 C117.388956,282.818778 117.25764,282.687462 117.095653,282.687462 L115.024936,282.687462 C114.862949,282.687462 114.731633,282.818778 114.731633,282.980765 L114.731633,283.907601 L113.511493,283.907601 C113.171274,283.923257 112.84998,283.750666 112.67519,283.458361 C112.5004,283.166056 112.5004,282.80134 112.67519,282.509035 C112.84998,282.216729 113.171274,282.044138 113.511493,282.059794 L122.515888,282.059794 C122.092535,282.602005 122.09173,283.36254 122.513933,283.905646 L122.513933,283.903691 Z M113.519315,281.469278 C113.184088,281.46931 112.858512,281.581507 112.59442,281.788 L112.594433,270.202541 C112.592214,269.868284 112.85859,269.594074 113.192771,269.586606 L123.413394,269.586606 L123.413394,281.469278 L113.511493,281.469278 L113.519315,281.469278 Z" id="Icon_Book"></path>
+        </g>
+    </g>
+</svg>

src/assets/scss/_variables.scss

@@ -3,4 +3,5 @@ $color-active: #172062;
 $color-inactive: #acbcce;
 $hima-content-color: #E9EDF9;
 $hima-content-shadow-color: #dde5ec;
-$hima-color-red: #EA0000;
+$hima-color-red: #EA0000;
+$important-notification: #172062;