122 lines
4.1 KiB
JavaScript
122 lines
4.1 KiB
JavaScript
import React from 'react';
|
|
import logo from './../../logo-small.svg';
|
|
import './AppAdmin.css';
|
|
import { Paper, Container, AppBar, Tabs, Tab, Box } from '@material-ui/core';
|
|
import PropTypes from 'prop-types';
|
|
import Typography from '@material-ui/core/Typography';
|
|
import TopTenSongs from "../TopTenSongs/TopTenSongs";
|
|
import TopTenSingers from "../TopTenSingers/TopTenSingers";
|
|
import DuetData from "../DuetData/DuetData";
|
|
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@material-ui/core';
|
|
import ProblemContainer from "../ProblemContainer/ProblemContainer";
|
|
|
|
function TabPanel(props) {
|
|
const { children, value, index, ...other } = props;
|
|
|
|
return (
|
|
<Typography
|
|
component="div"
|
|
role="tabpanel"
|
|
hidden={value !== index}
|
|
id={`vertical-tabpanel-${index}`}
|
|
aria-labelledby={`vertical-tab-${index}`}
|
|
{...other}
|
|
>
|
|
<Box p={3}>{children}</Box>
|
|
</Typography>
|
|
);
|
|
}
|
|
|
|
TabPanel.propTypes = {
|
|
children: PropTypes.node,
|
|
index: PropTypes.any.isRequired,
|
|
value: PropTypes.any.isRequired
|
|
};
|
|
|
|
function a11yProps(index) {
|
|
return {
|
|
id: `tab-${index}`,
|
|
"aria-controls": `tabpanel-${index}`
|
|
};
|
|
}
|
|
|
|
function AppAdmin() {
|
|
const [page, setPage] = React.useState(0);
|
|
if (
|
|
(window.location.href.split("/").length < 6) ||
|
|
(window.location.href.split("/")[3].search(/^admin/) < 0) ||
|
|
(window.location.href.split("/")[5].length != 48)
|
|
) {
|
|
return (
|
|
<ProblemContainer />
|
|
)
|
|
}
|
|
|
|
const channelName = window.location.href.split("/")[4]
|
|
const adminToken = window.location.href.split("/")[5]
|
|
const csvURL = "/csv/"+ channelName + "/" + adminToken
|
|
const tsvURL = "/tsv/"+ channelName + "/" + adminToken
|
|
|
|
function handleChange(event, newValue) {
|
|
setPage(newValue);
|
|
}
|
|
|
|
return (
|
|
<Container className="App">
|
|
<Paper>
|
|
<img src={logo} className="App-logo" alt="logo" />
|
|
<Typography variant="h4" component="h1" gutterBottom>
|
|
Twitch Sings Tools
|
|
</Typography>
|
|
<AppBar position="static" className="App-menu">
|
|
<Tabs value={page} onChange={handleChange} aria-label="simple tabs example">
|
|
<Tab label="Top Songs" {...a11yProps(0)}/>
|
|
<Tab label="Top Singers" {...a11yProps(1)}/>
|
|
<Tab label="Data" {...a11yProps(2)}/>
|
|
<Tab label="Export" {...a11yProps(3)}/>
|
|
</Tabs>
|
|
</AppBar>
|
|
<TabPanel value={page} index={0}>
|
|
<TopTenSongs />
|
|
</TabPanel>
|
|
<TabPanel value={page} index={1}>
|
|
<TopTenSingers />
|
|
</TabPanel>
|
|
<TabPanel value={page} index={2}>
|
|
<DuetData />
|
|
</TabPanel>
|
|
<TabPanel value={page} index={3}>
|
|
<Typography variant="h5" component="h2" gutterBottom>
|
|
Download your data as :
|
|
</Typography>
|
|
<TableContainer component={Paper}>
|
|
<Table>
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableCell>TSV</TableCell>
|
|
<TableCell>CSV</TableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
<TableRow>
|
|
<TableCell><a href={tsvURL}>here</a></TableCell>
|
|
<TableCell><a href={csvURL}>here</a></TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
<Typography variant="h5" component="h2" gutterBottom>
|
|
Note: Excel is not very good at handling CSV format it seems...
|
|
</Typography>
|
|
<Typography component="p" gutterBottom>It is important to "Import Data" not "Open" the csv in many cases (8 year old discussion of this behaviour <a href="https://superuser.com/questions/407082/easiest-way-to-open-csv-with-commas-in-excel">here</a>) - from that post the instructions are :</Typography>
|
|
<Typography component="q" gutterBottom>In Excel, DATA tab, in the Get External Data subsection, click "From Text" and import your CSV in the Wizard.</Typography>
|
|
<Typography component="p" gutterBottom>LibreOffice calc kinda just works...just sayin' ;-)</Typography>
|
|
|
|
</TabPanel>
|
|
</Paper>
|
|
</Container>
|
|
);
|
|
}
|
|
|
|
export default AppAdmin;
|