aknuth/bizmatch-project
1
0
Fork 0
Code Issues 9 Pull Requests Packages Projects 5 Releases Wiki Activity

new images, tailwindcss 4

Browse Source
This commit is contained in:
Andreas Knuth
2025-04-05 23:22:25 +02:00
parent 83808263af
commit 7d64ee11bf
28 changed files with 163 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
bizmatch-client/src/app/components/footer/footer.component.ts
View File

@@ -1,8 +1,9 @@
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Router, RouterModule } from '@angular/router';
import { NavigationEnd, Router, RouterModule } from '@angular/router';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { initFlowbite } from 'flowbite';
@Component({
selector: 'app-footer',
@@ -17,5 +18,11 @@ export class FooterComponent {
currentYear: number = new Date().getFullYear();
isHomeRoute = false;
constructor(private router: Router) {}
ngOnInit() {}
ngOnInit() {
this.router.events.subscribe(event => {
if (event instanceof NavigationEnd) {
initFlowbite();
}
});
}
}

126
bizmatch-client/src/app/components/header/header.component.html
View File

@@ -37,67 +37,79 @@
</div>
</div>
}
<button
type="button"
class="flex text-sm bg-gray-400 rounded-full md:me-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
id="user-menu-button"
aria-expanded="false"
[attr.data-dropdown-toggle]="user ? 'user-login' : 'user-unknown'"
data-dropdown-placement="bottom"
>
<span class="sr-only">Open user menu</span>
@if(isProfessional || (authService.isAdmin() | async) && user?.hasProfile){
<img class="w-8 h-8 rounded-full object-cover" src="{{ profileUrl }}" alt="user photo" />
} @else {
<i class="flex justify-center items-center text-stone-50 w-8 h-8 rounded-full fa-solid fa-bars"></i>
}
</button>
<!-- Dropdown menu -->
@if(user){
<div class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600" id="user-login">
<div class="px-4 py-3">
<span class="block text-sm text-gray-900 dark:text-white">Welcome, {{ user.firstname }} </span>
<span class="block text-sm text-gray-500 truncate dark:text-gray-400">{{ user.email }}</span>
</div>
<ul class="py-2" aria-labelledby="user-menu-button">
<li>
<a routerLink="/account" (click)="closeDropdown()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Account</a>
</li>
<!-- Menu Button ohne Flowbite -->
<div class="relative">
<button type="button" class="relative inline-flex justify-center items-center w-8 h-8 rounded-full bg-gray-400 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600" id="user-menu-button" aria-expanded="false" (click)="toggleUserMenu()">
<span class="sr-only">Open user menu</span>
@if(isProfessional || (authService.isAdmin() | async) && user?.hasProfile){
<li>
<a routerLink="/createBusinessListing" (click)="closeDropdown()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Create Listing</a>
</li>
<img class="w-8 h-8 rounded-full object-cover" src="{{ profileUrl }}" alt="user photo" />
} @else {
<div class="flex justify-center items-center w-full h-full">
<div class="w-4 h-3 flex flex-col justify-between">
<span class="block h-0.5 w-full bg-stone-50"></span>
<span class="block h-0.5 w-full bg-stone-50"></span>
<span class="block h-0.5 w-full bg-stone-50"></span>
</div>
</div>
}
<li>
<a routerLink="/myListings" (click)="closeDropdown()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">My Listings</a>
</li>
<li>
<a routerLink="/myFavorites" (click)="closeDropdown()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">My Favorites</a>
</li>
<li>
<a routerLink="/logout" (click)="closeDropdown()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Logout</a>
</li>
</ul>
@if(authService.isAdmin() | async){
<ul class="py-2">
<li>
<a routerLink="admin/users" (click)="closeDropdown()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Users (Admin)</a>
</li>
</ul>
</button>
<!-- Dropdown menu für eingeloggte Benutzer -->
@if(user){
<div
class="drop-shadow-custom-bg z-10 size-max absolute right-0 top-full mt-1 text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600"
id="user-menu-dropdown"
[ngClass]="{ hidden: !userMenuVisible }"
>
<div class="px-4 py-3">
<span class="block text-sm text-gray-900 dark:text-white">Welcome, {{ user.firstname }} </span>
<span class="block text-sm text-gray-500 truncate dark:text-gray-400">{{ user.email }}</span>
</div>
<ul class="py-2" aria-labelledby="user-menu-button">
<li>
<a routerLink="/account" (click)="userMenuVisible = false" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Account</a>
</li>
@if(isProfessional || (authService.isAdmin() | async) && user?.hasProfile){
<li>
<a routerLink="/createBusinessListing" (click)="userMenuVisible = false" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Create Listing</a>
</li>
}
<li>
<a routerLink="/myListings" (click)="userMenuVisible = false" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">My Listings</a>
</li>
<li>
<a routerLink="/myFavorites" (click)="userMenuVisible = false" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">My Favorites</a>
</li>
<li>
<a routerLink="/logout" (click)="userMenuVisible = false" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Logout</a>
</li>
</ul>
@if(authService.isAdmin() | async){
<ul class="py-2">
<li>
<a routerLink="admin/users" (click)="userMenuVisible = false" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Users (Admin)</a>
</li>
</ul>
}
</div>
} @else {
<!-- Dropdown menu für nicht eingeloggte Benutzer -->
<div
class="drop-shadow-custom-bg z-10 size-max absolute right-0 top-full mt-1 text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600"
id="user-menu-dropdown"
[ngClass]="{ hidden: !userMenuVisible }"
>
<ul class="py-2" aria-labelledby="user-menu-button">
<li>
<a routerLink="/login" [queryParams]="{ mode: 'login' }" (click)="userMenuVisible = false" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Log In</a>
</li>
<li>
<a routerLink="/login" [queryParams]="{ mode: 'register' }" (click)="userMenuVisible = false" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Sign Up</a>
</li>
</ul>
</div>
}
</div>
} @else {
<div class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600" id="user-unknown">
<ul class="py-2" aria-labelledby="user-menu-button">
<li>
<a routerLink="/login" [queryParams]="{ mode: 'login' }" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Log In</a>
</li>
<li>
<a routerLink="/login" [queryParams]="{ mode: 'register' }" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Sign Up</a>
</li>
</ul>
</div>
}
</div>
</div>
<!-- Mobile filter button -->

16
bizmatch-client/src/app/components/header/header.component.ts
View File

@@ -49,6 +49,7 @@ export class HeaderComponent {
sortByOptions: KeyValueAsSortBy[] = [];
numberOfBroker$: Observable<number>;
numberOfCommercial$: Observable<number>;
userMenuVisible: boolean = false;
constructor(
private router: Router,
private userService: UserService,
@@ -68,7 +69,19 @@ export class HeaderComponent {
this.sortDropdownVisible = false;
}
}
@HostListener('document:click', ['$event'])
handleOutsideClick(event: Event) {
const target = event.target as HTMLElement;
// Schließe das User-Menü, wenn außerhalb geklickt wird
if (this.userMenuVisible && !target.closest('#user-menu-button') && !target.closest('#user-menu-dropdown')) {
this.userMenuVisible = false;
}
}
async ngOnInit() {
this.router.events.subscribe(event => {
if (event instanceof NavigationEnd) {
}
});
const token = await this.authService.getToken();
this.keycloakUser = map2User(token);
if (this.keycloakUser) {
@@ -194,6 +207,9 @@ export class HeaderComponent {
toggleSortDropdown() {
this.sortDropdownVisible = !this.sortDropdownVisible;
}
toggleUserMenu() {
this.userMenuVisible = !this.userMenuVisible;
}
get isProfessional() {
return this.user?.customerType === 'professional';
}

9
bizmatch-client/src/app/pages/business-listings/business-listings.component.html
View File

@@ -6,10 +6,11 @@
<div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg overflow-hidden hover:shadow-xl">
<!-- Hover-Effekt hinzugefügt -->
<div class="p-6 flex flex-col h-full relative z-[0]">
<div class="flex items-center mb-4">
<i [class]="selectOptions.getIconAndTextColorType(listing.type)" class="mr-2 text-xl"></i>
<div class="flex items-center justify-between mb-4">
<img src="assets/images/{{ listing.type }}.png" alt="Image" class="w-full h-18 object-contain object-left" />
<!-- <i [class]="selectOptions.getIconAndTextColorType(listing.type)" class="mr-2 text-xl"></i> -->
<!-- Icon vergrößert -->
<span [class]="selectOptions.getTextColorType(listing.type)" class="font-bold text-lg">{{ selectOptions.getBusiness(listing.type) }}</span>
<span class="color-{{ listing.type }} w-full text-right font-bold text-2xl">{{ selectOptions.getBusiness(listing.type) }}</span>
<!-- Schriftgröße erhöht -->
</div>
<h2 class="text-xl font-semibold mb-4">
@@ -40,7 +41,7 @@
<img src="{{ env.imageBaseUrl }}/pictures/logo/{{ listing.imageName }}.avif?_ts={{ ts }}" alt="Company logo" class="absolute bottom-[80px] right-[20px] h-[45px] w-auto" />
<!-- Position und Größe des Bildes angepasst -->
<div class="flex-grow"></div>
<button class="bg-green-500 hover:bg-green-600 text-white px-5 py-3 rounded-full w-full flex items-center justify-center mt-4 transition-colors duration-200" [routerLink]="['/details-business-listing', listing.id]">
<button class="bg-emerald-500 hover:bg-emerald-600 text-white px-5 py-3 rounded-full w-full flex items-center justify-center mt-4 transition-colors duration-200" [routerLink]="['/details-business-listing', listing.id]">
<!-- Button-Größe und Hover-Effekt verbessert -->
View Full Listing
<i class="fas fa-arrow-right ml-2"></i>

2
bizmatch-client/src/app/pages/home/home.component.html
View File

@@ -54,7 +54,7 @@
</div>
</div>
<div class="flex justify-center mt-10">
<a routerLink="/businessListings" class="bg-green-500 hover:bg-green-700 md:text-2xl text-lg text-white font-semibold px-8 py-4 rounded-full shadow-lg transition duration-300"> View Available Businesses </a>
<a routerLink="/businessListings" class="bg-emerald-500 hover:bg-emerald-700 md:text-2xl text-lg text-white font-semibold px-8 py-4 rounded-full shadow-lg transition duration-300"> View Available Businesses </a>
</div>
</div>
</section>