101 lines
3.8 KiB
TypeScript
101 lines
3.8 KiB
TypeScript
import React, {Component, SFC} from 'react';
|
|
import {Link} from 'react-router-dom';
|
|
import Grid from '@material-ui/core/Grid';
|
|
import Paper from '@material-ui/core/Paper';
|
|
import Table from '@material-ui/core/Table';
|
|
import TableBody from '@material-ui/core/TableBody';
|
|
import TableCell from '@material-ui/core/TableCell';
|
|
import TableHead from '@material-ui/core/TableHead';
|
|
import TableRow from '@material-ui/core/TableRow';
|
|
import Settings from '@material-ui/icons/Settings';
|
|
import {Switch, Button} from '@material-ui/core';
|
|
import DefaultPage from '../common/DefaultPage';
|
|
import ToggleVisibility from '../common/ToggleVisibility';
|
|
import {observer} from 'mobx-react';
|
|
import {inject, Stores} from '../inject';
|
|
|
|
@observer
|
|
class Plugins extends Component<Stores<'pluginStore'>> {
|
|
public componentDidMount = () => this.props.pluginStore.refresh();
|
|
|
|
public render() {
|
|
const {
|
|
props: {pluginStore},
|
|
} = this;
|
|
const plugins = pluginStore.getItems();
|
|
return (
|
|
<DefaultPage title="Plugins" hideButton={true} maxWidth={1000}>
|
|
<Grid item xs={12}>
|
|
<Paper elevation={6}>
|
|
<Table id="plugin-table">
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableCell>ID</TableCell>
|
|
<TableCell>Enabled</TableCell>
|
|
<TableCell>Name</TableCell>
|
|
<TableCell>Token</TableCell>
|
|
<TableCell>Details</TableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{plugins.map((plugin: IPlugin) => {
|
|
return (
|
|
<Row
|
|
key={plugin.token}
|
|
id={plugin.id}
|
|
token={plugin.token}
|
|
name={plugin.name}
|
|
enabled={plugin.enabled}
|
|
fToggleStatus={() =>
|
|
this.props.pluginStore.changeEnabledState(
|
|
plugin.id,
|
|
!plugin.enabled
|
|
)
|
|
}
|
|
/>
|
|
);
|
|
})}
|
|
</TableBody>
|
|
</Table>
|
|
</Paper>
|
|
</Grid>
|
|
</DefaultPage>
|
|
);
|
|
}
|
|
}
|
|
|
|
interface IRowProps {
|
|
id: number;
|
|
name: string;
|
|
token: string;
|
|
enabled: boolean;
|
|
fToggleStatus: VoidFunction;
|
|
}
|
|
|
|
const Row: SFC<IRowProps> = observer(({name, id, token, enabled, fToggleStatus}) => (
|
|
<TableRow>
|
|
<TableCell>{id}</TableCell>
|
|
<TableCell>
|
|
<Switch
|
|
checked={enabled}
|
|
onClick={fToggleStatus}
|
|
className="switch"
|
|
data-enabled={enabled}
|
|
/>
|
|
</TableCell>
|
|
<TableCell>{name}</TableCell>
|
|
<TableCell>
|
|
<ToggleVisibility value={token} style={{display: 'flex', alignItems: 'center'}} />
|
|
</TableCell>
|
|
<TableCell numeric padding="none">
|
|
<Link to={'/plugins/' + id}>
|
|
<Button>
|
|
<Settings />
|
|
</Button>
|
|
</Link>
|
|
</TableCell>
|
|
</TableRow>
|
|
));
|
|
|
|
export default inject('pluginStore')(Plugins);
|