132 lines
4.9 KiB
JavaScript
132 lines
4.9 KiB
JavaScript
import {gql} from '@apollo/client';
|
|
import React, { useState } from "react";
|
|
import usePatchedSubscription from "./usePatchedSubscription";
|
|
|
|
const ParentOfUserList = ({userId}) => {
|
|
const [shouldRender, setShouldRender] = useState(true);
|
|
return (
|
|
<div>
|
|
Userlist:
|
|
<input type="checkbox" id="users" name="" value="users" checked={shouldRender} onChange={
|
|
(e) => {
|
|
console.log(e.target.checked);
|
|
setShouldRender(e.target.checked);
|
|
}
|
|
}></input>
|
|
{shouldRender && <UserList userId={userId} />}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function UserList({userId}) {
|
|
const { loading, error, data } = usePatchedSubscription(
|
|
gql`subscription {
|
|
user(limit: 50, order_by: [
|
|
{role: asc},
|
|
{emojiTime: asc_nulls_last},
|
|
{isDialIn: desc},
|
|
{hasDrawPermissionOnCurrentPage: desc},
|
|
{name: asc},
|
|
{userId: asc}
|
|
]) {
|
|
userId
|
|
name
|
|
role
|
|
color
|
|
emoji
|
|
avatar
|
|
presenter
|
|
pinned
|
|
locked
|
|
authed
|
|
mobile
|
|
clientType
|
|
disconnected
|
|
loggedOut
|
|
voice {
|
|
joined
|
|
listenOnly
|
|
talking
|
|
muted
|
|
}
|
|
cameras {
|
|
streamId
|
|
}
|
|
hasDrawPermissionOnCurrentPage
|
|
lastBreakoutRoom {
|
|
isDefaultName
|
|
sequence
|
|
shortName
|
|
currentlyInRoom
|
|
}
|
|
connectionStatus {
|
|
connectionAliveAt
|
|
}
|
|
}
|
|
}`
|
|
);
|
|
|
|
return !loading && !error &&
|
|
(<table border="1">
|
|
<thead>
|
|
<tr>
|
|
{/*<th>Id</th>*/}
|
|
<th>Name</th>
|
|
<th>Role</th>
|
|
<th>Emoji</th>
|
|
<th>Avatar</th>
|
|
<th>Presenter</th>
|
|
<th>Mobile</th>
|
|
<th>ClientType</th>
|
|
<th>Sharing Camera</th>
|
|
<th>Whiteboard Multiuser</th>
|
|
<th>Pinned</th>
|
|
<th>Sharing Mic</th>
|
|
<th>ListenOnly</th>
|
|
<th>Talking</th>
|
|
<th>Muted</th>
|
|
<th>Locked</th>
|
|
<th>Last BreakoutRoom</th>
|
|
<th>connectionAliveAt</th>
|
|
<th>Disconnected (leftFlag)</th>
|
|
<th>LoggedOut</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{data.map((user) => {
|
|
console.log('user', user);
|
|
return (
|
|
<tr key={user.userId} style={{ color: user.color }}>
|
|
{/*<td>{user.userId}</td>*/}
|
|
<td>
|
|
<div style={{backgroundColor: user.color, padding: 2, borderRadius: "15px", color: "#FFFFFF"}}>{user.name}</div>
|
|
</td>
|
|
<td>{user.role}</td>
|
|
<td>{user.emoji}</td>
|
|
<td>{user.avatar}</td>
|
|
<td style={{backgroundColor: user.presenter === true ? '#A0DAA9' : ''}}>{user.presenter === true ? 'Yes' : 'No'}</td>
|
|
<td style={{backgroundColor: user.mobile === true ? '#A0DAA9' : ''}}>{user.mobile === true ? 'Yes' : 'No'}</td>
|
|
<td>{user.clientType}</td>
|
|
<td style={{backgroundColor: user.cameras.length > 0 ? '#A0DAA9' : ''}}>{user.cameras.length > 0 ? 'Yes' : 'No'}</td>
|
|
<td style={{backgroundColor: user.hasDrawPermissionOnCurrentPage == true ? '#A0DAA9' : ''}}>{user.hasDrawPermissionOnCurrentPage ? 'Yes' : 'No'}</td>
|
|
<td style={{backgroundColor: user.pinned === true ? '#A0DAA9' : ''}}>{user.pinned === true ? 'Yes' : 'No'}</td>
|
|
<td style={{backgroundColor: user.voice?.joined === true ? '#A0DAA9' : ''}}>{user.voice?.joined === true ? 'Yes' : 'No'}</td>
|
|
<td style={{backgroundColor: user.voice?.listenOnly === true ? '#A0DAA9' : ''}}>{user.voice?.listenOnly === true ? 'Yes' : 'No'}</td>
|
|
<td style={{backgroundColor: user.voice?.talking === true ? '#A0DAA9' : ''}}>{user.voice?.talking === true ? 'Yes' : 'No'}</td>
|
|
<td style={{backgroundColor: user.voice?.muted === true ? '#A0DAA9' : ''}}>{user.voice?.muted === true ? 'Yes' : 'No'}</td>
|
|
<td style={{backgroundColor: user.locked === true ? '#A0DAA9' : ''}}>{user.locked === true ? 'Yes' : 'No'}</td>
|
|
<td style={{backgroundColor: user.lastBreakoutRoom?.currentlyInRoom === true ? '#A0DAA9' : ''}}>
|
|
{user.lastBreakoutRoom?.shortName}{user.lastBreakoutRoom?.currentlyInRoom === true ? ' (Online)' : ''}
|
|
</td>
|
|
<td>{user?.connectionStatus?.connectionAliveAt}</td>
|
|
<td style={{backgroundColor: user.disconnected === true ? '#A0DAA9' : ''}}>{user.disconnected === true ? 'Yes' : 'No'}</td>
|
|
<td style={{backgroundColor: user.loggedOut === true ? '#A0DAA9' : ''}}>{user.loggedOut === true ? 'Yes' : 'No'}</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>);
|
|
}
|
|
|
|
export default ParentOfUserList;
|