80 lines
1.7 KiB
JavaScript
80 lines
1.7 KiB
JavaScript
"use strict";
|
|
|
|
function move_checkboxes() {
|
|
let checkboxes = document.getElementsByName("users");
|
|
let fields = document.querySelectorAll(".checkbox_field");
|
|
if (checkboxes.length == fields.length) {
|
|
for (let i = 0; i < fields.length; ++i) {
|
|
let el = checkboxes[i].cloneNode(true);
|
|
fields[i].appendChild(el);
|
|
}
|
|
}
|
|
}
|
|
move_checkboxes();
|
|
|
|
// 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.role}</td>
|
|
<td>
|
|
<input
|
|
type="checkbox"
|
|
value={this.props.user.id}
|
|
className="form-check-input"
|
|
/>
|
|
</td>
|
|
</tr>
|
|
);
|
|
}
|
|
}
|
|
|
|
class TableBody extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
users: [],
|
|
engineers: 0,
|
|
light_agents: 0,
|
|
};
|
|
}
|
|
|
|
get_users() {
|
|
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");
|
|
console.log(elements)
|
|
elements[0].innerHTML = this.state.engineers;
|
|
elements[1].innerHTML = this.state.light_agents;
|
|
});
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.interval = setInterval(() => {
|
|
this.get_users();
|
|
}, 10000);
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
clearInterval(this.interval);
|
|
}
|
|
|
|
render() {
|
|
return this.state.users.map((user, key) => (
|
|
<TableRow user={user} key={key} />
|
|
));
|
|
}
|
|
}
|
|
|
|
ReactDOM.render(<TableBody />, document.getElementById("table"));
|
|
|