From 06c839defce481a6333e6d135f49b17034719bb6 Mon Sep 17 00:00:00 2001 From: Marvin Borucki <85772214+MarvMarv44@users.noreply.github.com> Date: Mon, 21 Aug 2023 16:36:00 +0200 Subject: [PATCH 1/2] fix: input and button design --- frontend/src/SearchCity.tsx | 15 +++++++++++---- frontend/src/Settings.tsx | 36 ++++++++++++++++++++++++++++++++---- 2 files changed, 43 insertions(+), 8 deletions(-) diff --git a/frontend/src/SearchCity.tsx b/frontend/src/SearchCity.tsx index d7a8048..ed70b08 100644 --- a/frontend/src/SearchCity.tsx +++ b/frontend/src/SearchCity.tsx @@ -2,7 +2,7 @@ // import {useState} from "react"; -import {Button, FormGroup, TextField} from "@mui/material"; +import {Box, Button, FormGroup, Grid, TextField} from "@mui/material"; import {useState} from "react"; export default function SearchCity(props) { @@ -21,14 +21,21 @@ export default function SearchCity(props) { }; return ( - + - + /> + ); } \ No newline at end of file diff --git a/frontend/src/Settings.tsx b/frontend/src/Settings.tsx index f4be61d..3428f5b 100644 --- a/frontend/src/Settings.tsx +++ b/frontend/src/Settings.tsx @@ -1,15 +1,31 @@ import AddActivity from "./Menubar/AddActivity.tsx"; -import {Box, Grid, TextField} from "@mui/material"; +import {Box, Button, Grid, TextField} from "@mui/material"; import SearchCity from "./SearchCity.tsx"; +import {useState} from "react"; export default function Settings(props) { + + // Local state to hold the current value of the input + const [inputValue, setInputValue] = useState(''); + + // Handler function for the TextField's onChange event + const handleInputChange = (event) => { + setInputValue(event.target.value); + }; + + // Handler function for the button's onClick event + const handleClick = () => { + props.setCity(inputValue); + }; + + return <> - + {/**/} + From 11f2ba1c376f3084c47c6bdaf57d06a2647977e5 Mon Sep 17 00:00:00 2001 From: Marvin Borucki <85772214+MarvMarv44@users.noreply.github.com> Date: Mon, 21 Aug 2023 17:38:21 +0200 Subject: [PATCH 2/2] small changes --- frontend/src/DayView.css | 12 ++++++++++-- frontend/src/DayView.tsx | 21 +++++++++++---------- frontend/src/Menubar/AddActivity.tsx | 2 +- 3 files changed, 22 insertions(+), 13 deletions(-) diff --git a/frontend/src/DayView.css b/frontend/src/DayView.css index 223dea7..e96b1c9 100644 --- a/frontend/src/DayView.css +++ b/frontend/src/DayView.css @@ -1,3 +1,6 @@ +*{ + +} h2{ text-align: center; @@ -5,9 +8,9 @@ h2{ .flex-container { display: flex; + justify-content: space-evenly; flex-direction: row; flex-wrap: wrap; - flex-flow: row wrap; } .activityOutput{ @@ -17,7 +20,7 @@ h2{ border-radius: 15px; margin: 10px; padding-left: 10px; - width: 500px; + width: 350px; } .btnDetails{ @@ -27,3 +30,8 @@ h2{ border-radius: 15px; } +.activityBox{ + font-family: "Roboto", Helvetica, sans-serif; + font-weight: normal; + text-align: center; +} \ No newline at end of file diff --git a/frontend/src/DayView.tsx b/frontend/src/DayView.tsx index dfcb657..359cd05 100644 --- a/frontend/src/DayView.tsx +++ b/frontend/src/DayView.tsx @@ -4,7 +4,7 @@ import {Weather, Activity} from "./HomePage.tsx"; type WeatherProps = { weather: Weather | undefined; - dayActivities: Activity; + dayActivities: Activity[]; } @@ -48,13 +48,13 @@ export default function DayView(props: WeatherProps) { } function isMiddle() { - if (props.weather.current.temp_c <= 24 && props.weather.current.temp_c >= 17){ + if (props.weather.current.temp_c >= 10 && props.weather.current.temp_c <= 24){ return true; } } function isCold() { - if (props.weather.current.temp_c <= 16) { + if (props.weather.current.temp_c < 10) { return true; } } @@ -68,7 +68,8 @@ export default function DayView(props: WeatherProps) { const filterAcitivities = props.dayActivities.filter((activity) =>{ return (activity.possibleWhenWarm === isWarm() || activity.possibleWhenMiddle === isMiddle() || - activity.possibleWhenCold === isCold()) && (activity.possibleWhenRaining ? true : activity.possibleWhenRaining === !isRaining) + activity.possibleWhenCold === isCold()) && + (activity.possibleWhenRaining ? true : activity.possibleWhenRaining === !isRaining) }); // const filterAcitivities = props.dayActivities.filter(activity => @@ -85,11 +86,11 @@ export default function DayView(props: WeatherProps) {
{/*

{getCurrentDate()}

*/}

Heute

- +
)} @@ -98,11 +99,11 @@ export default function DayView(props: WeatherProps) {
{/*

{tomorrowWeather.date}

*/}

Morgen

- +
) :

No forecast for tomorrow available

} @@ -111,11 +112,11 @@ export default function DayView(props: WeatherProps) {
{/*

{dayAfterTomorrowWeather.date}

*/}

Übermorgen

- +
) :

keine Daten verfügbar

} diff --git a/frontend/src/Menubar/AddActivity.tsx b/frontend/src/Menubar/AddActivity.tsx index ba5fa05..294b09d 100644 --- a/frontend/src/Menubar/AddActivity.tsx +++ b/frontend/src/Menubar/AddActivity.tsx @@ -111,7 +111,7 @@ export default function AddActivity(props) { checked={possibleWhenWarm} onChange={updatePossibleWhenWarm}/> - } label="Mittel (15°C - 25°C)" + } label="Mittel (15°C - 24°C)" checked={possibleWhenMiddle} onChange={() => updatePossibleWhenMiddle()}/>