72 lines
1.5 KiB
JavaScript
72 lines
1.5 KiB
JavaScript
"use strict";
|
|
|
|
// React
|
|
class TableRow extends React.Component {
|
|
render() {
|
|
return (
|
|
<tr>
|
|
<td>
|
|
<a href="#">{this.props.user.name}</a>
|
|
</td>
|
|
<td>{this.props.user.user.email}</td>
|
|
<td>{this.props.user.zendesk_role}</td>
|
|
<td>
|
|
<input
|
|
type="checkbox"
|
|
value={this.props.user.id}
|
|
className="form-check-input"
|
|
name="users"
|
|
/>
|
|
</td>
|
|
</tr>
|
|
);
|
|
}
|
|
}
|
|
|
|
class TableBody extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
users: [],
|
|
engineers: 0,
|
|
light_agents: 0,
|
|
};
|
|
}
|
|
|
|
async get_users() {
|
|
await axios.get("/api/users").then((response) => {
|
|
this.setState({
|
|
users: response.data.users,
|
|
engineers: response.data.engineers,
|
|
light_agents: response.data.light_agents,
|
|
});
|
|
let elements = document.querySelectorAll(".info-quantity-value");
|
|
elements[0].innerHTML = this.state.engineers;
|
|
elements[1].innerHTML = this.state.light_agents;
|
|
});
|
|
}
|
|
|
|
delete_pretext() {
|
|
document.getElementById("loading").remove();
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.get_users().then(() => this.delete_pretext());
|
|
this.interval = setInterval(() => {
|
|
this.get_users();
|
|
}, 60000);
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
clearInterval(this.interval);
|
|
}
|
|
|
|
render() {
|
|
return this.state.users.map((user, key) => (
|
|
<TableRow user={user} key={key} />
|
|
));
|
|
}
|
|
}
|
|
|
|
ReactDOM.render(<TableBody />, document.getElementById("tbody"));
|