ExternalVendorCode/chirpstack
1
0
Fork 0
mirror of https://github.com/chirpstack/chirpstack.git synced 2025-04-19 16:40:53 +00:00
Code Issues Actions 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
Show Stats 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 { 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 { Location } from "@chirpstack/chirpstack-api-grpc-web/common/common_pb";
@ -20,6 +20,7 @@ interface IProps {
interface IState {
latValue: number;
lonValue: number;
locationPending: boolean;
}
class GatewayForm extends Component<IProps, IState> {
@ -30,20 +31,13 @@ class GatewayForm extends Component<IProps, IState> {
this.state = {
latValue: 0,
lonValue: 0,
locationPending: false,
};
}
componentDidMount() {
if (!this.props.update) {
LocationStore.getLocation((loc: [number, number]) => {
this.setState(
{
latValue: loc[0],
lonValue: loc[1],
},
this.setLocationFields,
);
});
this.getCurrentLocation();
} else {
const loc = this.props.initialValues.getLocation();
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) => {
const v = Object.assign(this.props.initialValues.toObject(), values);
let gw = new Gateway();
@ -133,15 +144,18 @@ class GatewayForm extends Component<IProps, IState> {
<Form.Item name={["location", "longitude"]} noStyle>
<Input hidden />
</Form.Item>
<Map height={500} center={location}>
<Marker
position={location}
faIcon="wifi"
color="blue"
draggable={!this.props.disabled}
eventHandlers={{ dragend: this.updateLocation }}
/>
</Map>
<Space direction="vertical" style={{ width: "100%" }}>
<Map height={500} center={location}>
<Marker
position={location}
faIcon="wifi"
color="blue"
draggable={!this.props.disabled}
eventHandlers={{ dragend: this.updateLocation }}
/>
</Map>
<Button onClick={this.getCurrentLocation} disabled={this.state.locationPending} type="link" style={{float: "right"}}>Set to current location</Button>
</Space>
</Form.Item>
</Tabs.TabPane>
<Tabs.TabPane tab="Tags" key="2">