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. 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`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React App</title> <title>Solimieten</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

74
src/App.js
View File

@@ -1,4 +1,5 @@
import React from 'react'; import { React, useState } from 'react';
import { import {
ChakraProvider, ChakraProvider,
Box, Box,
@@ -8,33 +9,62 @@ import {
Code, Code,
Grid, Grid,
theme, theme,
Select,
Card,
CardHeader,
Heading,
CardBody,
Center,
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { ColorModeSwitcher } from './ColorModeSwitcher'; import { ColorModeSwitcher } from './ColorModeSwitcher';
import { Logo } from './Logo'; import { flatData } from './Data';
function App() { 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 ( return (
<ChakraProvider theme={theme}> <ChakraProvider theme={theme}>
<Box textAlign="center" fontSize="xl"> <Center>
<Grid minH="100vh" p={3}> <Card>
<ColorModeSwitcher justifySelf="flex-end" /> <CardHeader>
<VStack spacing={8}> <Heading size='md'>Wohnungsauswahl</Heading>
<Logo h="40vmin" pointerEvents="none" /> </CardHeader>
<Text> <CardBody>
Edit <Code fontSize="xl">src/App.js</Code> and save to reload. <Text>View a summary of all your customers over the last month.</Text>
</Text> <Select placeholder='Gebäude auswählen' onChange={buildingSelected}>
<Link <option value='north'>Nordbau</option>
color="teal.500" <option value='south'>Südbau</option>
href="https://chakra-ui.com" </Select>
fontSize="2xl" <Select placeholder='Etage auswählen' onChange={levelSelected}>
target="_blank" {levelOptions.map(({ value, label }, index) => <option value={value} >{label}</option>)}
rel="noopener noreferrer" </Select>
> <Select placeholder='Wohnung auswählen'>
Learn Chakra {flatOptions.map((flat) => <option value={flat} >{flat.print()}</option>)}
</Link> </Select>
</VStack> </CardBody>
</Grid> </Card>
</Box> </Center>
</ChakraProvider > </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)
]
}
}