get resources (common service) from firestore

src/app/components/input-stepper/input-stepper.component.ts

@@ -34,37 +34,37 @@ export class InputStepperComponent {
     @Output() continue = new EventEmitter<ContinueEventArgs>();
 
     done = false;
-    private step = 0;
+    private _step = 0;
 
     get last(): boolean {
-        return this.step >= this.definitions.length - 1;
+        return this._step >= this.definitions.length - 1;
     }
 
     get progress(): number {
-        return ((this.step + 1) / this.definitions.length) * 100;
+        return ((this._step + 1) / this.definitions.length) * 100;
     }
 
     show(index: number): 'expanded' | 'collapsed' {
-        return index <= this.step ? 'expanded' : 'collapsed';
+        return index <= this._step ? 'expanded' : 'collapsed';
     }
 
     disabled(index: number): boolean {
-        return index !== this.step;
+        return index !== this._step;
     }
 
     update(value: InputValue, id: string) {
         this.data[id] = value;
     }
 
     next(): void {
-        const currentId = this.definitions[this.step].value.id;
+        const currentId = this.definitions[this._step].value.id;
         if (!this.data[currentId]) {
             // no data entered hence no update fired
             this.data[currentId] = undefined;
         }
 
-        this.step++;
-        this.done = this.step === this.definitions.length;
+        this._step++;
+        this.done = this._step === this.definitions.length;
         this.continue.emit({
             completed: this.done,
             data: { ...this.data }

src/app/components/nav/nav.component.html

@@ -1,8 +1,3 @@
-<ng-template #title>
-  <img src="assets/icons/logo.svg" alt="Why" width="24"/> 
-  <strong>&nbsp; Why</strong>
-</ng-template>
-
 <mat-sidenav-container class="sidenav-container">
   <mat-sidenav #drawer 
       class="sidenav blur" 
@@ -11,7 +6,8 @@
       [mode]="(isHandset$ | async) ? 'over' : 'side'"
       [opened]="(isHandset$ | async) === false">
     <mat-toolbar class="blur" *ngIf="(isHandset$ | async)">
-      <ng-container *ngTemplateOutlet="title"></ng-container>
+      <img src="assets/icons/logo.svg" alt="{{header}}" width="24"/> 
+      <strong>&nbsp; {{header}}</strong>
     </mat-toolbar>
     <mat-nav-list>
       <ul>
@@ -36,8 +32,11 @@
           <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
         </button>
       }
-      <ng-container *ngTemplateOutlet="title"></ng-container>
-      <span>&nbsp;&mdash; A philosophical tool for your existential journey.</span>
+      <ng-container *ngIf="header && subheader">  
+        <img src="assets/icons/logo.svg" alt="{{header}}" width="24"/> 
+        <strong>&nbsp; {{header}}</strong>
+        <span>&nbsp;&mdash; {{subheader}}</span>
+      </ng-container>
       <span class="spacer"></span>
     </mat-toolbar>
 

src/app/components/nav/nav.component.spec.ts

@@ -26,7 +26,8 @@ describe('NavComponent', () => {
               { path: '/imprint', title: 'Impressum', icon: 'info' },
               { path: '/privacy', title: 'Datenschutz', icon: 'security' },
               { path: '/settings', title: 'Einstellungen', icon: 'settings' }          
-            ])
+            ]),
+            getResources: () => Promise.resolve({}) 
           }
         }
       ]

src/app/components/nav/nav.component.ts

@@ -26,25 +26,30 @@ import { NavigationItem } from '../../models/nav.model';
         MatIconModule,
         AsyncPipe,
         RouterLink,
-        RouterLinkActive,
+        RouterLinkActive
     ],
 })
 export class NavComponent implements AfterViewInit {
-    private breakpointObserver = inject(BreakpointObserver);
-    private commonService = inject(CommonService);
-    private routes: NavigationItem[] = [];
+    private readonly _commonService = inject(CommonService);
+    private readonly _breakpointObserver = inject(BreakpointObserver);
 
     @ViewChild(MatSidenavContainer)
-    private sidenavContainer!: MatSidenavContainer;
+    private _sidenavContainer!: MatSidenavContainer;
+    private _routes: NavigationItem[] = [];
+    header!: string;
+    subheader!: string;
 
-    isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
+    isHandset$: Observable<boolean> = this._breakpointObserver.observe(Breakpoints.Handset).pipe(
         map((result) => result.matches),
         shareReplay()
     );
     toolbarTop$: Observable<string> = of('0');
 
     async ngOnInit() {
-        this.routes = await this.commonService.getNavigation();
+        this._routes = await this._commonService.getNavigation();
+        const resources = await this._commonService.getResources('nav');
+        this.header = resources['header'] as string;
+        this.subheader = resources['subheader'] as string;
     }
 
     ngAfterViewInit(): void {
@@ -64,17 +69,17 @@ export class NavComponent implements AfterViewInit {
             return `${top}px`;
         };
 
-        this.toolbarTop$ = this.sidenavContainer.scrollable.elementScrolled().pipe(map(onScroll));
+        this.toolbarTop$ = this._sidenavContainer.scrollable.elementScrolled().pipe(map(onScroll));
 
         // this.changeDetectorRef.detectChanges();
         this.toolbarTop$.subscribe();
     }
 
     get sidenavRoutes(): NavigationItem[] {
-        return this.routes.filter(route => route.sidenav);
+        return this._routes.filter(route => route.sidenav);
     }
 
     get footerRoutes(): NavigationItem[] {
-        return this.routes.filter(route => route.sidenav);
+        return this._routes.filter(route => route.sidenav);
     }
 }

src/app/components/ui/loading/loading.component.html

@@ -1,3 +1,7 @@
-<div style="text-align: center;">
-    Lade Inhalt...<mat-progress-bar color="primary" mode="indeterminate" /> 
-</div>
+@if(loading) {
+    <div style="text-align: center;">
+        Lade Inhalt...<mat-progress-bar color="primary" mode="indeterminate" /> 
+    </div>
+} @else {
+    <ng-content></ng-content>
+}

src/app/components/ui/loading/loading.component.ts

@@ -1,12 +1,12 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 
 @Component({
-  selector: 'app-loading',
-  standalone: true,
-  imports: [MatProgressBarModule],
-  templateUrl: './loading.component.html'
+    selector: 'app-loading',
+    standalone: true,
+    imports: [MatProgressBarModule],
+    templateUrl: './loading.component.html',
 })
 export class LoadingComponent {
-
+    @Input() loading = true;
 }

src/app/pages/blog-post/blog-post.component.ts

@@ -7,25 +7,25 @@ import { MarkedPipe } from '../../pipes/marked.pipe';
 import { SafeUrlPipe } from '../../pipes/safe-url.pipe';
 
 @Component({
-  selector: 'app-blog-post',
-  standalone: true,
-  imports: [CommonModule, MarkedPipe, SafeUrlPipe],
-  templateUrl: './blog-post.component.html',
-  styles: ``
+    selector: 'app-blog-post',
+    standalone: true,
+    imports: [CommonModule, MarkedPipe, SafeUrlPipe],
+    templateUrl: './blog-post.component.html',
+    styles: ``,
 })
 export class BlogPostComponent {
-  route = inject(ActivatedRoute);
-  blogService = inject(BlogService);
-
-  document = this.loadDocument();
+    readonly route = inject(ActivatedRoute);
+    readonly blogService = inject(BlogService);
 
-  private loadDocument(): Promise<BlogPost | undefined> {
-    const id = this.route.snapshot.params['id'];
-    return this.blogService.getDocument<BlogPost>(id).then(post => {
-      if (post) {
-        document.title = post.title + " | Why App";
-      }
-      return post;
-    });
-  }
+    readonly document = this.loadDocument();
+
+    private async loadDocument(): Promise<BlogPost | undefined> {
+        const id = this.route.snapshot.params['id'];
+        return this.blogService.getDocument<BlogPost>(id).then((post) => {
+            if (post) {
+                document.title = post.title + ' | Why App';
+            }
+            return post;
+        });
+    }
 }

src/app/pages/blog/blog.component.ts

@@ -6,24 +6,24 @@ import { map } from 'rxjs';
 import { BlogService } from '../../services/blog.service';
 
 @Component({
-  selector: 'app-blog',
-  standalone: true,
-  imports: [CommonModule, RouterModule, MatCardModule],
-  templateUrl: './blog.component.html',
-  styleUrl: './blog.component.scss'
+    selector: 'app-blog',
+    standalone: true,
+    imports: [CommonModule, RouterModule, MatCardModule],
+    templateUrl: './blog.component.html',
+    styleUrl: './blog.component.scss',
 })
 export class BlogComponent {
-  route = inject(ActivatedRoute);
-  readonly service = inject(BlogService);
-  readonly blogPosts$ = this.service.data$;
+    readonly route = inject(ActivatedRoute);
+    readonly service = inject(BlogService);
+    readonly blogPosts$ = this.service.data$;
 
-  constructor() {
-    const tag = this.route.snapshot.params['tag'];
-    if (tag) {
-      this.blogPosts$ = this.service.data$.pipe(
-        map(posts => posts.filter(post => post.tags?.includes(tag))),
-      );
-      document.title = 'Blog - ' + tag + ' | Why App';
+    constructor() {
+        const tag = this.route.snapshot.params['tag'];
+        if (tag) {
+            this.blogPosts$ = this.service.data$.pipe(
+                map((posts) => posts.filter((post) => post.tags?.includes(tag)))
+            );
+            document.title = 'Blog - ' + tag + ' | Why App';
+        }
     }
-  }
 }

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

@@ -40,40 +40,40 @@ import { InputValue } from '../../models/content.model';
     animations: [ expandTrigger('next') ],
 })
 export class PageComponent {
-    private route = inject(ActivatedRoute);
-    readonly unitIndex = +this.route.snapshot.params['unit'];
+    private readonly _route = inject(ActivatedRoute);
+    readonly unitIndex = +this._route.snapshot.params['unit'];
 
-    private step = 0;
+    private _step = 0;
     continue!: (args: ContinueEventArgs) => void;
 
-    readonly userDataService = inject(UserDataService);
-    readonly userData = this.userDataService.getEntry(this.unitIndex);
+    private readonly _userDataService = inject(UserDataService);
+    private readonly _userData = this._userDataService.getEntry(this.unitIndex);
 
-    readonly guideService = inject(GuideService);
+    private readonly _guideService = inject(GuideService);
     readonly currentPage$ = combineLatest([
-        from(this.guideService.getPages(this.unitIndex)), 
-        this.route.params
+        from(this._guideService.getPages(this.unitIndex)), 
+        this._route.params
     ]).pipe(
         switchMap(([pages, params]) => {
             const pageIndex = +params['page'];
             const page = pages[pageIndex];
-            const data = this.userData[page.slug] ?? {};
+            const data = this._userData[page.slug] ?? {};
             const prev = pageIndex > 0 ? pageIndex - 1 : undefined;
             const next = pageIndex + 1 < pages.length ? pageIndex + 1 : undefined;
             return of({
                 ...page,
                 data,
                 prevIndex: prev,
                 nextIndex: next,
-                nextDisabled: () => this.step !== page.content.length
+                nextDisabled: () => this._step !== page.content.length
             });
         }),
         tap(page => this.continue = this.initBreakpoints(page.content, page.slug)),
         tap(page => document.title = page.title + " | Why App")
     );
 
     private initBreakpoints(content: PageContent[], pageId: string) {
-        const next = () => this.step = breakpoints.shift() ?? content.length;
+        const next = () => this._step = breakpoints.shift() ?? content.length;
         const breakpoints = content.reduce((acc, item, index) => {
             if (item.type === 'stepper') {
                 acc.push(index);
@@ -83,7 +83,7 @@ export class PageComponent {
 
         next();
         return (args: ContinueEventArgs) => {
-            this.userDataService.save(this.unitIndex, {
+            this._userDataService.save(this.unitIndex, {
                 [pageId]: args.data 
             });
             if (args.completed) {
@@ -93,7 +93,7 @@ export class PageComponent {
     }
 
     show(index: number): 'expanded' | 'collapsed' {
-        return index <= this.step ? 'expanded' : 'collapsed';
+        return index <= this._step ? 'expanded' : 'collapsed';
     }
 
     complete(data: Record<string, InputValue>) {

src/app/pages/settings/settings.component.html

@@ -1,11 +1,14 @@
-<div class="settings">
-    <div class="info">
-        <mat-icon fontIcon="info" color="primary" />
-        <p>
-            Alle eingegebenen Daten aus den Formularen werden lokal im Browser gespeichert. 
-            Hier kannst du sie exportieren oder löschen.
-        </p>
+<app-loading [loading]="loading">
+    <div class="settings">
+        <div class="info">
+            <mat-icon fontIcon="info" color="primary" />
+            <p>{{resource('user-data-info')}}</p>
+        </div>
+        <a mat-raised-button (click)="download()">
+            <p>{{resource('user-data-export')}}</p>
+        </a>
+        <a mat-raised-button (click)="clear()">
+            <p>{{resource('user-data-reset')}}</p>
+        </a>
     </div>
-    <a mat-raised-button (click)="download()">Benutzerdaten exportieren</a>
-    <a mat-raised-button (click)="clear()">Benutzerdaten zurücksetzen</a>
-</div>
+</app-loading>

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

@@ -1,14 +1,23 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { SettingsComponent } from './settings.component';
+import { CommonService } from '../../services/common.service';
 
 describe('SettingsComponent', () => {
   let component: SettingsComponent;
   let fixture: ComponentFixture<SettingsComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [SettingsComponent]
+      imports: [SettingsComponent],
+      providers: [
+        {
+          provide: CommonService,
+          useValue: { 
+            getResources: () => Promise.resolve({}) 
+          }
+        }
+      ]
     })
     .compileComponents();