406 lines
16 KiB
TypeScript
406 lines
16 KiB
TypeScript
import {
|
|
NFCAccountCard,
|
|
NFCCard,
|
|
NFCCardType,
|
|
NFCPropertyCard, NFCPropertyCardSpecialProperties,
|
|
PropertyColor,
|
|
TaskType,
|
|
WiFiNetwork
|
|
} from "../RawConstants";
|
|
import React, {Component} from "react";
|
|
import {
|
|
Backdrop,
|
|
Box,
|
|
Button,
|
|
Fade, FormControl, FormControlLabel, FormGroup, FormLabel, Grid,
|
|
InputLabel,
|
|
MenuItem,
|
|
Modal, Radio, RadioGroup,
|
|
Select, SelectChangeEvent, Switch,
|
|
TextField,
|
|
Typography
|
|
} from "@mui/material";
|
|
import WifiPasswordIcon from "@mui/icons-material/WifiPassword";
|
|
import WifiIcon from "@mui/icons-material/Wifi";
|
|
|
|
type AccountValues = keyof NFCAccountCard;
|
|
|
|
type PropertyValues = keyof NFCPropertyCard;
|
|
|
|
type TaskValues =
|
|
"TYPE" | "AMOUNT1" | "AMOUNT2";
|
|
|
|
interface CardSetupState {
|
|
validNFCCard: boolean,
|
|
NFCCardType: NFCCardType,
|
|
|
|
accountValues: { [key in AccountValues]?: string },
|
|
propertyValues: { [key in PropertyValues]?: string | number | boolean },
|
|
taskValues: { [key in TaskValues]?: TaskType | number }
|
|
}
|
|
|
|
interface CardSetupProps {
|
|
closeCallback: () => void;
|
|
card?: NFCCard;
|
|
}
|
|
|
|
export default class CardSetup extends Component<CardSetupProps, CardSetupState> {
|
|
constructor(props: CardSetupProps) {
|
|
super(props);
|
|
|
|
let defaultType = NFCCardType.ACCOUNT;
|
|
let accountValues: { [key in AccountValues]?: string } = {};
|
|
let propertyValues: { [key in PropertyValues]?: string } = {};
|
|
let taskValues: { [key in TaskValues]?: string } = {};
|
|
|
|
if (props.card) {
|
|
defaultType = props.card.cardType;
|
|
switch (defaultType) {
|
|
case NFCCardType.ACCOUNT:
|
|
let card = props.card as NFCAccountCard;
|
|
accountValues = {
|
|
symbol: card.symbol,
|
|
nickname: card.nickname,
|
|
pin: card.pin,
|
|
}
|
|
}
|
|
}
|
|
|
|
this.state = {
|
|
validNFCCard: false,
|
|
NFCCardType: NFCCardType.ACCOUNT,
|
|
|
|
accountValues: accountValues,
|
|
propertyValues: {},
|
|
taskValues: {},
|
|
}
|
|
|
|
}
|
|
|
|
componentDidMount() {
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
}
|
|
|
|
modalStyle = {
|
|
position: 'absolute',
|
|
top: '50%',
|
|
left: '50%',
|
|
transform: 'translate(-50%, -50%)',
|
|
width: 700,
|
|
maxHeight: '80%',
|
|
overflowY: 'scroll',
|
|
height: 'auto',
|
|
display: 'block',
|
|
bgcolor: 'background.paper',
|
|
border: '2px solid #0000',
|
|
boxShadow: 24,
|
|
p: 4,
|
|
};
|
|
|
|
changeAccountState(prop: AccountValues, ev: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>, useUpperCase = false) {
|
|
this.setState(prevState => ({
|
|
...prevState,
|
|
accountValues: {
|
|
...prevState.accountValues,
|
|
[prop]: useUpperCase ? ev.target.value.toUpperCase() : ev.target.value
|
|
}
|
|
}))
|
|
}
|
|
|
|
changePropertyState(prop: PropertyValues, ev: any) {
|
|
if(prop == "fullSetAmount") {
|
|
if (ev.target.value > 4)
|
|
ev.target.value = 4;
|
|
if(ev.target.value < 1)
|
|
ev.target.value = 1;
|
|
}
|
|
if(prop == "buyValue" || prop == "mortgageValue" || prop.includes("rent"))
|
|
{
|
|
if(ev.target.value < 0)
|
|
ev.target.value = 0;
|
|
}
|
|
|
|
this.setState(prevState => ({
|
|
...prevState,
|
|
propertyValues: {
|
|
...prevState.propertyValues,
|
|
[prop]: ev.target.value
|
|
}
|
|
}))
|
|
}
|
|
|
|
changeTaskState(prop: TaskValues, ev: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) {
|
|
this.setState(prevState => ({
|
|
...prevState,
|
|
taskValues: {
|
|
...prevState.taskValues,
|
|
prop: ev.target.value
|
|
}
|
|
}))
|
|
}
|
|
|
|
insertInputsPerType = () => {
|
|
if (this.state.NFCCardType == NFCCardType.ACCOUNT) {
|
|
return (<FormGroup sx={{m: 1}}>
|
|
<TextField sx={{mb: 1}}
|
|
label="Symbol"
|
|
type="text"
|
|
value={this.state.accountValues["symbol"]}
|
|
onChange={(ev) => this.changeAccountState("symbol", ev)}
|
|
/>
|
|
<TextField sx={{mb: 1}}
|
|
label="Nickname"
|
|
type="text"
|
|
value={this.state.accountValues["nickname"]}
|
|
onChange={(ev) => this.changeAccountState("nickname", ev)}
|
|
/>
|
|
<TextField sx={{mb: 1}}
|
|
label="PIN"
|
|
type="number"
|
|
value={this.state.accountValues["pin"]}
|
|
onChange={(ev) => this.changeAccountState("pin", ev)}
|
|
/>
|
|
|
|
</FormGroup>)
|
|
}
|
|
|
|
if (this.state.NFCCardType == NFCCardType.PROPERTY) {
|
|
return (<FormGroup sx={{m: 1}}>
|
|
<Grid container spacing={2} sx={{width: '100%'}}>
|
|
<Grid item xs={12} sm={12}>
|
|
<InputLabel>Name</InputLabel>
|
|
<TextField
|
|
sx={{mb: 1}}
|
|
type="text"
|
|
value={this.state.propertyValues["name"]}
|
|
onChange={(ev) => this.changePropertyState("name", ev)}
|
|
fullWidth
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={12} sm={6}>
|
|
<InputLabel id="colorLabel">Farbcode / Typ</InputLabel>
|
|
<Select
|
|
labelId={"colorLabel"}
|
|
sx={{mb: 1}}
|
|
onChange={(ev) => this.changePropertyState("color", ev)}
|
|
label="Farbcode / Typ "
|
|
value={this.state.propertyValues["color"]}
|
|
fullWidth
|
|
>
|
|
<MenuItem disabled={true} value="pleaseSelect">Bitte wählen...</MenuItem>
|
|
{Object.keys(PropertyColor).map((color: string) => (
|
|
<MenuItem key={color} value={color}>{color}</MenuItem>
|
|
))}
|
|
</Select>
|
|
</Grid>
|
|
<Grid item xs={12} sm={6}>
|
|
<InputLabel>Voller Satz Anzahl</InputLabel>
|
|
<TextField
|
|
sx={{mb: 1}}
|
|
type="number"
|
|
value={this.state.propertyValues["fullSetAmount"]}
|
|
onChange={(ev) => this.changePropertyState("fullSetAmount", ev)}
|
|
fullWidth
|
|
aria-valuemin={0}
|
|
aria-valuemax={4}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={12} sm={6}>
|
|
<InputLabel>Kauf-Wert</InputLabel>
|
|
<TextField
|
|
sx={{mb: 1}}
|
|
inputProps={{"step": 5}}
|
|
type="number"
|
|
value={this.state.propertyValues["buyValue"]}
|
|
onChange={(ev) => this.changePropertyState("buyValue", ev)}
|
|
fullWidth
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={12} sm={6}>
|
|
<InputLabel>Hypothek-Wert</InputLabel>
|
|
<TextField
|
|
sx={{mb: 1}}
|
|
inputProps={{"step": 5}}
|
|
type="number"
|
|
value={this.state.propertyValues["mortgageValue"]}
|
|
onChange={(ev) => this.changePropertyState("mortgageValue", ev)}
|
|
fullWidth
|
|
/>
|
|
</Grid>
|
|
|
|
<Grid item xs={4} sm={4}>
|
|
<TextField
|
|
type="number"
|
|
label={"Grundmiete"}
|
|
inputProps={{"step": 5}}
|
|
value={this.state.propertyValues["rent"]}
|
|
onChange={(ev) => this.changePropertyState("rent", ev)}
|
|
helperText={"Grundmiete ohne Haus und Set"}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={4} sm={4}>
|
|
<TextField
|
|
type="number"
|
|
label={"Miete 1"}
|
|
inputProps={{"step": 5}}
|
|
value={this.state.propertyValues["rent1"]}
|
|
onChange={(ev) => this.changePropertyState("rent1", ev)}
|
|
helperText={"Miete bei einem Haus"}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={4} sm={4}>
|
|
<TextField
|
|
type="number"
|
|
label={"Miete 2"}
|
|
inputProps={{"step": 5}}
|
|
value={this.state.propertyValues["rent2"]}
|
|
onChange={(ev) => this.changePropertyState("rent2", ev)}
|
|
helperText={"Miete bei 2 Häusern"}
|
|
/>
|
|
</Grid>
|
|
|
|
<Grid item xs={4} sm={4}>
|
|
<TextField
|
|
type="number"
|
|
label={"Miete 3"}
|
|
inputProps={{"step": 5}}
|
|
value={this.state.propertyValues["rent3"]}
|
|
onChange={(ev) => this.changePropertyState("rent3", ev)}
|
|
helperText={"Miete bei 3 Häusern"}
|
|
/>
|
|
</Grid>
|
|
|
|
<Grid item xs={4} sm={4}>
|
|
<TextField
|
|
type="number"
|
|
label={"Miete 4"}
|
|
inputProps={{"step": 5}}
|
|
value={this.state.propertyValues["rent4"]}
|
|
onChange={(ev) => this.changePropertyState("rent4", ev)}
|
|
helperText={"Miete bei 4 Häusern"}
|
|
/>
|
|
</Grid>
|
|
|
|
<Grid item xs={4} sm={4}>
|
|
<TextField
|
|
type="number"
|
|
label={"Miete Hotel"}
|
|
inputProps={{"step": 5}}
|
|
value={this.state.propertyValues["rentHotel"]}
|
|
onChange={(ev) => this.changePropertyState("rentHotel", ev)}
|
|
helperText={"Miete bei einem Hotel"}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={12} sm={12}>
|
|
<FormControl fullWidth>
|
|
<FormLabel id="cardProperties">Besondere Eigenschaften</FormLabel>
|
|
<RadioGroup
|
|
row
|
|
aria-labelledby="cardProperties"
|
|
defaultValue={""}
|
|
value={this.state.propertyValues["specialProperties"]}
|
|
onChange={(ev) => this.changePropertyState("specialProperties", ev)}
|
|
>
|
|
<FormControlLabel value={""} control={<Radio />} label="Keine" />
|
|
<FormControlLabel value="UTILITY" control={<Radio />} label="Bahnhof" />
|
|
<FormControlLabel value="TRAINSTATION" control={<Radio />} label="Versorgungswerk" />
|
|
<FormControlLabel value="JAIL" control={<Radio />} label="Gefängnis" />
|
|
</RadioGroup>
|
|
</FormControl>
|
|
</Grid>
|
|
</Grid>
|
|
|
|
|
|
</FormGroup>)
|
|
|
|
}
|
|
|
|
if (this.state.NFCCardType == NFCCardType.TASK) {
|
|
return (<FormGroup sx={{m: 1}}>
|
|
<TextField sx={{mb: 1}}
|
|
label="Symbol"
|
|
type="text"
|
|
value={this.state.accountValues["symbol"]}
|
|
onChange={(ev) => this.changeAccountState("symbol", ev)}
|
|
/>
|
|
<TextField sx={{mb: 1}}
|
|
label="Nickname"
|
|
type="text"
|
|
value={this.state.accountValues["nickname"]}
|
|
onChange={(ev) => this.changeAccountState("nickname", ev)}
|
|
/>
|
|
<TextField sx={{mb: 1}}
|
|
label="PIN"
|
|
type="number"
|
|
value={this.state.accountValues["pin"]}
|
|
onChange={(ev) => this.changeAccountState("pin", ev)}
|
|
/>
|
|
|
|
</FormGroup>)
|
|
}
|
|
|
|
return (<div>Typ selektieren um fortzufahren.</div>)
|
|
}
|
|
|
|
render() {
|
|
return (<Modal
|
|
aria-labelledby="transition-modal-title"
|
|
aria-describedby="transition-modal-description"
|
|
open={true}
|
|
onClose={() => {
|
|
this.props.closeCallback()
|
|
}}
|
|
closeAfterTransition
|
|
slots={{backdrop: Backdrop}}
|
|
slotProps={{
|
|
backdrop: {
|
|
timeout: 500,
|
|
},
|
|
}}
|
|
>
|
|
<Fade in={true}>
|
|
<Box sx={this.modalStyle}>
|
|
<Typography id="transition-modal-title" variant="h6" component="h2">
|
|
NFC-Karte konfigurieren
|
|
</Typography>
|
|
<Typography id="transition-modal-description" sx={{mt: 2}}>
|
|
{this.state.validNFCCard ? "Es wurde eine gültige Spielkarte erkannt." : "Es wurde eine ungültige NFC-Karte erkannt."}
|
|
<br/><br/>
|
|
<div>
|
|
<InputLabel id="nfcCardTypeLabel">Karten-Typ</InputLabel>
|
|
<Select
|
|
labelId="nfcCardTypeLabel"
|
|
value={this.state.NFCCardType}
|
|
onChange={(ev) =>
|
|
this.setState(prevState => ({
|
|
...prevState,
|
|
NFCCardType: ev.target.value as NFCCardType
|
|
}))
|
|
}
|
|
>
|
|
{Object.values(NFCCardType).map(e => {
|
|
return (
|
|
<MenuItem value={(e)}>{(e)}</MenuItem>
|
|
)
|
|
})}
|
|
|
|
</Select>
|
|
</div>
|
|
{this.insertInputsPerType()}
|
|
<br/>
|
|
<Button variant="contained" onClick={() => {
|
|
this.props.closeCallback();
|
|
}}
|
|
color="secondary">Schließen</Button>
|
|
|
|
<Button variant="contained" color="primary" sx={{ml: 1}}
|
|
onClick={() => {
|
|
}}>Karte beschreiben</Button>
|
|
</Typography>
|
|
</Box>
|
|
</Fade>
|
|
</Modal>);
|
|
}
|
|
} |