129 lines
4.2 KiB
JavaScript
129 lines
4.2 KiB
JavaScript
import { Box, Button, Checkbox, List, ListItem, ListItemIcon, ListItemText, Paper, withStyles } from '@material-ui/core';
|
|
import { blueGrey } from '@material-ui/core/colors';
|
|
import React, { Component } from 'react';
|
|
import LogService from './LogService';
|
|
|
|
const styles = theme => ({
|
|
root: {
|
|
padding: '64px',
|
|
backgroundColor: theme.palette.primary.dark,
|
|
},
|
|
paper: {
|
|
backgroundColor: blueGrey[50],
|
|
},
|
|
});
|
|
|
|
class Logs extends Component {
|
|
constructor(props) {
|
|
super(props)
|
|
|
|
this.state = {
|
|
service: null,
|
|
files: [],
|
|
checked: [],
|
|
selectAllChecked: false,
|
|
}
|
|
}
|
|
|
|
componentDidMount() {
|
|
var service = new LogService();
|
|
this.setState({service: service});
|
|
|
|
service.getAll().then(result => {
|
|
this.setState({files: result});
|
|
}).catch(ex => console.log(ex));
|
|
}
|
|
|
|
handleToggle = (value) => {
|
|
const currentIndex = this.state.checked.indexOf(value);
|
|
const newChecked = [...this.state.checked];
|
|
|
|
if (currentIndex === -1) {
|
|
newChecked.push(value);
|
|
} else {
|
|
newChecked.splice(currentIndex, 1);
|
|
}
|
|
|
|
this.setState({checked: newChecked});
|
|
}
|
|
|
|
handleSelectAllToggle = () => {
|
|
this.setState({selectAllChecked: !this.state.selectAllChecked});
|
|
if (this.state.selectAllChecked) {
|
|
this.setState({checked: []});
|
|
} else {
|
|
const newChecked = [...this.state.files];
|
|
this.setState({checked: newChecked});
|
|
}
|
|
|
|
}
|
|
|
|
onDownload = () => {
|
|
this.state.service.getFiles(this.state.checked)
|
|
.then(result => {
|
|
const filename = `Logs-${new Date().toISOString()}.zip`;
|
|
const textUrl = URL.createObjectURL(result.data);
|
|
const element = document.createElement('a');
|
|
element.setAttribute('href', textUrl);
|
|
element.setAttribute('download', filename);
|
|
element.style.display = 'none';
|
|
document.body.appendChild(element);
|
|
element.click();
|
|
document.body.removeChild(element);
|
|
this.setState({checked: []});
|
|
this.setState({selectAllChecked: false});
|
|
})
|
|
.catch(ex => console.log(ex));
|
|
}
|
|
|
|
render() {
|
|
const { classes } = this.props;
|
|
|
|
const Files = this.state.files.map((value) => {
|
|
const labelId = `checkbox-list-label-${value}`;
|
|
|
|
return (
|
|
<ListItem key={value} role={undefined} dense button onClick={() => this.handleToggle(value)}>
|
|
<ListItemIcon>
|
|
<Checkbox
|
|
edge="start"
|
|
checked={this.state.checked.indexOf(value) !== -1}
|
|
tabIndex={-1}
|
|
disableRipple
|
|
inputProps={{ 'aria-labelledby': labelId }}
|
|
/>
|
|
</ListItemIcon>
|
|
<ListItemText id={labelId} primary={`${value}`} />
|
|
</ListItem>
|
|
);
|
|
})
|
|
|
|
return (
|
|
<Box className={classes.root}>
|
|
<Paper className={classes.paper}>
|
|
<List className={classes.paper}>
|
|
<ListItem key="Select-all" role={undefined} dense button onClick={this.handleSelectAllToggle}>
|
|
<ListItemIcon>
|
|
<Checkbox
|
|
edge="start"
|
|
checked={this.state.selectAllChecked}
|
|
tabIndex={-1}
|
|
disableRipple
|
|
inputProps={{ 'aria-labelledby': "Select-all" }}
|
|
/>
|
|
</ListItemIcon>
|
|
<ListItemText id="checkbox-list-label-Select-all" primary={(this.state.selectAllChecked ? "Uns" : "S") + "elect all"} />
|
|
</ListItem>
|
|
{Files}
|
|
</List>
|
|
<Button onClick={this.onDownload}>
|
|
Download
|
|
</Button>
|
|
</Paper>
|
|
</Box>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default withStyles(styles)(Logs);
|