Mathis/forecast
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edit weatherdata

Browse Source
This commit is contained in:
madarsbiss 2021-09-22 19:25:53 +03:00
parent 2af4c0c5e2
commit 686701a6b9
2 changed files with 22 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
components/MetricsBox.js
View File

@ -9,48 +9,60 @@ import MetricCard from "./MetricsCard";
import styles from "./MetricsBox.module.css"; import styles from "./MetricsBox.module.css";
const MetricsBox = ({ data, systemUsed }) => { const MetricsBox = ({ weatherData, systemUsed }) => {
return ( return (
<div className={styles.wrapper}> <div className={styles.wrapper}>
<MetricCard <MetricCard
title={"Humidity"} title={"Humidity"}
iconSrc={"/icons/humidity.png"} iconSrc={"/icons/humidity.png"}
metric={data.main.humidity} metric={weatherData.main.humidity}
unit={"%"} unit={"%"}
/> />
<MetricCard <MetricCard
title={"Wind speed"} title={"Wind speed"}
iconSrc={"/icons/wind.png"} iconSrc={"/icons/wind.png"}
metric={getWindSpeed(systemUsed, data.wind.speed)} metric={getWindSpeed(systemUsed, weatherData.wind.speed)}
unit={systemUsed == "metric" ? "m/s" : "m/h"} unit={systemUsed == "metric" ? "m/s" : "m/h"}
/> />
<MetricCard <MetricCard
title={"Wind direction"} title={"Wind direction"}
iconSrc={"/icons/compass.png"} iconSrc={"/icons/compass.png"}
metric={degToCompass(data.wind.deg)} metric={degToCompass(weatherData.wind.deg)}
/> />
<MetricCard <MetricCard
title={"Visibility"} title={"Visibility"}
iconSrc={"/icons/binocular.png"} iconSrc={"/icons/binocular.png"}
metric={getVisibility(systemUsed, data.visibility)} metric={getVisibility(systemUsed, weatherData.visibility)}
unit={systemUsed == "metric" ? "km" : "miles"} unit={systemUsed == "metric" ? "km" : "miles"}
/> />
<MetricCard <MetricCard
title={"Sunrise"} title={"Sunrise"}
iconSrc={"/icons/sunrise.png"} iconSrc={"/icons/sunrise.png"}
metric={getTime(systemUsed, data.sys.sunrise, data.timezone)} metric={getTime(
unit={getAMPM(systemUsed, data.sys.sunrise, data.timezone)} systemUsed,
weatherData.sys.sunrise,
weatherData.timezone
)}
unit={getAMPM(
systemUsed,
weatherData.sys.sunrise,
weatherData.timezone
)}
/> />
<MetricCard <MetricCard
title={"Sunset"} title={"Sunset"}
iconSrc={"/icons/sunset.png"} iconSrc={"/icons/sunset.png"}
metric={getTime(systemUsed, data.sys.sunset, data.timezone)} metric={getTime(
unit={getAMPM(systemUsed, data.sys.sunset, data.timezone)} systemUsed,
weatherData.sys.sunset,
weatherData.timezone
)}
unit={getAMPM(systemUsed, weatherData.sys.sunset, weatherData.timezone)}
/> />
</div> </div>
); );

3
pages/index.js
View File

@ -6,7 +6,6 @@ import Header from "../components/Header";
import DateAndTime from "../components/DateAndTime"; import DateAndTime from "../components/DateAndTime";
import Search from "../components/Search"; import Search from "../components/Search";
import MetricsBox from "../components/MetricsBox"; import MetricsBox from "../components/MetricsBox";
import MetricsCard from "../components/MetricsCard";
import UnitSwitch from "../components/UnitSwitch"; import UnitSwitch from "../components/UnitSwitch";
import LoadingScreen from "../components/LoadingScreen"; import LoadingScreen from "../components/LoadingScreen";
import ErrorScreen from "../components/ErrorScreen"; import ErrorScreen from "../components/ErrorScreen";
@ -65,7 +64,7 @@ const App = () => {
}} }}
/> />
</Header> </Header>
<MetricsBox data={weatherData} systemUsed={systemUsed} /> <MetricsBox weatherData={weatherData} systemUsed={systemUsed} />
<UnitSwitch onClick={changeSystem} systemUsed={systemUsed} /> <UnitSwitch onClick={changeSystem} systemUsed={systemUsed} />
</ContentBox> </ContentBox>
</div> </div>