Index: ReserveNGo-frontend/src/components/Project/Event/events_carousel.vue =================================================================== --- ReserveNGo-frontend/src/components/Project/Event/events_carousel.vue (revision 5499a049336938a26fa80d56f5bdea72adfbe4d9) +++ ReserveNGo-frontend/src/components/Project/Event/events_carousel.vue (revision 4185157c516ed5a33d48b6a996c0496310fd6294) @@ -13,29 +13,10 @@ pankake: pankake, itemsPerSlide: 3, + processedEventIds: new Set(), // Track which events we've already processed + processedLocalIds: new Set(), // Track which locales we've already fetched } }, props: ['allEvents'], - watch: { - allEvents: { - handler(events) { - if (events && events.length > 0) { - events.forEach((eventGroup) => { - eventGroup.forEach((event) => { - useLocales.getSpecificLocale(event.localId).then((locale) => { - event.logo = locale.logo - }) - }) - }) - } else { - console.log('allEvents is still empty or undefined.') - } - }, - immediate: true, - deep: true, - }, - }, - - // 2. COMPUTED: Create a property that automatically recalculates when its dependencies change. computed: { /** @@ -44,5 +25,4 @@ */ chunkedEvents() { - /* console.log("CHUNKED EVENTS",this.allEvents)*/ // Return empty array if the prop is not yet ready. if (!this.allEvents || this.allEvents.length === 0) { @@ -53,9 +33,7 @@ // e.g., [[1,2,3], [4,5,6]] becomes [1,2,3,4,5,6] const flatEvents = this.allEvents.flat() - /*console.log('flatEvents', flatEvents)*/ // This is the abstract "resize the array" method you mentioned. // It chunks the flat list into new sub-arrays. - return transformArray(flatEvents, this.itemsPerSlide, false) }, @@ -63,4 +41,42 @@ methods: { + processEventsForLogos(events) { + if (!events || events.length === 0) return + + const flatEvents = events.flat() + flatEvents.forEach((event) => { + // Only fetch if: + // 1. Event has a localId + // 2. We haven't processed this event ID + // 3. We haven't already fetched this locale + // 4. Event doesn't already have a logo + if (event && event.localId && + !this.processedEventIds.has(event.id) && + !this.processedLocalIds.has(event.localId) && + !event.logo) { + this.processedEventIds.add(event.id) + this.processedLocalIds.add(event.localId) + + useLocales.getSpecificLocale(event.localId) + .then((locale) => { + if (locale && locale.logo) { + // Set logo for all events with this localId + flatEvents.forEach(e => { + if (e.localId === event.localId) { + e.logo = locale.logo + } + }) + } + }) + .catch((error) => { + console.error('Error fetching locale for event:', error) + // Remove from sets on error so we can retry if needed + this.processedEventIds.delete(event.id) + this.processedLocalIds.delete(event.localId) + }) + } + }) + }, + /** * Checks the window width and updates the `itemsPerSlide` data property. @@ -91,7 +107,12 @@ mounted() { - /* setInterval(() => { - console.log(this.chunkedEvents) - }, 1000)*/ + // Process events only once when component mounts + // Use nextTick to ensure props are fully initialized + this.$nextTick(() => { + if (this.allEvents && this.allEvents.length > 0) { + this.processEventsForLogos(this.allEvents) + } + }) + // Call the method once on component mount to set the initial state. this.updateItemsPerSlide() @@ -105,9 +126,10 @@ window.removeEventListener('resize', this.updateItemsPerSlide) }, + } Index: ReserveNGo-frontend/src/components/Project/Event/events_carousel_in_locale.vue =================================================================== --- ReserveNGo-frontend/src/components/Project/Event/events_carousel_in_locale.vue (revision 5499a049336938a26fa80d56f5bdea72adfbe4d9) +++ ReserveNGo-frontend/src/components/Project/Event/events_carousel_in_locale.vue (revision 4185157c516ed5a33d48b6a996c0496310fd6294) @@ -100,20 +100,32 @@ :class="{ active: index === 0 }" > -
+
-
-
-
-
{{ event.name }}
-

{{event.description}}

-
-
{{ event.eventType }}
-
- {{ event.eventStart.date }}
- {{ event.eventStart.time }} +
+
+
+
{{ event.name }}
+

{{ event.description }}

+
+
+ {{ event.eventType }} +
+
+
+ {{ event.eventStart.date }} +
+
+ {{ event.eventStart.time }} +
- - +
+ + +
@@ -146,3 +158,40 @@ filter: invert(100%); /* This turns white into black */ } + +.event-card-wrapper { + flex: 0 0 auto; +} + +.event-card { + width: 18rem; + min-height: 280px; + transition: transform 0.2s ease, box-shadow 0.2s ease; + border: 1px solid #e9ecef; +} + +.event-card:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; +} + +.event-card .card-body { + padding: 1.25rem; +} + +.event-card .card-title { + font-size: 1.1rem; + color: #212529; +} + +.event-card .card-text { + font-size: 0.9rem; + line-height: 1.5; +} + +@media (max-width: 768px) { + .event-card { + width: 100%; + max-width: 18rem; + } +} Index: ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue =================================================================== --- ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue (revision 5499a049336938a26fa80d56f5bdea72adfbe4d9) +++ ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue (revision 4185157c516ed5a33d48b6a996c0496310fd6294) @@ -345,43 +345,48 @@
-
- -

{{ locale.name }}

-
- - -
- - -
- {{ locale.address }} -
-
- - -
- - -
-
- + +
+
+
+ +

{{ locale.name }}

+
+ + +
+ + +
+ {{ locale.address }} +
+
+ + +
+ + +
+
+ +
+ ({{ locale.ratingAvg }}) +
- ({{ locale.ratingAvg }})
-
-
Description
-

{{ locale.description }}

+
+
About
+

{{ locale.description }}

- - -
-
Working Hours
- - -
- - -
-
Contact
-
    -
  • - Phone: {{ locale.contact.phone }} -
    • -
  • - Email: {{ locale.contact.email }} -
    • -
-
-
- - +
+ + +
+ +
+
+
+ Working Hours +
+ +
+
+ + +
+
+
+ Contact & Menu +
+
+
+ + {{ locale.contact.phone }} +
+
+ + {{ locale.contact.email }} +
+
+ Menu + + View Menu + + Not available +
-
- - +
+
+ + +
+
+ + +
+
+ + +
- - -
-
Menu
- -
- +
+ + +
+
+ Services & Amenities +
+
+
+ {{ service }}
-
- - -
-
Services
- -
{{ service }}
- -
- - -
-
- - -
- -
- - -
Events
- -
- -
- - - -
+

No services listed

+
+
+ + +
+
+ + +
+ +
+ + +
+
+
+ Upcoming Events +
+ +
+
+ +
+
+ +

No events scheduled

+
+
+ + +
+