135 lines
3.2 KiB
JavaScript
135 lines
3.2 KiB
JavaScript
"use strict";
|
|
|
|
function head_checkbox() {
|
|
let head_checkbox = document.getElementById("head-checkbox");
|
|
head_checkbox.addEventListener("click", () => {
|
|
let checkboxes = document.getElementsByName("users");
|
|
for (let checkbox of checkboxes) checkbox.click();
|
|
});
|
|
}
|
|
|
|
// React
|
|
class ModelUserTableRow extends React.Component {
|
|
render() {
|
|
return (
|
|
<tr className={"table-dark"}>
|
|
<td>
|
|
<input
|
|
type="checkbox"
|
|
value={this.props.user.id}
|
|
className="form-check-input"
|
|
name="users"
|
|
/>
|
|
</td>
|
|
<td>
|
|
<a href="#">{this.props.user.name}</a>
|
|
</td>
|
|
<td>{this.props.user.user.email}</td>
|
|
<td>{this.props.user.zendesk_role}</td>
|
|
</tr>
|
|
);
|
|
}
|
|
}
|
|
|
|
class ModelUserTableRows extends React.Component {
|
|
render() {
|
|
return ReactDOM.createPortal(
|
|
this.props.users.map((user, key) => (
|
|
<ModelUserTableRow user={user} key={key} />
|
|
)),
|
|
document.getElementById("tbody")
|
|
);
|
|
}
|
|
}
|
|
|
|
class ZendeskUserTableRow extends React.Component {
|
|
render() {
|
|
return (
|
|
<tr className={"table-secondary"}>
|
|
<td></td>
|
|
<td>
|
|
<a href="#">{this.props.user.name}</a>
|
|
</td>
|
|
<td>{this.props.user.email}</td>
|
|
<td>{this.props.user.zendesk_role}</td>
|
|
</tr>
|
|
);
|
|
}
|
|
}
|
|
|
|
class ZendeskUserTableRows extends React.Component {
|
|
render() {
|
|
return ReactDOM.createPortal(
|
|
this.props.users.map((user, key) => (
|
|
<ZendeskUserTableRow user={user} key={key} />
|
|
)),
|
|
document.getElementById("tbody")
|
|
);
|
|
}
|
|
}
|
|
|
|
class TableBody extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
users: [],
|
|
engineers: 0,
|
|
light_agents: 0,
|
|
zendesk_users: [],
|
|
max_agents: 3,
|
|
};
|
|
}
|
|
|
|
change_elemnts_html() {
|
|
let elements = document.querySelectorAll(".info-quantity-value");
|
|
let licences = document.getElementById("licences_remaining");
|
|
elements[0].innerHTML = this.state.engineers;
|
|
elements[1].innerHTML = this.state.light_agents;
|
|
let max_licences = Math.max(
|
|
this.state.max_agents - this.state.engineers,
|
|
0
|
|
);
|
|
licences.innerHTML = "Свободных мест: " + max_licences;
|
|
}
|
|
|
|
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,
|
|
zendesk_users: response.data.zendesk_users,
|
|
max_agents: response.data.max_agents,
|
|
});
|
|
});
|
|
this.change_elemnts_html();
|
|
}
|
|
|
|
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 (
|
|
<tr>
|
|
<ModelUserTableRows users={this.state.users} />
|
|
<ZendeskUserTableRows users={this.state.zendesk_users} />
|
|
</tr>
|
|
);
|
|
}
|
|
}
|
|
|
|
ReactDOM.render(<TableBody />, document.getElementById("tbody"));
|
|
head_checkbox();
|