73 lines
2.2 KiB
JavaScript
73 lines
2.2 KiB
JavaScript
import { React, useState } from 'react';
|
|
|
|
import {
|
|
ChakraProvider,
|
|
Box,
|
|
Text,
|
|
Link,
|
|
VStack,
|
|
Code,
|
|
Grid,
|
|
theme,
|
|
Select,
|
|
Card,
|
|
CardHeader,
|
|
Heading,
|
|
CardBody,
|
|
Center,
|
|
} from '@chakra-ui/react';
|
|
import { ColorModeSwitcher } from './ColorModeSwitcher';
|
|
import { flatData } from './Data';
|
|
|
|
function App() {
|
|
const [levelOptions, setLevelOption] = useState([{ value: 0, label: "EG" }, { value: 1, label: "1. OG" }, { value: 2, label: "2. OG" }, { value: 3, label: "3. OG" }]);
|
|
const [flatOptions, setFlatOptions] = useState([]);
|
|
const [selectedBuilding, setSelectedBuilding] = useState();
|
|
|
|
function buildingSelected(e) {
|
|
var newOptions;
|
|
if (e.target.value === "south") {
|
|
newOptions = [{ value: 0, label: "EG" }, { value: 1, label: "1. OG" }, { value: 2, label: "2. OG" }];
|
|
} else {
|
|
newOptions = [{ value: 0, label: "EG" }, { value: 1, label: "1. OG" }, { value: 2, label: "2. OG" }, { value: 3, label: "3. OG" }];
|
|
}
|
|
setLevelOption(newOptions);
|
|
setSelectedBuilding(e.target.value);
|
|
};
|
|
|
|
|
|
function levelSelected(e) {
|
|
var newData = flatData[selectedBuilding][e.target.value];
|
|
if (newData) {
|
|
setFlatOptions(flatData[selectedBuilding][e.target.value]);
|
|
}
|
|
}
|
|
return (
|
|
|
|
<ChakraProvider theme={theme}>
|
|
<Center>
|
|
<Card>
|
|
<CardHeader>
|
|
<Heading size='md'>Wohnungsauswahl</Heading>
|
|
</CardHeader>
|
|
<CardBody>
|
|
<Text>View a summary of all your customers over the last month.</Text>
|
|
<Select placeholder='Gebäude auswählen' onChange={buildingSelected}>
|
|
<option value='north'>Nordbau</option>
|
|
<option value='south'>Südbau</option>
|
|
</Select>
|
|
<Select placeholder='Etage auswählen' onChange={levelSelected}>
|
|
{levelOptions.map(({ value, label }, index) => <option value={value} >{label}</option>)}
|
|
</Select>
|
|
<Select placeholder='Wohnung auswählen'>
|
|
{flatOptions.map((flat) => <option value={flat} >{flat.print()}</option>)}
|
|
</Select>
|
|
</CardBody>
|
|
</Card>
|
|
</Center>
|
|
</ChakraProvider >
|
|
);
|
|
}
|
|
|
|
export default App;
|