✨ #48: Coming Soon Seite mit dynamischen Punkten definiert

Hirschfuchs · Nov 4, 2023 · 4f707ec · 4f707ec
1 parent 84ad3d5
commit 4f707ec
Show file tree

Hide file tree

Showing 6 changed files with 110 additions and 10 deletions.
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
@@ -8,7 +8,7 @@ describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [RouterTestingModule, SharedComponentsModule],
-      declarations: [AppComponent, ComingSoonComponent],
+      declarations: [AppComponent, ComingSoonTestComponent],
     }).compileComponents();
   });
 
@@ -28,12 +28,14 @@ describe('AppComponent', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Buntnis Ilmenau');
+    expect(compiled.querySelector('h1')?.textContent).toContain(
+      'Buntnis Ilmenau',
+    );
   });
 });
 
 @Component({
   selector: 'app-coming-soon',
   template: '',
 })
-export class ComingSoonComponent {}
+class ComingSoonTestComponent {}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -8,6 +8,10 @@ import {NgOptimizedImage} from "@angular/common";
 import { SharedComponentsModule } from './shared/components/shared-components.module';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import {MatProgressBarModule} from "@angular/material/progress-bar";
+import {MatListModule} from "@angular/material/list";
+import {MatCheckboxModule} from "@angular/material/checkbox";
+import {FormsModule} from "@angular/forms";
 
 @NgModule({
     declarations: [
@@ -21,7 +25,11 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
         NgOptimizedImage,
         SharedComponentsModule,
         BrowserAnimationsModule,
-        FontAwesomeModule
+        FontAwesomeModule,
+        MatProgressBarModule,
+        MatListModule,
+        MatCheckboxModule,
+        FormsModule
     ],
   providers: [],
   bootstrap: [AppComponent]

diff --git a/src/app/wartung/coming-soon/coming-soon.component.html b/src/app/wartung/coming-soon/coming-soon.component.html
@@ -1,2 +1,16 @@
-<p>coming-soon works!</p>
+<div>
+    <p>Hier findet ihr bald die Seite des in Ilmenau ansässigen „Buntnis“.</p>
+    <h3>Fortschritt:</h3>
+    <mat-progress-bar [value]="currentProgress" mode="determinate"></mat-progress-bar>
+    <ng-container *ngFor="let stepGroup of progressStepGroups">
+        <h4>{{stepGroup.name}}</h4>
+        <mat-list>
+            <mat-list-item *ngFor="let step of stepGroup.steps">
+                <span matListItemTitle>{{step.schritt}}</span>
+                <span matListItemMeta>{{step.beschreibung}}</span>
+                <mat-checkbox [ngModel]="step.erledigt ?? false" disabled></mat-checkbox>
+            </mat-list-item>
+        </mat-list>
+    </ng-container>
+</div>
 <img ngSrc="assets/2023/huetchen.png" id="huetchen" height="934" width="1209" alt="Ein Buntes Hütchen repräsentiert den Aufbau der Seite">
diff --git a/src/app/wartung/coming-soon/coming-soon.component.scss b/src/app/wartung/coming-soon/coming-soon.component.scss
@@ -11,7 +11,7 @@
 
   #huetchen {
     width: 40%;
-    height: auto;
+    height: fit-content;
     float: right;
   }
 }
diff --git a/src/app/wartung/coming-soon/coming-soon.component.spec.ts b/src/app/wartung/coming-soon/coming-soon.component.spec.ts
@@ -1,16 +1,25 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ComingSoonComponent } from './coming-soon.component';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatListModule } from '@angular/material/list';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { FormsModule } from '@angular/forms';
 
 describe('ComingSoonComponent', () => {
   let component: ComingSoonComponent;
   let fixture: ComponentFixture<ComingSoonComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ ComingSoonComponent ]
-    })
-    .compileComponents();
+      declarations: [ComingSoonComponent],
+      imports: [
+        FormsModule,
+        MatCheckboxModule,
+        MatProgressBarModule,
+        MatListModule,
+      ],
+    }).compileComponents();
 
     fixture = TestBed.createComponent(ComingSoonComponent);
     component = fixture.componentInstance;

diff --git a/src/app/wartung/coming-soon/coming-soon.component.ts b/src/app/wartung/coming-soon/coming-soon.component.ts
@@ -1,10 +1,77 @@
 import { Component } from '@angular/core';
+import { ProgressStepGroup } from './types/progress-step.type';
 
 @Component({
   selector: 'app-coming-soon',
   templateUrl: './coming-soon.component.html',
-  styleUrls: ['./coming-soon.component.scss']
+  styleUrls: ['./coming-soon.component.scss'],
 })
 export class ComingSoonComponent {
+  progressStepGroups: ProgressStepGroup[] = [
+    {
+      name: 'Inhalte',
+      steps: [
+        {
+          schritt: 'Gestaltung der Startseite',
+        },
+        {
+          schritt: 'Text für Startseite',
+        },
+        {
+          schritt: 'Unterseiten definiert',
+        },
+        {
+          schritt: 'Texte für Unterseiten',
+        },
+        {
+          schritt: 'Querverlinkungen',
+        },
+      ],
+    },
+    {
+      name: 'Anwendungsrahmen',
+      steps: [
+        {
+          schritt: 'Header',
+          link: 'https://github.com/Hirschfuchs/buntnis-ilmenau.de/issues/29',
+        },
+        {
+          schritt: 'Impressum & Datenschutz',
+          link: 'https://github.com/Hirschfuchs/buntnis-ilmenau.de/issues/30',
+        },
+      ],
+    },
+    {
+      name: 'Technisches',
+      steps: [
+        {
+          schritt: 'Deployment & Repository',
+          link: 'https://github.com/Hirschfuchs/buntnis-ilmenau.de/issues/3',
+          erledigt: true,
+        },
+        {
+          schritt: 'Tests',
+          link: 'https://github.com/Hirschfuchs/buntnis-ilmenau.de/issues/12',
+          erledigt: true,
+        },
+        {
+          schritt: 'E2E-Tests',
+          link: 'https://github.com/Hirschfuchs/buntnis-ilmenau.de/issues/56',
+          erledigt: false,
+        },
+      ],
+    },
+  ];
 
+  protected get currentProgress(): number {
+    let erledigte = 0;
+    let gesamt = 0;
+    this.progressStepGroups.forEach((group) =>
+      group.steps.forEach((step) => {
+        if (step.erledigt) erledigte++;
+        gesamt++;
+      }),
+    );
+    return (erledigte * 100) / gesamt;
+  }
 }