-
-
No events available
+
+
@@ -348,5 +369,5 @@
width: 240px;
}
-
+
.events-carousel-wrapper {
padding: 0 2rem;
@@ -359,14 +380,14 @@
height: 80px;
}
-
+
.event-image-wrapper {
width: 80px;
height: 80px;
}
-
+
.events-carousel-wrapper {
padding: 0 1.5rem;
}
-
+
.carousel-control-prev-icon,
.carousel-control-next-icon {
@@ -375,4 +396,38 @@
background-size: 100% 100%;
}
+
+ .events-section {
+ margin-bottom: 0.5rem;
+ }
+}
+.events-header {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ padding: 0 2.5rem;
+ margin-bottom: 0.5rem;
+}
+
+.events-title {
+ font-size: 0.9rem;
+ font-weight: 600;
+ color: #212529;
+ text-transform: uppercase;
+ letter-spacing: 0.4px;
+ margin: 0;
+}
+
+.view-all-link {
+ font-size: 0.75rem;
+ font-weight: 500;
+ color: #9ca3af; /* neutral grey */
+ text-decoration: none;
+ transition: color 0.2s ease;
+}
+
+.view-all-link:hover {
+ color: #6b7280; /* slightly darker grey */
+ text-decoration: none;
}
Index: ReserveNGo-frontend/src/components/Project/Restaurant/Locale_listing_container.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/Locale_listing_container.vue (revision a2cf76ef39eb9ad9c31f4239648f3ae7a7d0c764)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/Locale_listing_container.vue (revision 12c76de49cc7c41bf9613e50b1726d57c07f9e00)
@@ -3,10 +3,9 @@
import { defineComponent } from 'vue'
import { userStore } from '@/PiniaStores/UserStore.js'
-import { useLocales } from '@/repository/Locale'
import { useCustomer } from '@/repository/Customer.ts'
export default defineComponent({
components: { LocalInLocalListing },
- props:{
+ props: {
mode: String,
locals: Array,
@@ -24,7 +23,7 @@
displayedLocals() {
return this.mode === 'favourites'
- ? this.locals.filter(local => this.favourite_locals.includes(local.id))
+ ? this.locals.filter((local) => this.favourite_locals.includes(local.id))
: this.locals
- }
+ },
},
@@ -36,21 +35,20 @@
.then(() => {
if (isFav) {
- this.favourite_locals = this.favourite_locals.filter(fav => fav !== id)
+ this.favourite_locals = this.favourite_locals.filter((fav) => fav !== id)
} else {
this.favourite_locals.push(id)
}
})
- .catch(err => console.log(err))
+ .catch((err) => console.log(err))
},
},
mounted() {
-
// Only fetch favourite locals if user is logged in and is a customer
if (this.userStore && this.userStore.data && this.userStore.data.role === 'ROLE_CUSTOMER') {
useCustomer
.getFavouriteLocals()
- .then(data => (this.favourite_locals = data.map(local => local.id)))
- .catch(err => console.log(err))
+ .then((data) => (this.favourite_locals = data.map((local) => local.id)))
+ .catch((err) => console.log(err))
}
},
@@ -60,4 +58,5 @@
+
Locals
import Locale_listing_container from '@/components/Project/Restaurant/Locale_listing_container.vue'
+import Event_listing_container from '@/components/Project/Event/event_listing_container.vue'
import SearchFilterPanel from '@/components/Project/Restaurant/search_filter_panel.vue'
import Events_carousel from '@/components/Project/Event/events_carousel.vue'
@@ -10,4 +11,5 @@
components: {
Locale_listing_container,
+ Event_listing_container,
SearchFilterPanel,
Events_carousel,
@@ -17,6 +19,8 @@
return {
allEvents: [],
+ allEventsRaw: [], // Store the raw events data
showBackToTop: true,
locals: [],
+ activeView: 'locals', // 'locals' or 'events'
}
},
@@ -49,13 +53,70 @@
wrapper.scrollTo({
top: 0,
- behavior: 'smooth'
+ behavior: 'smooth',
})
}
},
sendSearchQuery(searchQuery, sortBy, directions, isOpen) {
- useLocales.getLocals(searchQuery, sortBy, directions, isOpen)
- .then(data => { this.locals = data.locals;})
- .catch(err => console.log("The locals are not being caught.", err))
- }
+ if (this.activeView === 'locals') {
+ useLocales
+ .getLocals(searchQuery, sortBy, directions, isOpen)
+ .then((data) => {
+ this.locals = data.locals
+ })
+ .catch((err) => console.log('The locals are not being caught.', err))
+ } else {
+ // Handle event filtering
+ this.filterEvents(searchQuery, sortBy, directions)
+ }
+ },
+ filterEvents(searchQuery, sortBy, directions) {
+ let filteredEvents = [...this.allEventsRaw]
+
+ // Search filter
+ if (searchQuery) {
+ const query = searchQuery.toLowerCase()
+ filteredEvents = filteredEvents.filter(
+ (event) =>
+ (event.title && event.title.toLowerCase().includes(query)) ||
+ (event.name && event.name.toLowerCase().includes(query)) ||
+ (event.description && event.description.toLowerCase().includes(query)) ||
+ (event.location && event.location.toLowerCase().includes(query)),
+ )
+ }
+
+ // Sort
+ if (sortBy) {
+ filteredEvents.sort((a, b) => {
+ let compareA, compareB
+
+ switch (sortBy) {
+ case 'name':
+ compareA = (a.title || a.name || '').toLowerCase()
+ compareB = (b.title || b.name || '').toLowerCase()
+ return directions === 'desc'
+ ? compareB.localeCompare(compareA)
+ : compareA.localeCompare(compareB)
+
+ case 'date':
+ compareA = new Date(a.date || 0)
+ compareB = new Date(b.date || 0)
+ return directions === 'desc' ? compareB - compareA : compareA - compareB
+
+ case 'newest':
+ compareA = new Date(a.createdAt || a.date || 0)
+ compareB = new Date(b.createdAt || b.date || 0)
+ return compareB - compareA
+
+ default:
+ return 0
+ }
+ })
+ }
+
+ this.allEvents = transformArray(filteredEvents, 3)
+ },
+ setActiveView(view) {
+ this.activeView = view
+ },
},
@@ -63,15 +124,22 @@
useEvents
.listAll()
- .then(data => {
+ .then((data) => {
+ this.allEventsRaw = data.events // Store raw data
this.allEvents = transformArray(data.events, 3)
- console.log("Currently Reading here", this.allEvents)
+ console.log('Currently Reading here', this.allEvents)
})
- .catch(error => console.log("Probably failed fetching events due to login", error))
+ .catch((error) => console.log('Probably failed fetching events due to login', error))
useLocales
.getLocals()
- .then(data => { this.locals = data.locals; console.log("The data of the locals will probobly be needed later so this console log stays", data); })
- .catch(err => console.log("The locals are not being caught.", err))
- }
+ .then((data) => {
+ this.locals = data.locals
+ console.log(
+ 'The data of the locals will probobly be needed later so this console log stays',
+ data,
+ )
+ })
+ .catch((err) => console.log('The locals are not being caught.', err))
+ },
}
@@ -83,5 +151,5 @@
-
+
@@ -92,7 +160,30 @@
-
+
+
+
+
+
+
+
-
+
+
@@ -131,4 +222,41 @@
margin-bottom: 0.5rem;
border-bottom: 1px solid #dee2e6;
+}
+
+.navigation-toggle {
+ display: flex;
+ gap: 1rem;
+ padding: 1rem 1rem 0.5rem 1rem;
+ background-color: #f3f5f8;
+}
+
+.nav-btn {
+ flex: 1;
+ padding: 0.75rem 1.5rem;
+ background-color: #fff;
+ border: 2px solid #dee2e6;
+ border-radius: 8px;
+ font-weight: 500;
+ color: #6c757d;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ font-size: 1rem;
+}
+
+.nav-btn:hover {
+ background-color: #f8f9fa;
+ border-color: #5ea5bc;
+ color: #5ea5bc;
+}
+
+.nav-btn.active {
+ background-color: #5ea5bc;
+ border-color: #5ea5bc;
+ color: #fff;
+ box-shadow: 0 2px 8px rgba(94, 165, 188, 0.3);
+}
+
+.nav-btn i {
+ font-size: 1.1rem;
}
@@ -170,5 +298,7 @@
.fade-enter-active,
.fade-leave-active {
- transition: opacity 0.3s ease, transform 0.3s ease;
+ transition:
+ opacity 0.3s ease,
+ transform 0.3s ease;
}
@@ -182,4 +312,14 @@
.events-section-wrapper {
padding: 0.5rem 0;
+ }
+
+ .navigation-toggle {
+ padding: 0.75rem 0.75rem 0.5rem 0.75rem;
+ gap: 0.5rem;
+ }
+
+ .nav-btn {
+ padding: 0.6rem 1rem;
+ font-size: 0.9rem;
}
Index: ReserveNGo-frontend/src/components/Project/Restaurant/search_filter_panel.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/search_filter_panel.vue (revision a2cf76ef39eb9ad9c31f4239648f3ae7a7d0c764)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/search_filter_panel.vue (revision 12c76de49cc7c41bf9613e50b1726d57c07f9e00)
@@ -1,9 +1,50 @@