Class WaitingRoomModal

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

Component

Selector

app-waiting-room-modal

Standalone

true

Imports

CommonModule, FontAwesomeModule, FormsModule

Template Url

./waiting-room-modal.component.html

Style Urls

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

Method

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

Method

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

Method

updateParameters - Updates the parameters for the waiting room modal.

Method

handleModalClose - Handles the closing of the modal.

Method

handleFilterChange - Handles the change in the filter input.

Method

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

Getter

modalContainerStyle - Returns the style object for the modal container.

Getter

modalContentStyle - Returns the style object for the modal content.

Getter

inputStyle - Returns the style object for the input field.

Example

<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

modalContainerStyle modalContentStyle inputStyle

Constructors

constructor

Methods

ngOnInit ngOnChanges updateParameters handleModalClose handleFilterChange handleItemPress

Properties

isWaitingModalVisible waitingRoomCounter waitingRoomList roomName socket position backgroundColor parameters onWaitingRoomClose onWaitingRoomFilterChange updateWaitingList onWaitingRoomItemPress faTimes faCheck waitingRoomList_s waitingRoomCounter_s reRender

Accessors

modalContainerStyle

  • 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

modalContentStyle

  • 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

inputStyle

  • 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

constructor

Methods

ngOnInit

  • ngOnInit(): void

  • 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

ngOnChanges

  • ngOnChanges(changes): 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

updateParameters

handleModalClose

handleFilterChange

handleItemPress

Properties

isWaitingModalVisible

isWaitingModalVisible: boolean = false

Visibility state of the modal.

waitingRoomCounter

waitingRoomCounter: number = 0

Counter for the number of participants in the waiting room.

waitingRoomList

waitingRoomList: WaitingRoomParticipant[] = []

List of participants in the waiting room.

roomName

roomName: string = ''

Name of the room.

socket

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

Socket instance for communication.

position

position: string = 'topRight'

Position of the modal on the screen.

backgroundColor

backgroundColor: string = '#83c0e9'

Background color of the modal.

parameters

parameters: WaitingRoomModalParameters = ...

Parameters for the waiting room modal.

onWaitingRoomClose

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

Function to call when the modal is closed.

onWaitingRoomFilterChange

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

Function to call when the filter value changes.

updateWaitingList

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

Function to update the waiting list.

onWaitingRoomItemPress

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

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

faTimes

faTimes: IconDefinition = faTimes

FontAwesome icon for the close button.

faCheck

faCheck: IconDefinition = faCheck

FontAwesome icon for the check button.

waitingRoomList_s

waitingRoomList_s: WaitingRoomParticipant[] = []

Filtered list of participants in the waiting room.

waitingRoomCounter_s

waitingRoomCounter_s: number = 0

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

reRender

reRender: boolean = false

Flag to trigger re-rendering of the component.

Settings

Member Visibility

On This Page

Accessors
Constructors
Methods
Properties