From 4f707ec76cd6383419e012d693a2b549631fdf46 Mon Sep 17 00:00:00 2001
From: Bono Fox <microfuchs@outlook.com>
Date: Sun, 29 Oct 2023 15:37:29 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20#48:=20Coming=20Soon=20Seite=20mit?=
 =?UTF-8?q?=20dynamischen=20Punkten=20definiert?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/app.component.spec.ts                 |  8 ++-
 src/app/app.module.ts                         | 10 ++-
 .../coming-soon/coming-soon.component.html    | 16 ++++-
 .../coming-soon/coming-soon.component.scss    |  2 +-
 .../coming-soon/coming-soon.component.spec.ts | 15 +++-
 .../coming-soon/coming-soon.component.ts      | 69 ++++++++++++++++++-
 6 files changed, 110 insertions(+), 10 deletions(-)

diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
index 90fc670..35e9f61 100644
--- 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,7 +28,9 @@ 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',
+    );
   });
 });
 
@@ -36,4 +38,4 @@ describe('AppComponent', () => {
   selector: 'app-coming-soon',
   template: '',
 })
-export class ComingSoonComponent {}
+class ComingSoonTestComponent {}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 03c0c1e..1f83171 100644
--- 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
index f44f277..7e2a879 100644
--- 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">
\ No newline at end of file
diff --git a/src/app/wartung/coming-soon/coming-soon.component.scss b/src/app/wartung/coming-soon/coming-soon.component.scss
index d9a294b..3fd7bdf 100644
--- 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
index 3044c45..6a5bc3c 100644
--- a/src/app/wartung/coming-soon/coming-soon.component.spec.ts
+++ b/src/app/wartung/coming-soon/coming-soon.component.spec.ts
@@ -1,6 +1,10 @@
 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;
@@ -8,9 +12,14 @@ describe('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
index 6c31917..feef833 100644
--- 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;
+  }
 }