Merged in feature/HIMA-62-create-animation-loading (pull request #32)

Feature/HIMA-62 create animation loading
2025-12-31 09:37:15 +01:00 · 2019-02-09 15:36:01 +00:00
parent 33efc9fc24 4b4378b953
commit 123034d35a
10 changed files with 218 additions and 71 deletions
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -37,6 +37,7 @@ import { FilterState } from './core/store/state/filter.state';
 import { CheckoutComponent } from './components/checkout/checkout.component';
 import { ModalComponent } from './shared/components/modal/modal.component';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { SharedModule } from './shared/shared.module';

 const states = [FeedState, ProcessState, BreadcrumbsState, FilterState];

@@ -70,7 +71,7 @@ export function _feedServiceEndpointProviderFactory(conf: ConfigService) {
    ProductCardComponent,
    ProductDetailsComponent,
    CheckoutComponent,
-    ModalComponent,
+    ModalComponent
  ],
  imports: [
    BrowserModule,
@@ -84,7 +85,8 @@ export function _feedServiceEndpointProviderFactory(conf: ConfigService) {
    CatServiceModule,
    FeedServiceModule,
    FormsModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    SharedModule
  ],
  providers: [
    {
--- a/src/app/components/product-card/product-card.component.html
+++ b/src/app/components/product-card/product-card.component.html
@@ -1,70 +1,92 @@
-<div class="card-container" [ngClass]="{'recommanded': product.recommandation}" (click)="productDetails(product)">
-    <div class="icon-container">
-        <img class="product-icon" [src]="imageUrl$ | async">
+<div
+  class="card-container"
+  [ngClass]="{ recommanded: product.recommandation }"
+  (click)="productDetails(product)"
+>
+  <div class="icon-container">
+    <img class="product-icon" [src]="imageUrl$ | async" />
+  </div>
+  <div class="content-container">
+    <div class="author align-left">
+      <span>{{ product.author }}</span>
    </div>
-    <div class="content-container">
-        <div class="author align-left">
-            <span>{{product.author}}</span>
+    <div class="title-price">
+      <div
+        class="title align-left"
+        [ngClass]="{ 'title-grid': product.recommandation }"
+      >
+        <div class="rec-icon-container" *ngIf="product.recommandation">
+          <img src="../../../assets/images/Empfehlungen_Icon.svg" />
        </div>
-        <div class="title-price">
-            <div class="title align-left" [ngClass]="{'title-grid': product.recommandation}">
-                <div class="rec-icon-container" *ngIf="product.recommandation">
-                    <img src="../../../assets/images/Empfehlungen_Icon.svg">
-                </div>
-                <div>
-                    <span>{{product.title}}</span>
-                </div>
-            </div>
-            <div class="price align-right">
-                <span>{{product.price}}</span>
-                <span class="currency">{{product.currency}}</span>
-            </div>
-        </div>
-        <div class="type-stock">
-            <div class="type align-left">
-                <div class="type-icon-container align-left">
-                    <img class="type-icon" src="../../../assets/images/Icon_{{product.typeIcon}}.svg">
-                </div>
-                <div class="type-text align-left">
-                    <span>{{product.type}}</span>
-                </div>
-            </div>
-            <div class="stock-container align-right">
-                <div *ngIf="product.availability" class="available-stock">
-                    <div class="available-icon-container">
-                        <img class="available-icon" src="../../../assets/images/Check.svg">
-                    </div>
-                    <div class="available-text">
-                        <span>Lieferbar</span>
-                    </div>
-                    <div class="stock-icon-wraper">
-                        <img *ngIf="!product.recommandation" class="stock-icon" src="../../../assets/images/Icon_House.svg">
-                        <img *ngIf="product.recommandation" class="stock-icon" src="../../../assets/images/Icon_House_recommended.svg">
-                    </div>
-                    <div class="stock">
-                        <span>{{product.itemsInStock}}x</span>
-                    </div>
-                </div>
-                <div *ngIf="!product.availability" class="not-available-stock">
-                    <span>{{product.notAvailableReason}}</span>
-                </div>
-            </div>
-        </div>
-        <div class="publisher-order">
-            <div class="publisher-serial">
-                <div class="publisher align-left wrap-text-more">
-                    <span>{{product.publisher}}</span>
-                </div>
-                <div class="align-left">
-                    <span>|</span>
-                </div>
-                <div class="serial align-left">
-                    <span>{{product.serial}}</span>
-                </div>
-            </div>
-            <div class="order">
-                <span>{{product.category}}</span>
-            </div>
+        <div>
+          <span>{{ product.title }}</span>
        </div>
+      </div>
+      <div class="price align-right">
+        <span>{{ product.price }}</span>
+        <span class="currency">{{ product.currency }}</span>
+      </div>
    </div>
-</div>
+    <div class="type-stock">
+      <div class="type align-left">
+        <div class="type-icon-container align-left">
+          <img
+            class="type-icon"
+            src="../../../assets/images/Icon_{{ product.typeIcon }}.svg"
+            *ngIf="!!product.typeIcon && product.typeIcon != '--'"
+          />
+        </div>
+        <div class="type-text align-left">
+          <span>{{ product.type }}</span>
+        </div>
+      </div>
+      <div class="stock-container align-right">
+        <div *ngIf="product.availability" class="available-stock">
+          <div class="available-icon-container">
+            <img
+              class="available-icon"
+              src="../../../assets/images/Check.svg"
+            />
+          </div>
+          <div class="available-text">
+            <span>Lieferbar</span>
+          </div>
+          <div class="stock-icon-wraper">
+            <img
+              *ngIf="!product.recommandation"
+              class="stock-icon"
+              src="../../../assets/images/Icon_House.svg"
+            />
+            <img
+              *ngIf="product.recommandation"
+              class="stock-icon"
+              src="../../../assets/images/Icon_House_recommended.svg"
+            />
+          </div>
+          <div class="stock">
+            <span>{{ product.itemsInStock }}x</span>
+          </div>
+        </div>
+        <div *ngIf="!product.availability" class="not-available-stock">
+          <span>{{ product.notAvailableReason }}</span>
+        </div>
+      </div>
+    </div>
+    <div class="publisher-order">
+      <div class="publisher-serial">
+        <div class="publisher align-left wrap-text-more">
+          <span>{{ product.publisher }}</span>
+        </div>
+        <div class="align-left">
+          <span>|</span>
+        </div>
+        <div class="serial align-left">
+          <span>{{ product.serial }}</span>
+        </div>
+      </div>
+      <div class="order">
+        <span>{{ product.category }}</span>
+      </div>
+    </div>
+  </div>
+</div>
--- a/src/app/components/search-results/search-results.component.html
+++ b/src/app/components/search-results/search-results.component.html
@@ -1,7 +1,19 @@
 <div class="result-container">
  <app-filter></app-filter>
-  <div id="start" infiniteScroll [infiniteScrollDistance]="1" [infiniteScrollThrottle]="50" (scrolled)="onScroll()" [scrollWindow]="true">
+  <div
+    id="start"
+    infiniteScroll
+    [infiniteScrollDistance]="1"
+    [infiniteScrollThrottle]="50"
+    (scrolled)="onScroll()"
+    [scrollWindow]="true"
+  >
    <app-product-card *ngFor="let product of products" [product]="product">
    </app-product-card>
  </div>
-</div>
+  <app-loading
+    [style.padding.px]="30"
+    loading="true"
+    text="Inhalte werden geladen"
+  ></app-loading>
+</div>
--- a/src/app/modules/components.module.ts
+++ b/src/app/modules/components.module.ts
@@ -20,6 +20,7 @@ import { NewsletterSignupModule } from './newsletter-signup/newsletter-signup.mo
 import { ContentPageComponent } from '../pages/content/content.component';
 import { CustomerSearchModule } from './customer-search/customer-search.module';
 import { CartModule } from './cart/cart-modul';
+import { SharedModule } from '../shared/shared.module';

@NgModule({
  declarations: [
--- a/src/app/modules/debug/debug.module.ts
+++ b/src/app/modules/debug/debug.module.ts
@@ -7,6 +7,7 @@ import { CommonModule } from '@angular/common';
 import { NewsletterDebugComponent } from './newsletter-debug/newsletter-debug.component';
 import { NewsletterSignupModule } from '../newsletter-signup/newsletter-signup.module';
 import { RecommendationDebugComponent } from './recommendations-animation/recommendations-animation.component';
+import { LoadingAnimationComponent } from './loading-animation/loading-animation.component';

 const routes: Routes = [
  {
@@ -21,6 +22,10 @@ const routes: Routes = [
    path: 'recom',
    component: RecommendationDebugComponent
  },
+  {
+    path: 'loading',
+    component: LoadingAnimationComponent
+  },
  { path: '**', redirectTo: 'card-stack' }
 ];

@@ -35,6 +40,7 @@ const routes: Routes = [
  declarations: [
    RecommendationDebugComponent,
    CardStackAnimationComponent,
+    LoadingAnimationComponent,
    NewsletterDebugComponent
  ]
 })
--- a/src/app/modules/debug/loading-animation/loading-animation.component.ts
+++ b/src/app/modules/debug/loading-animation/loading-animation.component.ts
@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-loading-animation',
+  template: `
+    <app-loading
+      [loading]="isLoading"
+      (click)="isLoading = !isLoading"
+      text="Animation loading text"
+    ></app-loading>
+  `
+})
+export class LoadingAnimationComponent implements OnInit {
+  isLoading = true;
+  constructor() {}
+
+  ngOnInit() {}
+}
--- a/src/app/shared/components/loading/loading.component.scss
+++ b/src/app/shared/components/loading/loading.component.scss
@@ -0,0 +1,27 @@
+:host() {
+  display: flex;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  min-height: 40px;
+  align-items: center;
+  justify-content: center;
+}
+span {
+  margin-top: 16px;
+  font-family: 'Open Sans';
+  font-weight: 600;
+  font-size: 16px;
+  color: rgba(90, 114, 138, 1);
+}
+.rotate {
+  margin-top: 10px;
+  animation: spin 1.5s linear infinite;
+}
+
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
--- a/src/app/shared/components/loading/loading.component.ts
+++ b/src/app/shared/components/loading/loading.component.ts
@@ -0,0 +1,47 @@
+import { Component, OnInit, Input } from '@angular/core';
+import {
+  trigger,
+  transition,
+  query,
+  stagger,
+  animate,
+  style,
+  state
+} from '@angular/animations';
+
+@Component({
+  selector: 'app-loading',
+  template: `
+    <ng-container *ngIf="loading" [@loading]="loading">
+      <img
+        src="/assets/images/Icon_Loading.svg"
+        class="rotate"
+        [@loading]="loading"
+      />
+      <span>{{ text }}</span>
+    </ng-container>
+  `,
+  styleUrls: ['loading.component.scss'],
+  animations: [
+    trigger('loading', [
+      state('void', style({ opacity: 0, transform: 'translateY(-100%)' })),
+      transition(':enter', [
+        animate('0.2s ease-in'),
+        style({ opacity: 1, transform: 'translateY(0)' })
+      ]),
+      transition(':leave', [
+        animate(
+          '0.2s ease-in',
+          style({ opacity: 0, transform: 'translateY(-100%)' })
+        )
+      ])
+    ])
+  ]
+})
+export class LoadingComponent implements OnInit {
+  @Input() loading = false;
+  @Input() text = '';
+  constructor() {}
+
+  ngOnInit() {}
+}
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -1,8 +1,9 @@
 import { CardComponent } from './components/card/card.component';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { LoadingComponent } from './components/loading/loading.component';

-const components = [CardComponent];
+const components = [CardComponent, LoadingComponent];
@NgModule({
  imports: [CommonModule],
  exports: [...components],
--- a/src/assets/images/Icon_Loading.svg
+++ b/src/assets/images/Icon_Loading.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="40px" height="40px" viewBox="0 0 40 40" 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_Loading</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="UC1_07_Hugendubel_Instoreapp_Kunden_Artikelrecherche_Ergebnisse_2_loadmore" transform="translate(-364.000000, -831.000000)" fill="#5A728A">
+            <path d="M375.296923,859.703077 C375.897692,860.303846 375.897692,861.277692 375.296923,861.878462 L372.033077,865.142308 C371.432308,865.743077 370.458462,865.743077 369.857692,865.142308 C369.256923,864.541538 369.256923,863.567692 369.857692,862.966923 L373.121538,859.703077 C373.722308,859.102308 374.696154,859.102308 375.296923,859.703077 Z M398.142308,836.857692 C398.743077,837.458462 398.743077,838.432308 398.142308,839.033077 L394.878462,842.296923 C394.277692,842.897692 393.303846,842.897692 392.703077,842.296923 C392.102308,841.696154 392.102308,840.722308 392.703077,840.121538 L395.966923,836.857692 C396.566923,836.256923 397.541538,836.256923 398.142308,836.857692 Z M371.692308,851 C371.692308,851.85 371.003846,852.538462 370.153846,852.538462 L365.538462,852.538462 C364.688462,852.538462 364,851.85 364,851 C364,850.15 364.688462,849.461538 365.538462,849.461538 L370.153846,849.461538 C371.003846,849.461538 371.692308,850.15 371.692308,851 Z M404,851 C404,851.85 403.311538,852.538462 402.461538,852.538462 L397.846154,852.538462 C396.996154,852.538462 396.307692,851.85 396.307692,851 C396.307692,850.15 396.996154,849.461538 397.846154,849.461538 L402.461538,849.461538 C403.311538,849.461538 404,850.15 404,851 Z M375.296923,842.296923 C374.696154,842.897692 373.722308,842.897692 373.121538,842.296923 L369.857692,839.033077 C369.256923,838.432308 369.256923,837.458462 369.857692,836.857692 C370.458462,836.256923 371.432308,836.256923 372.033077,836.857692 L375.296923,840.121538 C375.897692,840.722308 375.897692,841.696154 375.296923,842.296923 Z M398.142308,865.142308 C397.541538,865.743077 396.567692,865.743077 395.966923,865.142308 L392.703077,861.878462 C392.102308,861.277692 392.102308,860.303846 392.703077,859.703077 C393.303846,859.102308 394.277692,859.102308 394.878462,859.703077 L398.142308,862.966923 C398.743077,863.566923 398.743077,864.541538 398.142308,865.142308 Z M384,838.692308 C383.15,838.692308 382.461538,838.003846 382.461538,837.153846 L382.461538,832.538462 C382.461538,831.688462 383.15,831 384,831 C384.85,831 385.538462,831.688462 385.538462,832.538462 L385.538462,837.153846 C385.538462,838.003846 384.85,838.692308 384,838.692308 Z M384,871 C383.15,871 382.461538,870.311538 382.461538,869.461538 L382.461538,864.846154 C382.461538,863.996154 383.15,863.307692 384,863.307692 C384.85,863.307692 385.538462,863.996154 385.538462,864.846154 L385.538462,869.461538 C385.538462,870.311538 384.85,871 384,871 Z" id="Icon_Loading"></path>
+        </g>
+    </g>
+</svg>