cloud_bbb/ts/Manager/App.tsx

181 lines
4.6 KiB
TypeScript
Raw Normal View History

2020-04-26 11:36:41 +02:00
import React, { useEffect, useState } from 'react';
import './App.scss';
import RoomRow from './RoomRow';
2020-04-26 22:41:06 +02:00
import { SortArrow } from './SortArrow';
import { api, Room, Restriction, Access } from '../Common/Api';
2020-04-26 11:36:41 +02:00
import NewRoomForm from './NewRoomForm';
export type SortKey = 'name' | 'welcome' | 'maxParticipants' | 'record';
2020-09-01 09:48:24 +02:00
enum SortOrder { DESC = -1, ASC = 1 }
2020-04-26 11:36:41 +02:00
function sortRooms(key: SortKey, orderBy: SortOrder) {
return (a: Room, b: Room) => {
switch (key) {
case 'name':
case 'welcome':
return a[key].localeCompare(b[key]) * orderBy;
case 'maxParticipants':
return (a.maxParticipants - b.maxParticipants) * orderBy;
case 'record':
if (a.record && !b.record) {
return 1 * orderBy;
}
if (!a.record && b.record) {
return -1 * orderBy;
}
2020-04-26 11:36:41 +02:00
return 0;
2020-04-26 11:36:41 +02:00
}
2020-04-27 16:50:45 +02:00
};
2020-04-26 11:36:41 +02:00
}
type Props = {
}
const App: React.FC<Props> = () => {
const [isLoaded, setLoaded] = useState(false);
2020-06-17 10:52:15 +02:00
const [error, setError] = useState<string>('');
const [restriction, setRestriction] = useState<Restriction>();
2020-04-26 11:36:41 +02:00
const [rooms, setRooms] = useState<Room[]>([]);
const [orderBy, setOrderBy] = useState<SortKey>('name');
const [sortOrder, setSortOrder] = useState(SortOrder.ASC);
const rows = rooms.sort(sortRooms(orderBy, sortOrder)).map(room => <RoomRow room={room} restriction={restriction} key={room.id} updateRoom={updateRoom} deleteRoom={deleteRoom} />);
2020-04-26 11:36:41 +02:00
useEffect(() => {
Promise.all([
loadRestriction(),
loadRooms(),
]).catch(() => {
setError(t('bbb', 'Server error'));
}).then(() => {
setLoaded(true);
});
}, []);
function loadRestriction() {
return api.getRestriction().then(restriction => {
setRestriction(restriction);
}).catch(err => {
console.warn('Could not load restriction', err);
throw err;
});
}
2020-04-26 11:36:41 +02:00
function loadRooms() {
return api.getRooms().then(rooms => {
2020-04-26 11:36:41 +02:00
setRooms(rooms);
2020-06-17 10:52:15 +02:00
}).catch((err) => {
console.warn('Could not load rooms', err);
throw err;
2020-04-26 11:36:41 +02:00
});
}
2020-04-26 11:36:41 +02:00
function onOrderBy(key: SortKey) {
if (orderBy === key) {
setSortOrder(sortOrder === SortOrder.ASC ? SortOrder.DESC : SortOrder.ASC);
}
setOrderBy(key);
}
function addRoom(name: string) {
if (!name) {
return Promise.resolve();
2020-04-26 11:36:41 +02:00
}
let access = Access.Public;
const disabledRoomTypes = restriction?.roomTypes || [];
if (disabledRoomTypes.length > 0 && disabledRoomTypes.indexOf(access) > -1) {
access = Object.values(Access).filter(a => disabledRoomTypes.indexOf(a) < 0)[0] as Access;
}
const maxParticipants = restriction?.maxParticipants || 0;
return api.createRoom(name, access, maxParticipants).then(room => {
2020-04-26 11:36:41 +02:00
setRooms(rooms.concat([room]));
});
}
function updateRoom(room: Room) {
2020-06-04 14:01:31 +02:00
return api.updateRoom(room).then(updatedRoom => {
2020-04-26 11:36:41 +02:00
setRooms(rooms.map(room => {
if (room.id === updatedRoom.id) {
return updatedRoom;
}
return room;
}));
});
}
function deleteRoom(id: number) {
api.deleteRoom(id).then(deletedRoom => {
setRooms(rooms.filter(room => room.id !== deletedRoom.id));
});
}
const maxRooms = restriction?.maxRooms || 0;
2020-08-29 15:10:52 +02:00
const quota = maxRooms < 0 ? t('bbb', 'unlimited') : rooms.filter(room => room.userId === OC.currentUser).length + ' / ' + maxRooms;
2020-04-26 11:36:41 +02:00
return (
2020-04-26 13:26:34 +02:00
<div id="bbb-react-root"
2020-04-26 11:36:41 +02:00
onClick={() => { /* @TODO hide edit inputs */ }}>
<table>
<thead>
<tr>
<th />
2020-04-26 11:36:41 +02:00
<th />
<th />
<th onClick={() => onOrderBy('name')}>
2020-05-16 14:44:21 +02:00
{t('bbb', 'Name')} <SortArrow name='name' value={orderBy} direction={sortOrder} />
2020-04-26 11:36:41 +02:00
</th>
2020-06-17 10:56:28 +02:00
<th />
2020-06-17 11:08:31 +02:00
<th onClick={() => onOrderBy('maxParticipants')} className="bbb-shrink">
2020-05-16 14:44:21 +02:00
{t('bbb', 'Max')} <SortArrow name='maxParticipants' value={orderBy} direction={sortOrder} />
2020-04-26 11:36:41 +02:00
</th>
2020-06-17 11:08:31 +02:00
<th onClick={() => onOrderBy('record')} className="bbb-shrink">
2020-05-16 14:44:21 +02:00
{t('bbb', 'Record')} <SortArrow name='record' value={orderBy} direction={sortOrder} />
2020-04-26 11:36:41 +02:00
</th>
<th>
{t('bbb', 'Recordings')}
</th>
2020-04-26 11:36:41 +02:00
<th />
2020-06-04 14:01:31 +02:00
<th />
2020-04-26 11:36:41 +02:00
</tr>
</thead>
<tbody>
{rows}
</tbody>
<tfoot>
<tr>
<td colSpan={3}>
2020-06-17 10:52:15 +02:00
{error && <><span className="icon icon-error icon-visible"></span> {error}</>}
{!isLoaded && <span className="icon icon-loading-small icon-visible"></span>}
</td>
2020-04-26 11:36:41 +02:00
<td>
{(maxRooms > rows.length || maxRooms < 0) ?
<NewRoomForm addRoom={addRoom} /> :
<p className="text-muted">{maxRooms === 0 ?
t('bbb', 'You are not permitted to create a room.') :
t('bbb', 'You exceeded the maximum number of rooms.')
}</p>}
2020-04-26 11:36:41 +02:00
</td>
2020-08-29 09:29:43 +02:00
<td />
<td colSpan={3}>
2020-08-29 15:10:52 +02:00
<p className="text-muted">{t('bbb', 'Room quota:')} {quota}</p>
2020-08-29 09:29:43 +02:00
</td>
2020-04-26 11:36:41 +02:00
</tr>
</tfoot>
</table>
</div>
2020-04-27 16:50:45 +02:00
);
};
2020-04-26 11:36:41 +02:00
export default App;