Allmende/Solimieten-Helferlein
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

First version with flat picker

Browse Source
This commit is contained in:
Niklas Meinzer
2024-05-20 16:25:02 +02:00
parent 6b6876fdf6
commit 60b3efa1f8
3 changed files with 88 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>Solimieten</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

76
src/App.js
View File

@@ -1,4 +1,5 @@
import React from 'react';
import { React, useState } from 'react';
import {
ChakraProvider,
Box,
@@ -8,34 +9,63 @@ import {
Code,
Grid,
theme,
Select,
Card,
CardHeader,
Heading,
CardBody,
Center,
} from '@chakra-ui/react';
import { ColorModeSwitcher } from './ColorModeSwitcher';
import { Logo } from './Logo';
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}>
<Box textAlign="center" fontSize="xl">
<Grid minH="100vh" p={3}>
<ColorModeSwitcher justifySelf="flex-end" />
<VStack spacing={8}>
<Logo h="40vmin" pointerEvents="none" />
<Text>
Edit <Code fontSize="xl">src/App.js</Code> and save to reload.
</Text>
<Link
color="teal.500"
href="https://chakra-ui.com"
fontSize="2xl"
target="_blank"
rel="noopener noreferrer"
>
Learn Chakra
</Link>
</VStack>
</Grid>
</Box>
</ChakraProvider>
<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 >
);
}

34
src/Data.js Normal file
View File

@@ -0,0 +1,34 @@
class Flat {
constructor(name, numRooms, sizePrivate, isWbs = false, isAccessible = false) {
this.name = name;
this.numRooms = numRooms;
this.sizePrivate = sizePrivate;
this.isWbs = isWbs;
}
print() {
return this.name + " (" + this.numRooms + " Zimmer)";
}
}
export const flatData = {
"north": {
},
"south": {
0: [
new Flat("W 0.4", 2, 55.9, true),
new Flat("W 0.5", 4, 84.6, true),
new Flat("W 0.6", 5, 95.8, true),
],
1: [
new Flat("W 1.4", 2, 55.7),
new Flat("W 1.6.0", 1, 25.6),
new Flat("W 1.6", 5, 95.7),
],
2: [
new Flat("W 2.5", 2, 55.8),
new Flat("W 2.6", 4, 84.6, true),
new Flat("W 2.7", 5, 95.7)
]
}
}