night0721/nyx-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Refactored commands page have the ui be able to control commands

Browse source 
Made a Chakra UI table that has state on switches that loop over commands
This commit is contained in:
qt-coder 2021-06-28 17:36:41 +08:00
parent 253198b9f9
commit a3037f3dad
1 changed files with 58 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

99
pages/controlpanel/commands.js
View file

@ -1,35 +1,50 @@
import React from 'react'; import React from 'react';
import { makeStyles } from '@material-ui/core/styles'; import {
import Table from '@material-ui/core/Table'; Table,
import TableBody from '@material-ui/core/TableBody'; Thead,
import TableCell from '@material-ui/core/TableCell'; Tbody,
import TableContainer from '@material-ui/core/TableContainer'; Tr,
import TableHead from '@material-ui/core/TableHead'; Th,
import TableRow from '@material-ui/core/TableRow'; Td,
import Paper from '@material-ui/core/Paper'; TableCaption,
Switch
} from "@chakra-ui/react"
import Head from 'next/head' import Head from 'next/head'
import { useSession } from 'next-auth/client' import { useSession } from 'next-auth/client'
const useStyles = makeStyles({
table: {
minWidth: 650,
},
});
function createData(name, description, status) { function Controller({initialState}) {
return { name, description, status }; const [online, setOnline] = React.useState(initialState)
React.useEffect(()=>{
// fake post req
console.log(online)
}, [online])
return (
<Switch
size="lg"
colorScheme={'teal'}
isChecked={online}
value={online}
onChange={() => { setOnline(!online) }}
/>
)
} }
const rows = [
createData('Command', 'Description', true),
createData('Command', 'Description', true),
createData('Command', 'Description', true),
createData('Command', 'Description', true),
];
function Commands() { function Commands() {
const [session, loading] = useSession() const [session, loading] = useSession()
const classes = useStyles();
const [commands, setCommands] = React.useState(
[
{command: 'Help', online: true},
{command: 'Help', online: true},
{command: 'Help', online: true},
{command: 'Help', online: true},
]
)
return ( return (
<> <>
@ -38,28 +53,26 @@ function Commands() {
<Head> <Head>
<title>Cath Commands</title> <title>Cath Commands</title>
</Head> </Head>
<TableContainer component={Paper} style={{ background: '#1F1B24' }}> <Table variant="simple">
<Table className={classes.table} aria-label="simple table"> <TableCaption>Command Controls</TableCaption>
<TableHead> <Thead>
<TableRow> <Tr>
<TableCell style={{ color: '#fff' }}>Commands</TableCell> <Th>Command</Th>
<TableCell align="right" style={{ color: '#fff' }}>Description</TableCell> <Th>Enabled</Th>
<TableCell align="right" style={{ color: '#fff' }}>Status</TableCell> </Tr>
</TableRow> </Thead>
</TableHead> <Tbody>
<TableBody> {commands.map((command, idx)=>(
{rows.map((row) => ( <Tr key={idx}>
<TableRow key={row.name}> <Td>{command.command}</Td>
<TableCell component="th" scope="row" style={{ color: '#fff' }}> <Td>
{row.name} <Controller initialState={command.online}/>
</TableCell> </Td>
<TableCell align="right" style={{ color: '#fff' }}>{row.description}</TableCell> </Tr>
<TableCell align="right" style={{ color: '#fff' }}>{row.status ? 'Online' : 'Offline'}</TableCell>
</TableRow>
))} ))}
</TableBody>
</Tbody>
</Table> </Table>
</TableContainer>
</> </>
} {!session && <> } {!session && <>
<h1>Seems like you&apos;re not logged in. Log in to get started!</h1> <h1>Seems like you&apos;re not logged in. Log in to get started!</h1>