Class CoHostModal

CoHostModal component allows managing co-host settings for an event.

Selector

app-co-host-modal

Inputs

  • isCoHostModalVisible (boolean): A boolean value that determines whether the modal is visible. Default is false.
  • currentCohost (string): The current co-host for the event. Default is 'No coHost'.
  • participants (Participant[]): An array of participants in the event.
  • coHostResponsibility (CoHostResponsibility[]): An array of co-host responsibilities.
  • position (string): The position of the modal. Default is 'topRight'.
  • backgroundColor (string): The background color of the modal. Default is '#83c0e9'.
  • roomName (string): The name of the room.
  • showAlert (ShowAlert): A function to show alerts.

Outputs

  • updateCoHostResponsibility (coHostResponsibility: CoHostResponsibility[]): A function to update co-host responsibilities.
  • updateCoHost (coHost: string): A function to update the co-host.
  • updateIsCoHostModalVisible (isCoHostModalVisible: boolean): A function to update the visibility of the modal.
  • socket (Socket): The socket object.

Methods

  • ngOnInit(): Lifecycle hook that is called after the component is initialized. It sets the default value for onModifyCoHost if not provided.
  • ngOnChanges(changes: SimpleChanges): Lifecycle hook that is called when any data-bound property of the component changes. It initializes the responsibilities and calculates the modal width.
  • initializeResponsibilities(): Initializes the responsibilities.
  • get filteredParticipants(): Returns the filtered participants.
  • handleToggleSwitch(key: string): Handles the toggle switch for the given key.
  • handleSave(): Handles the save action.
  • handleClose(): Handles the close action.
  • calculateModalWidth(): Calculates the modal width.
  • modalContainerStyle(): Returns the modal container style.
  • modalContentStyle(): Returns the modal content style.

Dependencies

  • CommonModule: Angular's common module is imported for common directives.
  • FontAwesomeModule: Angular's font awesome module is imported for icons.
  • FormsModule: Angular's forms module is imported for form-related directives.
  • ModifyCoHostSettings: The ModifyCoHostSettings service is used to modify co-host settings.

Styles

  • .container: The container style.

Example

<app-co-host-modal
 [isCoHostModalVisible]="isCoHostModalVisible"
[currentCohost]="currentCohost"
[participants]="participants"
[coHostResponsibility]="coHostResponsibility"
[position]="position"
[backgroundColor]="backgroundColor"
[roomName]="roomName"
[showAlert]="showAlert"
[updateCoHostResponsibility]="updateCoHostResponsibility"
[updateCoHost]="updateCoHost"
[updateIsCoHostModalVisible]="updateIsCoHostModalVisible"
[socket]="socket"
[onCoHostClose]="onCoHostClose"
[onModifyCoHost]="onModifyCoHost">
</app-co-host-modal>

Implements

  • OnChanges
  • OnInit

Accessors

filteredParticipants

Constructors

constructor

Methods

ngOnInit ngOnChanges initializeResponsibilities handleToggleSwitch handleSave handleClose calculateModalWidth modalContainerStyle modalContentStyle

Properties

isCoHostModalVisible currentCohost participants coHostResponsibility position backgroundColor roomName showAlert updateCoHostResponsibility updateCoHost updateIsCoHostModalVisible socket onCoHostClose onModifyCoHost faTimes selectedCohost CoHostResponsibilityCopy CoHostResponsibilityCopyAlt responsibilities responsibilityKeys modalWidth

Accessors

filteredParticipants

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

initializeResponsibilities

handleToggleSwitch

handleSave

handleClose

calculateModalWidth

modalContainerStyle

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

  • Returns {
        display: string;
        position: string;
        top: string;
        left: string;
        width: string;
        height: string;
        backgroundColor: string;
        zIndex: string;
    }

    • display: string
    • position: string
    • top: string
    • left: string
    • width: string
    • height: string
    • backgroundColor: string
    • zIndex: string

modalContentStyle

  • modalContentStyle(): {
        backgroundColor: string;
        borderRadius: string;
        padding: string;
        width: string;
        maxHeight: string;
        overflowX: string;
        overflowY: string;
        position: string;
        top: string;
        bottom: string;
        left: string;
        right: string;
    }

  • Returns {
        backgroundColor: string;
        borderRadius: string;
        padding: string;
        width: string;
        maxHeight: string;
        overflowX: string;
        overflowY: string;
        position: string;
        top: string;
        bottom: string;
        left: string;
        right: string;
    }

    • backgroundColor: string
    • borderRadius: string
    • padding: string
    • width: string
    • maxHeight: string
    • overflowX: string
    • overflowY: string
    • position: string
    • top: string
    • bottom: string
    • left: string
    • right: string

Properties

isCoHostModalVisible

isCoHostModalVisible: boolean = false

currentCohost

currentCohost: string = 'No coHost'

participants

participants: Participant[] = []

coHostResponsibility

coHostResponsibility: CoHostResponsibility[] = []

position

position: string = 'topRight'

backgroundColor

backgroundColor: string = '#83c0e9'

roomName

roomName: string = ''

showAlert

showAlert: ShowAlert = ...

updateCoHostResponsibility

updateCoHostResponsibility: ((coHostResponsibility: CoHostResponsibility[]) => void) = ...

updateCoHost

updateCoHost: ((coHost: string) => void) = ...

updateIsCoHostModalVisible

updateIsCoHostModalVisible: ((isCoHostModalVisible: boolean) => void) = ...

socket

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

onCoHostClose

onCoHostClose: (() => void)

onModifyCoHost

onModifyCoHost: ((settings: ModifyCoHostSettingsOptions) => void)

faTimes

faTimes: IconDefinition = faTimes

selectedCohost

selectedCohost: string = ...

CoHostResponsibilityCopy

CoHostResponsibilityCopy: any[] = []

CoHostResponsibilityCopyAlt

CoHostResponsibilityCopyAlt: any[] = []

responsibilities

responsibilities: {
    [key: string]: boolean;
} = {}

responsibilityKeys

responsibilityKeys: {
    manageKey: string;
    dedicateKey: string;
}[] = []

modalWidth

modalWidth: number

Settings

Member Visibility

On This Page

Accessors
Constructors
Methods
Properties