ExternalVendorCode/chirpstack
1
0
Fork 0
mirror of https://github.com/chirpstack/chirpstack.git synced 2025-06-14 13:38:08 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Add button to set gw to current location.

Browse Source
This commit is contained in:
Orne Brocaar
2022-07-05 14:48:02 +01:00
parent 7baedd1bf9
commit 6dbbaff7b6
1 changed files with 33 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
ui/src/views/gateways/GatewayForm.tsx
View File

@ -1,6 +1,6 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { Form, Input, Row, Col, Button, Tabs } from "antd"; import { Form, Input, Row, Col, Button, Tabs, Space } from "antd";
import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons"; import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
import { Location } from "@chirpstack/chirpstack-api-grpc-web/common/common_pb"; import { Location } from "@chirpstack/chirpstack-api-grpc-web/common/common_pb";
@ -20,6 +20,7 @@ interface IProps {
interface IState { interface IState {
latValue: number; latValue: number;
lonValue: number; lonValue: number;
locationPending: boolean;
} }
class GatewayForm extends Component<IProps, IState> { class GatewayForm extends Component<IProps, IState> {
@ -30,20 +31,13 @@ class GatewayForm extends Component<IProps, IState> {
this.state = { this.state = {
latValue: 0, latValue: 0,
lonValue: 0, lonValue: 0,
locationPending: false,
}; };
} }
componentDidMount() { componentDidMount() {
if (!this.props.update) { if (!this.props.update) {
LocationStore.getLocation((loc: [number, number]) => { this.getCurrentLocation();
this.setState(
{
latValue: loc[0],
lonValue: loc[1],
},
this.setLocationFields,
);
});
} else { } else {
const loc = this.props.initialValues.getLocation(); const loc = this.props.initialValues.getLocation();
if (loc) { if (loc) {
@ -55,6 +49,23 @@ class GatewayForm extends Component<IProps, IState> {
} }
} }
getCurrentLocation = () => {
this.setState({
locationPending: true,
});
LocationStore.getLocation((loc: [number, number]) => {
this.setState(
{
latValue: loc[0],
lonValue: loc[1],
locationPending: false,
},
this.setLocationFields,
);
});
}
onFinish = (values: Gateway.AsObject) => { onFinish = (values: Gateway.AsObject) => {
const v = Object.assign(this.props.initialValues.toObject(), values); const v = Object.assign(this.props.initialValues.toObject(), values);
let gw = new Gateway(); let gw = new Gateway();
@ -133,15 +144,18 @@ class GatewayForm extends Component<IProps, IState> {
<Form.Item name={["location", "longitude"]} noStyle> <Form.Item name={["location", "longitude"]} noStyle>
<Input hidden /> <Input hidden />
</Form.Item> </Form.Item>
<Map height={500} center={location}> <Space direction="vertical" style={{ width: "100%" }}>
<Marker <Map height={500} center={location}>
position={location} <Marker
faIcon="wifi" position={location}
color="blue" faIcon="wifi"
draggable={!this.props.disabled} color="blue"
eventHandlers={{ dragend: this.updateLocation }} draggable={!this.props.disabled}
/> eventHandlers={{ dragend: this.updateLocation }}
</Map> />
</Map>
<Button onClick={this.getCurrentLocation} disabled={this.state.locationPending} type="link" style={{float: "right"}}>Set to current location</Button>
</Space>
</Form.Item> </Form.Item>
</Tabs.TabPane> </Tabs.TabPane>
<Tabs.TabPane tab="Tags" key="2"> <Tabs.TabPane tab="Tags" key="2">