1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768 |
- import React from "react";
- import {Button, Input} from "reactstrap";
- import {fetchPathKeys, fetchPaths, savePathToDb} from "./helpers/dbHelpers.js";
- export default class PathButtons extends React.Component{
- constructor(props){
- super(props);
- this.state = {
- pathKey: "",
- pathKeys: [],
- savePathKey: "-"
- }
- this.savePathToDb = savePathToDb.bind(this)
- }
- componentDidMount(){
- this.getPathKeys()
- }
- getPathKeys = () => {
- fetchPathKeys().then(keys => this.setState({pathKeys: keys}))
- }
- getPath = () => {
- fetchPaths().then(paths => {
- let path = paths[this.state.pathKey]
- console.log(paths)
- if ("switchLatLng" in this.props){
- path = path.map(pos => [pos[1], pos[0]])
- }
- this.props.updateState("path", path)
- })
- }
- choosePath = (event) => {
- this.setState({pathKey: event.target.value})
- this.getPath()
- }
- savePath = () => {
- this.savePathToDb().then(res => {
- let pathKeysCopy = this.state.pathKeys.slice();
- pathKeysCopy.push(this.state.savePathKey);
- this.setState({pathKeys: pathKeysCopy});
- this.setState({savePathKey: ""});
- })
- }
- setSavePathKey = (event) => {
- this.setState({savePathKey: event.target.value})
- }
- render() {
- return (
- <div>
- <Input type="text" onChange={this.setSavePathKey} value={this.state.savePathKey}/>
- <Button onClick={this.savePath}>save path</Button>
- <Input type="select" name="select" id="savePath" onChange={this.choosePath}>
- {this.state.pathKeys.map((name, idx) =>
- <option value={name} key={idx}>{name}</option>
- )}
- </Input>
- </div>
- )
- }
- }
|