Removed js modules files from static

main/control_page_js_modules/.babelrc

@@ -0,0 +1,8 @@
+{
+    "presets": ["@babel/preset-env", "@babel/preset-react"],
+    "plugins": [
+        ["@babel/plugin-transform-runtime", {
+          "regenerator": true
+        }], "@babel/plugin-syntax-jsx"
+      ]
+}

main/control_page_js_modules/__tests__/control.test.js

@@ -0,0 +1,98 @@
+import React from "react";
+import {render, unmountComponentAtNode} from "react-dom";
+import {act} from "react-dom/test-utils";
+import {Table} from "../src/control";
+import * as test_data from "./test_users.json"
+import axios from "axios";
+import MockAdapter from "axios-mock-adapter";
+
+let mock = null
+let container = null
+beforeEach(() => {
+  mock = new MockAdapter(axios);
+  mock.onGet('/api/users').reply(200, test_data)
+  container = document.createElement('div')
+  container.id = "table"
+  document.body.appendChild(container)
+})
+
+afterEach(() => {
+  unmountComponentAtNode(container);
+  mock.restore()
+  container.remove();
+  container = null;
+});
+
+it("has no rows without axios request", () => {
+  act(() => {
+    render(<Table/>, container);
+  });
+  let tbody = container.querySelector("#tbody")
+  expect(tbody.getElementsByTagName('tr').length).toBe(0);
+});
+
+it("shows valid number of free workplaces", async () => {
+  await act(async () => {
+    render(<Table/>, container)
+  })
+  let element = container.querySelector('#licences_remaining')
+  let licences = Number(element.innerHTML.replace(/Свободных мест: /, ''))
+  expect(licences).toEqual(1)
+});
+
+it("Pretext must be deleted on render", () => {
+  act(() => {
+    render(<Table/>, container)
+  })
+  expect(document.body).not.toContain(container.querySelector('#loading'))
+});
+
+it("has valid number of table rows with axios request", async () => {
+  await act(async () => {
+    render(<Table/>, container)
+  })
+  let tbody = container.querySelector("#tbody")
+  expect(tbody.getElementsByTagName('tr').length)
+    .toEqual(test_data.users.length + test_data.zendesk_users.length)
+});
+
+it("show valid number for engineers and light agents", async () => {
+  await act(async () => {
+    render(<Table/>, container)
+  })
+  let engineers = container.querySelector('#engineers')
+  let agents = container.querySelector('#agents')
+  expect(Number(engineers.textContent)).toEqual(test_data.engineers)
+  expect(Number(agents.textContent)).toEqual(test_data.light_agents)
+});
+
+it("called one request on mount", async () => {
+  let requests = jest.spyOn(Table.prototype, "getUsers")
+  await act(async () => {
+    render(<Table/>, container)
+  })
+  expect(requests).toHaveBeenCalledTimes(1)
+  requests.mockRestore()
+})
+
+it("checkbox count equals users from db count", async () => {
+  await act(async () => {
+    render(<Table/>, container)
+  })
+  let tbody = container.querySelector("#tbody")
+  let checkboxes = tbody.querySelectorAll("input[type='checkbox']")
+  let users = test_data.users
+  expect(checkboxes.length).toEqual(users.length)
+})
+
+it("requests occur every one minute", async () => {
+  jest.useFakeTimers()
+  let requests = jest.spyOn(Table.prototype, "getUsers")
+  await act(async () => {
+    render(<Table/>, container)
+  })
+  jest.advanceTimersByTime(60000)
+  expect(requests).toHaveBeenCalledTimes(2)
+  jest.useRealTimers()
+  requests.mockRestore()
+})

main/control_page_js_modules/__tests__/test_users.json

@@ -0,0 +1,32 @@
+{
+  "users": [
+    {
+      "user": {
+        "email": "123@test.ru"
+      },
+      "id": 2,
+      "name": "UserForAccessTest",
+      "zendesk_role": "light_agent"
+    }
+  ],
+  "engineers": 2,
+  "light_agents": 2,
+  "zendesk_users": [
+    {
+      "name": "Степаненко Ольга s101",
+      "zendesk_role": "engineer",
+      "email": "stepanenko_olga@mail.ru"
+    },
+    {
+      "name": "TEST",
+      "zendesk_role": "engineer",
+      "email": "akovalev1305@gmail.com"
+    },
+    {
+      "name": "Vasua",
+      "zendesk_role": "light_agent",
+      "email": "krav-88@mail.ru"
+    }
+  ],
+  "max_agents": 3
+}

main/control_page_js_modules/jest.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  verbose: true,
+  testPathIgnorePatterns: [
+    "./node_modules/"
+  ],
+  roots: [
+    "./__tests__"
+  ],
+}

main/control_page_js_modules/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "control_page",
+  "version": "1.0.0",
+  "description": "",
+  "main": "../static/main/js/control_page/dist/index_bundle.js",
+  "scripts": {
+    "test": "jest"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@babel/cli": "^7.13.16",
+    "@babel/core": "^7.13.16",
+    "@babel/plugin-transform-runtime": "^7.13.15",
+    "@babel/preset-env": "^7.13.15",
+    "@babel/preset-react": "^7.13.13",
+    "axios": "^0.21.1",
+    "axios-mock-adapter": "^1.19.0",
+    "babel-loader": "^8.2.2",
+    "jest": "^26.6.3",
+    "jsx": "^0.9.89",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "save-dev": "0.0.1-security",
+    "webpack": "^5.36.2",
+    "webpack-cli": "^4.6.0"
+  }
+}

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();

main/control_page_js_modules/webpack.config.js

@@ -0,0 +1,31 @@
+const path = require('path')
+
+module.exports = {
+  entry: './src/index.js',
+  module: {
+    rules: [
+      {
+        test: /\.(js)$/,
+        exclude: path.resolve(__dirname, 'node_modules/'),
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env', "@babel/preset-react"],
+            plugins: [["@babel/plugin-transform-runtime", {"regenerator": true}]],
+          }
+        }
+      }
+    ]
+  },
+  resolve: {
+    extensions: [
+      '.js',
+      '.jsx'
+    ]
+  },
+  output: {
+    path: path.resolve('../../static/main/js/control_page', 'dist'),
+    filename: 'index_bundle.js'
+  },
+  mode: 'development',
+}