Mirrors/flame
1
0
Fork 0
mirror of https://github.com/pawelmalak/flame.git synced 2026-02-28 09:23:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

Added humidity option to weather widget

Browse Source
This commit is contained in:
Paweł Malak
2021-11-18 15:14:53 +01:00
parent a549149452
commit 5cf7708ab8
11 changed files with 68 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
client/src/components/Settings/WeatherSettings/WeatherSettings.tsx
View File

@@ -11,7 +11,7 @@ import { State } from '../../../store/reducers';
import { ApiResponse, Weather, WeatherForm } from '../../../interfaces';
// UI
import { InputGroup, Button } from '../../UI';
import { InputGroup, Button, SettingsHeadline } from '../../UI';
// Utils
import { inputHandler, weatherSettingsTemplate } from '../../../utility';
@@ -84,6 +84,8 @@ export const WeatherSettings = (): JSX.Element => {
return (
<form onSubmit={(e) => formSubmitHandler(e)}>
<SettingsHeadline text="API" />
{/* API KEY */}
<InputGroup>
<label htmlFor="WEATHER_API_KEY">API key</label>
<input
@@ -104,8 +106,10 @@ export const WeatherSettings = (): JSX.Element => {
</span>
</InputGroup>
<SettingsHeadline text="Location" />
{/* LAT */}
<InputGroup>
<label htmlFor="lat">Location latitude</label>
<label htmlFor="lat">Latitude</label>
<input
type="number"
id="lat"
@@ -128,8 +132,9 @@ export const WeatherSettings = (): JSX.Element => {
</span>
</InputGroup>
{/* LONG */}
<InputGroup>
<label htmlFor="long">Location longitude</label>
<label htmlFor="long">Longitude</label>
<input
type="number"
id="long"
@@ -142,6 +147,8 @@ export const WeatherSettings = (): JSX.Element => {
/>
</InputGroup>
<SettingsHeadline text="Other" />
{/* TEMPERATURE */}
<InputGroup>
<label htmlFor="isCelsius">Temperature unit</label>
<select
@@ -155,6 +162,20 @@ export const WeatherSettings = (): JSX.Element => {
</select>
</InputGroup>
{/* WEATHER DATA */}
<InputGroup>
<label htmlFor="weatherData">Additional weather data</label>
<select
id="weatherData"
name="weatherData"
value={formData.weatherData}
onChange={(e) => inputChangeHandler(e)}
>
<option value="cloud">Cloud coverage</option>
<option value="humidity">Humidity</option>
</select>
</InputGroup>
<Button>Save changes</Button>
</form>
);

26
client/src/components/Widgets/WeatherWidget/WeatherWidget.tsx
View File

@@ -13,22 +13,14 @@ import classes from './WeatherWidget.module.css';
// UI
import { WeatherIcon } from '../../UI';
import { State } from '../../../store/reducers';
import { weatherTemplate } from '../../../utility/templateObjects/weatherTemplate';
export const WeatherWidget = (): JSX.Element => {
const { loading, config } = useSelector((state: State) => state.config);
const { loading: configLoading, config } = useSelector(
(state: State) => state.config
);
const [weather, setWeather] = useState<Weather>({
externalLastUpdate: '',
tempC: 0,
tempF: 0,
isDay: 1,
cloud: 0,
conditionText: '',
conditionCode: 1000,
id: -1,
createdAt: new Date(),
updatedAt: new Date(),
});
const [weather, setWeather] = useState<Weather>(weatherTemplate);
const [isLoading, setIsLoading] = useState(true);
// Initial request to get data
@@ -65,8 +57,7 @@ export const WeatherWidget = (): JSX.Element => {
return (
<div className={classes.WeatherWidget}>
{isLoading ||
loading ||
{configLoading ||
(config.WEATHER_API_KEY && weather.id > 0 && (
<Fragment>
<div className={classes.WeatherIcon}>
@@ -76,12 +67,15 @@ export const WeatherWidget = (): JSX.Element => {
/>
</div>
<div className={classes.WeatherDetails}>
{/* TEMPERATURE */}
{config.isCelsius ? (
<span>{weather.tempC}°C</span>
) : (
<span>{weather.tempF}°F</span>
)}
<span>{weather.cloud}%</span>
{/* ADDITIONAL DATA */}
<span>{weather[config.weatherData]}%</span>
</div>
</Fragment>
))}

4
client/src/interfaces/Config.ts
View File

@@ -1,3 +1,5 @@
import { WeatherData } from '../types';
export interface Config {
WEATHER_API_KEY: string;
lat: number;
@@ -26,4 +28,6 @@ export interface Config {
monthSchema: string;
showTime: boolean;
defaultTheme: string;
isKilometer: boolean;
weatherData: WeatherData;
}

3
client/src/interfaces/Forms.ts
View File

@@ -1,8 +1,11 @@
import { WeatherData } from '../types';
export interface WeatherForm {
WEATHER_API_KEY: string;
lat: number;
long: number;
isCelsius: boolean;
weatherData: WeatherData;
}
export interface SearchForm {

5
client/src/interfaces/Weather.ts
View File

@@ -8,4 +8,7 @@ export interface Weather extends Model {
cloud: number;
conditionText: string;
conditionCode: number;
}
humidity: number;
windK: number;
windM: number;
}

1
client/src/types/WeatherData.ts Normal file
View File

@@ -0,0 +1 @@
export type WeatherData = 'cloud' | 'humidity';

1
client/src/types/index.ts
View File

@@ -1 +1,2 @@
export * from './ConfigFormData';
export * from './WeatherData';

2
client/src/utility/templateObjects/configTemplate.ts
View File

@@ -29,4 +29,6 @@ export const configTemplate: Config = {
'January;February;March;April;May;June;July;August;September;October;November;December',
showTime: false,
defaultTheme: 'tron',
isKilometer: true,
weatherData: 'cloud',
};

1
client/src/utility/templateObjects/settingsTemplate.ts
View File

@@ -29,6 +29,7 @@ export const weatherSettingsTemplate: WeatherForm = {
lat: 0,
long: 0,
isCelsius: true,
weatherData: 'cloud',
};
export const searchSettingsTemplate: SearchForm = {

17
client/src/utility/templateObjects/weatherTemplate.ts Normal file
View File

@@ -0,0 +1,17 @@
import { Weather } from '../../interfaces';
export const weatherTemplate: Weather = {
externalLastUpdate: '',
tempC: 0,
tempF: 0,
isDay: 1,
cloud: 0,
conditionText: '',
conditionCode: 1000,
id: -1,
createdAt: new Date(),
updatedAt: new Date(),
humidity: 0,
windK: 0,
windM: 0,
};