From 804c876aa7baad3d9f8990e40b214bd4c8df3113 Mon Sep 17 00:00:00 2001 From: Orne Brocaar Date: Wed, 8 Jun 2022 14:10:04 +0100 Subject: [PATCH] Format UI code. --- ui/src/components/AesKeyInput.tsx | 55 ++++++--- ui/src/components/DevAddrInput.tsx | 55 ++++++--- ui/src/components/EuiInput.tsx | 55 ++++++--- .../device-profiles/DeviceProfileForm.tsx | 105 +++++++++++------- ui/src/views/devices/DeviceQueue.tsx | 2 +- 5 files changed, 176 insertions(+), 96 deletions(-) diff --git a/ui/src/components/AesKeyInput.tsx b/ui/src/components/AesKeyInput.tsx index 59cdf1e5..1639a000 100644 --- a/ui/src/components/AesKeyInput.tsx +++ b/ui/src/components/AesKeyInput.tsx @@ -2,7 +2,7 @@ import React, { Component } from "react"; import { notification, Input, Select, Button, Space, Form, Dropdown, Menu } from "antd"; import { ReloadOutlined, CopyOutlined } from "@ant-design/icons"; -import {Buffer} from "buffer"; +import { Buffer } from "buffer"; interface IProps { formRef: React.RefObject; @@ -108,13 +108,15 @@ class AesKeyInput extends Component { const bytes = this.state.value.match(/[A-Fa-f0-9]{2}/g); if (bytes !== null && navigator.clipboard !== undefined) { - navigator.clipboard.writeText(bytes.join("").toUpperCase()) + navigator.clipboard + .writeText(bytes.join("").toUpperCase()) .then(() => { notification.success({ message: "Copied to clipboard", duration: 3, }); - }).catch((e) => { + }) + .catch(e => { notification.error({ message: "Error", description: e, @@ -122,19 +124,26 @@ class AesKeyInput extends Component { }); }); } - } + }; copyToClipboardHexArray = () => { const bytes = this.state.value.match(/[A-Fa-f0-9]{2}/g); if (bytes !== null && navigator.clipboard !== undefined) { - navigator.clipboard.writeText(bytes.join(", ").toUpperCase().replace(/[A-Fa-f0-9]{2}/g, "0x$&")) + navigator.clipboard + .writeText( + bytes + .join(", ") + .toUpperCase() + .replace(/[A-Fa-f0-9]{2}/g, "0x$&"), + ) .then(() => { notification.success({ message: "Copied to clipboard", duration: 3, }); - }).catch((e) => { + }) + .catch(e => { notification.error({ message: "Error", description: e, @@ -142,19 +151,31 @@ class AesKeyInput extends Component { }); }); } - } + }; render() { - const copyMenu = HEX string, - }, - { - key: "2", - label: , - }, - ]} />; + const copyMenu = ( + + HEX string + + ), + }, + { + key: "2", + label: ( + + ), + }, + ]} + /> + ); const addon = ( diff --git a/ui/src/components/DevAddrInput.tsx b/ui/src/components/DevAddrInput.tsx index e8e75934..15a4c15d 100644 --- a/ui/src/components/DevAddrInput.tsx +++ b/ui/src/components/DevAddrInput.tsx @@ -107,18 +107,19 @@ class DevAddrInput extends Component { }); }; - copyToClipboard = () => { const bytes = this.state.value.match(/[A-Fa-f0-9]{2}/g); if (bytes !== null && navigator.clipboard !== undefined) { - navigator.clipboard.writeText(bytes.join("").toUpperCase()) + navigator.clipboard + .writeText(bytes.join("").toUpperCase()) .then(() => { notification.success({ message: "Copied to clipboard", duration: 3, }); - }).catch((e) => { + }) + .catch(e => { notification.error({ message: "Error", description: e, @@ -126,19 +127,26 @@ class DevAddrInput extends Component { }); }); } - } + }; copyToClipboardHexArray = () => { const bytes = this.state.value.match(/[A-Fa-f0-9]{2}/g); if (bytes !== null && navigator.clipboard !== undefined) { - navigator.clipboard.writeText(bytes.join(", ").toUpperCase().replace(/[A-Fa-f0-9]{2}/g, "0x$&")) + navigator.clipboard + .writeText( + bytes + .join(", ") + .toUpperCase() + .replace(/[A-Fa-f0-9]{2}/g, "0x$&"), + ) .then(() => { notification.success({ message: "Copied to clipboard", duration: 3, }); - }).catch((e) => { + }) + .catch(e => { notification.error({ message: "Error", description: e, @@ -146,20 +154,31 @@ class DevAddrInput extends Component { }); }); } - } - + }; render() { - const copyMenu = HEX string, - }, - { - key: "2", - label: , - }, - ]} />; + const copyMenu = ( + + HEX string + + ), + }, + { + key: "2", + label: ( + + ), + }, + ]} + /> + ); const addon = ( diff --git a/ui/src/components/EuiInput.tsx b/ui/src/components/EuiInput.tsx index 0990ecc7..2b8995f4 100644 --- a/ui/src/components/EuiInput.tsx +++ b/ui/src/components/EuiInput.tsx @@ -2,7 +2,7 @@ import React, { Component } from "react"; import { notification, Input, Select, Button, Space, Form, Dropdown, Menu } from "antd"; import { ReloadOutlined, CopyOutlined } from "@ant-design/icons"; -import {Buffer} from "buffer"; +import { Buffer } from "buffer"; interface IProps { formRef: React.RefObject; @@ -107,13 +107,15 @@ class EuiInput extends Component { const bytes = this.state.value.match(/[A-Fa-f0-9]{2}/g); if (bytes !== null && navigator.clipboard !== undefined) { - navigator.clipboard.writeText(bytes.join("").toUpperCase()) + navigator.clipboard + .writeText(bytes.join("").toUpperCase()) .then(() => { notification.success({ message: "Copied to clipboard", duration: 3, }); - }).catch((e) => { + }) + .catch(e => { notification.error({ message: "Error", description: e, @@ -121,19 +123,26 @@ class EuiInput extends Component { }); }); } - } + }; copyToClipboardHexArray = () => { const bytes = this.state.value.match(/[A-Fa-f0-9]{2}/g); if (bytes !== null && navigator.clipboard !== undefined) { - navigator.clipboard.writeText(bytes.join(", ").toUpperCase().replace(/[A-Fa-f0-9]{2}/g, "0x$&")) + navigator.clipboard + .writeText( + bytes + .join(", ") + .toUpperCase() + .replace(/[A-Fa-f0-9]{2}/g, "0x$&"), + ) .then(() => { notification.success({ message: "Copied to clipboard", duration: 3, }); - }).catch((e) => { + }) + .catch(e => { notification.error({ message: "Error", description: e, @@ -141,19 +150,31 @@ class EuiInput extends Component { }); }); } - } + }; render() { - const copyMenu = HEX string, - }, - { - key: "2", - label: , - }, - ]} />; + const copyMenu = ( + + HEX string + + ), + }, + { + key: "2", + label: ( + + ), + }, + ]} + /> + ); const addon = ( diff --git a/ui/src/views/device-profiles/DeviceProfileForm.tsx b/ui/src/views/device-profiles/DeviceProfileForm.tsx index 8326089c..f95fda8a 100644 --- a/ui/src/views/device-profiles/DeviceProfileForm.tsx +++ b/ui/src/views/device-profiles/DeviceProfileForm.tsx @@ -237,7 +237,7 @@ class DeviceProfileForm extends Component { this.setState({ tabActive: activeKey, }); - } + }; onFinish = (values: DeviceProfile.AsObject) => { const v = Object.assign(this.props.initialValues.toObject(), values); @@ -280,7 +280,6 @@ class DeviceProfileForm extends Component { dp.getTagsMap().set(elm[0], elm[1]); } - this.props.onFinish(dp); }; @@ -348,47 +347,67 @@ class DeviceProfileForm extends Component { const tabActive = this.state.tabActive; - this.setState({ - supportsOtaa: dp.getSupportsOtaa(), - supportsClassB: dp.getSupportsClassB(), - supportsClassC: dp.getSupportsClassC(), - payloadCodecRuntime: dp.getPayloadCodecRuntime(), - }, () => { - // This is a workaround as without rendering the TabPane (e.g. the user - // does not click through the different tabs), setFieldsValue does not - // actually update the fields. For example if selecting a template with - // a codec script and immediately click the save button, no codec script - // is passed to the onFinish function. This seems to be with every field - // that is not actually rendered before clicking the Save button. - this.setState({ - tabActive: "1", - }, () => { - this.setState({ - tabActive: "2", - }, () => { - this.setState({ - tabActive: "3", - }, () => { - this.setState({ - tabActive: "4", - }, () => { - this.setState({ - tabActive: "5", - }, () => { - this.setState({ - tabActive: "6", - }, () => { - this.setState({ - tabActive: tabActive, - }); - }); - }); - }); - }); - }); - }); - }); - + this.setState( + { + supportsOtaa: dp.getSupportsOtaa(), + supportsClassB: dp.getSupportsClassB(), + supportsClassC: dp.getSupportsClassC(), + payloadCodecRuntime: dp.getPayloadCodecRuntime(), + }, + () => { + // This is a workaround as without rendering the TabPane (e.g. the user + // does not click through the different tabs), setFieldsValue does not + // actually update the fields. For example if selecting a template with + // a codec script and immediately click the save button, no codec script + // is passed to the onFinish function. This seems to be with every field + // that is not actually rendered before clicking the Save button. + this.setState( + { + tabActive: "1", + }, + () => { + this.setState( + { + tabActive: "2", + }, + () => { + this.setState( + { + tabActive: "3", + }, + () => { + this.setState( + { + tabActive: "4", + }, + () => { + this.setState( + { + tabActive: "5", + }, + () => { + this.setState( + { + tabActive: "6", + }, + () => { + this.setState({ + tabActive: tabActive, + }); + }, + ); + }, + ); + }, + ); + }, + ); + }, + ); + }, + ); + }, + ); }; onTemplateModalCancel = () => { diff --git a/ui/src/views/devices/DeviceQueue.tsx b/ui/src/views/devices/DeviceQueue.tsx index ca52525e..bb8cc207 100644 --- a/ui/src/views/devices/DeviceQueue.tsx +++ b/ui/src/views/devices/DeviceQueue.tsx @@ -6,7 +6,7 @@ import { notification } from "antd"; import { Button, Tabs, Space, Card, Row, Form, Input, InputNumber, Checkbox, Popconfirm } from "antd"; import { ColumnsType } from "antd/es/table"; import { RedoOutlined, DeleteOutlined } from "@ant-design/icons"; -import {Buffer} from "buffer"; +import { Buffer } from "buffer"; import { Device,