Added webpack for js

static/main/js/control_page/src/control.js

@@ -0,0 +1,130 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import axios from "axios";
+
+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 text-secondary"}>
+        <td></td>
+        <td>
+          <a href="#" style={{ color: "grey", fontStyle: "italic" }}>
+            {this.props.user.name}
+          </a>
+        </td>
+        <td style={{ color: "grey", fontStyle: "italic" }}>
+          {this.props.user.email}
+        </td>
+        <td style={{ color: "grey", fontStyle: "italic" }}>
+          {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")
+    );
+  }
+}
+
+export class TableBody extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      users: [],
+      engineers: 0,
+      light_agents: 0,
+      zendesk_users: [],
+      max_agents: 3,
+    };
+  }
+
+  change_elements_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_elements_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>
+    );
+  }
+}