markus/fw-react-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

zefix

Browse Source
This commit is contained in:
Markus Bressel
2023-02-26 12:03:19 +01:00
commit adca1a14a5
28 changed files with 2477 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/App.jsx Normal file
View File

@@ -0,0 +1,31 @@
import {useState} from 'react'
import React from 'react'
import axios from 'axios';
//import './App.css'
import './style.scss';
import 'bootstrap/dist/css/bootstrap.min.css';
import {Container} from "react-bootstrap";
import {Route, Routes, BrowserRouter} from "react-router-dom";
import Navigation from "./components/navigation/navigation.jsx";
import Zoom from "./components/zoom/zoom.jsx";
import Home from "./routes/Home.jsx";
import Settings from "./routes/Settings";
import Botlite from "./routes/Botlite.jsx";
const App = () => {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="botlite" element={<Botlite />} />
<Route path="/zoom" element={<Zoom />} />
<Route path="/settings" element={<Settings />} />
</Routes>
</BrowserRouter>
)
}
export default App;

45
src/components/account/account.jsx Normal file
View File

@@ -0,0 +1,45 @@
import {Button, Card, Col} from 'react-bootstrap';
import './account.scss';
const Account = ({account, sendForm}) => {
return (
<Col xs="12" md="6" xl="4">
<Card className="cmp-account">
<Card.Header>
{account.user}@{account.welt}
</Card.Header>
<Card.Body>
<ul className="cmp-account__list">
<li className="cmp-account__list-item">
<span className="cmp-account__list-item-label">Gold:</span>
{account.gm}
</li>
<li className="cmp-account__list-item">
<span className="cmp-account__list-item-label">LPs:</span>
{account.lp} / {account.full}
</li>
<li className="cmp-account__list-item">
<span className="cmp-account__list-item-label">
XP:</span> {account.XP}
</li>
<li className="cmp-account__list-item">
<span className="cmp-account__list-item-label">Speed:</span>
{account.speed}
</li>
</ul>
<div className="cmp-account__button-list">
{account.status.includes('PAUSIERT') ? <Button className="cmp-account__button" variant="success" onClick={sendForm} data-action="resume">Bot fortsetzen</Button> : ''}
{!account.status.includes('PAUSIERT') && !account.status.includes('Route beendet') ? <Button className="cmp-account__button" variant="warning" onClick={sendForm} data-action="pause">Bot pausieren</Button> : ''}
{!account.status.includes('beendet') ? <Button className="cmp-account__button" variant="danger" onClick={sendForm} data-action="stop">Bot stoppen</Button> : ''}
</div>
</Card.Body>
<Card.Footer>
Aktueller Status: <span className="cmp-account__route-status">{account.status}</span>
</Card.Footer>
</Card>
</Col>
)
}
export default Account;

29
src/components/account/account.scss Normal file
View File

@@ -0,0 +1,29 @@
.cmp-account {
&__list {
list-style: none;
padding-left: 0;
}
&__list-item-label {
font-weight: bold;
min-width: 4.5rem;
display: inline-block;
}
&__button-list {
text-align: center;
}
&__button {
margin-right: 0.25rem;
min-width: 5.5rem;
}
&__list-item {
padding-bottom: 0.25rem;
}
&__route-status {
font-weight: bold;
}
}

12
src/components/accounts/accounts.jsx Normal file
View File

@@ -0,0 +1,12 @@
import Account from "../account/account.jsx";
const Accounts = ({accounts, sendForm}) => {
return (
<div className="row flex-row">
{accounts && accounts.map((account, index) => <Account account={account} sendForm={sendForm} key={index}/>)}
</div>
)
}
export default Accounts;

9
src/components/buddeln/buddel.scss Normal file
View File

@@ -0,0 +1,9 @@
.cmp-buddeln {
display: flex;
margin-bottom: 3rem;
&__switch {
display: inline-block;
margin-right: 1.5rem;
}
}

20
src/components/buddeln/buddeln.jsx Normal file
View File

@@ -0,0 +1,20 @@
import {Button, Form} from "react-bootstrap";
import './buddel.scss';
const Buddeln = ({sendForm, buddelnInput, handleSwitch}) => {
return (
<div className="cmp-buddeln">
<div className="col-12 col-md-6 mb-3">
<Form.Check type="switch" id="custom-switch" label="Buddeln" className="cmp-buddeln__switch"
onChange={handleSwitch} data-target="buddelnInput" checked={buddelnInput}/>
<Button onClick={sendForm} data-action="" className="cmp-modeselector__button" variant="secondary">Reload
Props</Button>
</div>
<div className="col-12 col-md-6 shopPriceImg">
<img src="https://freewar.zocker.eu/grafik.php"/>
</div>
</div>
)
}
export default Buddeln;

38
src/components/modeSelector/data.json Normal file
View File

@@ -0,0 +1,38 @@
[
{
"label": "Blutwurm",
"action": "quest_blutwurm"
},
{
"label": "Onlo-Knochen",
"action": "quest_onloknochen"
},
{
"label": "Seelenkugeln",
"action": "quest_kugeln"
},
{
"label": "Gasthaus Scan",
"action": "quest_gasthaus_scan"
},
{
"label": "Koch",
"action": "quest_koch"
},
{
"label": "Permafeld",
"action": "perma_feld"
},
{
"label": "Runenpuzzel",
"action": "quest_runenpuzzel"
},
{
"label": "Aufträge",
"action": "quest_auftraege"
},
{
"label": "Verbuddeln",
"action": "quest_verbuddeln"
}
]

16
src/components/modeSelector/modeSelector.jsx Normal file
View File

@@ -0,0 +1,16 @@
import {Button, Row, Col} from "react-bootstrap";
import './modeSelector.scss';
import data from './data.json';
const ModeSelector = ({sendForm}) => {
return (
<div className="cmp-modeselector">
<h2>Modus 1: Quests</h2>
<div>
{data.map((quest, index) => <Button key={index} data-target="buddelnInput" onClick={sendForm} data-action={quest.action} className="cmp-modeselector__button" variant="secondary">{quest.label}</Button>)}
</div>
</div>
)
}
export default ModeSelector;

8
src/components/modeSelector/modeSelector.scss Normal file
View File

@@ -0,0 +1,8 @@
.cmp-modeselector {
margin-bottom: 3rem;
&__button {
margin-right: 0.25rem;
margin-bottom: 0.25rem;
}
}

18
src/components/navigation/navigation.jsx Normal file
View File

@@ -0,0 +1,18 @@
import {Button, Nav, Navbar} from 'react-bootstrap';
import './navigation.scss'
import {Link} from "react-router-dom";
const Navigation = () => {
return (
<Navbar className="cmp-navigation" bg="dark" expand="lg">
<Button className="cmp-navigation__button" variant="secondary">Zoom +</Button>
<Button className="cmp-navigation__button" variant="secondary">Zoom -</Button>
<Button className="cmp-navigation__button" variant="secondary" disabled>100%</Button>
<Link to="/">Home</Link>
<Link to="/settings">Settings</Link>
</Navbar>
)
}
export default Navigation;

8
src/components/navigation/navigation.scss Normal file
View File

@@ -0,0 +1,8 @@
.cmp-navigation {
padding-right: 1rem;
padding-left: 1rem;
&__button {
margin-right: 0.5rem;
}
}

57
src/components/navigator/data.json Normal file
View File

@@ -0,0 +1,57 @@
[
{
"name": "Baw",
"xCoordinate": 92,
"yCoordinate": 105
},
{
"name": "Baw Mento",
"xCoordinate": 98,
"yCoordinate": 120
},
{
"name": "Maha",
"xCoordinate": 96,
"yCoordinate": 101
},
{
"name": "Natla Shop",
"xCoordinate": 507,
"yCoordinate": 57
},
{
"name": "ZL",
"xCoordinate": 88,
"yCoordinate": 89
},
{
"name": "Zauberlabor",
"xCoordinate": 49,
"yCoordinate": 83
},
{
"name": "Chaoslabor",
"xCoordinate": 44,
"yCoordinate": 76
},
{
"name": "Unterkunft-Eingang",
"xCoordinate": 52,
"yCoordinate": 75
},
{
"name": "Gewebe",
"xCoordinate": 80,
"yCoordinate": 99
},
{
"name": "Blutforschung",
"xCoordinate": 78,
"yCoordinate": 93
},
{
"name": "Stiftung",
"xCoordinate": 87,
"yCoordinate": 112
}
]

63
src/components/navigator/navigator.jsx Normal file
View File

@@ -0,0 +1,63 @@
import {Button, Form, InputGroup, Col, Row} from "react-bootstrap";
import './navigator.scss';
import data from './data.json';
const Navigator = ({accounts, handleInputs, xCoordinate, yCoordinate, fillCoordinateInputs, sendForm}) => {
return (
<div className="cmp-navigator">
<div className="cmp-navigator__buttonlist">
{data.map((destination, index) => {
return (
<Button className="cmp-navigator__button"
data-xcoordinate={destination.xCoordinate}
data-ycoordinate={destination.yCoordinate}
key={index}
onClick={fillCoordinateInputs}
variant="secondary">
{destination.name}
</Button>
)
}
)}
</div>
<Row fluid>
<Col xs="12" lg="4">
<Form.Select aria-label="Default select example" className="cmp-navigator__account-select">
{accounts.map((account, index) => <option key={index} value={account.id}>{account.user}@{account.welt}</option>)}
</Form.Select>
</Col>
<Col xs="6" lg="2">
<InputGroup className="cmp-navigator__coordiate-input">
<InputGroup.Text id="basic-addon1">X:</InputGroup.Text>
<Form.Control
value={xCoordinate}
onChange={handleInputs}
data-target="xCoordinateInput"
type="number"
/>
</InputGroup>
</Col>
<Col xs="6" lg="2">
<InputGroup className="">
<InputGroup.Text id="basic-addon2">Y:</InputGroup.Text>
<Form.Control
value={yCoordinate}
onChange={handleInputs}
data-target="yCoordinateInput"
type="number"
/>
</InputGroup>
</Col>
<Col xs="12" lg="4">
<Button className="cmp-navigator__button" variant="secondary" onClick={sendForm} data-action="goto">goto</Button>
<Button className="cmp-navigator__button" variant="secondary">field</Button>
<Button className="cmp-navigator__button" variant="secondary">entdecker</Button>
</Col>
</Row>
</div>
)
}
export default Navigator;

16
src/components/navigator/navigator.scss Normal file
View File

@@ -0,0 +1,16 @@
.cmp-navigator {
margin-bottom: 3rem;
&__button {
margin-right: 0.25rem;
margin-bottom: 0.5rem;
}
&__account-select {
margin-bottom: 0.5rem;
}
&__coordiate-input {
margin-bottom: 0.5rem;
}
}

35
src/components/routeSelector/routeSelector.jsx Normal file
View File

@@ -0,0 +1,35 @@
import {Button, Col, Form, InputGroup, Row} from "react-bootstrap";
import './routeSelector.scss';
const RouteSelector = ({handleInputs, routeStartInput, sendForm, prefillRouteStartInput}) => {
return (
<div className="cmp-routeSelector">
<h2>Modus 2: Feste Route ablaufen</h2>
<Row>
<Col xs="12" md="6">
<InputGroup className="cmp-routeSelector__route-select-wrapper">
<InputGroup.Text id="basic-addon1">Route:</InputGroup.Text>
<Form.Select onChange={handleInputs} data-target="routeSelect" aria-label="Default select example" className="cmp-routeSelector__route-select">
<option value="67">Chaosroute</option>
</Form.Select>
</InputGroup>
</Col>
<Col xs="12" md="6" className="cmp-routeSelector__start-input">
<InputGroup className="">
<InputGroup.Text id="basic-addon2">Start</InputGroup.Text>
<Form.Control
type="text"
value={routeStartInput}
onChange={handleInputs}
data-target="routeStartInput"
/>
</InputGroup>
<Button onClick={prefillRouteStartInput} className="cmp-routeSelector__start-button" variant="success" >+1</Button>
<Button onClick={sendForm} className="cmp-routeSelector__start-button" variant="success" data-action="route">Start</Button>
</Col>
</Row>
</div>
)
}
export default RouteSelector;

23
src/components/routeSelector/routeSelector.scss Normal file
View File

@@ -0,0 +1,23 @@
.cmp-routeSelector {
margin-bottom: 3rem;
&__route-select-wrapper {
margin-bottom: 0.5rem;
@media(min-width: 768px) {
margin-bottom: 0;
}
}
&__route-select {
margin-bottom: 0;
}
&__start-button {
margin-left: 0.25rem;
}
&__start-input {
display: flex;
}
}

7
src/components/zoom/zoom.jsx Normal file
View File

@@ -0,0 +1,7 @@
const Zoom = () => {
return (
<div>zoom</div>
)
}
export default Zoom;

9
src/main.jsx Normal file
View File

@@ -0,0 +1,9 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)

217
src/routes/Botlite.jsx Normal file
View File

@@ -0,0 +1,217 @@
import React from 'react'
import axios from "axios";
import {Container, Row, Col, Form, InputGroup, Button} from "react-bootstrap";
import Navigator from "../components/navigator/navigator.jsx";
import ModeSelector from "../components/modeSelector/modeSelector.jsx";
import RouteSelector from "../components/routeSelector/routeSelector.jsx";
import Accounts from "../components/accounts/accounts.jsx";
import Buddeln from "../components/buddeln/buddeln.jsx";
import data from '../components/navigator/data.json'
import quests from '../components/modeSelector/data.json';
class Botlite extends React.Component {
constructor(props) {
super(props);
this.state = {
zoomInPercent: undefined,
accounts: [],
accountSelect: undefined,
routeSelect: 67,
routeStartInput: 0,
xCoordinateInput: '',
yCoordinateInput: '',
buddelnInput: false,
}
}
componentDidMount() {
console.log('componentDidMount');
this.getAccountData();
setInterval(() => this.getAccountData(), 1000);
}
sendForm = async (e) => {
//
// http://localhost:8080/freewar/?w=0&x=&y=&routeID=67&rstart=222&action=route
const url = 'http://localhost:8080/freewar/';
const payload = {
w: 0,
x: this.state.xCoordinateInput,
y: this.state.yCoordinateInput,
routeID: this.state.routeSelect,
rstart: this.state.routeStartInput,
action: e.target.dataset.action
};
axios.get('http://localhost:8080/freewar/', {params: payload})
.then(function (response) {
//handle success
console.log(response.data);
this.setState({
routeStartInput: 0,
})
})
.catch(function (error) {
console.log(error);
});
}
getAccountData = async () => {
try {
const response = await axios.get("http://localhost:8080/freewar/table_json.jsp", {mode: 'cors'});
const accounts = response.data;
console.log({accounts});
this.setState({
accounts: accounts,
accountSelect: accounts[0].id
})
} catch (err) {
this.setState({
accounts: []
})
}
}
handleInputs = (e) => {
const value = e.target.value;
const target = e.target.dataset.target;
this.setState({
[target]: value,
})
console.log(this.state.buddelnInput);
}
handleSwitch = (e) => {
const value = e.target.checked;
const target = e.target.dataset.target;
this.setState({
[target]: value,
})
}
fillCoordinateInputs = (e) => {
this.setState({
xCoordinateInput: e.target.dataset.xcoordinate,
yCoordinateInput: e.target.dataset.ycoordinate,
})
}
prefillRouteStartInput = () => {
const account = this.state.accounts.find(account => account.id === this.state.accountSelect);
if (account && account.status.includes('Route:')) {
const currentPosition = account.status.split(' ')[1];
const newPosition = parseInt(currentPosition) + 1;
this.setState({
routeStartInput: newPosition
})
}
}
render() {
return (
<div>
<Container fluid className="py-2" style={{backgroundColor: '#eee'}}>
<Row>
<Col xs="2">
<Form.Select aria-label="Default select example" className="cmp-navigator__account-select">
{this.state.accounts.map((account, index) => <option key={index}
value={account.id}>{account.user}@{account.welt}</option>)}
</Form.Select>
</Col>
<Col xs="2">
<Form.Select aria-label="Default select example" className="cmp-navigator__account-select">
{data.map((destination, index) => <option key={index} value={destination.name}>{destination.name}</option>)}
</Form.Select>
</Col>
<Col xs="1">
<InputGroup className="cmp-navigator__coordiate-input">
<InputGroup.Text id="basic-addon1">X:</InputGroup.Text>
<Form.Control
value={this.state.xCoordinate}
onChange={this.handleInputs}
data-target="xCoordinateInput"
type="number"
/>
</InputGroup>
</Col>
<Col xs="1">
<InputGroup className="">
<InputGroup.Text id="basic-addon2">Y:</InputGroup.Text>
<Form.Control
value={this.state.yCoordinate}
onChange={this.handleInputs}
data-target="yCoordinateInput"
type="number"
/>
</InputGroup>
</Col>
<Col xs="3" style={{display: "flex"}}>
<Button style={{flexGrow: 2}} className="cmp-navigator__button" variant="secondary" onClick={this.sendForm} data-action="goto">goto</Button>
<Button style={{flexGrow: 2}} className="cmp-navigator__button" variant="secondary">field</Button>
<Button style={{flexGrow: 2}} className="cmp-navigator__button" variant="secondary">entdecker</Button>
</Col>
<Col xs="3">
<Form.Select aria-label="Default select example" className="cmp-navigator__account-select" style={{display: "inline-block", width: "auto", marginRight: "0.25rem"}}>
{quests.map((quest, index) => <option key={index} value={quest.label}>{quest.label}</option>)}
</Form.Select>
<Button variant="success" data-action="route">Starte Quest</Button>
</Col>
</Row>
<hr style={{marginRight: "auto", marginLeft: "auto", width: "90%"}}/>
<Row>
<Col xs="4">
<ul style={{listStyle: "none", display: "flex", paddingLeft: 0}}>
<li style={{marginRight: "0.5rem"}}>
<span>Gold:</span>
12345
</li>
<li style={{marginRight: "0.5rem"}}>
<span>LPs:</span>
6499 / 6500
</li>
<li style={{marginRight: "0.5rem"}}>
<span>
XP:</span> 1234567
</li>
<li style={{marginRight: "0.5rem"}}>
<span>Speed:</span>
1234
</li>
</ul>
</Col>
<Col xs="3">
<InputGroup className="cmp-routeSelector__route-select-wrapper">
<InputGroup.Text id="basic-addon1">Route:</InputGroup.Text>
<Form.Select onChange={this.handleInputs} data-target="routeSelect" aria-label="Default select example" className="cmp-routeSelector__route-select">
<option value="67">Chaosroute</option>
</Form.Select>
</InputGroup>
</Col>
<Col xs="5" className="cmp-routeSelector__start-input">
<InputGroup className="">
<InputGroup.Text id="basic-addon2">Start</InputGroup.Text>
<Form.Control
type="text"
value={this.routeStartInput}
onChange={this.handleInputs}
data-target="routeStartInput"
/>
</InputGroup>
<Button onClick={this.sendForm} className="cmp-routeSelector__start-button" variant="success" data-action="route">Start</Button>
</Col>
</Row>
</Container>
</div>
)
}
}
export default Botlite;

150
src/routes/Home.jsx Normal file
View File

@@ -0,0 +1,150 @@
import React from 'react'
import axios from "axios";
import {Container} from "react-bootstrap";
import Navigator from "../components/navigator/navigator.jsx";
import ModeSelector from "../components/modeSelector/modeSelector.jsx";
import RouteSelector from "../components/routeSelector/routeSelector.jsx";
import Accounts from "../components/accounts/accounts.jsx";
import Buddeln from "../components/buddeln/buddeln.jsx";
class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
zoomInPercent: undefined,
accounts: [],
accountSelect: undefined,
routeSelect: 67,
routeStartInput: 0,
xCoordinateInput: '',
yCoordinateInput: '',
buddelnInput: false,
}
}
componentDidMount() {
console.log('componentDidMount');
this.getAccountData();
setInterval(() => this.getAccountData() , 1000);
}
sendForm = async (e) => {
//
// http://localhost:8080/freewar/?w=0&x=&y=&routeID=67&rstart=222&action=route
const url = 'http://localhost:8080/freewar/';
const payload = {
w: 0,
x: this.state.xCoordinateInput,
y: this.state.yCoordinateInput,
routeID: this.state.routeSelect,
rstart: this.state.routeStartInput,
action: e.target.dataset.action
};
axios.get('http://localhost:8080/freewar/', {params: payload})
.then(function (response) {
//handle success
console.log(response.data);
this.setState({
routeStartInput: 0,
})
})
.catch(function (error) {
console.log(error);
});
}
getAccountData = async () => {
try {
const response = await axios.get("http://localhost:8080/freewar/table_json.jsp", {mode: 'cors'});
const accounts = response.data;
console.log({accounts});
this.setState({
accounts: accounts,
accountSelect: accounts[0].id
})
} catch (err) {
this.setState({
accounts: []
})
}
}
handleInputs = (e) => {
const value = e.target.value;
const target = e.target.dataset.target;
this.setState({
[target]: value,
})
console.log(this.state.buddelnInput);
}
handleSwitch = (e) => {
const value = e.target.checked;
const target = e.target.dataset.target;
this.setState({
[target]: value,
})
}
fillCoordinateInputs = (e) => {
this.setState({
xCoordinateInput: e.target.dataset.xcoordinate,
yCoordinateInput: e.target.dataset.ycoordinate,
})
}
prefillRouteStartInput = () => {
const account = this.state.accounts.find(account => account.id === this.state.accountSelect);
if (account && account.status.includes('Route:')) {
const currentPosition = account.status.split(' ')[1];
const newPosition = parseInt(currentPosition) + 1;
this.setState({
routeStartInput: newPosition
})
}
}
render() {
return (
<Container className="pt-3 pt-md-5">
<Navigator
accounts={this.state.accounts}
xCoordinate={this.state.xCoordinateInput}
yCoordinate={this.state.yCoordinateInput}
handleInputs={this.handleInputs}
fillCoordinateInputs={this.fillCoordinateInputs}
sendForm={this.sendForm}
/>
<Buddeln
buddelnInput={this.state.buddelnInput}
sendForm={this.sendForm}
handleInputs={this.handleInputs}
handleSwitch={this.handleSwitch}
/>
<ModeSelector
sendForm={this.sendForm}
/>
<RouteSelector
routeStartInput={this.state.routeStartInput}
handleInputs={this.handleInputs}
sendForm={this.sendForm}
prefillRouteStartInput={this.prefillRouteStartInput}
/>
<Accounts
accounts={this.state.accounts}
sendForm={this.sendForm}
/>
</Container>
)
}
}
export default Home;

156
src/routes/Settings.jsx Normal file
View File

@@ -0,0 +1,156 @@
import axios from "axios";
import ReactHtmlParser from 'react-html-parser';
import Navigator from "../components/navigator/navigator.jsx";
import Buddeln from "../components/buddeln/buddeln.jsx";
import ModeSelector from "../components/modeSelector/modeSelector.jsx";
import RouteSelector from "../components/routeSelector/routeSelector.jsx";
import Accounts from "../components/accounts/accounts.jsx";
import {Container} from "react-bootstrap";
import React from "react";
class Settings extends React.Component {
constructor(props) {
super(props);
this.state = {
zoomInPercent: undefined,
accounts: [],
accountSelect: undefined,
routeSelect: 67,
routeStartInput: 0,
xCoordinateInput: '',
yCoordinateInput: '',
buddelnInput: false,
}
}
componentDidMount() {
console.log('componentDidMount');
this.getAccountData();
setInterval(() => this.getAccountData() , 1000);
}
adjustZoomLevel = () => {
}
sendForm = async (e) => {
//
// http://localhost:8080/freewar/?w=0&x=&y=&routeID=67&rstart=222&action=route
const url = 'http://localhost:8080/freewar/';
const payload = {
w: 0,
x: this.state.xCoordinateInput,
y: this.state.yCoordinateInput,
routeID: this.state.routeSelect,
rstart: this.state.routeStartInput,
action: e.target.dataset.action
};
axios.get('http://localhost:8080/freewar/', {params: payload})
.then(function (response) {
//handle success
console.log(response.data);
this.setState({
routeStartInput: 0,
})
})
.catch(function (error) {
console.log(error);
});
}
getAccountData = async () => {
try {
const response = await axios.get("http://localhost:8080/freewar/table_json.jsp", {mode: 'cors'});
const accounts = response.data;
console.log({accounts});
this.setState({
accounts: accounts,
accountSelect: accounts[0].id
})
} catch (err) {
this.setState({
accounts: []
})
}
}
handleInputs = (e) => {
const value = e.target.value;
const target = e.target.dataset.target;
this.setState({
[target]: value,
})
console.log(this.state.buddelnInput);
}
handleSwitch = (e) => {
const value = e.target.checked;
const target = e.target.dataset.target;
this.setState({
[target]: value,
})
}
fillCoordinateInputs = (e) => {
this.setState({
xCoordinateInput: e.target.dataset.xcoordinate,
yCoordinateInput: e.target.dataset.ycoordinate,
})
}
prefillRouteStartInput = () => {
const account = this.state.accounts.find(account => account.id === this.state.accountSelect);
if (account && account.status.includes('Route:')) {
const currentPosition = account.status.split(' ')[1];
const newPosition = parseInt(currentPosition) + 1;
this.setState({
routeStartInput: newPosition
})
}
}
render() {
return (
<Container className="pt-3 pt-md-5">
<Navigator
accounts={this.state.accounts}
xCoordinate={this.state.xCoordinateInput}
yCoordinate={this.state.yCoordinateInput}
handleInputs={this.handleInputs}
fillCoordinateInputs={this.fillCoordinateInputs}
sendForm={this.sendForm}
/>
<Buddeln
buddelnInput={this.state.buddelnInput}
sendForm={this.sendForm}
handleInputs={this.handleInputs}
handleSwitch={this.handleSwitch}
/>
<ModeSelector
sendForm={this.sendForm}
/>
<RouteSelector
routeStartInput={this.state.routeStartInput}
handleInputs={this.handleInputs}
sendForm={this.sendForm}
prefillRouteStartInput={this.prefillRouteStartInput}
/>
<Accounts
accounts={this.state.accounts}
sendForm={this.sendForm}
/>
</Container>
)
}
}
export default Settings;

3
src/style.scss Normal file
View File

@@ -0,0 +1,3 @@
#root {
width: 100%;
}