From 60b3efa1f855a6d4a8254eb4e4287cb9f0862b6b Mon Sep 17 00:00:00 2001 From: Niklas Meinzer Date: Mon, 20 May 2024 16:25:02 +0200 Subject: [PATCH] First version with flat picker --- public/index.html | 2 +- src/App.js | 76 +++++++++++++++++++++++++++++++++-------------- src/Data.js | 34 +++++++++++++++++++++ 3 files changed, 88 insertions(+), 24 deletions(-) create mode 100644 src/Data.js diff --git a/public/index.html b/public/index.html index aa069f2..96b9a3a 100644 --- a/public/index.html +++ b/public/index.html @@ -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`. --> - React App + Solimieten diff --git a/src/App.js b/src/App.js index c508dde..36df68e 100644 --- a/src/App.js +++ b/src/App.js @@ -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 ( + - - - - - - - Edit src/App.js and save to reload. - - - Learn Chakra - - - - - +
+ + + Wohnungsauswahl + + + View a summary of all your customers over the last month. + + + + + +
+ ); } diff --git a/src/Data.js b/src/Data.js new file mode 100644 index 0000000..1d44f9a --- /dev/null +++ b/src/Data.js @@ -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) + ] + } +} \ No newline at end of file