Now the first column of table at control page is checkbox

static/main/js/control.js

@@ -1,15 +1,18 @@
 "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>
-          <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"
@@ -18,6 +21,11 @@ class ModelUserTableRow extends React.Component {
             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>
     );
   }
@@ -38,12 +46,12 @@ 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>
-        <td></td>
       </tr>
     );
   }
@@ -68,9 +76,22 @@ class TableBody extends React.Component {
       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({
@@ -78,11 +99,10 @@ class TableBody extends React.Component {
         engineers: response.data.engineers,
         light_agents: response.data.light_agents,
         zendesk_users: response.data.zendesk_users,
+        max_agents: response.data.max_agents,
       });
-      let elements = document.querySelectorAll(".info-quantity-value");
-      elements[0].innerHTML = this.state.engineers;
-      elements[1].innerHTML = this.state.light_agents;
     });
+    this.change_elemnts_html();
   }
 
   delete_pretext() {
@@ -111,3 +131,4 @@ class TableBody extends React.Component {
 }
 
 ReactDOM.render(<TableBody />, document.getElementById("tbody"));
+head_checkbox();