import React, { useState } from 'react'; import Dialog from './Dialog'; import { Room, Access } from './Api'; import { SubmitInput } from './SubmitInput'; const descriptions: { [key: string]: string } = { name: t('bbb', 'Descriptive name of this room.'), welcome: t('bbb', 'This message is shown to all users in the chat area after they joined.'), maxParticipants: t('bbb', 'Sets a limit on the number of participants for this room. Zero means there is no limit.'), recording: t('bbb', 'If enabled, the moderator is able to start the recording.'), access: t('bbb', 'Public: Everyone knowing the link is able to join. Password: Guests have to provide a password. Waiting room: A moderator has to accept every guest before they can join. Internal: Only Nextcloud users can join.'), }; type Props = { room: Room; updateProperty: (key: string, value: string | boolean | number) => Promise; } const EditRoomDialog: React.FC = ({ room, updateProperty }) => { const [open, setOpen] = useState(false); function inputElement(label: string, field: string, type: 'text' | 'number' = 'text') { return (
updateProperty(field, value)} /> {descriptions[field] && {descriptions[field]}}
); } function selectElement(label: string, field: string, value: string, options: {[key: string]: string}, onChange: (value: string) => void) { return (
{(value === Access.Password && room.password) && } {descriptions[field] && {descriptions[field]}}
); } return ( <> { ev.preventDefault(), setOpen(true); }} title={t('bbb', 'Edit')} /> setOpen(false)} title={t('bbb', 'Edit "{room}"', { room: room.name })}> {inputElement(t('bbb', 'Name'), 'name')} {inputElement(t('bbb', 'Welcome'), 'welcome')} {inputElement(t('bbb', 'Participant limit'), 'maxParticipants', 'number')} {selectElement(t('bbb', 'Access'), 'access', room.access, { [Access.Public]: t('bbb', 'Public'), [Access.Password]: t('bbb', 'Internal + Password protection for guests'), [Access.WaitingRoom]: t('bbb', 'Internal + Waiting room for guests'), [Access.Internal]: t('bbb', 'Internal'), // [Access.InternalRestricted]: t('bbb', 'Restricted'), }, (value) => { console.log('access', value); updateProperty('access', value); })}
updateProperty('record', event.target.checked)} />
{descriptions.recording}
); }; export default EditRoomDialog;