get privacy and imprint from firestore pages

src/app/app.routes.ts

@@ -4,8 +4,6 @@ import { PageComponent } from './pages/page/page.component';
 import { BlogComponent } from './pages/blog/blog.component';
 import { BlogPostComponent } from './pages/blog-post/blog-post.component';
 import { SettingsComponent } from './pages/settings/settings.component';
-import { ImprintComponent } from './pages/imprint/imprint.component';
-import { PrivacyComponent } from './pages/privacy/privacy.component';
 import { ErrorComponent } from './pages/error/error.component';
 import { SummaryComponent } from './pages/summary/summary.component';
 
@@ -15,6 +13,13 @@ export const routes: Routes = [
         title: 'Start | Why App', 
         component: StartComponent
     },
+    { 
+        path: 'p/:unit',
+        component: PageComponent,
+        resolve: {
+            unit: (route: ActivatedRouteSnapshot) => route.params['unit']
+        }
+    },
     { 
         path: 'p/:unit/:page',
         component: PageComponent,
@@ -49,16 +54,6 @@ export const routes: Routes = [
         title: 'Einstellungen | Why App',
         component: SettingsComponent
     },
-    {
-        path: 'imprint',
-        title: 'Impressum | Why App',
-        component: ImprintComponent
-    },
-    {
-        path: 'privacy',
-        title: 'Datenschutz | Why App',
-        component: PrivacyComponent
-    },
     {
         path: '**',
         title: 'Error | Why App',

src/app/components/hero-section/hero-section.component.html

@@ -1,10 +1,14 @@
-<div class="header" [style.backgroundImage]="'url(' + section.image + ')'">
+@if (section.image) {
+    <div class="header" [style.backgroundImage]="'url(' + section.image + ')'">
+        <h1>{{section.headline}}</h1>
+        <section>
+            <div class="subhead">{{section.subhead}}</div>
+            <a mat-button role="button" [href]="section.call_to_action_link">
+                {{section.call_to_action}}
+            </a>
+        </section>
+        <div class="img-info">{{section.image_info}}</div>
+    </div>
+} @else {
     <h1>{{section.headline}}</h1>
-    <section>
-        <div class="subhead">{{section.subhead}}</div>
-        <a mat-button role="button" [href]="section.call_to_action_link">
-            {{section.call_to_action}}
-        </a>
-    </section>
-    <div class="img-info">{{section.image_info}}</div>
-</div>
+}

src/app/pages/page/page.component.html

@@ -24,18 +24,18 @@
         }
     }
 
-    <footer class="centered">
+    <footer class="centered" *ngIf="showFooter">
         @if (page.prevIndex !== undefined) {
             <a role="button" mat-button color="primary" aria-label="Zurück"
-               [routerLink]="[ '/p', unitIndex, page.prevIndex ]">
+               [routerLink]="[ '/p', page.unitIndex, page.prevIndex ]">
                 <span class="prev">
                     <mat-icon fontIcon="arrow_back" /> &nbsp;Zurück
                 </span>
             </a> 
         }
         @if (page.nextIndex !== undefined) {
             <a role="button" mat-button color="primary" aria-label="Weiter"
-               [routerLink]="[ '/p', unitIndex, page.nextIndex ]" 
+               [routerLink]="[ '/p', page.unitIndex, page.nextIndex ]" 
                (click)="complete(page.data)" [disabled]="page.nextDisabled()">
                 <span class="next">
                     <mat-icon fontIcon="arrow_forward" /> Weiter&nbsp;

src/app/pages/page/page.component.spec.ts

@@ -4,6 +4,7 @@ import { of } from 'rxjs';
 
 import { PageComponent } from './page.component';
 import { GuideService } from '../../services/guide.service';
+import { PageService } from '../../services/page.service';
 
 const params = {
   unit: 0,
@@ -30,6 +31,12 @@ describe('PageComponent', () => {
           useValue: { 
             getPages: () => Promise.resolve([]) 
           }
+        },
+        {
+          provide: PageService,
+          useValue: { 
+            getDocument: () => Promise.resolve({}) 
+          }
         }
       ]
     })

src/app/pages/page/page.component.ts

@@ -4,19 +4,20 @@ import { FormsModule } from '@angular/forms';
 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 { map, switchMap, tap } from 'rxjs';
 import { LoadingComponent } from '../../components/ui/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 { ContinueEventArgs, InputStepperComponent } from '../../components/input-stepper/input-stepper.component';
 import { GuideService } from '../../services/guide.service';
+import { PageService } from '../../services/page.service';
 import { UserDataService, pageReadTime } from '../../services/user-data.service';
 import { SafeUrlPipe } from '../../pipes/safe-url.pipe';
 import { MarkedPipe } from '../../pipes/marked.pipe';
-import { PageContent } from '../../models/page.model';
-import { expandTrigger } from '../../animations.helper';
+import { Page, PageContent } from '../../models/page.model';
 import { InputValue } from '../../models/content.model';
+import { expandTrigger } from '../../animations.helper';
 
 @Component({
     selector: 'app-page',
@@ -41,44 +42,50 @@ import { InputValue } from '../../models/content.model';
 })
 export class PageComponent {
     private _route = inject(ActivatedRoute);
-    readonly unitIndex = +this._route.snapshot.params['unit'];
     private _startTime!: number;
     private _minReadTime!: number;
 
     private _step = 0;
+    showFooter!: boolean;
     continue!: (args: ContinueEventArgs) => void;
 
     private readonly _userDataService = inject(UserDataService);
-    private readonly _userData = this._userDataService.getEntry(this.unitIndex);
 
     private readonly _guideService = inject(GuideService);
-    readonly currentPage$ = combineLatest([
-        from(this._guideService.getPages(this.unitIndex)), 
-        this._route.params
-    ]).pipe(
-        switchMap(([pages, params]) => {
-            const pageIndex = +params['page'];
+    private readonly _pageService = inject(PageService);
+    readonly currentPage$ = this._route.params.pipe(
+        map(params => ([params['unit'],  +(params['page'] ?? 0)] as [string, number])),
+        tap(([unitIndex]) => this.showFooter = !isNaN(+unitIndex)),
+        switchMap(async ([unitIndex, pageIndex]) => {
+            const unitData = this._userDataService.getEntry(unitIndex);
+            const pages = await this.getPages(unitIndex);
             const page = pages[pageIndex];
-            const data = this._userData[page.slug] ?? {};
             const prev = pageIndex > 0 ? pageIndex - 1 : undefined;
             const next = pageIndex + 1 < pages.length ? pageIndex + 1 : undefined;
-            return of({
+            return {
                 ...page,
-                data,
+                data: unitData[page.slug] ?? {},
+                unitIndex,
                 prevIndex: prev,
                 nextIndex: next,
                 nextDisabled: () => this._step !== page.content.length
-            });
+            };
         }),
-        tap(page => this.continue = this.initBreakpoints(page.content, page.slug)),
+        tap(page => this.continue = this.initBreakpoints(page.content, page.unitIndex, page.slug)),
         tap(page => document.title = page.title + " | Why App"),
         tap(page => {
             this._startTime = Date.now();
             this._minReadTime = !isDevMode() ? page.min_read_time : .1;
         })
     );
 
-    private initBreakpoints(content: PageContent[], pageId: string) {
+    private async getPages(unitIndex: string) {
+        return isNaN(+unitIndex)
+            ? this._pageService.getDocument<Page>(unitIndex).then(p => p ? [p] : [])
+            : this._guideService.getPages(+unitIndex);
+    }
+
+    private initBreakpoints(content: PageContent[], unitIndex: string, pageId: string) {
         const next = () => this._step = breakpoints.shift() ?? content.length;
         const breakpoints = content.reduce((acc, item, index) => {
             if (item.type === 'stepper') {
@@ -89,7 +96,7 @@ export class PageComponent {
 
         next();
         return (args: ContinueEventArgs) => {
-            this._userDataService.save(this.unitIndex, {
+            this._userDataService.save(unitIndex, {
                 [pageId]: args.data 
             });
             if (args.completed) {

src/app/services/page.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { PageService } from './page.service';
+
+xdescribe('PageService', () => {
+  let service: PageService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(PageService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/page.service.ts

@@ -0,0 +1,12 @@
+import { Injectable } from '@angular/core';
+import { FirestoreService } from './firestore.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PageService extends FirestoreService {
+
+  constructor() { 
+    super('pages');
+  }
+}

src/styles/main.scss

@@ -27,6 +27,10 @@ a {
   }
 }
 
+h1 {
+  letter-spacing: .1rem;
+}
+
 img.marked-image {
   max-width: 100%;
   height: auto;