HM-74. Добавлена модалка-сайдбар. Реализована модалка для просмотра логов. (#32)

src/components/client-logs-view-form/ClientLogsViewForm.css

@@ -0,0 +1,7 @@
+.ClientLogsViewForm__headersInput {
+    height: 200px;
+}
+
+.ClientLogsViewForm__responseInput {
+    height: 600px;
+}

src/components/client-logs-view-form/ClientLogsViewForm.js

@@ -0,0 +1,82 @@
+import Component from '../component';
+import FormControl from '../form-control';
+import {FORM_TYPES} from '../../consts';
+import ModalSidebar from '../modal-sidebar';
+import './ClientLogsViewForm.css';
+
+class ClientLogsViewForm extends Component {
+    constructor (parentNode) {
+        super('#logs-view-form', parentNode);
+
+        this.sidebar = new ModalSidebar({
+            content: this.mainNode,
+        });
+
+        this.title = this.mainNode.querySelector('.h2');
+        this.form = this.mainNode.querySelector('form');
+
+        this.title.textContent = 'Просмотр клиентского запроса';
+
+        const inputs = [
+            this.idInput = new FormControl(this.form, {
+                id: 'client-logs-view-form-id',
+                label: 'id',
+            }),
+            this.resultInput = new FormControl(this.form, {
+                id: 'client-logs-view-form-result',
+                label: 'Результат',
+            }),
+            this.startTimeInput = new FormControl(this.form, {
+                id: 'client-logs-view-form-startTime',
+                label: 'Время запроса',
+            }),
+            this.headersInput = new FormControl(this.form, {
+                id: 'client-logs-view-form-headers',
+                label: 'Заголовки запроса',
+                type: FORM_TYPES.TEXTAREA,
+                className: 'ClientLogsViewForm__headersInput',
+            }),
+            this.urlInput = new FormControl(this.form, {
+                id: 'client-logs-view-form-url',
+                label: 'URL запроса',
+            }),
+            this.methodInput = new FormControl(this.form, {
+                id: 'client-logs-view-form-method',
+                label: 'Метод запроса',
+            }),
+            this.endTimeInput = new FormControl(this.form, {
+                id: 'client-logs-view-form-endTime',
+                label: 'Время ответа',
+            }),
+            this.responseInput = new FormControl(this.form, {
+                id: 'client-logs-view-form-response',
+                label: 'Ответ сервера',
+                type: FORM_TYPES.TEXTAREA,
+                className: 'ClientLogsViewForm__responseInput',
+            }),
+        ];
+        inputs.forEach((input) => {
+            input.disabled(true);
+        });
+    }
+
+    prepareStringJSON = (string) => {
+        const object = typeof string === 'string' ? JSON.parse(string) : string;
+        return JSON.stringify(object, false, 4);
+    }
+
+    setForm ({_id, type, request, response, startTime, endTime}) {
+        const {headers, url, method} = JSON.parse(request) ?? {};
+        this.idInput.setValue(_id);
+        this.resultInput.setValue(type);
+        this.startTimeInput.setValue(startTime);
+        this.headersInput.setValue(this.prepareStringJSON(headers));
+        this.urlInput.setValue(url);
+        this.methodInput.setValue(method);
+        this.endTimeInput.setValue(endTime);
+        this.responseInput.setValue(this.prepareStringJSON(response));
+        this.sidebar.show();
+    }
+}
+
+export default ClientLogsViewForm;

src/components/client-logs-view-form/index.js

@@ -0,0 +1,3 @@
+import ClientLogsViewForm from './ClientLogsViewForm';
+
+export default ClientLogsViewForm;