Merge pull request #25 from MarvinBo44/feinschliff

Feinschliff
MarvinBo44 · Aug 21, 2023 · 4d1ede7 · 4d1ede7
2 parents 0393e3c + 11f2ba1
commit 4d1ede7
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 21 deletions.
diff --git a/frontend/src/DayView.css b/frontend/src/DayView.css
@@ -1,13 +1,16 @@
+*{
+
+}
 
 h2{
     text-align: center;
 }
 
 .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;
+}
diff --git 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) {
                     <div>
                         {/*<h2>{getCurrentDate()}</h2>*/}
                         <h2>Heute</h2>
-                        <ul>
+                        <div className={"activityBox"}>
                             {filterAcitivities.map(daily =>
                                 <ActivityCard key={daily.id} dayActivity={daily} />
                             )}
-                        </ul>
+                        </div>
                     </div>
                 )}
             </div>
@@ -98,11 +99,11 @@ export default function DayView(props: WeatherProps) {
                     <div>
                         {/*<h2>{tomorrowWeather.date}</h2>*/}
                         <h2>Morgen</h2>
-                        <ul>
+                        <div className={"activityBox"}>
                             {filterAcitivities.map(daily =>
                                 <ActivityCard key={daily.id} dayActivity={daily} />
                             )}
-                        </ul>
+                        </div>
                     </div>
                 ) : <p>No forecast for tomorrow available</p>}
             </div>
@@ -111,11 +112,11 @@ export default function DayView(props: WeatherProps) {
                     <div>
                         {/*<h2>{dayAfterTomorrowWeather.date}</h2>*/}
                         <h2>Übermorgen</h2>
-                        <ul>
+                        <div className={"activityBox"}>
                             {filterAcitivities.map(daily =>
                                 <ActivityCard key={daily.id} dayActivity={daily} />
                             )}
-                        </ul>
+                        </div>
                     </div>
                 ) : <p>keine Daten verfügbar</p>}
             </div>

diff --git 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}/>
 
-                        <FormControlLabel control={<Checkbox/>} label="Mittel (15°C - 25°C)"
+                        <FormControlLabel control={<Checkbox/>} label="Mittel (15°C - 24°C)"
                                           checked={possibleWhenMiddle}
                                           onChange={() => updatePossibleWhenMiddle()}/>
 

diff --git 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 (
-        <FormGroup>
+        <Grid container={true}
+        flexDirection={'row'}>
             <TextField
                 id="outlined-basic"
                 label={"Name der Stadt"}
                 variant="outlined"
                 value={inputValue}
+                size={'small'}
+                InputProps={{style: {background: 'white'}}}
                 onChange={handleInputChange}
-            /><Button onClick={handleClick}>ok</Button>
-        </FormGroup>
+            /><Button
+            onClick={handleClick}
+            variant={"contained"}
+            color={'info'}
+        >ok</Button>
+        </Grid>
     );
 }
diff --git 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 <>
         <Grid container={true}
               justifyContent={'center'}
               marginBottom={'2%'}
         >
             <Box position={'absolute'}
-                 width={'800px'}
+                 width={'500px'}
                  sx={{
                      borderTop: 65, borderTopColor: "#3866B2FF",
                      borderLeft: 100, borderLeftColor: 'transparent',
@@ -18,11 +34,23 @@ export default function Settings(props) {
             <Grid container={true}
                   p={'10px'}
                   width={'fit-content'}
-                  gap={'20px'}
+                  gap={'10px'}
                   wrap={'wrap'}
             >
                 <AddActivity setDayActivity={props.setDayActivity}/>
-                <SearchCity setCity={props.setCity}/>
+                {/*<SearchCity setCity={props.setCity}/>*/}
+                <TextField
+                    variant={'outlined'}
+                    value={inputValue}
+                    size={'small'}
+                    placeholder={'Name der Stadt'}
+                    InputProps={{style: {background: 'white'}}}
+                    onChange={handleInputChange}
+                /><Button
+                onClick={handleClick}
+                variant={"contained"}
+                color={'info'}
+            >ok</Button>
             </Grid>
         </Grid>
     </>