Skip to content

Room Display and Slot Managment

Jump to bottom
Radch-enko edited this page Jul 24, 2025 · 2 revisions

Room Display & Slot Management

This document covers the tablet client's room display and time slot management system. It explains how room information is presented to users and how time slots are visualized, managed, and interacted with. For information about the booking creation workflow, see Booking Features. For backend slot data generation, see Booking Management.

System Overview

The room display and slot management system consists of three main components: the RoomInfoLeftPanel for overall room display, the SlotComponent for slot state management, and various slot view components for rendering different slot types. The system handles real-time updates, user interactions, and different slot states including empty slots, booked events, multi-event slots, and loading states.

system-overview.svg

Slot Type Hierarchy

The system supports multiple slot types through a sealed interface hierarchy that represents different states of time periods within a room's schedule.

slot-type-hierarchy.svg

Room Display Components

The RoomInfoLeftPanel serves as the main container for room information display and slot visualization. It coordinates between date/time controls, room information, and the slot list.

Component Purpose Key Properties
RoomInfoLeftPanel Main container for room display Takes 60% of screen width, manages slot list
DateTimeView Date/time navigation controls Handles date increment/decrement, modal triggers
RoomInfoComponent Room status and information header Sticky header showing current room details
SlotView Individual slot rendering Renders different slot types with appropriate styling

Key Layout Structure:

  • LazyColumn with sticky header for room info
  • Date controls at the top with padding
  • Slot list with 20dp spacing between items
  • Disconnect overlay when network issues occur

Slot Interaction Patterns

The slot system handles various user interactions through the SlotIntent sealed interface, enabling different actions based on slot type and state.

slot-interaction-patterns.svg

Interaction Behaviors:

  • Empty slots: Click opens booking dialog with default 30-minute duration
  • Event slots: Click opens booking dialog with existing event details
  • Multi-slots: Click toggles expansion to show/hide sub-events
  • Delete slots: Show confirmation UI with cancel option

Real-time Update Mechanisms

The slot system implements automatic updates to keep room availability current through timer-based refresh cycles and event-driven updates.

real-time-update-mechanims.svg

Update Triggers:

  • Periodic updates: Every 15 minutes via SLOT_UPDATE_INTERVAL_MINUTES
  • Event-based updates: 60 seconds before slot start time via UPDATE_BEFORE_SLOT_START_MS
  • Manual updates: Through UpdateRequest intent for immediate refresh

Slot State Management

The SlotComponent manages slot state through a reactive flow pattern, handling both UI state and business logic for slot operations.

State Structure:

data class State(
    val slots: List<SlotUi> = emptyList()
)

State Update Flow:

  1. Initial Load: Fetch slots for current room via GetSlotsByRoomUseCase
  2. UI Mapping: Convert domain Slot objects to SlotUi via SlotUiMapper
  3. Timer Setup: Calculate next update time based on upcoming events
  4. State Emission: Update MutableStateFlow for UI consumption

Key State Operations:

  • updateSlots(): Replace entire slot list with new data
  • openMultislot(): Toggle expansion state of multi-event slots
  • deleteSlot(): Replace slot with delete confirmation UI
  • cancelDeletingSlot(): Restore original slot from delete state
Clone this wiki locally