Removed js modules files from static

main/control_page_js_modules/src/control.js

@@ -0,0 +1,183 @@
+import React from "react";
+import axios from "axios";
+
+function FreeWorkplaces(props) {
+  return (
+    <div className="new-section">
+      <p className="row page-description" id="licences_remaining">Свободных мест: {props.count}</p>
+    </div>
+  )
+
+}
+
+function WorkersCount(props) {
+  return (
+    <div className="row justify-content-center new-section d-flex align-items-center">
+      <div className="col-5">
+        <div className="info">
+          <div className="info-row">
+            <div className="info-target">Инженеров:</div>
+            <div className="info-quantity">
+              <div className="status-circle-small light-green"></div>
+              <span className="info-quantity-value" id="engineers">{props.engineers}</span>
+            </div>
+          </div>
+          <div className="info-row">
+            <div className="info-target">Легких агентов:</div>
+            <div className="info-quantity">
+              <div className="status-circle-small light-yellow"></div>
+              <span className="info-quantity-value" id="agents">{props.light_agents}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="col-5">
+        <button type="submit" name="engineer" className="request-acess-button default-button">
+          Назначить выбранных на роль инженера
+        </button>
+        <button type="submit" name="light_agent" className="hand-over-acess-button default-button">
+          Назначить выбранных на роль легкого агента
+        </button>
+      </div>
+    </div>
+  )
+}
+
+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 (
+      this.props.users.map((user, key) => (
+        <ModelUserTableRow user={user} key={key} />
+      ))
+    );
+  }
+}
+
+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 (
+      this.props.users.map((user, key) => (
+        <ZendeskUserTableRow user={user} key={key} />
+      ))
+    )
+  }
+}
+
+export class Table extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      users: [],
+      engineers: null,
+      light_agents: null,
+      zendesk_users: [],
+      max_agents: null,
+      renderLoad: true
+    };
+  }
+
+  async getUsers() {
+    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,
+        renderLoad: false
+      });
+      return response
+    }).catch(reason => {
+      console.log(reason)
+    });
+  }
+
+  componentDidMount() {
+    this.getUsers().then(() => {})
+      .catch(reason => {
+      console.log(reason)
+    });
+    this.interval = setInterval(() => {
+      this.getUsers().catch(reason => {
+        console.log(reason)
+      })
+    }, 60000);
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.interval);
+  }
+
+  render() {
+    return (
+      <div>
+        <FreeWorkplaces count={Math.max(this.state.max_agents - this.state.engineers, 0)}/>
+        <table className="table table-dark light-table">
+          <thead>
+            <tr>
+              <th>
+                <input
+                  type="checkbox"
+                  className="form-check-input"
+                  id="head-checkbox"
+                />
+              </th>
+              <th>Name</th>
+              <th>Email</th>
+              <th>Role</th>
+            </tr>
+          </thead>
+          <tbody id="tbody">
+            <ModelUserTableRows users={this.state.users}/>
+            <ZendeskUserTableRows users={this.state.zendesk_users}/>
+          </tbody>
+        </table>
+        {this.state.renderLoad === true ? <p id="loading">Данные загружаются...</p> : null}
+        <WorkersCount engineers={this.state.engineers} light_agents={this.state.light_agents}/>
+      </div>
+    );
+  }
+}

main/control_page_js_modules/src/index.js

@@ -0,0 +1,17 @@
+import {Table} from "./control"
+import ReactDOM from "react-dom";
+import React from "react";
+
+
+function headCheckbox() {
+  let headCheckbox = document.getElementById("head-checkbox");
+  headCheckbox.addEventListener("click", () => {
+    let checkboxes = document.getElementsByName("users");
+    for (let checkbox of checkboxes)
+      checkbox.checked = headCheckbox.checked;
+  });
+}
+
+
+ReactDOM.render(<Table />, document.getElementById("table"));
+headCheckbox();