added loading component

ortwic · Mar 25, 2024 · fe30710 · fe30710
1 parent 28ea52b
commit fe30710
Show file tree

Hide file tree

Showing 10 changed files with 122 additions and 73 deletions.
diff --git a/src/app/animations.helper.ts b/src/app/animations.helper.ts
@@ -0,0 +1,16 @@
+import { trigger, state, style, transition, animate } from '@angular/animations';
+
+export const expandTrigger = (name: string) => {
+    return trigger(name, [
+        state('collapsed', style({
+          height: '0',
+          overflow: 'hidden',
+          visibility: 'hidden'
+        })),
+        state('expanded', style({
+          height: '*',
+          visibility: 'visible'
+        })),
+        transition('collapsed <=> expanded', animate('225ms ease-in-out')),
+    ]);
+};
diff --git a/src/app/components/loading/loading.component.html b/src/app/components/loading/loading.component.html
@@ -0,0 +1,3 @@
+<div style="text-align: center;">
+    Lade Inhalt...<mat-progress-bar color="primary" mode="indeterminate" /> 
+</div>
diff --git a/src/app/components/loading/loading.component.spec.ts b/src/app/components/loading/loading.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoadingComponent } from './loading.component';
+
+describe('LoadingComponent', () => {
+  let component: LoadingComponent;
+  let fixture: ComponentFixture<LoadingComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [LoadingComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(LoadingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/loading/loading.component.ts b/src/app/components/loading/loading.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+
+@Component({
+  selector: 'app-loading',
+  standalone: true,
+  imports: [MatProgressBarModule],
+  templateUrl: './loading.component.html'
+})
+export class LoadingComponent {
+
+}
diff --git a/src/app/components/stepper/stepper.component.ts b/src/app/components/stepper/stepper.component.ts
@@ -1,9 +1,9 @@
 import { Component, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { trigger, state, style, transition, animate } from '@angular/animations';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { expandTrigger } from '../../animations.helper';
 
 @Component({
   selector: 'app-stepper',
@@ -16,20 +16,7 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
   ],
   templateUrl: './stepper.component.html',
   styleUrl: './stepper.component.scss',
-  animations: [
-    trigger('next', [
-      state('collapsed', style({
-        height: '0',
-        overflow: 'hidden',
-        visibility: 'hidden'
-      })),
-      state('expanded', style({
-        height: '*',
-        visibility: 'visible'
-      })),
-      transition('collapsed <=> expanded', animate('225ms ease-in-out')),
-    ])
- ]
+  animations: [ expandTrigger('next') ]
 })
 export class StepperComponent<T> {
   @Input({ alias: 'controls', required: true }) 

diff --git a/src/app/pages/page/page.component.html b/src/app/pages/page/page.component.html
@@ -1,6 +1,4 @@
-<ng-template #loading>
-    Lade Inhalt...
-</ng-template>
+<ng-template #loading><app-loading /></ng-template>
 
 <ng-container *ngIf="currentPage$ | async as page; else loading">
     <app-hero-section [hero-section]="page.hero_section"/>
@@ -29,7 +27,7 @@
         }
     }
 
-    <footer>
+    <footer class="centered">
         @if (page.prevIndex !== undefined) {
             <a role="button" mat-button color="primary" aria-label="Zurück"
                [routerLink]="[ '/p', unitIndex, page.prevIndex ]">

diff --git a/src/app/pages/page/page.component.scss b/src/app/pages/page/page.component.scss
@@ -2,7 +2,7 @@
     margin: 2rem 5%;
 }
 
-footer {
+.centered {
     margin: 2rem 5%;
     text-align: center;
 

diff --git a/src/app/pages/page/page.component.ts b/src/app/pages/page/page.component.ts
@@ -4,13 +4,15 @@ import { ActivatedRoute, RouterModule } from '@angular/router';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { combineLatest, from, of, switchMap, tap } from 'rxjs';
+import { LoadingComponent } from '../../components/loading/loading.component';
 import { HeroSectionComponent } from '../../components/hero-section/hero-section.component';
 import { ImageSliderComponent } from '../../components/image-slider/image-slider.component';
 import { InputSectionComponent } from '../../components/input-section/input-section.component';
 import { StepperComponent } from '../../components/stepper/stepper.component';
 import { GuideService } from '../../services/guide.service';
 import { SafeUrlPipe } from '../../pipes/safe-url.pipe';
 import { MarkedPipe } from '../../pipes/marked.pipe';
+import { expandTrigger } from '../../animations.helper';
 
 @Component({
     selector: 'app-page',
@@ -20,6 +22,7 @@ import { MarkedPipe } from '../../pipes/marked.pipe';
         RouterModule,
         MatButtonModule,
         MatIconModule,
+        LoadingComponent,
         HeroSectionComponent,
         ImageSliderComponent,
         InputSectionComponent,
@@ -29,6 +32,7 @@ import { MarkedPipe } from '../../pipes/marked.pipe';
     ],
     templateUrl: './page.component.html',
     styleUrl: './page.component.scss',
+    animations: [ expandTrigger('next') ],
 })
 export class PageComponent {
     private route = inject(ActivatedRoute);

diff --git a/src/app/pages/start/start.component.html b/src/app/pages/start/start.component.html
@@ -1,57 +1,61 @@
-<h1>{{ greeting }}, {{ userName }}</h1>
-<h2 mat-subheader>Deine Reise</h2>
-<div role="progress">
-    <ng-container *ngFor="let unit of units$ | async">
-        <a href="#{{unit.no}}">
-            <p class="value">0%</p>
-            <span>Einheit {{ unit.no }}</span>
-        </a>
-        <p>
-            <mat-divider vertical="true" />
-        </p>
-    </ng-container>
-</div>
+<ng-template #loading><app-loading /></ng-template>
 
-<div class="unit" *ngFor="let unit of units$ | async; let i = index">
-    <div class="header" [id]="unit.no">
-        <span mat-subheader>Einheit {{unit.no}}</span>
-        <h3>{{unit.title}}</h3>
+<ng-container *ngIf="units$ | async as units; else loading">
+    <h1>{{ greeting }}, {{ userName }}</h1>
+    <h2 mat-subheader>Deine Reise</h2>
+    <div role="progress">
+        <ng-container *ngFor="let unit of units$ | async">
+            <a href="#{{unit.no}}">
+                <p class="value">0%</p>
+                <span>Einheit {{ unit.no }}</span>
+            </a>
+            <p>
+                <mat-divider vertical="true" />
+            </p>
+        </ng-container>
     </div>
-    <p>
-        <mat-divider />
-    </p>
-    <div class="card-container">
-        <mat-card class="card" *ngFor="let section of (unit.pages | async); let j = index">
-            <mat-card-header>
-                <mat-card-title>
-                    <h3>
-                        <a [routerLink]="['/p', i, j]">
-                            {{section.title}}
-                        </a>
-                    </h3>
-                </mat-card-title>
-                @if (section.hero_section) {
-                    <mat-card-subtitle>
-                        {{section.hero_section.subhead}}
-                    </mat-card-subtitle>
-                }
-            </mat-card-header>
-            <mat-card-content>
-                <p>
-                    @if (section.hero_section && section.hero_section.image) {
-                        <img class="thumbnail" mat-card-image [src]="section.hero_section.image" [alt]="section.hero_section.image_info" />
+
+    <div class="unit" *ngFor="let unit of units$ | async; let i = index">
+        <div class="header" [id]="unit.no">
+            <span mat-subheader>Einheit {{unit.no}}</span>
+            <h3>{{unit.title}}</h3>
+        </div>
+        <p>
+            <mat-divider />
+        </p>
+        <div class="card-container">
+            <mat-card class="card" *ngFor="let section of (unit.pages | async); let j = index">
+                <mat-card-header>
+                    <mat-card-title>
+                        <h3>
+                            <a [routerLink]="['/p', i, j]">
+                                {{section.title}}
+                            </a>
+                        </h3>
+                    </mat-card-title>
+                    @if (section.hero_section) {
+                        <mat-card-subtitle>
+                            {{section.hero_section.subhead}}
+                        </mat-card-subtitle>
+                    }
+                </mat-card-header>
+                <mat-card-content>
+                    <p>
+                        @if (section.hero_section && section.hero_section.image) {
+                            <img class="thumbnail" mat-card-image [src]="section.hero_section.image" [alt]="section.hero_section.image_info" />
+                        } @else {
+                            <mat-divider />
+                        }
+                    </p>
+                </mat-card-content>
+                <mat-card-footer class="footer">
+                    @if (done(i)) {
+                        <mat-icon fontIcon="check_box"/> Erledigt
                     } @else {
-                        <mat-divider />
+                        <mat-icon fontIcon="check_box_outline_blank"/> Offen
                     }
-                </p>
-            </mat-card-content>
-            <mat-card-footer class="footer">
-                @if (done(i)) {
-                    <mat-icon fontIcon="check_box"/> Erledigt
-                } @else {
-                    <mat-icon fontIcon="check_box_outline_blank"/> Offen
-                }
-            </mat-card-footer>
-        </mat-card>
+                </mat-card-footer>
+            </mat-card>
+        </div>
     </div>
-</div>
+</ng-container>
diff --git a/src/app/pages/start/start.component.ts b/src/app/pages/start/start.component.ts
@@ -4,6 +4,7 @@ import { RouterModule } from '@angular/router';
 import { MatCardModule } from '@angular/material/card';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
+import { LoadingComponent } from '../../components/loading/loading.component';
 import { greetings, userNames } from '../../services/common.data';
 import { GuideService } from '../../services/guide.service';
 
@@ -15,7 +16,8 @@ import { GuideService } from '../../services/guide.service';
     RouterModule, 
     MatCardModule, 
     MatDividerModule,
-    MatIconModule
+    MatIconModule,
+    LoadingComponent
   ],
   templateUrl: './start.component.html',
   styleUrl: './start.component.scss'