Class WaitingRoomModal

Component representing a modal for managing participants in a waiting room.

app-waiting-room-modal

true

CommonModule, FontAwesomeModule, FormsModule

./waiting-room-modal.component.html

['./waiting-room-modal.component.css']

ngOnInit - Lifecycle hook that is called after data-bound properties are initialized.

ngOnChanges - Lifecycle hook that is called when any data-bound property of a directive changes.

updateParameters - Updates the parameters for the waiting room modal.

handleModalClose - Handles the closing of the modal.

handleFilterChange - Handles the change in the filter input.

handleItemPress - Handles the pressing of an item in the waiting room.

modalContainerStyle - Returns the style object for the modal container.

modalContentStyle - Returns the style object for the modal content.

inputStyle - Returns the style object for the input field.

<app-waiting-room-modal
[isWaitingModalVisible]="true"
[waitingRoomCounter]="waitingRoomCounter"
[waitingRoomList]="waitingRoomList"
[roomName]="roomName"
[socket]="socket"
[position]="'topRight'"
[backgroundColor]="'#83c0e9'"
[parameters]="waitingRoomModalParams"
[onWaitingRoomClose]="closeWaitingRoomModal"
[onWaitingRoomFilterChange]="filterWaitingRoom"
[updateWaitingList]="updateWaitingList"
[onWaitingRoomItemPress]="handleWaitingRoomItemPress"
></app-waiting-room-modal>

Implements

  • OnChanges
  • OnInit

Accessors

  • get modalContainerStyle(): {
        position: string;
        top: string;
        left: string;
        width: string;
        height: string;
        backgroundColor: string;
        display: string;
        zIndex: string;
    }
  • Returns {
        position: string;
        top: string;
        left: string;
        width: string;
        height: string;
        backgroundColor: string;
        display: string;
        zIndex: string;
    }

    • position: string
    • top: string
    • left: string
    • width: string
    • height: string
    • backgroundColor: string
    • display: string
    • zIndex: string
  • get modalContentStyle(): {
        position: string;
        backgroundColor: string;
        borderRadius: string;
        padding: string;
        width: string;
        maxHeight: string;
        overflowY: string;
        top: string;
        bottom: string;
        left: string;
        right: string;
    }
  • Returns {
        position: string;
        backgroundColor: string;
        borderRadius: string;
        padding: string;
        width: string;
        maxHeight: string;
        overflowY: string;
        top: string;
        bottom: string;
        left: string;
        right: string;
    }

    • position: string
    • backgroundColor: string
    • borderRadius: string
    • padding: string
    • width: string
    • maxHeight: string
    • overflowY: string
    • top: string
    • bottom: string
    • left: string
    • right: string
  • get inputStyle(): {
        width: string;
        padding: string;
        borderRadius: string;
        border: string;
        fontSize: string;
        marginBottom: string;
    }
  • Returns {
        width: string;
        padding: string;
        borderRadius: string;
        border: string;
        fontSize: string;
        marginBottom: string;
    }

    • width: string
    • padding: string
    • borderRadius: string
    • border: string
    • fontSize: string
    • marginBottom: string

Constructors

Methods

  • A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.

    Returns void

  • A callback method that is invoked immediately after the default change detector has checked data-bound properties if at least one has changed, and before the view and content children are checked.

    Parameters

    • changes: SimpleChanges

      The changed properties.

    Returns void

Properties

isWaitingModalVisible: boolean = false

Visibility state of the modal.

waitingRoomCounter: number = 0

Counter for the number of participants in the waiting room.

waitingRoomList: WaitingRoomParticipant[] = []

List of participants in the waiting room.

roomName: string = ''

Name of the room.

socket: Socket<DefaultEventsMap, DefaultEventsMap> = ...

Socket instance for communication.

position: string = 'topRight'

Position of the modal on the screen.

backgroundColor: string = '#83c0e9'

Background color of the modal.

parameters: WaitingRoomModalParameters = ...

Parameters for the waiting room modal.

onWaitingRoomClose: (() => void) = ...

Function to call when the modal is closed.

onWaitingRoomFilterChange: ((value: string) => void) = ...

Function to call when the filter value changes.

updateWaitingList: ((data: WaitingRoomParticipant[]) => void) = ...

Function to update the waiting list.

onWaitingRoomItemPress: ((data: RespondToWaitingOptions) => void)

Function to call when an item in the waiting room is pressed.

faTimes: IconDefinition = faTimes

FontAwesome icon for the close button.

faCheck: IconDefinition = faCheck

FontAwesome icon for the check button.

waitingRoomList_s: WaitingRoomParticipant[] = []

Filtered list of participants in the waiting room.

waitingRoomCounter_s: number = 0

Counter for the filtered list of participants in the waiting room.

reRender: boolean = false

Flag to trigger re-rendering of the component.