Added colours for teams

app/javascript/controllers/main_calendar_controller.js

@@ -18,6 +18,39 @@ export default class extends Controller {
     // Translation helper
     const t = (key) => translations[key] || key;
     
+    // Pre-process reservations to set up team calendars
+    const reservations = JSON.parse(document.querySelector("#main-calendar").dataset.reservations);
+    window.reservations = reservations;
+    
+    // Debug: Log the first reservation to inspect color format
+    if (reservations && reservations.length > 0) {
+      console.log("First reservation team color:", reservations[0].team.color);
+    }
+    
+    // Extract unique teams and create calendar configurations
+    const teamCalendars = [];
+    const teamMap = {};
+    
+    // Create calendar configs for each team
+    reservations.forEach(reservation => {
+      const teamId = reservation.team.id;
+      if (!teamMap[teamId]) {
+        const calendarId = `team-${teamId}`;
+        teamMap[teamId] = calendarId;
+        
+        // Use color directly - it should be a hex string from the TeamSerializer
+        const teamColor = reservation.team.color || '#00a9ff';
+        
+        teamCalendars.push({
+          id: calendarId,
+          name: reservation.team.name,
+          backgroundColor: teamColor,
+          borderColor: teamColor
+        });
+      }
+    });
+    
+    // Initialize calendar with all team calendars
     const calendar = new tui.Calendar(document.getElementById('main-calendar'), {
       defaultView: 'week',
       usageStatistics: false,
@@ -64,12 +97,12 @@ export default class extends Controller {
           return t('delete');
         }
       },
-      calendars: [
+      calendars: teamCalendars.length > 0 ? teamCalendars : [
         {
-          id: 'cal1',
-          name: 'Work',
+          id: 'default',
+          name: 'Default',
           backgroundColor: '#00a9ff',
-        },
+        }
       ],
       // Enable the built-in popup
       useDetailPopup: true,
@@ -173,32 +206,42 @@ export default class extends Controller {
     });
 
     window.calendar = calendar;
-    this.getCalendardata();
+    
+    // Create events for all reservations
+    this.createCalendarEvents(reservations, teamMap);
     
     calendar.render();
     
     // Update the date display after rendering
     this.updateDateDisplay();
   }
+  
+  // Create events for all reservations
+  createCalendarEvents(reservations, teamMap) {
+    // Create events with their team's calendar ID
+    const events = reservations.map(reservation => {
+      const teamId = reservation.team.id;
+      const calendarId = teamMap[teamId] || 'default';
+      
+      return {
+        id: reservation.id,
+        calendarId: calendarId,
+        title: reservation.customer.first_name + ' ' + reservation.customer.surname + ' (' + reservation.customer.phone + ')',
+        category: 'time',
+        dueDateClass: reservation.dueDateClass,
+        location: '', // Empty location as requested
+        attendees: [reservation.team.name], // Team name as attendee
+        start: reservation.start_time,
+        end: reservation.end_time
+      };
+    });
+    
+    window.calendar.createEvents(events);
+  }
 
   getCalendardata() {
-    var reservations = JSON.parse(document.querySelector("#main-calendar").dataset.reservations);
-    window.reservations = reservations;
-    reservations.forEach(reservation => {
-      window.calendar.createEvents([
-        {
-          id: reservation.id,
-          calendarId: 'cal1',
-          title: reservation.customer.first_name + ' ' + reservation.customer.surname + ' (' + reservation.customer.phone + ')',
-          category: 'time',
-          dueDateClass: reservation.dueDateClass,
-          location: '', // Empty location as requested
-          attendees: [reservation.team.name], // Team name as attendee
-          start: reservation.start_time,
-          end: reservation.end_time
-        }
-      ])
-    });
+    // This method is now replaced by initialization in connect()
+    // and createCalendarEvents method
   }
   
   // Helper function to get CSRF token from meta tag