compute user-progress for start page

src/app/pages/start/start.component.html

@@ -7,10 +7,10 @@ <h2 mat-subheader>Deine Reise</h2>
         <div role="progress">
             @for(unit of units; track $index) {
                 <a href="#{{unit.no}}">
-                    <app-progress-spinner [value]="0">
-                        0%
+                    <app-progress-spinner [size]="50" [value]="unitProgressPercent($index)">
+                        <small>{{unitProgressPercent($index)}}%</small>
                     </app-progress-spinner>
-                    <span>Einheit {{ unit.no }}</span>
+                    <div>Einheit {{ unit.no }}</div>
                 </a>
                 <p>
                     <mat-divider vertical="true" />
@@ -50,8 +50,8 @@ <h3>
                             }
                         </div>
                         <div class="card-progress">
-                            <app-progress-spinner [value]="0">
-                                0%
+                            <app-progress-spinner [size]="50" [value]="pageProgressPercent($index, section.slug)">
+                                <small>{{pageProgressPercent($index, section.slug)}}%</small>
                             </app-progress-spinner>
                         </div>
                     </mat-card-header>
@@ -65,7 +65,7 @@ <h3>
                         </p>
                     </mat-card-content>
                     <mat-card-footer class="footer">
-                        @if (done($index)) {
+                        @if (pageProgressPercent($index, section.slug) > 99) {
                             <mat-icon fontIcon="check_box"/> Erledigt
                         } @else {
                             <mat-icon fontIcon="check_box_outline_blank"/> Offen

src/app/pages/start/start.component.ts

@@ -8,51 +8,62 @@ import { LoadingComponent } from '../../components/ui/loading/loading.component'
 import { ProgressSpinnerComponent } from '../../components/ui/progress-spinner/progress-spinner.component';
 import { greetings, userNames } from '../../services/common.data';
 import { GuideService } from '../../services/guide.service';
+import { Progress, UserProgressService } from '../../services/user-progress.service';
 
 @Component({
-  selector: 'app-start',
-  standalone: true,
-  imports: [
-    CommonModule, 
-    RouterModule, 
-    MatCardModule, 
-    MatDividerModule,
-    MatIconModule,
-    LoadingComponent,
-    ProgressSpinnerComponent
-  ],
-  templateUrl: './start.component.html',
-  styleUrl: './start.component.scss'
+    selector: 'app-start',
+    standalone: true,
+    imports: [
+        CommonModule,
+        RouterModule,
+        MatCardModule,
+        MatDividerModule,
+        MatIconModule,
+        LoadingComponent,
+        ProgressSpinnerComponent,
+    ],
+    templateUrl: './start.component.html',
+    styleUrl: './start.component.scss',
 })
 export class StartComponent {
-  readonly service = inject(GuideService);
-  readonly units$ = this.service.dataPromise;
-  readonly userName: string;
+    private readonly service = inject(GuideService);
+    private readonly progressService = inject(UserProgressService);
+    private progress!: Progress[];
+    readonly units$ = this.service.dataPromise;
+    readonly userName: string;
 
-  constructor() {
-    const randomIndex = Math.floor(Math.random() * userNames.length);
-    this.userName = userNames[randomIndex];
-  }
+    constructor() {
+        const randomIndex = Math.floor(Math.random() * userNames.length);
+        this.userName = userNames[randomIndex];
+    }
 
-  get greeting() {
-    const currentHour = new Date().getHours();
+    async ngOnInit() {
+        this.progress = await this.progressService.progressTree;
+    }
 
-    if (currentHour >= 5 && currentHour < 12) {
-      return greetings[5];
-    } 
-    if (currentHour >= 12 && currentHour < 18) {
-      return greetings[12];
-    } 
-    if (currentHour >= 18 && currentHour < 21) {
-      return greetings[18];
-    } 
-    if (currentHour >= 21 && currentHour < 24) {
-      return greetings[21];
-    } 
-    return greetings[0];
-  }
+    get greeting() {
+        const currentHour = new Date().getHours();
 
-  done(i: number) {
-    return false;
-  }
+        if (currentHour >= 5 && currentHour < 12) {
+            return greetings[5];
+        }
+        if (currentHour >= 12 && currentHour < 18) {
+            return greetings[12];
+        }
+        if (currentHour >= 18 && currentHour < 21) {
+            return greetings[18];
+        }
+        if (currentHour >= 21 && currentHour < 24) {
+            return greetings[21];
+        }
+        return greetings[0];
+    }
+
+    unitProgressPercent(unitIndex: number) {
+        return this.progress ? this.progress[unitIndex].percent : 0;
+    }
+
+    pageProgressPercent(unitIndex: number, pageId: string) {
+        return this.progress ? (<Progress>this.progress[unitIndex][pageId]).percent : 0;
+    }
 }

src/app/services/user-progress.service.spec.ts

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

src/app/services/user-progress.service.ts

@@ -0,0 +1,45 @@
+import { Injectable, inject } from '@angular/core';
+import { GuideService } from './guide.service';
+import { FormContent } from '../models/content.model';
+import { UserDataService } from './user-data.service';
+
+export interface Progress {
+    [key: string]: Progress | number;
+    count: number;
+    total: number;
+    percent: number;
+}
+
+@Injectable({
+    providedIn: 'root',
+})
+export class UserProgressService {
+    private readonly userDataService = inject(UserDataService);
+    private readonly guideService = inject(GuideService);
+
+    get progressTree(): Promise<Progress[]> {
+        return this.guideService.dataPromise.then(data => {
+            return Promise.all(data.map(async (guide, index) => {
+                const userData = this.userDataService.getEntry(index);
+                return guide.pages.then(pages => {
+                    let unitData: Record<string, Progress> = {};
+                    pages.forEach(page => {
+                        const count = userData[page.slug] ? Object.keys(userData[page.slug]).length : 0;
+                        const total = page.content
+                          .filter(content => content.type === 'stepper')
+                          .reduce((acc, content) => acc + (content as FormContent).value.length, 1);
+                        const percent = Math.round(count / total * 100);
+                        unitData = {
+                            ...unitData,
+                            [page.slug]: { count, total, percent }
+                        }
+                    });
+                    const count = Object.keys(unitData).reduce((acc, slug) => acc + unitData[slug].count, 0);
+                    const total = Object.keys(unitData).reduce((acc, slug) => acc + unitData[slug].total, 0);
+                    const percent = Math.round(count / total * 100);
+                    return { ...unitData, count, total, percent };
+                });
+            }));
+        });
+    }
+}