From f6e8e32cca4eeeb74421bab4f268acd21f3c7479 Mon Sep 17 00:00:00 2001 From: Piet Ostendorp Date: Sat, 8 Nov 2025 22:22:15 +0100 Subject: [PATCH] I had to add something to main component, sry Introduces a vertical stepper to the main component to visually represent project sprints, including dynamic completion and edit states. Adds project information and team details to the main page, customizes stepper icon styles, and updates module imports to include MatStepperModule. --- src/app/app-module.ts | 4 +- src/app/main/main.component.css | 15 +++++ src/app/main/main.component.html | 109 ++++++++++++++++++++++++++++++- src/app/main/main.component.ts | 8 +++ 4 files changed, 134 insertions(+), 2 deletions(-) diff --git a/src/app/app-module.ts b/src/app/app-module.ts index c11da25..3df7d00 100644 --- a/src/app/app-module.ts +++ b/src/app/app-module.ts @@ -19,6 +19,7 @@ import { MatFormFieldModule } from '@angular/material/form-field'; import { MatButtonModule, MatIconButton } from '@angular/material/button'; import { MatDividerModule } from '@angular/material/divider'; import { MatDialogClose, MatDialogTitle, MatDialogContent, MatDialogActions } from "@angular/material/dialog"; +import { MatStepperModule } from '@angular/material/stepper'; import { HeaderComponent } from './header/header.component'; import { HomeComponent } from './home/home.component'; @@ -101,7 +102,8 @@ import { LoginDialog } from './login/login.dialog'; MatDialogClose, MatDialogTitle, MatDialogContent, - MatDialogActions + MatDialogActions, + MatStepperModule ], providers: [ provideBrowserGlobalErrorListeners(), diff --git a/src/app/main/main.component.css b/src/app/main/main.component.css index e69de29..1a13e36 100644 --- a/src/app/main/main.component.css +++ b/src/app/main/main.component.css @@ -0,0 +1,15 @@ +::ng-deep .mat-step-header .mat-step-icon { + background-color: #ccc; + color: white; +} + +::ng-deep .mat-step-icon-state-edit { + background-color: #fac000 !important; + color: white; +} + + +::ng-deep .mat-step-icon-state-done { + background-color: #30d64c !important; + color: white; +} diff --git a/src/app/main/main.component.html b/src/app/main/main.component.html index 17c1228..273bff0 100644 --- a/src/app/main/main.component.html +++ b/src/app/main/main.component.html @@ -1 +1,108 @@ -

main works!

+
+
+
+
+

+ Willkommen bei +

+
+  InfiniMotion +
+

! 🎬

+
+ +

+ Diese Website ist eine Praxisarbeit zur Evaluation von Model-Driven Engineering-Tools + im Modul Informationsinfrastrukturen Unit 2 der Fachhochschule für die Wirtschaft Hannover. +

+ +

+ Entwicklungszeitraum: 28.10.2025 – 24.11.2025 +

+ +

+ Entwicklet von: + Marcel Anker, Lennart Heinrich, Piet Ostendorp, Kevin Szarafin +

+ +

+ Als Betreiber eines kleinen, virtuellen Kinos könnt ihr Kinosäle mit unterschiedlichen Sitzkategorien einrichten und diese für den Verkauf von Eintrittskarten freigeben. + Kunden können Filmaufführungen auswählen, Plätze reservieren oder direkt buchen. + Das System ermöglicht außerdem, Einnahmen einzelner Aufführungen oder Filme auf Basis der aktuellen Buchungen zu überwachen. +

+ +

+ Viel Spaß beim Erkunden. Hier gehts zur aktuellen Programm. +

+ + + +
+
+ +
+ + + + + Sprint #0:    Planung, Installation und Vorbereitung + + + + + + Sprint #1:    Programmübersicht + + + + + + Sprint #2:    Kinosäle anzeigen + + + + + + Sprint #3:    Verstellungstickets reservieren und buchen + + + + + + Sprint #4:    Statistiken auswerten und anzeigen + + + + + + Sprint #5:    Aufbereitung und Optimierung + + + + + +
diff --git a/src/app/main/main.component.ts b/src/app/main/main.component.ts index f8c59d0..706cf1a 100644 --- a/src/app/main/main.component.ts +++ b/src/app/main/main.component.ts @@ -7,5 +7,13 @@ import { Component } from '@angular/core'; styleUrl: './main.component.css' }) export class MainComponent { + currentSprint = 3; + isCompleted(index: number): boolean { + return index <= this.currentSprint; + } + + isEditable(index: number): boolean { + return index === this.currentSprint; + } }