@luckydye/calendar 1.1.2 → 1.1.3

package/src/GoogleCalendarSource.ts

@@ -471,13 +471,6 @@ export class GoogleCalendarSource implements CalendarSource {
     return updated;
   }
 
-  /**
-   * Move an event to new start/end times.
-   */
-  async moveEvent(id: string, newStart: Date, newEnd: Date): Promise<CalendarEvent> {
-    return this.updateEvent(id, { start: newStart, end: newEnd });
-  }
-
   /**
    * Delete an event from Google Calendar.
    */

package/src/InMemorySource.ts

@@ -58,21 +58,6 @@ export class InMemorySource implements CalendarSource {
     return updated;
   }
 
-  async moveEvent(id: string, newStart: Date, newEnd: Date): Promise<CalendarEvent> {
-    const event = this.events.get(id);
-    if (!event) {
-      throw new Error(`Event ${id} not found`);
-    }
-
-    const moved = {
-      ...event,
-      start: newStart,
-      end: newEnd,
-    };
-    this.events.set(id, moved);
-    return moved;
-  }
-
   async deleteEvent(id: string): Promise<void> {
     const deleted = this.events.delete(id);
     if (!deleted) {

package/src/InhouseBookingSource.ts

@@ -6,7 +6,7 @@ import type { CalendarSource, CalendarCredentials } from "./CalendarIntegration.
  */
 export interface InhouseCredentials extends CalendarCredentials {
   /**
-   * Session cookie for authentication (e.g., "sessionid=abc123; csrftoken=xyz789")
+   * Session cookie for authentication (e.g., "XSRF-TOKEN=xxx; laravel_session=yyy")
    */
   sessionCookie: string;
   /**
@@ -23,22 +23,24 @@ export interface InhouseCredentials extends CalendarCredentials {
  * Inhouse Booking System API response structure.
  */
 interface InhouseBooking {
-  id: string | number;
+  id: number;
   date: string;
-  timeslots: number;
   description: string;
+  duration: string;
+  project_id: number;
   employee_id: number;
-  closing_id?: number;
-  project_id?: number;
-  owner_id?: number;
-  updated_user_id?: number;
-  home_office?: number;
-  out_of_office?: number;
+  booking_id: number;
+  closing_id: number | null;
+  project: Array<{
+    id: number;
+    name: string;
+    report: number;
+  }>;
+  account: Array<{
+    id: number;
+    name: string;
+  }>;
   optional?: number;
-  deadline?: number;
-  created_at?: string;
-  updated_at?: string;
-  deleted_at?: string | null;
 }
 
 /**
@@ -78,8 +80,8 @@ export class InhouseBookingSource implements CalendarSource {
    * Make an authenticated request to the Inhouse Booking API via the proxy.
    * The proxy will inject the session cookie.
    */
-  private async apiRequest<T>(endpoint: string): Promise<T> {
-    const url = `/bookings${endpoint}`;
+  private async apiRequest<T>(endpoint: string, searchParams?: URLSearchParams): Promise<T> {
+    const url = searchParams ? `${endpoint}?${searchParams.toString()}` : endpoint;
     
     const response = await fetch(url, {
       headers: {
@@ -99,47 +101,61 @@ export class InhouseBookingSource implements CalendarSource {
 
   /**
    * Convert an Inhouse booking to internal CalendarEvent format.
-   * Bookings use date + timeslots (each quarter = 2 hours in an 8-hour work day).
+   * Bookings use date + duration (format "HH:MM").
    * Bookings are ordered by their position in the day (first booking = starts at 09:00).
    */
   private mapBookingToEvent(
     booking: InhouseBooking,
     startTime: Date
   ): CalendarEvent | null {
-    if (!booking.date || !booking.timeslots) return null;
+    if (!booking.date || !booking.duration) return null;
 
-    // Each quarter = 2 hours (8-hour day / 4 quarters)
-    const quarterHours = 2;
-    const durationHours = booking.timeslots * quarterHours;
-    const endTime = new Date(startTime.getTime() + durationHours * 60 * 60 * 1000);
+    // Parse duration string "HH:MM" to hours
+    const [hours, minutes] = booking.duration.split(':').map(Number);
+    if (hours === undefined || minutes === undefined) return null;
+
+    const durationMs = (hours * 60 + minutes) * 60 * 1000;
+    const endTime = new Date(startTime.getTime() + durationMs);
 
     if (Number.isNaN(startTime.getTime()) || Number.isNaN(endTime.getTime())) return null;
 
-    const title = booking.description || 'Booking';
+    const projectName = booking.project[0]?.name || '';
+    const eventId = `${booking.id}:${booking.booking_id}:${booking.project_id}`;
+
+    // Events with id <= 0 are raw bookings (no timetrack record yet); render as TENTATIVE.
+    const isRawBooking = booking.id <= 0;
 
     return {
-      id: String(booking.id),
-      title: title,
+      id: eventId,
+      title: projectName,
       start: startTime,
       end: endTime,
       color: this.color,
       calendar: this.name,
       calendarId: this.id,
       sourceId: this.id,
-      description: `${booking.timeslots} quarter${booking.timeslots > 1 ? 's' : ''} (${durationHours}h)`,
-      readOnly: true,
-      status: booking.optional === 1 ? 'TENTATIVE' : undefined,
+      description: booking.description || '',
+      readOnly: false,
+      status: (booking.optional === 1 || isRawBooking) ? 'TENTATIVE' : undefined,
     };
   }
 
   /**
    * Process bookings and calculate their timestamps based on order.
-   * Bookings are stacked chronologically - first booking starts at 09:00.
+   * Bookings are stacked chronologically within a 9-hour workday starting at 09:00,
+   * split into a morning and afternoon session by a 1-hour lunch break.
+   *
+   * The split is determined by the midpoint of total work duration:
+   * bookings are greedily assigned to the morning until adding the next one
+   * would exceed half the day's total duration. The remaining bookings are
+   * placed after the 1-hour lunch break.
+   *
+   * Example: 3.5h + 4.5h = 8h total → lunch after first (3.5h ≤ 4h),
+   * result: 09:00-12:30, lunch 12:30-13:30, 13:30-18:00.
    */
   private processBookings(bookings: InhouseBooking[]): CalendarEvent[] {
-    // Group bookings by date
     const bookingsByDate = new Map<string, InhouseBooking[]>();
-    
+
     for (const booking of bookings) {
       if (!booking.date) continue;
       const list = bookingsByDate.get(booking.date) || [];
@@ -150,19 +166,42 @@ export class InhouseBookingSource implements CalendarSource {
     const events: CalendarEvent[] = [];
 
     for (const [dateStr, dateBookings] of bookingsByDate) {
-      // Parse date (format: "2025-03-07")
       const [year, month, day] = dateStr.split('-').map(Number);
       if (!year || !month || !day) continue;
 
-      // Start of work day: 09:00
+      const durations = dateBookings.map(b => {
+        if (!b.duration) return 0;
+        const [h, m] = b.duration.split(':').map(Number);
+        if (h === undefined || m === undefined) return 0;
+        return (h * 60 + m) * 60 * 1000;
+      });
+
+      const halfMs = durations.reduce((a, b) => a + b, 0) / 2;
+
+      // Greedy split: assign bookings to morning until the next one would exceed half
+      let morningMs = 0;
+      let splitIndex = 0;
+      for (let i = 0; i < dateBookings.length; i++) {
+        if (morningMs + (durations[i] ?? 0) <= halfMs) {
+          morningMs += durations[i] ?? 0;
+          splitIndex = i + 1;
+        } else {
+          break;
+        }
+      }
+
+      const LUNCH_MS = 60 * 60 * 1000;
       let currentTime = new Date(year, month - 1, day, 9, 0);
 
-      // Process bookings in order (API returns them in chronological order)
-      for (const booking of dateBookings) {
-        const event = this.mapBookingToEvent(booking, currentTime);
+      for (let i = 0; i < dateBookings.length; i++) {
+        // Insert 1-hour lunch break between morning and afternoon sessions
+        if (i === splitIndex && splitIndex > 0) {
+          currentTime = new Date(currentTime.getTime() + LUNCH_MS);
+        }
+
+        const event = this.mapBookingToEvent(dateBookings[i] as InhouseBooking, currentTime);
         if (event) {
           events.push(event);
-          // Advance current time for next booking
           currentTime = event.end;
         }
       }
@@ -190,7 +229,7 @@ export class InhouseBookingSource implements CalendarSource {
     };
 
     const employeeFilter = {
-      '=': this.credentials.employeeId,
+      '=': Number.parseInt(this.credentials.employeeId, 10),
     };
 
     const params = new URLSearchParams({
@@ -198,17 +237,263 @@ export class InhouseBookingSource implements CalendarSource {
       employee_id: JSON.stringify(employeeFilter),
     });
 
-    if (this.credentials.unitId) {
-      params.set('unit_id', this.credentials.unitId);
-    }
-
-    const bookings = await this.apiRequest<InhouseBooking[]>(`?${params}`);
+    const bookings = await this.apiRequest<InhouseBooking[]>('/timetracks/with_bookings', params);
 
     if (!Array.isArray(bookings)) return [];
 
     return this.processBookings(bookings);
   }
 
+  /**
+   * Fetch the list of active projects.
+   * Returns projects as {id, name} pairs for use in the project picker.
+   */
+  async fetchProjects(): Promise<Array<{ id: number; name: string }>> {
+    const params = new URLSearchParams({
+      archived: JSON.stringify({ '=': 0 }),
+    });
+    const projects = await this.apiRequest<Array<{ id: number; name: string }>>('/projects', params);
+    if (!Array.isArray(projects)) return [];
+    return projects;
+  }
+
+  /**
+   * Extract XSRF-TOKEN value from session cookie.
+   * Returns the encrypted token value that Laravel can decrypt.
+   */
+  private getXsrfToken(): string | undefined {
+    const match = this.credentials.sessionCookie.match(/XSRF-TOKEN=([^;]+)/);
+    return match ? decodeURIComponent(match[1]) : undefined;
+  }
+
+  /**
+   * Make an authenticated write request to the Inhouse Booking API via the proxy.
+   * Uses X-XSRF-TOKEN header with the encrypted token (Laravel decrypts this automatically).
+   */
+  private async apiWriteRequest<T>(endpoint: string, method: string, body: URLSearchParams): Promise<T> {
+    const xsrfToken = this.getXsrfToken();
+    
+    if (!xsrfToken) {
+      throw new Error('XSRF-TOKEN not found in session cookie. Please check your credentials.');
+    }
+    
+    const headers: Record<string, string> = {
+      'X-Session-Cookie': this.credentials.sessionCookie,
+      'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
+      'X-Requested-With': 'XMLHttpRequest',
+      'X-XSRF-TOKEN': xsrfToken,
+    };
+
+    const response = await fetch(endpoint, {
+      method,
+      headers,
+      body: body.toString(),
+    });
+
+    if (!response.ok) {
+      if (response.status === 401) {
+        throw new Error('Inhouse Booking System authentication failed. Please check your session cookie.');
+      }
+      if (response.status === 403) {
+        throw new Error('Inhouse Booking System CSRF token invalid or missing.');
+      }
+      throw new Error(`Inhouse Booking API error: ${response.status} ${response.statusText}`);
+    }
+
+    const text = await response.text();
+    if (!text) return {} as T;
+
+    try {
+      return JSON.parse(text) as T;
+    } catch {
+      return {} as T;
+    }
+  }
+
+  /**
+   * Make an authenticated write request with params as query string and empty body.
+   * This matches the Inhouse API format used by the browser client for creating bookings.
+   */
+  private async apiQueryRequest<T>(endpoint: string, method: string, params: URLSearchParams): Promise<T> {
+    const xsrfToken = this.getXsrfToken();
+
+    if (!xsrfToken) {
+      throw new Error('XSRF-TOKEN not found in session cookie. Please check your credentials.');
+    }
+
+    const url = `${endpoint}/?${params.toString()}`;
+
+    const response = await fetch(url, {
+      method,
+      headers: {
+        'X-Session-Cookie': this.credentials.sessionCookie,
+        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
+        'X-Requested-With': 'XMLHttpRequest',
+        'X-XSRF-TOKEN': xsrfToken,
+      },
+    });
+
+    if (!response.ok) {
+      if (response.status === 401) {
+        throw new Error('Inhouse Booking System authentication failed. Please check your session cookie.');
+      }
+      if (response.status === 403) {
+        throw new Error('Inhouse Booking System CSRF token invalid or missing.');
+      }
+      throw new Error(`Inhouse Booking API error: ${response.status} ${response.statusText}`);
+    }
+
+    const text = await response.text();
+    if (!text) return {} as T;
+
+    try {
+      return JSON.parse(text) as T;
+    } catch {
+      return {} as T;
+    }
+  }
+
+  /**
+   * Format duration from milliseconds to "HH:MM" format.
+   */
+  private formatDuration(durationMs: number): string {
+    const totalMinutes = Math.round(durationMs / (60 * 1000));
+    const hours = Math.floor(totalMinutes / 60);
+    const minutes = totalMinutes % 60;
+    return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
+  }
+
+  /**
+   * Parse event ID in format "{id}:{booking_id}:{project_id}".
+   * The API resource ID is bookingId when id is unavailable (< 0).
+   */
+  private parseEventId(eventId: string): { id: number; bookingId: number; projectId: number; resourceId: number } | null {
+    const parts = eventId.split(':');
+    if (parts.length !== 3) return null;
+    const id = Number.parseInt(parts[0], 10);
+    const bookingId = Number.parseInt(parts[1], 10);
+    const projectId = Number.parseInt(parts[2], 10);
+    if (Number.isNaN(id) || Number.isNaN(bookingId) || Number.isNaN(projectId)) return null;
+    const resourceId = id > 0 ? id : bookingId;
+    return { id, bookingId, projectId, resourceId };
+  }
+
+  /**
+   * Create a new booking in the Inhouse Booking System.
+   * Params are sent as query string with empty body, matching the Inhouse API format.
+   */
+  async createEvent(event: Omit<CalendarEvent, 'calendar' | 'color'>): Promise<CalendarEvent> {
+    if (!this.enabled) {
+      throw new Error('Inhouse Booking System source is disabled');
+    }
+
+    const parsed = this.parseEventId(event.id);
+    if (!parsed) {
+      throw new Error(`Creating bookings requires an event ID in format "{id}-{bookingId}-{projectId}", got: ${event.id}`);
+    }
+
+    const durationMs = event.end.getTime() - event.start.getTime();
+    const duration = this.formatDuration(durationMs);
+    const date = event.start.toISOString().split('T')[0];
+    const description = event.description || '';
+
+    const params = new URLSearchParams({
+      employee_id: this.credentials.employeeId,
+      unit_id: this.credentials.unitId || '',
+      date,
+      description,
+      project_id: parsed.projectId.toString(),
+      duration,
+      create: '',
+    });
+
+    const result = await this.apiQueryRequest<{ id: number }>('/timetracks', 'POST', params);
+
+    if (!result.id) {
+      throw new Error('Failed to create booking: invalid response from server');
+    }
+
+    const newEventId = `${result.id}:0:${parsed.projectId}`;
+
+    return {
+      ...event,
+      id: newEventId,
+      calendar: this.name,
+      color: this.color,
+      sourceId: this.id,
+      readOnly: false,
+    };
+  }
+
+  /**
+   * Update an existing booking in the Inhouse Booking System.
+   */
+  async updateEvent(id: string, updates: Partial<CalendarEvent>): Promise<CalendarEvent> {
+    if (!this.enabled) {
+      throw new Error('Inhouse Booking System source is disabled');
+    }
+
+    const parsedId = this.parseEventId(id);
+    if (!parsedId) {
+      throw new Error(`Invalid event ID format: ${id}`);
+    }
+
+    // Fetch existing booking to get current values (match by API id, first segment)
+    const existingBookings = await this.fetchEvents();
+    const existing = existingBookings.find(e => e.id.startsWith(`${parsedId.id}:`));
+    if (!existing) {
+      throw new Error(`Booking not found: ${id}`);
+    }
+
+    // Use current values or fall back to existing
+    const start = updates.start ?? existing.start;
+    const end = updates.end ?? existing.end;
+    const durationMs = end.getTime() - start.getTime();
+    const duration = this.formatDuration(durationMs);
+    const date = start.toISOString().split('T')[0];
+    const description = updates.description ?? existing.description ?? '';
+
+    const body = new URLSearchParams({
+      id: parsedId.resourceId.toString(),
+      unit_id: this.credentials.unitId || '',
+      employee_id: this.credentials.employeeId,
+      booking_id: parsedId.bookingId.toString(),
+      date,
+      description,
+      project_id: parsedId.projectId.toString(),
+      duration,
+      update: '',
+    });
+
+    await this.apiWriteRequest<unknown>(`/timetracks/${parsedId.resourceId}`, 'PUT', body);
+
+    return {
+      ...existing,
+      ...updates,
+      id,
+      calendar: this.name,
+      color: this.color,
+      sourceId: this.id,
+      readOnly: false,
+    };
+  }
+
+  /**
+   * Delete a booking from the Inhouse Booking System.
+   */
+  async deleteEvent(id: string): Promise<void> {
+    if (!this.enabled) {
+      throw new Error('Inhouse Booking System source is disabled');
+    }
+
+    const parsedId = this.parseEventId(id);
+    if (!parsedId) {
+      throw new Error(`Invalid event ID format: ${id}`);
+    }
+
+    await this.apiQueryRequest<unknown>(`/timetracks/delete_bookings/${parsedId.bookingId}`, 'DELETE', new URLSearchParams());
+  }
+
   /**
    * Test the connection to the Inhouse Booking System.
    * Returns true if the credentials are valid.
@@ -220,17 +505,17 @@ export class InhouseBookingSource implements CalendarSource {
         '>=': now.toISOString().split('T')[0],
         '<=': now.toISOString().split('T')[0],
       };
-      const employeeFilter = { '=': this.credentials.employeeId };
-      
+      const employeeFilter = { '=': Number.parseInt(this.credentials.employeeId, 10) };
+
       const params = new URLSearchParams({
         date: JSON.stringify(dateFilter),
         employee_id: JSON.stringify(employeeFilter),
         limit: '1',
       });
 
-      await this.apiRequest<InhouseBooking[]>(`?${params}`);
+      await this.apiRequest<InhouseBooking[]>('/timetracks/with_bookings', params);
       return true;
-    } catch (error) {
+    } catch {
       return false;
     }
   }

package/src/Keybinds.ts

@@ -0,0 +1,46 @@
+const INPUT_SELECTOR = 'input, textarea, [contenteditable="true"]';
+
+function isInputFocused(shadowHost: Element): boolean {
+	const active = document.activeElement;
+	if (active?.matches(INPUT_SELECTOR)) return true;
+	// Shadow DOM: the host element appears as activeElement when focus is inside it
+	if (active === shadowHost) {
+		const shadowActive = shadowHost.shadowRoot?.activeElement;
+		if (shadowActive?.matches(INPUT_SELECTOR)) return true;
+	}
+	return false;
+}
+
+export interface Keybind {
+	key: string;
+	/** Matches Cmd (Mac) or Ctrl (Win/Linux) */
+	cmdOrCtrl?: boolean;
+	shift?: boolean;
+	action: () => void;
+}
+
+export function registerKeybinds(
+	bindings: Keybind[],
+	shadowHost: Element,
+): () => void {
+	const handler = (e: KeyboardEvent): void => {
+		if (isInputFocused(shadowHost)) return;
+
+		for (const binding of bindings) {
+			const keyMatch = e.key === binding.key;
+			const cmdMatch = binding.cmdOrCtrl
+				? e.metaKey || e.ctrlKey
+				: !e.metaKey && !e.ctrlKey;
+			const shiftMatch = binding.shift ? e.shiftKey : !e.shiftKey;
+
+			if (keyMatch && cmdMatch && shiftMatch) {
+				e.preventDefault();
+				binding.action();
+				return;
+			}
+		}
+	};
+
+	window.addEventListener("keydown", handler);
+	return () => window.removeEventListener("keydown", handler);
+}

package/src/app.css

@@ -2,3 +2,31 @@ caldav-config {
     height: 100%;
     box-shadow: 0 0 24px rgba(0, 0, 0, 0.4);
 }
+
+.toolbar-button {
+  background: transparent;
+  border: 1px solid var(--grid-color, rgba(255, 255, 255, 0.1));
+  color: var(--text-primary, rgba(255, 255, 255, 0.9));
+  padding: 4px 8px;
+  border-radius: var(--border-radius-sm, 4px);
+  font-size: 13px;
+  line-height: 16px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.toolbar-button:hover {
+  background: var(--bg-button-hover, rgba(255, 255, 255, 0.05));
+  border-color: var(--grid-color-hover, rgba(255, 255, 255, 0.2));
+}
+
+.toolbar-button:active {
+  background: var(--bg-button-active, rgba(255, 255, 255, 0.1));
+}
+
+.toolbar-button[disabled] {
+    opacity: 0.5;
+}