Cache refresh may work, local testing easier
Signed-off-by: Martyn Ranyard <m@rtyn.berlin>
This commit is contained in:
parent
b5a0d8bda2
commit
f49d3ec9ab
File diff suppressed because it is too large
Load Diff
|
|
@ -25,3 +25,18 @@
|
|||
.App-menu {
|
||||
max-width: 98%;
|
||||
}
|
||||
|
||||
.Footer {
|
||||
max-width: 98%;
|
||||
background-color: #6207a4 !important;
|
||||
}
|
||||
|
||||
.Footer a {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.FooterCell {
|
||||
border: none !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
import React from 'react';
|
||||
import logo from './../../logo.svg';
|
||||
import './App.css';
|
||||
import Container from '@material-ui/core/Container';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import { Button, Paper } from '@material-ui/core';
|
||||
import { Button, Paper, Container, AppBar, Table, TableBody, TableCell, TableContainer, TableRow } from '@material-ui/core';
|
||||
|
||||
function App() {
|
||||
const client_id = "sau3e70wvs369jw1u25ex8g3cve599"
|
||||
|
|
@ -44,6 +43,22 @@ function App() {
|
|||
<Typography component="p" gutterBottom>
|
||||
...Coming "Soon"(tm)
|
||||
</Typography>
|
||||
<AppBar position="static" className="Footer">
|
||||
<TableContainer component={Container}>
|
||||
<Table><TableBody>
|
||||
<TableRow className="FooterRow">
|
||||
<TableCell className="FooterCell"><a href="https://discord.gg/sVgZeRt">Discord</a></TableCell>
|
||||
<TableCell className="FooterCell"><a href="https://git.martyn.berlin/martyn/twitchsingstools">Source Code</a></TableCell>
|
||||
<TableCell className="FooterCell"><a href="https://twitch.tv/iMartynOnTwitch">Martyn's Twitch</a></TableCell>
|
||||
</TableRow>
|
||||
<TableRow className="FooterRow">
|
||||
<TableCell className="FooterCell">Announcements, Support, Optional notifications</TableCell>
|
||||
<TableCell className="FooterCell">Geek out at the really hacky source code from an SRE type person</TableCell>
|
||||
<TableCell className="FooterCell">Streaming and singing is my hobby, not my job, so only if you want to...</TableCell>
|
||||
</TableRow>
|
||||
</TableBody></Table>
|
||||
</TableContainer>
|
||||
</AppBar>
|
||||
</Paper>
|
||||
</Container>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -26,3 +26,18 @@
|
|||
.App-menu {
|
||||
max-width: 98%;
|
||||
}
|
||||
|
||||
.Footer {
|
||||
max-width: 98%;
|
||||
background-color: #6207a4 !important;
|
||||
}
|
||||
|
||||
.Footer a {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.FooterCell {
|
||||
border: none !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@ import Typography from '@material-ui/core/Typography';
|
|||
import TopTenSongs from "../TopTenSongs/TopTenSongs";
|
||||
import TopTenSingers from "../TopTenSingers/TopTenSingers";
|
||||
import DuetData from "../DuetData/DuetData";
|
||||
import CacheDeets from "../CacheDeets/CacheDeets";
|
||||
import BotDeets from "../BotDeets/BotDeets";
|
||||
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@material-ui/core';
|
||||
import ProblemContainer from "../ProblemContainer/ProblemContainer";
|
||||
|
||||
|
|
@ -40,82 +42,120 @@ function a11yProps(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)
|
||||
) {
|
||||
class AppAdmin extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.setPage = this.setPage.bind(this);
|
||||
this.state = {page: 0};
|
||||
}
|
||||
|
||||
setPage(pageNum) {
|
||||
this.setState({page: pageNum})
|
||||
}
|
||||
|
||||
render() {
|
||||
const page = this.state.page
|
||||
if (
|
||||
(window.location.href.split("/").length < 6) ||
|
||||
(window.location.href.split("/")[3].search(/^admin/) < 0) ||
|
||||
(window.location.href.split("/")[5].length !== 48)
|
||||
) {
|
||||
if (window.location.href.split("/")[2] !== "192.168.1.111:3000") {
|
||||
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
|
||||
const setPage = this.setPage
|
||||
|
||||
function handleChange(event, newValue) {
|
||||
setPage(newValue);
|
||||
}
|
||||
|
||||
return (
|
||||
<ProblemContainer />
|
||||
)
|
||||
}
|
||||
<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)}/>
|
||||
<Tab label="Cache Details" {...a11yProps(4)}/>
|
||||
<Tab label="Chatbot" {...a11yProps(4)}/>
|
||||
</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>
|
||||
|
||||
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>
|
||||
</TabPanel>
|
||||
<TabPanel value={page} index={4}>
|
||||
<CacheDeets />
|
||||
</TabPanel>
|
||||
<TabPanel value={page} index={5}>
|
||||
<BotDeets />
|
||||
</TabPanel>
|
||||
<AppBar position="static" className="Footer">
|
||||
<TableContainer component={Container}>
|
||||
<Table><TableBody>
|
||||
<TableRow className="FooterRow">
|
||||
<TableCell className="FooterCell"><a href="https://discord.gg/sVgZeRt">Discord</a></TableCell>
|
||||
<TableCell className="FooterCell"><a href="https://git.martyn.berlin/martyn/twitchsingstools">Source Code</a></TableCell>
|
||||
<TableCell className="FooterCell"><a href="https://twitch.tv/iMartynOnTwitch">Martyn's Twitch</a></TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell><a href={tsvURL}>here</a></TableCell>
|
||||
<TableCell><a href={csvURL}>here</a></TableCell>
|
||||
<TableRow className="FooterRow">
|
||||
<TableCell className="FooterCell">Announcements, Support, Optional notifications</TableCell>
|
||||
<TableCell className="FooterCell">Geek out at the really hacky source code from an SRE type person</TableCell>
|
||||
<TableCell className="FooterCell">Streaming and singing is my hobby, not my job, so only if you want to...</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>
|
||||
);
|
||||
</TableBody></Table>
|
||||
</TableContainer>
|
||||
</AppBar>
|
||||
</Paper>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default AppAdmin;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,53 @@
|
|||
import React, { useEffect } from 'react';
|
||||
import { Container, Typography, Button } from '@material-ui/core';
|
||||
|
||||
const channelName = window.location.href.split("/")[4]
|
||||
const adminToken = window.location.href.split("/")[5]
|
||||
const dataURL = "/botdeets/"+ channelName + "/" + adminToken
|
||||
|
||||
function BotDeets() {
|
||||
|
||||
const [botState, setBotState] = React.useState({loading: true, botData: []})
|
||||
useEffect(() => {
|
||||
// We should only fetch once!
|
||||
if (botState.loading) {
|
||||
fetch(dataURL).then((res) => res.json().then((data)=>{
|
||||
setBotState({botData: data, loading: false })
|
||||
}));
|
||||
}
|
||||
}, [setBotState, botState.loading]);
|
||||
|
||||
if (botState.loading) {
|
||||
return <p>Sorry, still loading...</p>
|
||||
}
|
||||
|
||||
let dd = botState.botData
|
||||
if (dd.hasleft) {
|
||||
return (
|
||||
<Container>
|
||||
<Typography variant="h5" component="h2" gutterBottom>
|
||||
The chatbot is currently <b>not</b> in your channel. To change the settings, invite it to your channel using the button below :
|
||||
</Typography>
|
||||
<Typography variant="p">
|
||||
You really don't wanna do that, because it's not ready yet.
|
||||
</Typography>
|
||||
<Typography variant="p">
|
||||
<Button variant="contained" color="primary">Join my channel!</Button>
|
||||
</Typography>
|
||||
</Container>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<Container>
|
||||
<Typography variant="h5" component="h2" gutterBottom>
|
||||
Coming soon! Bot control panel!
|
||||
</Typography>
|
||||
<Typography component="tt" gutterBottom>
|
||||
{dd}
|
||||
</Typography>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default BotDeets;
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
import React, { useEffect } from 'react';
|
||||
import { Container, Typography, Button } from '@material-ui/core';
|
||||
|
||||
const channelName = window.location.href.split("/")[4]
|
||||
const adminToken = window.location.href.split("/")[5]
|
||||
const dataURL = "/cachedeets/"+ channelName + "/" + adminToken
|
||||
const forceURL = "/force/"+ channelName + "/" + adminToken
|
||||
|
||||
function CacheDeets() {
|
||||
|
||||
function handleClick(e) {
|
||||
setCacheState({cacheData: null, loading: true })
|
||||
fetch(forceURL).then((res) => res.json().then((data)=>{
|
||||
setCacheState({cacheData: data, loading: false })
|
||||
}));
|
||||
console.log('The link was clicked.');
|
||||
}
|
||||
|
||||
// render() {
|
||||
const [cacheState, setCacheState] = React.useState({loading: true, cacheData: []})
|
||||
|
||||
useEffect(() => {
|
||||
// We should only fetch once!
|
||||
if (cacheState.loading) {
|
||||
let actualURL = dataURL
|
||||
if (window.location.href.split("/")[2] === "192.168.1.111:3000") {
|
||||
//Frontend dev mode only
|
||||
actualURL = "/sampleData/cache.json"
|
||||
}
|
||||
fetch(actualURL).then((res) => res.json().then((data)=>{
|
||||
setCacheState({cacheData: data, loading: false })
|
||||
}));
|
||||
}
|
||||
}, [setCacheState, cacheState.loading]);
|
||||
|
||||
if (cacheState.loading) {
|
||||
return <p>Sorry, still loading...</p>
|
||||
}
|
||||
|
||||
let dd = cacheState.cacheData
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<Typography variant="h5" component="h2" gutterBottom>
|
||||
Server has cached data from <b>{dd.SongCount} published</b> performances
|
||||
</Typography>
|
||||
<Typography component="p" gutterBottom>
|
||||
Cache data is from about {dd.AgeStr} - it automatically gets updated if it's older than an hour. If you're convinced using Martyn's bandwidth to refresh the cache earlier than that is worth it, here's the button below :
|
||||
</Typography>
|
||||
<Button variant="contained" color="primary" onClick={handleClick}>Force refresh cache</Button>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
//}
|
||||
|
||||
export default CacheDeets;
|
||||
Loading…
Reference in New Issue