From d7ccfa892ec6088aa8cc73f89815696a7f35b518 Mon Sep 17 00:00:00 2001
From: Stephan Strittmatter <stritti@users.noreply.github.com>
Date: Mon, 27 Nov 2023 14:55:56 +0000
Subject: [PATCH] chore: club details added

---
 components.d.ts                  | 12 ++++++++++++
 src/components/LocaleeHeader.vue | 15 ++++++++++++---
 src/views/ClubDetailView.vue     | 22 ++++++++++++++++++----
 3 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index a5b15a0..6a844f0 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -9,17 +9,26 @@ declare module 'vue' {
   export interface GlobalComponents {
     BarsItem: typeof import('./src/components/bars/barsItem.vue')['default']
     BarsList: typeof import('./src/components/bars/barsList.vue')['default']
+    BBreadcrumb: typeof import('bootstrap-vue-next')['BBreadcrumb']
+    BBreadcrumbItem: typeof import('bootstrap-vue-next')['BBreadcrumbItem']
     BButton: typeof import('bootstrap-vue-next')['BButton']
     BCard: typeof import('bootstrap-vue-next')['BCard']
     BCardGroup: typeof import('bootstrap-vue-next')['BCardGroup']
     BCardText: typeof import('bootstrap-vue-next')['BCardText']
     BCardTitle: typeof import('bootstrap-vue-next')['BCardTitle']
     BCol: typeof import('bootstrap-vue-next')['BCol']
+    BCollapse: typeof import('bootstrap-vue-next')['BCollapse']
     BContainer: typeof import('bootstrap-vue-next')['BContainer']
     BFormGroup: typeof import('bootstrap-vue-next')['BFormGroup']
     BFormInput: typeof import('bootstrap-vue-next')['BFormInput']
     BImg: typeof import('bootstrap-vue-next')['BImg']
     BInputGroup: typeof import('bootstrap-vue-next')['BInputGroup']
+    BNavbar: typeof import('bootstrap-vue-next')['BNavbar']
+    BNavbarBrand: typeof import('bootstrap-vue-next')['BNavbarBrand']
+    BNavbarNav: typeof import('bootstrap-vue-next')['BNavbarNav']
+    BNavbarToggle: typeof import('bootstrap-vue-next')['BNavbarToggle']
+    BNavItem: typeof import('bootstrap-vue-next')['BNavItem']
+    BNavText: typeof import('bootstrap-vue-next')['BNavText']
     BPlaceholder: typeof import('bootstrap-vue-next')['BPlaceholder']
     BPlaceholderCard: typeof import('bootstrap-vue-next')['BPlaceholderCard']
     BPlaceholderWrapper: typeof import('bootstrap-vue-next')['BPlaceholderWrapper']
@@ -49,4 +58,7 @@ declare module 'vue' {
     TheWelcome: typeof import('./src/components/TheWelcome.vue')['default']
     WelcomeItem: typeof import('./src/components/WelcomeItem.vue')['default']
   }
+  export interface ComponentCustomProperties {
+    vBColorMode: typeof import('bootstrap-vue-next')['vBColorMode']
+  }
 }
diff --git a/src/components/LocaleeHeader.vue b/src/components/LocaleeHeader.vue
index d0e02d3..2191b12 100644
--- a/src/components/LocaleeHeader.vue
+++ b/src/components/LocaleeHeader.vue
@@ -2,9 +2,18 @@
 
 
 <template>
-    <div id="header">
-        <h1>Localee</h1>
-    </div>
+    <BNavbar toggleable="sm" variant="primary" v-b-color-mode="'dark'">
+        <BNavbarBrand tag="h1" class="mb-0" to="/">Localee</BNavbarBrand>
+
+        <BNavbarToggle target="nav-text-collapse" />
+
+        <BCollapse id="nav-text-collapse" is-nav>
+            <BNavbarNav>
+                <BNavItem to="/club">Clubs</BNavItem>
+                <BNavItem to="/about">Über uns</BNavItem>
+            </BNavbarNav>
+        </BCollapse>
+    </BNavbar>
 </template>
 
 
diff --git a/src/views/ClubDetailView.vue b/src/views/ClubDetailView.vue
index ae20ef6..5c2a919 100644
--- a/src/views/ClubDetailView.vue
+++ b/src/views/ClubDetailView.vue
@@ -1,10 +1,24 @@
 <template>
-    <div v-if="club">
-        <h1>{{ club.name }}</h1>
-        <b-img :src="image" />
-        <p>{{ club.notes }}</p>
+  <div  v-if="club">
+    <BBreadcrumb>
+      <BBreadcrumbItem to="/home"> Home </BBreadcrumbItem>
+      <BBreadcrumbItem to="/club"> Clubs </BBreadcrumbItem>
+      <BBreadcrumbItem :to="'/club/' + club.id" active> {{ club.name }} </BBreadcrumbItem>
+    </BBreadcrumb>
+
+    <div>
+      <h1>{{ club.name }}</h1>
+      <b-img :src="image" fluid-grow />
+      <p>{{ club.notes }}</p>
+
+      <h3>Adresse</h3>
+      <address>
+        <span id="street">{{ club.adresse }}</span><br />
+        <span id="zipCode">{{ club.plz }}</span> <span id="city">{{ club.ort }}</span>
+      </address>
 
     </div>
+  </div>
 </template>
 <script lang="ts">
 import { mapState } from "pinia";